Do I have to include the sizes attribute when using w-descriptors in srcset?

After reading several articles discussing the use of srcset for device-pixel-density adjustments and art direction, I have come to a few conclusions:

The State of Responsive Images in 2015 by Paddi Macdonnell

srcset Part 2: The W descriptor and sizes attribute by Rich Finelli

Most sources suggest that w-descriptors should be used together with the sizes attribute. However, based on my own testing, it seems image switching can indeed work using only w descriptors.

When specifying different images based on their width using the w-descriptor, browsers seem to automatically choose the best-fitting image without requiring additional code.

In the context of designing responsive websites, this simplicity is both convenient and confusing because as a designer, my needs are rather straightforward:

  1. Changing the image based on device-pixel-density (which works fine)
  2. Adjusting the image based on available width (also works well)

I am curious about how the inclusion of the sizes attribute would affect these processes, especially considering its relatively new introduction.

cssresponsive-designsrcsetresponsive-images

Answer №1

sizes is not mandatory, but excluding it will default to using 100vw. If you want your image to be rendered at full screen width, then omitting sizes is fine. However, if you have other dimensions in mind like 200px, then specifying sizes is crucial to avoid undesired outcomes.

The decision on which image source to download is based on pixel density indicated by the x descriptor. The w descriptor is essentially converted to an equivalent x descriptor after being divided by the appropriate sizes value. This system accommodates scenarios where the final size of the image layout is unknown during authoring. For cases where the final size is known, using x descriptors is generally easier.

While w can also be used when knowing the laid-out size to simplify calculations, designing explicitly for the final size with simple integer ratios is preferred. It's better to send a 1x or 2x image rather than a .9x image that needs browser scaling. Planning ahead saves time and optimizes image rendering efficiency.

Answer №2

The importance of the sizes attribute becomes evident when using w-descriptors. Consider the following example:

<img srcset="
    https://via.placeholder.com/200x150?text=200w&v=1 200w,
    https://via.placeholder.com/400x300?text=400w&v=1 400w,
    https://via.placeholder.com/800x600?text=800w&v=1 800w,
    https://via.placeholder.com/1200x900?text=1200w&v=1 1200w
" style="width: 200px">

<img srcset="
    https://via.placeholder.com/200x150?text=200w&v=2 200w,
    https://via.placeholder.com/400x300?text=400w&v=2 400w,
    https://via.placeholder.com/800x600?text=800w&v=2 800w,
    https://via.placeholder.com/1200x900?text=1200w&v=2 1200w
" style="width: 200px" sizes="200px">

This illustration showcases two images with identical srcset attributes, yet only one includes the correct sizes attribute. The image with the specified sizes parameter loads the intended image, while the other does not. This outcome is due to the browser defaulting to 100vw if the sizes attribute is absent.

To tailor image selection solely based on device pixel density, utilize x-descriptors instead.

For precise art-direction control, employ <picture> in conjunction with <source> elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on implementing event listener for right click using pure JavaScript (VANILLA JS)

I need the div to appear wherever the cursor is holding down the right mouse button. In my scenario, I am using the following code: <div class="d-none" id="item"></div> #item{ position: absolute; top: 0; left: 0; w ...

javascripthtmlcss

What is the best way to center a heading element within a section on a webpage?

I need assistance aligning the h1 element with the specific class wish to the center of its section, both horizontally and vertically. Unfortunately, I have been unable to achieve this thus far. Any guidance would be greatly appreciated. Below you will fi ...

javascripthtmlcss

combine two columns into a single responsive list group item

Using Bootstrap 4, I created an item list and divided it into two columns (see image). However, when I resized the website to a mobile size screen, it displayed like this: https://i.sstatic.net/0iPHm.png My desired outcome is for the list to display in o ...

csshtmlbootstrap-4css-grid

CSS: the enigmatic padding of absolute positioning within a table cell

I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative: HTML <table> <colgroup> ...

htmlcss

Is the jQuery popup malfunctioning? It appears to be stuck within a div

Currently, I am in the process of developing a website at and I am facing an issue with the hover type menu. Whenever I click on the arrows next to the logo, instead of fully opening up, the menu seems to be getting stuck and is not expanding entirely. I ...

jquerycss

What is the ideal framerate for smooth animation?

I'm looking to add a snow animation using JavaScript. I currently have it running at 200ms which is decent but not smooth enough. Would changing the interval to 20ms make it more fluid, or would it be inefficient and strain the CPU? window.setInterva ...

