Responsive images
Give your visitors the most appropriate images for their devices and screens.
Text on the web automatically wraps at the edge of the screen so that it doesn't overflow. It's different with images. Images have an intrinsic size. If an image is wider than the screen, the image will overflow, causing a horizontal scrollbar to appear.
Fortunately, you can take measures in CSS to stop this from happening.
Constrain your images #
In your stylesheet, you can declare that images should never be rendered at a size wider than their containing element using max-inline-size
.
- Chrome 57, Supported 57
- Firefox 41, Supported 41
- Edge 79, Supported 79
- Safari 12.1, Supported 12.1
img {
max-inline-size: 100%;
block-size: auto;
}
You can apply the same rule to other kinds of embedded content too, like videos and iframes.
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
With that rule in place, browsers will automatically scale down images to fit on the screen.

Adding a block-size
value of auto
means that the aspect-ratio of the images will remain constant.
Sometimes the dimensions of an image might be out of your control—if an image is added through a content management system, for example. If your design calls for a images to have an aspect ratio that's different to the image's real dimensions, use the aspect-ratio
property in CSS.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
But then the browser might squash or stretch the image to make it fit your preferred aspect ratio.

To prevent that happening, use the object-fit
property.
- Chrome 32, Supported 32
- Firefox 36, Supported 36
- Edge 79, Supported 79
- Safari 10, Supported 10
An object-fit
value of contain
tells the browser to preserve the image's aspect ratio, even if that means leaving empty space above and below.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
An object-fit
value of cover
tells the browser to preserve the image's aspect ratio, even if that means cropping the image at the top and bottom.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}


If the cropping at the top and bottom evenly is an issue, use the object-position CSS property to adjust the focus of the crop.
- Chrome 32, Supported 32
- Firefox 36, Supported 36
- Edge 79, Supported 79
- Safari 10, Supported 10
You can make sure the most important image content is still visible.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}

Deliver your images #
Those CSS rules tell the browser how you'd like images to be rendered. You can also provide hints in your HTML about how the browser should handle those images.
Sizing hints #
If you know the dimensions of the image you should include width
and height
attributes. Even if the image is rendered at a different size (because of your max-inline-size: 100%
rule), the browser still knows the width to height ratio and can set aside the right amount of space. This will stop your other content jumping around when the image loads.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
Loading hints #
Use the loading
attribute to tell the browser whether to delay loading the image until it is in or near the viewport. For images below the fold, use a value of lazy
. The browser won't load lazy images until the user has scrolled far down enough that the image is about to come into view. If the user never scrolls, the image never loads.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
>
For a hero image above the fold, loading
should not be used. If your site automatically applies the loading="lazy"
attribute, you can often set the eager
attribute (which is the default) to prevent this from being applied:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
>
Fetch Priority #
For important images-such as the LCP image, you can further prioritize the loading using Fetch Priority by setting the fetchpriority
attribute to high
:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
fetchpriority="high"
>
This will tell the browser to fetch the image right away, and at high priority, rather than waiting until the browser has completed layout when images are normally fetched.
But remember: when you ask the browser to prioritize downloading one resource—like an image—the browser will have to de-prioritize another resource such as a script or a font file. Only set fetchpriority="high"
on an image if it is truly vital.
Preloading hints #
Some images may not be available in the initial HTML—if they are added by JavaScript, or as a background image in CSS. You can also use preload to allow these important images to be fetched ahead of time. This can be combined with the fetchpriority
attribute for really important images:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
Again this should be used sparingly to avoid overriding the browsers prioritisation heuristics too much, which may result in performance degredation.
Preloading responsive images based on srcset (which is discussed below) via the imagesrcset
and imagesizes
attributes is more advanced and is supported in some browsers, but not all:
By excluding the href
fallback you can ensure browsers that do not support this do not preload the incorrect image.
Preloading based on different image formats based on browser support of those images is not currently supported and may result in extra downloads.
The ideal is to avoid preload where possible, and have the image available in the initial HTML, to avoid repeating code, and to allow access to the full range of options the browser supports.
Image decoding #
There's also a decoding
attribute you can add to img
elements. You can tell the browser that the image can be decoded asynchronously. The browser can then prioritize processing other content.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
>
You can use the sync
value if the image itself is the most important piece of content to prioritize.
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
decoding="sync"
>
The decoding
attribute will not change how fast the image decodes, but merely whether the browser waits for this image decoding to happen before rendering other content.
In most cases this will have little impact, however in certain scenarios it can allow the image or content to be displayed slightly faster. For example, for a large document with lots of elements that take time to render, and with large images that take a while to decode, setting sync
on important images will tell the browser to wait for the image and render both at once. Alternatively, setting async
can allow the content to be displayed faster without waiting for the image decode.
However, the better option is usually to try to avoid excessive DOM sizes and ensure responsive images are used to reduce decoding time meaning the decoding attribute will have little effect.
Responsive images with srcset
#
Thanks to that max-inline-size: 100%
declaration, your images will never break out of their containers. But even if it looks fine to have a large image that shrinks to fit, it won't feel fine. If someone uses a small screen device on a low bandwidth network, they'll download unnecessarily large images.
If you make multiple versions of the same image at different sizes, you can let the browser know about them using the srcset
attribute.
Width descriptor #
You can pass in a list of values separated by commas. Each value should be the URL of an image followed by a space followed by some metadata about the image. This metadata is called a descriptor.
In this example, the metadata describes the width of each image using the w
unit. One w
is one pixel.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
>
The srcset
attribute doesn't replace the src
attribute. Instead the srcset
attribute complements the src
attribute. You still need to have a valid src
attribute, but now the browser can replace its value with one of the options listed in the srcset
attribute.
The browser won't download the larger images unless they're needed. That saves bandwidth.
Sizes #
If you're using the width descriptor, you must also use the sizes
attribute to give the browser more information. This tells the browser what size you expect the image to be displayed under different conditions. Those conditions are specified in a media query.
The sizes
attribute takes a comma-separated list of media queries and image widths.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
sizes="(min-width: 66em) 33vw,
(min-width: 44em) 50vw,
100vw"
>
In this example, you're telling the browser that above a viewport width of 66em
to display the image no wider than one third of the screen (inside a three column layout, for example).
For viewport widths between 44em
and 66em
, display the image at half the width of the screen (a two column layout).
For anything below 44em
display the image at the full width of the screen.
This means that the biggest image won't necessarily be used for the widest screen. A wide browser window that can display a multi-column layout will use an image that fits in one column. That image might be smaller than an image used for a single-column layout on a narrower screen.
Pixel density descriptor #
There's another situation where you might want to provide multiple versions of the same image.
Some devices have high-density displays. On a double-density display you can pack two pixels worth of information into the space of one pixel. This keeps images looking sharp on those kinds of displays.

