Conjunto de caracteres

What is Srcset?

Srcset is an HTML attribute that allows you to specify multiple image sources for different screen sizes and resolutions. This enables browsers to display the most optimal image relevant to the user’s device. 

los srcset attribute lists image URLs with descriptors (e.g., 480w for width or 2x for pixel density). Browsers then use the attribute alongside the sizes attribute to determine the best image to display for a user.

Example of a Srcset Code

This is an example of a srcset code:

<img
  src="the-moon.png"
  srcset="    the-moon-small.png 480w,    the-moon-medium.png 800w,    the-moon-large.png 1200w  "
  sizes="(max-width: 600px) 480px,         (max-width: 1000px) 800px,         1200px"
  alt="Night photo of the moon"
>

En el código anterior:

• Img indicates that this element is an image
• Src specifies the default image to be displayed by browsers that do not support the srcset atributo
• Conjunto de caracteres specifies the various image files and their width descriptors
• Sizes tells the browser how much space (width) the image will occupy on the viewport
• Alt specifies the alternative text for all images

Let us explain the srcset and sizes attributes in more detail. 

1 Conjunto de caracteres

Our code’s srcset attribute contains three values:

• the-moon-small.png 480w
• the-moon-medium.png 800w
• the-moon-large.png 1200w

  srcset="
   the-moon-small.png 480w,
   the-moon-medium.png 800w,
   the-moon-large.png 1200w

Let us use the the-moon-small.png 480w value as a quick example. the-moon-small.png specifies the image’s file name while 480w indicates the image width. This means:

• The image namedthe-moon-small.pngis 480 pixels wide
• The image named the-moon-medium.png is 800 pixels wide
• The image named the-moon-large.png is 1200 pixels wide

2 Sizes

The code’s sizes attribute tells the browser how much space (width) the image will occupy on the viewport. In our code, it contains three values:

• (max-width: 600px) 480px
• (max-width: 1000px) 800px
• 1200px

sizes="(max-width: 600px) 480px,
       (max-width: 1000px) 800px,
       1200px"

• (max-width: 600px) 480px indicates the image will occupy 480px of space when the viewport is 600px or smaller
• (max-width: 1000px) 800px indicates the image will occupy 800px space when the viewport is 1000px or less, but larger than 600px
• 1200px specifies the default pixel to be displayed on devices with viewports larger than 1000px

Factors That Determine What Image is Displayed

The browser primarily assesses the viewport size and screen resolution to select the optimal image from srcset. However, it also factors in the device pixel ratio (DPR) and, in some cases, network conditions and other factors for performance optimization.

1 Viewport Size

The viewport is the visible area of a webpage. It is measured in pixels and changes depending on the device’s screen size and orientation. It can also change as the user adjusts their browser’s size within the viewport. 

The larger the viewport, the larger the image that can be displayed to visitors. As a rule, the viewport on tablets is larger than that of mobile devices. Similarly, the viewport of desktops is larger than that of tablets. 

2 Screen Resolution

The screen resolution refers to the total number of physical pixels on a device’s screen. For example, 1920 × 1080 is a common screen resolution used by HD devices. 

Browsers use the screen resolution to decide how sharp the image needs to be. Higher resolution screens will support sharp, high-quality images from the srcset, while lower resolution screens will support low-quality images. 

3 Device Pixel Ratio (DPR)

The device pixel ratio (DPR) is the ratio between physical pixels and CSS pixels on a screen. Browsers display high-quality images for devices with a high device pixel ratio.

Sometimes, these images may even be larger than what the browser would have selected if it considered some other factors without the device pixel ratio. 

4 Network Conditions

Some browsers may consider the network speed or data-saving settings when deciding which image to display. So, they could serve smaller images, even when the device supports a larger one. 

For example, a browser may serve a smaller image because the network is slow. In this case, the smaller image would speed up the page load time. The browser may also select a smaller image because the user has enabled data-saver mode. 

5 The User’s Zoom

Some browsers consider the user’s zoom settings when deciding what image to display. The browser can display a larger image to users who zoom in. This ensures that images remain crisp and readable, and not blurry to such users. 

6 CSS Rules and Media Queries

CSS styling rules like max-width, flexbox layout, and media queries can influence how large an image actually appears on the screen. This can, in turn, affect the browser’s calculation of which srcset image size is most appropriate.

In such cases, even if the viewport is large, CSS styling rules can constrain the browser and cause it to select and display a smaller image.

Importance of the Srcset

The srcset attribute allows browsers to choose the best image to display to visitors. This improves the user experience for visitors as it ensures they get to see images appropriate for their devices. 

If a blogger does not use the srcset, a single image will be displayed to all visitors without taking their device’s strengths and limitations into consideration. This could cause user experience issues and slow down the page speed.

For example, if the blogger provides a high-resolution image, visitors on smaller devices would have slower page speeds as the larger image would take more time to download. Their device would also consume additional resources, including data and memory, to support such images. 

On the other hand, if the blogger publishes a single low-resolution image, visitors with high-end devices and those with larger viewports and screen resolutions will be served blurry, low-quality images. 

Drawbacks of the Srcset Attribute

The srcset adds additional complexity to the page’s code. Developers must list multiple image files and descriptors, which can clutter the code and make it harder to maintain and understand.

The multiple images included in the srcset attribute also require additional resources to create and manage. It also increases the blogger’s workload. Then, there is the issue with support. While modern browsers support srcset, some older and less popular browsers do not.

Browsers also use more memory to cache the webpage, as each image size is treated as a separate file. If not managed properly, this could increase bandwidth usage and reduce caching efficiency. It will also put additional strain on the server and content delivery network (CDN).