5 ms·

I want it to be smarter and choose quasi-optimal settings for me automatically. Dropping an almost entirely solid white PNG on it, the initial suggestion is to

I want it to be smarter and choose quasi-optimal settings for me automatically. Dropping an almost entirely solid white PNG on it, the initial suggestion is to convert to JPEG which _increases_ the size rather than decreasing it!

dassurma 6y ago
The goal of Squoosh is more to teach out about all the options and levers codecs have. JPEG is not “suggested”, it’s just literally the first codec we ported to Wasm so that’s the auto-selected one :D The Squoosh CLI has an auto-optimizer that will make an image as small as possible while staying under a given Butteraugli threshold, but you still have to decide on the format yourself. https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli
molszanski 6y ago
https://www.industrialempathy.com/posts/avif-webp-quality-settings/ https://www.industrialempathy.com/posts/avif-webp-quality-se...
jaffathecake 6y ago
If anything, it's getting harder to choose the 'right' format https://jakearchibald.com/2020/avif-has-landed/#why-not-lossy https://jakearchibald.com/2020/avif-has-landed/#why-not-loss...
- seoaeu 6y ago
  That page is rather deceptive because the images it uses are 1920x1080, but they are displayed after downsampling them to be much smaller. This masks the substantial blurriness introduced by lower quality levels of AVIF. If you zoom into the full resolution versions you can see that the road surface actually has a lot of roughness, but the compressed version makes the road look smooth.
  - jaffathecake 6y ago
    Those images are displayed at the correct size for high density devices. Real users don't zoom in and compare to the original.
    - jschwartzi 6y ago
      Are you saying that people don't ever zoom in on images on the web? Because my wife does this regularly to look at details in photos.
      - jaffathecake 6y ago
        I'm saying it's an edge case you shouldn't optimise for. Otherwise, if you're displaying an image at 640x480 CSS pixels, how wide should the image be in pixels? 2,000? 3,000? 10,000? Maybe each image should be 10MB just in case the user zooms in that far? I think you should optimise for regular display size and density.
    - seoaeu 6y ago
      The file sizes quoted should be for the resolution of image actually displayed. It would be fine to say a 960x540 image is X bytes with AVIF and Y bytes with JPEG and let viewers judge for themselves whether the two look equivalent. What that page actually does is quote the file sizes for 1920x1080 images, but shrink them to 960x540 before letting viewers compare the compression quality.
      - jaffathecake 6y ago
        That's how you cater for high density devices. If you take a 320x image and display it at 320x CSS pixels, it'll look blurry on the vast majority of mobile devices, and a lot of laptops, because 1 CSS pixel is larger than 1 device pixel. https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devi... Fwiw this is covered in the article https://jakearchibald.com/2020/avif-has-landed/#what-is-acceptable-quality https://jakearchibald.com/2020/avif-has-landed/#what-is-acce...

dassurma 6y ago

The goal of Squoosh is more to teach out about all the options and levers codecs have. JPEG is not “suggested”, it’s just literally the first codec we ported to Wasm so that’s the auto-selected one :D The Squoosh CLI has an auto-optimizer that will make an image as small as possible while staying under a given Butteraugli threshold, but you still have to decide on the format yourself. https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli

molszanski 6y ago

https://www.industrialempathy.com/posts/avif-webp-quality-settings/ https://www.industrialempathy.com/posts/avif-webp-quality-se...

jaffathecake 6y ago

If anything, it's getting harder to choose the 'right' format https://jakearchibald.com/2020/avif-has-landed/#why-not-lossy https://jakearchibald.com/2020/avif-has-landed/#why-not-loss...

seoaeu 6y ago
That page is rather deceptive because the images it uses are 1920x1080, but they are displayed after downsampling them to be much smaller. This masks the substantial blurriness introduced by lower quality levels of AVIF. If you zoom into the full resolution versions you can see that the road surface actually has a lot of roughness, but the compressed version makes the road look smooth.
- jaffathecake 6y ago
  Those images are displayed at the correct size for high density devices. Real users don't zoom in and compare to the original.
  - jschwartzi 6y ago
    Are you saying that people don't ever zoom in on images on the web? Because my wife does this regularly to look at details in photos.
    - jaffathecake 6y ago
      I'm saying it's an edge case you shouldn't optimise for. Otherwise, if you're displaying an image at 640x480 CSS pixels, how wide should the image be in pixels? 2,000? 3,000? 10,000? Maybe each image should be 10MB just in case the user zooms in that far? I think you should optimise for regular display size and density.
  - seoaeu 6y ago
    The file sizes quoted should be for the resolution of image actually displayed. It would be fine to say a 960x540 image is X bytes with AVIF and Y bytes with JPEG and let viewers judge for themselves whether the two look equivalent. What that page actually does is quote the file sizes for 1920x1080 images, but shrink them to 960x540 before letting viewers compare the compression quality.
    - jaffathecake 6y ago
      That's how you cater for high density devices. If you take a 320x image and display it at 320x CSS pixels, it'll look blurry on the vast majority of mobile devices, and a lot of laptops, because 1 CSS pixel is larger than 1 device pixel. https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devi... Fwiw this is covered in the article https://jakearchibald.com/2020/avif-has-landed/#what-is-acceptable-quality https://jakearchibald.com/2020/avif-has-landed/#what-is-acce...