Responsive Image – A Must For Responsive Designs
, , , , ,

Responsive Image – A Must For Responsive Designs

Internet browsing these days is not limited at home to a desktop, anymore, they’re doing it all over the place, on screens of almost every conceivable size. and there are a decent amount of people who use the internet only via smartphones. Not iPhones, mind you. We’re talking cheap phones. What’s more, many of them are doing it with limited data plans.

This means we have to design our website according to the mobile web too, Raster images, such as .jpeg files, are not suited to responsive designs. Their measurements were designed to be fixed, and the big ones can eat up bandwidth. For your website to always looks its best in all devices, you’ll need to find a way to make your images responsive. There are already a few solutions out there for this, you should use the one which will work best for you.

  • Let’s start with the first, Simply put,max-width: 100%;  to your  CSS file to apply to all images. Once in place, it will make sure that all of your images stay inside of their parent elements.

Example:

img {

max-width: 100%;

}

This is a very simple technique, but sometimes large size image increases the load time on small devices.

  • The second one is srcset”which uses the HTML5 specifications. Typically, when you embed an image into a page, you only define one “source”, in the form of the src attribute, like so:

< img src=”/images/22234/example.jpg” alt=”example”>

What “srcset” attribute does is that it allows you to add other versions of the image, set the screen width at which those images are meant to appear, and let the browser make the decisions. This means that the user’s device only downloads the right image for right screen size.

You would set it up like so:

< img src=”/images/22234/example-small.jpg” srcset=”example-medium.jpg 1000w, example-large.jpg 2000w” alt=”example”>

  • The other one is <picture>  element, where srcset is just an attribute that can be applied to any image, <picture> is a full-fledged element, with its own tag and everything.

The code looks like this:

< picture>

< source srcset=”example-smaller.jpg” media=”(max-width: 768px)”>

< source srcset=”example-default.jpg”>

< img srcset=”example-default.jpg” alt=”example”>

< /picture>

With <picture>, you are in complete control. If you say that a certain image should be shown at a certain screen width, then that’s what will be shown.

  • The last one is Adaptive Images”  concept,  developed by Matt Wilcox, and may be, in some ways, one of the most convenient options once you have it set up. It requires PHP, including some extras JavaScript, and adding a custom .htaccess file, but the setup time is worth it.

Basically, once everything is in place, all you have to do is include your images and go. The JavaScript will detect the size of the screen. If the screen is small enough, any too-large images embedded in your page will be sent to the PHP script, scaled down, and served to the browser. The original image will not be loaded, and bandwidth will be saved.

Leave a Comment