this post was submitted on 05 Jul 2023
198 points (100.0% liked)
Firefox
17840 readers
135 users here now
A place to discuss the news and latest developments on the open-source browser Firefox
founded 4 years ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
view the rest of the comments
Interesting. I've in the past specifically encoded images for a webpage I created to
.webp
using https://squoosh.app as I determined it visually looked best for the file size while also being supported by pretty much all modern browsers.And since none of the other modern image formats you've listed are widely supported by many modern browsers I will probably do the same again when I have to create another website with some images. But I would hope that other formats gain more traction in browsers so that I can use them in the future.
Yeah, for 1st-gen images WebP is okay as long as you're working within the format's restrictions, but websites are usually serving user-created images that were made as JPEG/PNG first, and converted to WebP second (incurring additional quality loss). If you're making 1st-gen images to serve based on browser availability, AVIF will be a much better option than WebP in terms of quality. AVIF has poor decoding speed, but I don't know if it's much poorer than WebP. If the politics surrounding JPEG XL get resolved and it gets put back into browsers, JPEG XL will be the best format to use for everything except for:
Single-core speed: JPEG beats it easily here. JPEG isn't parallelized though, so if you have >=4 cores JPEG-XL starts winning for decoding speed. It's worth considering that bandwidth/downloading is part of the image rendering lifecycle, so JPEG-XL's smaller images sort of counteract this speed in that way.
Animated images: AVIF is a bit better here due to it being based on a proper video codec.
Very low quality images: AVIF gives slightly better results here. With JPEG XL's dominance across medium->high quality images, this is largely not worth worrying about on a case-by-case basis unless you know you're going to be making a lot of low-quality images. Also, due to how filesizes work, better compression at low filesizes is really not that important. It's better to save 30% filesize on a 500kB image than a 5kB image, in aggregate.
Thanks for explaining this, I feel like I already learned more on lemmy than I ever did on reddit now!
I'll keep this in mind the next time I want to optimize images on a website.