0
0
CSSmarkup~5 mins

Responsive images in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Responsive images help your website show pictures that look good on all screen sizes. They save data and load faster by using the right image size for each device.

When you want your website images to look sharp on phones, tablets, and desktops.
When you want to save users' data by not loading very large images on small screens.
When you want your website to load faster by using smaller images on small devices.
When you want to improve user experience by showing images that fit the screen well.
When you want to support different screen resolutions, like retina displays.
Syntax
CSS
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px" alt="Description">

srcset lists image files with their widths.

sizes tells the browser which image size to pick based on screen width.

Examples
This example shows a cat image that changes size depending on screen width.
CSS
<img src="cat-small.jpg" srcset="cat-small.jpg 400w, cat-medium.jpg 800w, cat-large.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px" alt="Cute cat">
This example uses two images for normal and retina screens, always filling the full viewport width.
CSS
<img src="flower.jpg" srcset="flower-1x.jpg 600w, flower-2x.jpg 1200w" sizes="100vw" alt="Beautiful flower">
This example uses the <picture> element to choose images based on screen width.
CSS
<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Scenery">
</picture>
Sample Program

This page shows one image that changes size and file based on the browser width. The border and rounded corners make it look neat. The text explains what to do.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Images Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      max-width: 600px;
      margin: auto;
    }
    img {
      width: 100%;
      height: auto;
      border: 2px solid #333;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Responsive Images Demo</h1>
  <p>Resize the browser window to see the image change size and load the best version.</p>
  <img src="https://via.placeholder.com/400x300.png?text=Small+Image" 
       srcset="https://via.placeholder.com/400x300.png?text=Small+Image 400w, 
               https://via.placeholder.com/800x600.png?text=Medium+Image 800w, 
               https://via.placeholder.com/1200x900.png?text=Large+Image 1200w"
       sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
       alt="Placeholder image showing responsive sizes">
</body>
</html>
OutputSuccess
Important Notes

Always include alt text for accessibility so screen readers can describe the image.

Use width: 100% and height: auto in CSS to make images scale nicely.

Test your responsive images by resizing the browser or using browser developer tools device simulator.

Summary

Responsive images help your site load faster and look good on all devices.

Use srcset and sizes attributes on <img> to provide multiple image options.

The browser picks the best image based on screen size and resolution automatically.