{"id":1739,"date":"2016-03-09T11:45:16","date_gmt":"2016-03-09T10:45:16","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=1739"},"modified":"2023-01-17T17:53:08","modified_gmt":"2023-01-17T16:53:08","slug":"responsive-web-design-images","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/responsive-web-design-images\/","title":{"rendered":"Responsive Web Design Images"},"content":{"rendered":"\n

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience, easy reading and navigation with a minimum of resizing, panning and scrolling (across a wide range of devices \u2013 from desktop computer monitors to mobile phones).

And how about images in RWD? In the past it was easy \u2013 just check what size of image you need, open Photoshop and save image \u201cfor web\u201d, that was it. Everything changed when six years ago, Apple announced iPhone 4 and Ethan Marcotte published an article about Responsive Web Design<\/a>.<\/p>\n\n\n\n

Using the width property<\/strong><\/h2>\n\n\n\n

The first idea, when everything on the website began to be \u201cfluid\u201d, was to specify in CSS image width to a size not larger than the screen, and for this\u00a0each image should use the CSS style, as shown below:<\/p>\n\n\n

\nimg {\nwidth: 100%;\nheight: auto;\n}\n<\/pre><\/div>\n\n\n
The image will be responsive and scale up and down. If we don\u2019t want it to be scaled up to be larger than its original size, then we use:<\/p>\n\n\n
\nimg {\nmax-width: 100%;\nheight: auto;\n}\n<\/pre><\/div>\n\n\n
OK, but still, on each device the same image will be loaded and this will have a huge impact on the website load speed, especially on mobile devices \u2013 as we can check on a sample bitmap image (75 dpi), comparing the file size with the resolution:<\/p>\n\n\n\n
Image width<\/th>Devices<\/th>File size<\/th><\/tr>
320px<\/td>Older phones<\/td>40 KB<\/td><\/tr>
480px<\/td>Newer Phones<\/td>60 KB<\/td><\/tr>
768px<\/td>Tablets<\/td>110 KB<\/td><\/tr>
960px<\/td>Desktop computers or high resolution devices<\/td>160 KB<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Media queries<\/strong><\/h2>\n\n\n\n
To avoid loading one image for each device, web developers started to use media queries in CSS. By using \u201c@media\u201d and \u201cwidth\u201d condition tags, developers where able to tell \u00a0the browser, which image should be displayed on a specified viewport width\/device.
For Example:<\/p>\n\n\n
\n\/* For width smaller than 400px: *\/\nimg {\nbackground-image: url('ismall.jpg');\n}\n\/* For width 400px and larger: *\/\n@media only screen and (min-width: 400px) {\nimg {\nbackground-image: url('imedium.jpg');\n}\n}\n<\/pre><\/div>\n\n\n
But again, responsive designers have settled on varying the page layout based on one variable (viewport width). When dealing with responsive images, we are really concerned with three more variables:<\/p>\n\n\n\n
  1. image size relative to the viewport<\/li>
  2. screen density<\/li>
  3. file dimensions<\/li><\/ol>\n\n\n\n
    And thinking about this, when and what knows what?<\/p>\n\n\n\n
    Variable<\/th>Web developer<\/th>Browser<\/th><\/tr><\/thead>
    viewport width<\/th>no<\/td>yes<\/td><\/tr>
    image size relative to the viewport<\/th>yes<\/td>no<\/strong><\/td><\/tr>
    screen density<\/th>no<\/td>yes<\/td><\/tr>
    dimensions of source files<\/th>yes<\/td>no<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    So wouldn\u2019t it be nice to pass all the information to the browser ?<\/p>\n\n\n\n
    \u201cSRCSET\u201d and \u201cSIZES\u201d!<\/strong><\/h2>\n\n\n\n
    There is an option to use, new attributes on the <img> tag called srcset and sizes.<\/p>\n\n\n
    \n&lt;img\nsrc="small.jpg"\nsrcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"\nsizes="(min-width: 36em) 33.3vw, 100vw"\nalt="rwd" \/>;\n<\/pre><\/div>\n\n\n
    Srcset <\/strong>gives a suggestion, extra information, to help the browser decide, which image should be used. We simply tell the browser the things that it didin\u2019t know. In this attribute we provide a list of images as valid, non-empty URL\u2019s and a width descriptor (non-negative integer greater than zero, representing the image width value and small letter \u201cw\u201d).<\/p>\n\n\n\n
    srcset=\u201d[image URL<\/em>]  [image width<\/em>]w, [image URL<\/em>]  [image width<\/em>]w, \u2026 etc\u201d<\/p>\n\n\n\n
    The second information we want to pass to the browser is how large the image will render within our layout. For this, we have sizes<\/strong>.<\/p>\n\n\n\n
    sizes=\u201d[media query<\/em>] [length<\/em>], [media query<\/em>] [length<\/em>], \u2026 etc\u201d<\/p>\n\n\n\n
    The browser goes over each media query until it finds a matching one and uses that query\u2019s paired length as the last piece of the source \u2013 picking puzzle: the image rendered width or relative to the viewport. In our example we pass information to a browser, so when the viewport width is greater than 36em, we use 1\/3 of it, otherwise use all of it. That is a typical example of images in 3 columns on a wide screen and in one column on devices with smaller resolution screens.<\/p>\n\n\n\n
    So, going back to our table of what knows what, by those two attributes in an <img> tag we can pass on new information to a browser srcset<\/strong> = source files dimensions and sizes <\/strong>= image size relative to the viewport.<\/p>\n\n\n\n
    The biggest advantage of using srcset and sizes compared to media queries is that, when you use media queries browsers must <\/strong>load the associated source and as I wrote before srcset and sizes are more a suggestion and the browser can decide and optionally load smaller sources when the bandwidth is slow or expensive.<\/p>\n\n\n\n
    Browser support<\/strong>
    The srcset attribute has been supported in Chrome since version 34. At the time of writing, it is supported by almost all browsers. Only Opera Mini and Internet Explorer are a problem, but there are also projects like\u00a0Picturefill<\/a>\u00a0that allow you to use these new attributes even with\u00a0Internet Explorer.<\/p>\n\n\n\n
    \"\"<\/a>
    Srcset attribute \u2013 source : http:\/\/caniuse.com\/#feat=srcset<\/figcaption><\/figure><\/div>\n\n\n\n
    Responsive lazy load<\/strong>
    One more library worth mentioning is\u00a0    lazysize<\/a>,\u00a0which lazy loads images (including responsive images (picture\/srcset)). By using it, the web developer can not only pass all the information to the browser, but also the image will be loaded when the user scrolls down the website to the point where it is placed.<\/p>\n\n\n
    \n&lt;img\ndata-srcset="small.jpg 500w, medium.jpg 640w, big.jpg 1024w"\nsizes="(min-width: 1000px) 930px, 90vw"\ndata-src="medium.jpg"\nclass="lazyload"\nalt="rwd" \/>;\n<\/pre><\/div>\n\n\n
    Links<\/strong><\/p>\n\n\n\n