How to create responsive images in HTML ? (from A to Z)

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)

HTML definition

In HTML, the following elements can define a serie of image (for instance, with different dimension for each screen size)

img with the srcset attribute]]
picture

Note that the image gets chosen by screen resolution, not by container size.

srcset

To define a set of responsive images, you can use the img with the srcset attribute and sizes attributes. See Responsive HTML image with the srcset attribute

Example:

<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" width="600" height="279">
  <source media="(min-width: 800px)" srcset="800w.jpg" width="1500" height="300">
  <img src="800w.jpg" alt="Default if the media condition are not met" width="1500" height="300">
</picture>

Loading

lazy loading

You can lazy load them also.

Example:

with the loading attribute

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

with lozad and the srcset

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

preloading

You can preload the responsive image

One 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)">

A set

<link
  rel="preload"
  as="image"
  href="wolf.jpg"
  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
  imagesizes="50vw"
/>

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>

Rendered by WebCode

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>

Rendered by WebCode

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>

Rendered by WebCode