5 ms·

Thanks, I didn't know AVIF was well supported alreadyA I remember I couldn't decide if I liked AVIF or JPEG XL better quality-wise, but the support would make A

Thanks, I didn't know AVIF was well supported alreadyA I remember I couldn't decide if I liked AVIF or JPEG XL better quality-wise, but the support would make AVIF the clear winner.

theandrewbailey 4y ago
I've been using AVIF on my blog for about a year. It's worth noting that AVIF seems to have better quality at lower sizes (~0.5 bits per pixel, ~120KB at 1080p) than JPEG XL (at least for right now), so even if browsers supported JPEG XL, you still might get better optimization with AVIF.
- JyrkiAlakuijala 4y ago
  On the average AVIFs are 1.5 BPP and JPEGs about 2.2 BPP in the internet. If you average at 0.5 BPP, you will differentiate by having blurrier images than competing blogs.
  - theandrewbailey 4y ago
    A few reasons: 1. The vast majority of images on my blog are game screenshots. Often, a good portion of them are solid colors/gradients[0] or have blurry textures[1], which helps. When I played around with AVIF, 0.6 bpp was enough to keep the prominent parts, then tried less. For photos, unless it's a picture of grass, gravel, or trees[2], the same holds[3]. 2. I encode only high resolution (x2) images as AVIFs, so blurriness gets covered up by downscaling or high PPI screens almost all of the time. On a desktop 1080p screen, you're looking at up to 2 bpp effectively. 3. I keep individual image sizes below 160KB (0.61 bpp@1080p) to keep page load sizes at 1MB or less. Of course, I keep an archive of everything in PNG/RAW/etc format to redo if needed. Blog link: https://theandrewbailey.com/ https://theandrewbailey.com/ [0] https://theandrewbailey.com/fileImmutable/AXW_xuoI/post/2018_ShadowrunDragonfallCombat%C3%972.avif https://theandrewbailey.com/fileImmutable/AXW_xuoI/post/2018... [1] https://theandrewbailey.com/fileImmutable/AX3-7eYX/post/2021_GTA3%C3%972.avif https://theandrewbailey.com/fileImmutable/AX3-7eYX/post/2021... [2] https://theandrewbailey.com/coroner/404 https://theandrewbailey.com/coroner/404 [3] https://theandrewbailey.com/fileImmutable/AXW_xuox/post/2020_Chicken%C3%972.avif https://theandrewbailey.com/fileImmutable/AXW_xuox/post/2020...

Thanks, I didn't know AVIF was well supported alreadyA I remember I couldn't decide if I liked AVIF or JPEG XL better quality-wise, but the support would make AVIF the clear winner.

theandrewbailey 4y ago

I've been using AVIF on my blog for about a year. It's worth noting that AVIF seems to have better quality at lower sizes (~0.5 bits per pixel, ~120KB at 1080p) than JPEG XL (at least for right now), so even if browsers supported JPEG XL, you still might get better optimization with AVIF.

JyrkiAlakuijala 4y ago
On the average AVIFs are 1.5 BPP and JPEGs about 2.2 BPP in the internet. If you average at 0.5 BPP, you will differentiate by having blurrier images than competing blogs.
- theandrewbailey 4y ago
  A few reasons: 1. The vast majority of images on my blog are game screenshots. Often, a good portion of them are solid colors/gradients[0] or have blurry textures[1], which helps. When I played around with AVIF, 0.6 bpp was enough to keep the prominent parts, then tried less. For photos, unless it's a picture of grass, gravel, or trees[2], the same holds[3]. 2. I encode only high resolution (x2) images as AVIFs, so blurriness gets covered up by downscaling or high PPI screens almost all of the time. On a desktop 1080p screen, you're looking at up to 2 bpp effectively. 3. I keep individual image sizes below 160KB (0.61 bpp@1080p) to keep page load sizes at 1MB or less. Of course, I keep an archive of everything in PNG/RAW/etc format to redo if needed. Blog link: https://theandrewbailey.com/ https://theandrewbailey.com/ [0] https://theandrewbailey.com/fileImmutable/AXW_xuoI/post/2018_ShadowrunDragonfallCombat%C3%972.avif https://theandrewbailey.com/fileImmutable/AXW_xuoI/post/2018... [1] https://theandrewbailey.com/fileImmutable/AX3-7eYX/post/2021_GTA3%C3%972.avif https://theandrewbailey.com/fileImmutable/AX3-7eYX/post/2021... [2] https://theandrewbailey.com/coroner/404 https://theandrewbailey.com/coroner/404 [3] https://theandrewbailey.com/fileImmutable/AXW_xuox/post/2020_Chicken%C3%972.avif https://theandrewbailey.com/fileImmutable/AXW_xuox/post/2020...