YouTip LogoYouTip

Home > HTML > Att Source Srcset

Att Source Srcset

📅 2026-06-23 | 📂 HTML
# HTML `` srcset Attribute The `srcset` attribute of the `` element is a powerful tool in modern responsive web design. It allows developers to define a list of image sources, enabling browsers to select and display the most appropriate image based on device screen size, resolution, and layout requirements. --- ## Definition and Usage When the `` element is nested inside a `` element, the `srcset` attribute is **required**. It specifies the URL of the image (or images) to be displayed under specific conditions defined by media queries or pixel densities. By using `` alongside media queries, you can achieve **Art Direction** (showing different cropped or styled images on different devices) and **Resolution Switching** (serving high-resolution images only to devices with high-DPI/Retina screens). ### Key Differences: * **HTML 4.01:** The `` tag and its `srcset` attribute did not exist. * **HTML5:** Introduced the `` tag and the `srcset` attribute to natively support responsive images without relying on complex JavaScript workarounds. --- ## Browser Support The numbers in the table specify the first browser version that fully supports the `srcset` attribute within the `` element: | Attribute | Chrome | Edge | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`srcset`** | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 | --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *`URL`* | Specifies the URL of the image file.

**Possible formats:**
• **Absolute URL:** Points to an external website (e.g., `srcset="https://example.com/image.jpg"`)
• **Relative URL:** Points to a file within the same website (e.g., `srcset="images/photo.jpg"`)
• **Comma-separated list:** A list of URLs paired with width descriptors (e.g., `600w`) or pixel density descriptors (e.g., `2x`). | --- ## Code Examples ### Example 1: Art Direction using Media Queries In this example, the browser evaluates the media queries in order. It will display different images depending on the viewport width of the device: ```html Default Logo ``` ### Example 2: Resolution Switching (Pixel Density) You can also use `srcset` to serve high-resolution images to devices with high-DPI (Retina) screens: ```html Company Logo ``` --- ## Important Considerations 1. **The Fallback `` Tag:** The `` element must always contain an `` tag as its last child. The `` tag is used to actually render the image; the `` elements merely provide alternative image sources for the browser to choose from. If a browser does not support ``, it will gracefully fall back to the `` tag. 2. **Order Matters:** The browser parses `` tags sequentially. It will use the **first** `` element that matches the current media query condition and ignore any subsequent ones. Always order your media queries logically (typically from largest `min-width` to smallest). 3. **Performance Optimization:** By using `srcset`, mobile users do not have to download large desktop-sized images, which significantly reduces page load times and saves mobile bandwidth.
← Python WithReact Ref Componentdidupdate →

📂 Categories