Responsive Images in CSS: srcset, sizes, and object-fit

Responsive images help your site deliver the right image for the screen size, pixel density, and layout space available. This improves visual quality, page speed, and the overall experience on phones, tablets, laptops, and large displays.

Quick answer: Use srcset and sizes to let the browser choose the best image file, and use object-fit to control how an image fills its box. They solve different problems: one picks the file, the other controls rendering.

Difficulty: Beginner

You'll understand this better if you know: basic HTML image tags, common CSS properties like width and height, and the idea that different screens need different image sizes.

1. What Is Responsive Images?

Responsive images are images that adapt to the user’s device and layout instead of using one fixed file everywhere. The browser can choose a smaller or larger source file, and CSS can control how the image fits its container.

srcset gives the browser multiple image candidates.
sizes describes how much space the image will occupy in the layout.
object-fit controls how the image behaves inside its box.
Together, they help reduce wasted bandwidth and avoid blurry or stretched images.

2. Why Responsive Images Matter

Without responsive images, a phone may download a huge desktop image, or a high-resolution display may show a soft, blurry asset. Responsive images solve both problems by matching image delivery and presentation to the actual context.

They matter most when your site includes product photos, hero banners, article images, gallery thumbnails, avatars, or any image that appears at multiple sizes.

3. Basic Syntax or Core Idea

The core idea is to give the browser choices and clear instructions. The browser uses the layout and device characteristics to decide which file to load.

Using srcset and sizes

The following example lets the browser choose from three image widths. The sizes attribute tells the browser how wide the image will be in the layout at different viewport sizes.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Mountain landscape">

This says: on small screens, the image is full width; otherwise, it is 600 pixels wide. The browser can then choose the most appropriate source from srcset.

Using object-fit

When an image has a fixed box size, object-fit controls whether the image fills the box, stays fully visible, or stretches.

img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

Here the image fills a 240px-tall area and crops if needed, while keeping its aspect ratio.

4. Step-by-Step Examples

Example 1: Width-based image selection

Use width descriptors when you have several file sizes of the same image. This is the most common responsive image pattern.

<img
  src="hero-960.jpg"
  srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1440.jpg 1440w"
  sizes="(max-width: 768px) 100vw, 960px"
  alt="Office team meeting">

The browser can now choose a file close to the image’s actual display width instead of always loading the largest version.

Example 2: High-density displays

Some screens have more physical pixels than CSS pixels. You can provide 1x and 2x versions for sharper rendering.

<img
  src="icon.png"
  srcset="icon.png 1x, [email protected] 2x"
  alt="Settings">

This pattern is useful for icons, logos, and small UI images where crisp edges matter.

Example 3: Cropping a card image with object-fit

Sometimes images need to match a card or tile shape. object-fit: cover fills the area without distortion.

.card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
}

This is common for blog thumbnails, product cards, and team profile photos.

Example 4: Showing the full image inside a fixed box

If cropping would hide important content, use contain instead of cover.

.logo {
  width: 240px;
  height: 120px;
  object-fit: contain;
  background: #f5f5f5;
}

This keeps the whole logo visible and adds empty space if the aspect ratios do not match.

5. Practical Use Cases

Product galleries that need multiple file sizes for different screens.
Hero banners where desktop and mobile layouts show the same image at different widths.
Thumbnail grids where every image must fit a consistent card shape.
Avatars and icons that need sharper 2x assets on retina displays.
Editorial layouts where image width changes with the reading column.

6. Common Mistakes

Mistake 1: Using srcset without sizes for width-based images

When you provide width descriptors in srcset, the browser also needs sizes to estimate the display width. Without it, the browser may choose a larger file than necessary.

Problem: The browser cannot accurately determine the image slot size, so it may download an inefficient asset or ignore your intent.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  alt="City skyline">

Fix: Add a realistic sizes value that matches the layout.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 700px) 100vw, 700px"
  alt="City skyline">

The corrected version gives the browser enough information to choose a better match.

Mistake 2: Stretching images instead of fitting them

Setting both width and height without object-fit can distort the image.

Problem: The image is forced into a box with a different aspect ratio, so it appears squashed or stretched.

img {
  width: 320px;
  height: 180px;
}

Fix: Add object-fit to preserve the aspect ratio.

img {
  width: 320px;
  height: 180px;
  object-fit: cover;
}

This works because the browser crops rather than distorts the image.

Mistake 3: Expecting object-fit to change the image file size

