Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify the URL of the image to use in different situations in HTML?
Use the srcset attribute to specify the URL of the image to use in different situations in HTML. This attribute allows you to provide multiple image sources for responsive images, enabling browsers to choose the most appropriate image based on screen size, resolution, or other conditions.
Syntax
The srcset attribute can be used in two main ways −
<img src="default.jpg" srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" alt="Description">
<source media="(min-width: 600px)" srcset="large-image.jpg">
Using srcset with img Element
The srcset attribute on the <img> element allows you to specify multiple image sources with their respective widths or pixel densities. The browser automatically selects the most suitable image.
Example − Width-based Selection
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Srcset with Width Descriptors</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Responsive Image with srcset</h2>
<img src="/html/images/test.png"
srcset="/html/images/test-300.png 300w,
/html/images/test-600.png 600w,
/html/images/test-900.png 900w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Responsive test image"
style="width: 100%; height: auto; border: 1px solid #ccc;">
<p>Resize your browser window to see different images load based on viewport width.</p>
</body>
</html>
The browser chooses the appropriate image based on the viewport width and display density.
Using srcset with picture Element
The <picture> element provides more control over responsive images by using <source> elements with media queries and srcset attributes.
Example − Media Query Based Selection
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Picture Element with srcset</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Art Direction with Picture Element</h2>
<picture>
<source media="(min-width: 800px)" srcset="/html/images/large-landscape.jpg">
<source media="(min-width: 400px)" srcset="/html/images/medium-square.jpg">
<img src="/html/images/small-portrait.jpg" alt="Adaptive image example" style="width: 100%; height: auto; border: 1px solid #ccc;">
</picture>
<p>This image changes not just in size but in composition based on screen width.</p>
</body>
</html>
The <picture> element allows for art direction, where completely different images can be served based on the viewing conditions.
Example − High DPI Display Support
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>High DPI Image Support</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>High Resolution Display Support</h2>
<img src="/html/images/logo.png"
srcset="/html/images/logo.png 1x,
/html/images/logo-2x.png 2x,
/html/images/logo-3x.png 3x"
alt="Company logo"
style="width: 200px; height: auto; border: 1px solid #ccc;">
<p>This logo displays in crisp quality on high-resolution screens like Retina displays.</p>
</body>
</html>
The 1x, 2x, and 3x descriptors tell the browser which image to use based on the device's pixel density.
Sizes Attribute
When using width descriptors in srcset, the sizes attribute tells the browser how much space the image will occupy at different viewport widths.
Example − Using sizes with srcset
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sizes Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Gallery Layout with Responsive Images</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px;">
<img src="/html/images/gallery1.jpg"
srcset="/html/images/gallery1-400.jpg 400w,
/html/images/gallery1-800.jpg 800w"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
alt="Gallery image 1"
style="width: 100%; height: 200px; object-fit: cover; border-radius: 5px;">
<img src="/html/images/gallery2.jpg"
srcset="/html/images/gallery2-400.jpg 400w,
/html/images/gallery2-800.jpg 800w"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
alt="Gallery image 2"
style="width: 100%; height: 200px; object-fit: cover; border-radius: 5px;">
</div>
</body>
</html>
The sizes attribute describes the image's display size: full width on small screens, half width on medium screens, and one-third width on large screens.
Browser Support and Fallback
The srcset attribute is well supported in modern browsers. For older browsers that don't support srcset, the src attribute serves as a fallback.
| Technique | Use Case | Browser Support |
|---|---|---|
| srcset with width descriptors | Different image sizes for various screen widths | Modern browsers (95%+) |
| srcset with pixel density descriptors | High-resolution displays (Retina, 4K) | Modern browsers (95%+) |
| picture with source elements | Art direction and format switching | Modern browsers (95%+) |
| img src (fallback) | Older browsers compatibility | All browsers (100%) |
Best Practices
When implementing responsive images with srcset, follow these recommendations −
Always include a
srcattribute as fallback for older browsers.Use width descriptors (
300w,600w) for responsive sizing and pixel density descriptors (1x,2x) for high-DPI displays.Include the
sizesattribute when using width descriptors to help browsers make better image selection decisions.Provide images at common breakpoints (320px, 480px, 768px, 1024px, 1200px) to cover most device sizes.
Use the
<picture>element when you need different images for different contexts (art direction).
Conclusion
The srcset attribute is essential for creating responsive images that adapt to different screen sizes and pixel densities. Combined with the sizes attribute and <picture> element, it provides comprehensive control over image delivery, improving both performance and user experience across all devices.
393 Views
