4 ms·
On my blog, I usually create and include 6 files for the same image: - 1x vs. 2x dpi for high-density monitors - png/jpg + webp + avif I don't create additio
by darekkay 5y ago
On my blog, I usually create and include 6 files for the same image:
- 1x vs. 2x dpi for high-density monitors
- png/jpg + webp + avif
I don't create additional screen-optimized image versions, as the work would require 6 additional files per screen resolution.
It's already quite some work, but I think it is worth it. Especially AVIF is often significantly smaller than other formats. I recently wrote a short guide on this topic [1].
[1] https://darekkay.com/blog/avif-images/ https://darekkay.com/blog/avif-images/
- leipert 5y agoRan into the same problem with my a recent website. I think I am still going to create at least one smaller version for mobile. Additionally to your technique I defined a really small image as a background image in order to get a “progressive loading for avif” kind of effect on slower connections. https://gutshaeuser-ostpreussen.de/ https://gutshaeuser-ostpreussen.de/