HTML - Responsive Img

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)

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

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>

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"
/>

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

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>

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>