javascriptjqueryhtmlcss

react-responsive-carousel: setting a specific height for thumbnail images

After setting a fixed height for the image, I noticed that the same height is also being applied to the thumbnails. How can I avoid this issue? <Carousel width="600px" dynamicHeight={false}> {data?.book?.images.map((image, i) => ( ...

javascriptcssreactjscarouseltailwind-css

Tips for optimizing the page speed of your Pixi JS app by ensuring it runs efficiently after the page loads

On my website, I implemented a dynamic gradient animation with shape-changing blobs using pixi js. The animation functions flawlessly, but the issue arises when I run page speed tests - the test assumes that the page has not finished rendering because the ...

javascripthtmljquerycsspixi.js

Ways to eliminate additional whitespace in CSS Grid styling techniques

Currently, I am utilizing material ui to establish a grid system for showcasing videos in 2 rows. While I have successfully set up the general layout, I am facing difficulty in eliminating the white space/padding between the elements. Despite trying nowrap ...

cssreactjsmaterial-ui

Is it possible to change the color of specific days of the week (like Mondays, Tuesdays, etc.) in JQueryUI's datepicker?

Is it possible to customize the appearance of specific weekdays (such as all Mondays, all Tuesdays for the entire year) in the JQueryUI datepicker by changing their color? While there are existing methods to select certain dates and disable holidays, I h ...

cssjquery-uidatepicker

I decided to uninstall Bootstrap, but now I find myself unable to make any CSS changes

After attempting to uninstall Bootstrap, my application.css no longer seems to have any effect on my app. Any suggestions on how to resolve this issue? Here is a breakdown of the steps I took that led to this problem: - Removed require bootstrap from app ...

cssruby-on-railstwitter-bootstrapruby-on-rails-4

Image floating gracefully in the top corner of the screen

Check out this Picture I am trying to create a floating image similar to the one in the top left corner of the navigation bar. After searching for some code to achieve this, I came across the following: <html> <head></head> <bod ...

htmlcss

Align the h2 header vertically within a div container

So, here's the HTML structure that I'm working with: <div class="category"> <div class="container bottom"> <h2>Name1</h2> </div> <div class="container top"> <h2>Name2</h2&g ...

htmlcssvertical-alignment

Sliding right is done by activating the Switch Function, while sliding to the left can be achieved by deactivating it with the help

My objective is to create a functionality where flipping the switch button will cause it to slide automatically to the right, revealing a red background div. When switched off, it should return to its original position with a yellow background using Jquery ...

jquerycss

Bootstrap-tour is incompatible with a row within a table structure

Is there a way to highlight a table row effectively? I've been struggling with it and tried using the fix mentioned in this bootstrap-tour issue here Check out this demonstration on jsFiddle: jsFiddle JAVASCRIPT $("#dialog").dialog(); var t = new ...

javascriptcsstwitter-bootstrapz-indexbootstrap-tour

Tips for displaying a dropdown on top of a modal with the help of Tailwind CSS

I am currently utilizing Tailwind CSS and I am struggling to display the white dropdown over my modal. Despite attempting to use the z-index, I have been unsuccessful in getting it to work. Do you have any suggestions or insights on how to resolve this is ...

htmlcssvue.jstailwind-cssheadless-ui

How to Centre Align Items in a React Native ListView

Is there a way to center align the items in a ListView without using another View wrapping the ListView? Currently, all the items are left aligned. ListView Code Snippet <ListView dataSource={this.state.dataSource} renderRow={this.renderItem} ...

ioscsslistviewreact-native

Can CSS stylesheets be set up to automatically load based on the browser being used to access the website?

I am inquiring because I recently completed a beautiful homepage design and, after viewing the website on Chrome and Safari on OSX, I noticed that certain elements were broken when I opened it in Firefox. In addition, an issue I was experiencing with the ...

csshtmlcross-browserstylesheet

Placing a Div wrapper around the contents of two corresponding elements

I am currently attempting to wrap a div with the class name 'wrapped' around two other divs containing innerHTML of 'one' and 'two'. <div class='blk'>one</div> <div class='blk'>two</di ...

javascriptjqueryhtmlcss

Ways to reduce the size of the border on the bottom in HTML/CSS

Currently, I am working with a div container (utilizing bootstrap.min.css) that contains another class called divborder. The length of the border-bottom in divborder is quite long and I'm wondering how I can adjust it to be shorter. Below is a snippe ...

htmlcss