HTML - Responsive Img

About

A responsive image is when a different physical image (in width or resolution) is served for the same logical image depending on the characteristic of the device property (width, device pixel ratio)

Technical List

HTML definition

srcset

To define a set of responsive images, you can use the srcset and sizes attributes. See HTML - Responsive Image with the SrcSet and sizes attributes

<img src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w">

picture

To define a set of responsive images, you can also use the picture element

<picture>
  <source media="(max-width: 799px)" srcset="480w.jpg">
  <source media="(min-width: 800px)" srcset="800w.jpg">
  <img src="800w.jpg" alt="Default if the media condition are not met">
</picture>

Loading

preloading

You can preload the responsive image

<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
<link
  rel="preload"
  as="image"
  href="wolf.jpg"
  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
  imagesizes="50vw"
/>

lazy loading

You can lazy load them also.

Example with lozad and the srcset

<img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w">

Styling

To resize the image properly on width and height, you should apply the following CSS rules.

.responsive_img {
    max-width: 100%; 
    width:100%;
    height: auto;
}

where height:auto will apply:

  • if the image was downloaded, the real intrinsic ratio of the image
  • if the image was not downloaded, the ratio given by the width and height off the img attribute.

Demo:

  • Without image in src, the height:auto is using the width and height attribute.
<div style="width:150px">
    <img 
        height="150" 
        width="500" 
        style="height:auto; max-width:100%;background: rgb(203, 241, 234);">
</div>
  • Win an inline 1×1 pixel, the result is a perfect square of 150×150 and not a rectangle following the aspect ratio of 500×150
<div style="width:150px">
    <img 
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
        height="150" 
        width="500" 
        style="height:auto; max-width:100%;background: rgb(203, 241, 234);">
</div>

Support

height: auto not working until the image is loaded

if you use a placeholder in src that is a image, it should have the same width/height ratio than the image.

For instance, with a svg where the width and height are specified in the viewbox

<div style="width:150px">
    <img 
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150'%3E%3C/svg%3E" 
        width="500" 
        height="150" 
        style="height:auto; max-width:100%;background: rgb(203, 241, 234);">
</div>

Powered by ComboStrap