object-fit changes presentation, not the downloaded file. It will not reduce bandwidth by itself.

Problem: The image still loads at its original file size, so performance does not improve unless you also serve appropriate source files.

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

Fix: Combine object-fit with srcset and sizes so the browser can also choose a smaller asset.

<img
  src="banner-1200.jpg"
  srcset="banner-600.jpg 600w, banner-1200.jpg 1200w, banner-1800.jpg 1800w"
  sizes="100vw"
  alt="Summer sale banner">

This version improves both layout behavior and asset selection.

7. Best Practices

Practice 1: Match sizes to the real layout

The sizes attribute should describe how wide the image actually renders, not how wide you wish it were. This helps the browser choose the right candidate.

<img
  src="article-900.jpg"
  srcset="article-450.jpg 450w, article-900.jpg 900w, article-1350.jpg 1350w"
  sizes="(max-width: 900px) 100vw, 900px"
  alt="Notebook on a desk">

Accurate sizes reduce unnecessary downloads and make image selection more predictable.

Practice 2: Use cover for visual crops, contain for logos

cover is ideal when the image is decorative or the crop is acceptable. contain is better when the full image must stay visible.

.avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.brand-logo {
  width: 160px;
  height: 80px;
  object-fit: contain;
}

Choosing the right fit value prevents awkward crops and preserves intent.

Practice 3: Always set alt text thoughtfully

Responsive images still need meaningful alt text. The image source may change, but the accessibility purpose remains the same.

<img
  src="team-800.jpg"
  srcset="team-400.jpg 400w, team-800.jpg 800w, team-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Development team in a meeting">

Good alt text makes responsive images more usable for everyone.

8. Limitations and Edge Cases

object-fit does not work on background images; it applies to replaced elements like img and video.
srcset and sizes affect which file is chosen, but they do not control cropping or aspect ratio.
Some developers expect sizes to be visual CSS; it is not. It is a hint for source selection.
If the layout changes after the page loads due to fonts, containers, or scripts, the browser may have already chosen an image before the final layout is stable.
For art direction, where different crops are needed, you usually need picture with media queries rather than only srcset.
object-fit: cover can crop important content, so it is a poor choice for product photos where every detail matters.

9. Practical Mini Project

Here is a small card layout that uses all three ideas together: responsive source selection, predictable image sizing, and clean cropping.

<article class="product-card">
  <img
    class="product-card__image"
    src="chair-800.jpg"
    srcset="chair-400.jpg 400w, chair-800.jpg 800w, chair-1200.jpg 1200w"
    sizes="(max-width: 700px) 100vw, 320px"
    alt="Wooden lounge chair">
  <h2>Lounge Chair</h2>
  <p>Comfortable seating for modern spaces.</p>
</article>

.product-card {
  max-width: 320px;
}

.product-card__image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}

This pattern keeps the card image visually consistent while still allowing the browser to download a right-sized file.

10. Key Points

srcset lets the browser choose from multiple image files.
sizes tells the browser how much layout space the image will take.
object-fit controls how an image is drawn inside its box.
cover fills the box and may crop; contain shows the whole image.
Responsive image delivery and responsive image rendering are related, but they are not the same thing.

11. Practice Exercise

Create a responsive card image that looks good on both mobile and desktop.
Serve three image widths with srcset.
Use sizes so the browser can choose the right file.
Apply object-fit: cover to keep the card height consistent.

Expected output: A card image that fills a fixed-height area without stretching and loads a smaller file on narrow screens.

Hint: Think in two layers: source selection with srcset and layout fitting with object-fit.

<article class="exercise-card">
  <img
    class="exercise-card__image"
    src="lake-800.jpg"
    srcset="lake-400.jpg 400w, lake-800.jpg 800w, lake-1200.jpg 1200w"
    sizes="(max-width: 640px) 100vw, 320px"
    alt="Lake view at sunset">
</article>

.exercise-card {
  max-width: 320px;
}

.exercise-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

12. Final Summary

Responsive images are about delivering the right file and displaying it correctly. srcset and sizes help the browser pick an efficient source, while object-fit helps you control how that image behaves inside a defined space.

When you combine both approaches, your images become faster to load, sharper on high-density screens, and more flexible in responsive layouts. That combination is especially valuable for cards, banners, galleries, and any component that must work across many screen sizes.

As a next step, practice adding srcset and sizes to a real page, then compare the result with and without object-fit to see how each part solves a different problem.