Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

srcset and sizes: How the Browser Picks Images

DEV Community·Ashish Kumar·24 days ago
#7Rmq2Xoa
Reading 0:00
15s threshold

Related: What loading="lazy" Does and Why Google Added It to the HTML Spec covers the other half of image loading behavior that pairs with responsive image selection. A user on a 375px iPhone with a 3x retina display viewing your site on 4G should get a different image file than a user on a 1440px desktop with a 1x monitor on a slow hotel WiFi connection. These two users have completely different needs: one wants a sharp image at a small size, the other wants a smaller file at a large size. Without srcset and sizes , they both get the same file, and at least one of them is getting it wrong. What this covers: Why a single image URL cannot serve all devices correctly, what the srcset and sizes attributes actually tell the browser, how the browser's selection algorithm works, and the common mistakes that make the whole system silently fail.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More