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)

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:

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

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

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>





Discover More
HTML - Image (Img tag)

img is an fetch element that represents an image. An image in HTML can also be represented with a picture element that defines logically the same image but may have different physical image (different...
How to preload HTML resource (Javascript, StyleSheet)

This article shows you how to preload HTML resources to use them at a later time.
How to represent an image in HTML ?

An image in HTML can be represented by: the img element (from raster to svg image) the svg element the picture element imgpictureresponsive image
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...



Share this page:
Follow us:
Task Runner