The future of images in responsive designs
05/07/2016
Ever since responsive design spurted its way out in the last couple of years, developers struggled out to find ways on how to deal with responsive images. As you all know by now, images in responsive design occupies the full width of the container they are lodged in. As a result, this will end up in different image widths among different screen sizes.
The argument that arouses in this case is: Do I want to use a small image to speed up the loading time resulting in a blurry image on bigger displays? Or do I load a huge pretty image right from the beginning? Why do I really need to load such a big image on mobiles?
Fortunately, HTML 5.1 has considered this case scenario. New elements and attributes are scratched into the next version. The introduction of <picture> element along with the “srcset” and “sizes” attributes can save lots of work on developers. Since we can’t predict how the users are going to view the website - and we definitely need to provide the widest range of options – then the browser needs to do this job instead and pick up the best selection to load on different devices.
The newly introduced attributes will provide developers with the option to select a different set of image sources for each image along with their corresponding widths for each screen display. This way, the browser will automatically load the best image ratio for each situation.
Rami Zebian
Software Engineer, LeLaboDigital
[email protected]
The argument that arouses in this case is: Do I want to use a small image to speed up the loading time resulting in a blurry image on bigger displays? Or do I load a huge pretty image right from the beginning? Why do I really need to load such a big image on mobiles?
Fortunately, HTML 5.1 has considered this case scenario. New elements and attributes are scratched into the next version. The introduction of <picture> element along with the “srcset” and “sizes” attributes can save lots of work on developers. Since we can’t predict how the users are going to view the website - and we definitely need to provide the widest range of options – then the browser needs to do this job instead and pick up the best selection to load on different devices.
The newly introduced attributes will provide developers with the option to select a different set of image sources for each image along with their corresponding widths for each screen display. This way, the browser will automatically load the best image ratio for each situation.
Rami Zebian
Software Engineer, LeLaboDigital
[email protected]