Use the density descriptor to describe the pixel density of the image in relationship to the image in the src
attribute. The density descriptor is a number followed by the letter x: 1x
, 2x
, etc.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 1x,
medium-image.png 2x,
large-image.png 3x"
>
If small-image.png
is 300 by 200 pixels in size, and medium-image.png
is 600 by 400 pixels in size, then medium-image.png
can have 2x
after it in the srcset
list.
You don't have to use whole numbers. If another version of the image is 450 by 300 pixels in size, you can describe it with 1.5x
.
Presentational images #
Images in HTML are content. That's why you always provide an alt
attribute with a description of the image for screen readers and search engines.
If you embed an image that is purely a visual flourish without any meaningful content, use an empty alt
attribute.
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
You must still include the alt
attribute. A missing alt
attribute is not the same as an empty alt
attribute. An empty alt
attribute conveys to a screen reader that this image is presentational.
Ideally, your presentational or decorative images shouldn't be in your HTML at all. HTML is for structure. CSS is for presentation.
Background images #
Use the background-image
property in CSS to load presentational images.
element {
background-image: url(flourish.png);
}
You can specify multiple image candidates using the image-set
function for background-image
.
The image-set
function in CSS works a lot like the srcset
attribute in HTML. Provide a list of images with a pixel density descriptor for each one.
element {
background-image: image-set(
small-image.png 1x,
medium-image.png 2x,
large-image.png 3x
);
}
The browser will choose the most appropriate image for the device's pixel density.
There are many factors to consider when you're adding images to your site:
Reserving the right space for each image. Figuring out how many sizes you need. Deciding whether the image is content or decorative.
It's worth spending the time to get images right. Poor image strategies are responsible for frustration and annoyance for users. A good image strategy makes your site feel snappy and sharp, regardless of the user's device or network connection.
There's one more HTML element in your toolkit to help you exercise more control over your images: the picture
element.
Styles must be added for images to fit within the viewport.
True FalseImages without containment will be as large as their natural size.
Styles are required.
When an image's height and width have been forced into an unnatural aspect ratio, which styles can help adjust how the image fits into these proportions?
object-fit
image-fit
fit-image
aspect-ratio
Specify how the image fits with keywords like contain
and cover
.
This property doesn't exist, I made it up.
This property doesn't exist, I made it up.
This may cause or solve an unnatural image ratio.
Putting height
and width
on your images prevents CSS from being able to style it differently.
Think of them more like hints than rules.
CSS has a large amount of dynamic options for sizing images, even if height and width are inline on the tag.
The srcset
attribute doesn't _______ the src
attribute, it _______ it.
srcset
definitely doesn't replace the src
attribute.
It provides additional options for the browser to choose from, if it's capable.
Missing alt
on an image is the same as an empty alt
.
An empty alt
attribute conveys to a screen reader that this image is presentational
Missing alt
signals nothing to a screen reader.