Hacker News new | comments | show | ask | jobs | submit login

There's no accent in the article that images should be optimized for the target screen dpi. It's wasteful to serve a 2x image for 1x screens and 1x when 2x is already present on the page.

Almost all CDNs/services compress images lightly if at all, offline tools are better at this, e.g. images from the reference page can be ~20% smaller. Ideally, hidpi images should be compressed harder, e.g. lower JPEG quality.




Great points. The first article only lightly touches on those topics, in part 2 I'll talk more about the challenges and constraints that lead us to the srcset widths we use at Webflow and our image processing / compression stack.

Hopefully talking about the 'why' will help others make the right choices for their project.

The reference page will see improvements in the future as we enhance our process, but certainly resizing and optimizing variants by hand can yield even better results if you have the time.

What is worth noting from part 1 is that using pixel width variants in `srcset` will let the browser factor in dpi of your monitor as part of the calculation. So it wouldn't serve a 2x image where it only needed 1x.

It's not recommended to use high dpi images, 72dpi is the way to go for web content, with a larger (dimensions) version serving as the 2x variant.




Applications are open for YC Winter 2019

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

Search: