Today we are going to talk about Responsive Images. Responsive Images is a very useful technique to make your designs look good regardless the user’s resolution screen.
Nowadays when we create our online projects we want it to look good on every device. Desktop, Mobile Phones, Tablets, you name it.
With HTML you can use two different approaches to accomplish this and I will teach you how do implement it and how can you make it cross-browser and make it work with older browsers.
Why Responsive Images?
With responsive images you can delivery the image with the best fit for your user’s screen. Why delivery a 5mb image when you can delivery a 3kb image for your user that is accessing your website on his phone? Your user will see your content faster, will navigate through your content faster and will use a lot less bandwidth which will save you a few bucks.
- Faster navigation.
- Bandwidth savings.
- Most of us don’t live in a world where we don’t have to care about 4G data consumption.
The <picture> element
The syntax like this:
See the Pen Responsive Images for Responsive Designs #1 by Igor Escobar (@igorescobar) on CodePen.
Notice in this example I’ve used ImageBoss to crop the smart crop the original image for desktop, tables and mobile phones. I’ve used it because I not only want to delivery images with proper sizes but they are also compressed and delivered with Progressive Scans.
Notice that you open the code pen above and resize your window the image will change it accordingly to your window size.
The <img> element with srcset and sizes attribute
If you don’t like the approach above you can also use the <img> tag with the srcset and sizes attribute.
See the Pen Responsive Images for Responsive Designs #2 by Igor Escobar (@igorescobar) on CodePen.
Browser Support
Notice that both the <picture> and <img> approach are only implemented on modern browsers as you can see on the image bellow:
More Info: https://caniuse.com/#feat=picture
Cross-browser Responsive Images
If you are concerned on how this is going to work on old browser you can use a very cool project called Picturefill. It will basically wraps the W3C specifications for img and picture with javascript to make it work.
How to generate multiple images with for multiple screen sizes?
In this very post I’ve used ImageBoss to generate the images for all the devices I wanted. I didn’t need to generate all of them by myself and also didn’t need to code nothing specific for it. All I needed was to have my image stored some where and it did the heavy lifting.
Hope it helped!
Hello guys. Today I’m going to share with you a very cool project I’m working on. Its main mission it is to apply all Web Development Best Practices applied for images and combine it into one simple but powerful API.
