Hacker News new | past | comments | ask | show | jobs | submit login
Srcset and Sizes (2014) (ericportis.com)
10 points by Tomte on Aug 12, 2021 | hide | past | favorite | 1 comment



This is some pretty powerful stuff. Here's a more information-dense and up-to-date rundown of srcset and sizes: https://bitsofco.de/the-srcset-and-sizes-attributes/

Notably, it shows how it's possible to use different images based on a portrait or landscape layout of the viewport, which OP doesn't cover. That's not always useful but it's good to know it's there when you might want to use it.

I was recently (well, several months ago) tasked with improving the Google PageSpeed scores on mobile for a site which has a lot of image-heavy pages. The end solution involved adapting all images to use a <picture> image with a WebP alternative for browsers that can show it (Google's tools like it when you use their near-proprietary image format; go figure), plus using srcset and sizes (which can be used on <source> tags inside of <picture> tags as well as <img> tags) plus a script which resizes and caches resized versions of large images based on URL parameters (basically an ersatz Glide [0]; I wish I had known it existed when I started). The end result severely reduced page weight for mobile visitors and was successful in raising our PageSpeed scores and appeasing my client.

[0]: https://glide.thephpleague.com




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: