4 ms·

Really? IME images compressed real hard with modern techniques look pretty terrible. Dithering is much less efficient if you're looking for low loss, but if you

by kixiQu 5y ago

Really? IME images compressed real hard with modern techniques look pretty terrible. Dithering is much less efficient if you're looking for low loss, but if you're trying to get something quite lossy, it looks better to my eyes.

lpghatguy 5y ago
This was something I helped with recently, as a great case study. We launched a new website for our game studio recently and went all-out on supporting modern compressed images: AVIF and WebP with PNG fallback. The header image for this page was a doozy: https://uplift.games/about/ https://uplift.games/about/ Originally, the image came from art with the glow around the planet being dithered. The resulting PNG was over 2 MB, resisted crushing, and didn't downscale well. Trying to use AVIF and WebP with aggressive compression made the image look awful. We asked if they could remove the dithering and suddenly we got super great compression with some tweaking: 50 kB as AVIF, 68 kB as WebP, 797 kB as PNG (oof!) This is a large banner image. Smaller images can get _much_ smaller with AVIF and WebP with no sacrifice of quality. It takes some tweaking and the tools were pretty bad in my experience. We wrote a couple utilities to do this and fiddled with knobs for awhile and it turned out great. EDIT: Looking at this page again closely, I can see interesting artifacts because of AVIF. Look at the robo-dog's left ear! You could probably use slightly higher settings than we did.
- jhncls 5y ago
  Sometimes it is helpful to first reduce the number of colors (preferably to 256 if that doesn't cause too much banding, depending on the number of color shades used). Then png usually compresses a lot better. Png compresses badly when the image contains too many different colors.
  - achairapart 5y ago
    > Png compresses badly when the image contains too many different colors. Old trick to squeeze a few kb out of a png: Use Posterize filter from Photoshop, with very light settings. Basically it will just flatten the number of colors.
    - spartanatreyu 5y ago
      Nah, just use Photoshop's "Export -> Save for Web (Legacy)", then set the file to PNG-8. Now you can mess around with the number of colors in the color table, customise the color palette selection algorithm, dithering algorithm and dither amount.
- theandrewbailey 5y ago
  > Look at the robo-dog's left ear! Not sure how you created those AVIFs. The reference AVIF encoder[0] wants to use 4:4:4 chroma, but it looks like that hero image is 4:2:0. There is a small size hit for 4:4:4, but edges around saturated colors is much better. [0] https://github.com/AOMediaCodec/libavif https://github.com/AOMediaCodec/libavif
- kaetemi 5y ago
  Use paletted PNG for dithered images.
ohazi 5y ago
The loop filters in modern image/video compression systems don't know anything about dithering. If you want a pixel perfect dither like what you remember from the 80s, you're going to need way more bits to encode the image, because you need to encode those pixels as expensive residuals that can't be ignored, rather than obvious (to the decompresser) pixels that can be inferred from the decompressed pixels in neighboring regions.
zokier 5y ago
Do you think dithering beats AVIF in this comparison? https://ibb.co/hKnwF1Z https://ibb.co/hKnwF1Z
- kixiQu 5y ago
  No, but I also wouldn't consider that a real lossy dither. I mean like 3-4 colors, small pixel size blown up sharply, etc. etc.
pornel 5y ago
The problem is that in terms of file sizes, a "quite lossy" dithered PNG file is still likely to be larger than a "low loss" AVIF. AVIF can look fine in full color at 0.5 bits per pixel. That's equivalent of a black and white dithered bitmap with 2:1 compression ratio. Low-color dithering can be a nice artistic filter, but it's not useful in image compression in general.

by kixiQu 5y ago

lpghatguy 5y ago

This was something I helped with recently, as a great case study. We launched a new website for our game studio recently and went all-out on supporting modern compressed images: AVIF and WebP with PNG fallback. The header image for this page was a doozy: https://uplift.games/about/ https://uplift.games/about/ Originally, the image came from art with the glow around the planet being dithered. The resulting PNG was over 2 MB, resisted crushing, and didn't downscale well. Trying to use AVIF and WebP with aggressive compression made the image look awful. We asked if they could remove the dithering and suddenly we got super great compression with some tweaking: 50 kB as AVIF, 68 kB as WebP, 797 kB as PNG (oof!) This is a large banner image. Smaller images can get _much_ smaller with AVIF and WebP with no sacrifice of quality. It takes some tweaking and the tools were pretty bad in my experience. We wrote a couple utilities to do this and fiddled with knobs for awhile and it turned out great. EDIT: Looking at this page again closely, I can see interesting artifacts because of AVIF. Look at the robo-dog's left ear! You could probably use slightly higher settings than we did.

jhncls 5y ago
Sometimes it is helpful to first reduce the number of colors (preferably to 256 if that doesn't cause too much banding, depending on the number of color shades used). Then png usually compresses a lot better. Png compresses badly when the image contains too many different colors.
- achairapart 5y ago
  > Png compresses badly when the image contains too many different colors. Old trick to squeeze a few kb out of a png: Use Posterize filter from Photoshop, with very light settings. Basically it will just flatten the number of colors.
  - spartanatreyu 5y ago
    Nah, just use Photoshop's "Export -> Save for Web (Legacy)", then set the file to PNG-8. Now you can mess around with the number of colors in the color table, customise the color palette selection algorithm, dithering algorithm and dither amount.
theandrewbailey 5y ago
> Look at the robo-dog's left ear! Not sure how you created those AVIFs. The reference AVIF encoder[0] wants to use 4:4:4 chroma, but it looks like that hero image is 4:2:0. There is a small size hit for 4:4:4, but edges around saturated colors is much better. [0] https://github.com/AOMediaCodec/libavif https://github.com/AOMediaCodec/libavif
kaetemi 5y ago
Use paletted PNG for dithered images.

ohazi 5y ago

The loop filters in modern image/video compression systems don't know anything about dithering. If you want a pixel perfect dither like what you remember from the 80s, you're going to need way more bits to encode the image, because you need to encode those pixels as expensive residuals that can't be ignored, rather than obvious (to the decompresser) pixels that can be inferred from the decompressed pixels in neighboring regions.

zokier 5y ago

Do you think dithering beats AVIF in this comparison? https://ibb.co/hKnwF1Z https://ibb.co/hKnwF1Z

kixiQu 5y ago
No, but I also wouldn't consider that a real lossy dither. I mean like 3-4 colors, small pixel size blown up sharply, etc. etc.

pornel 5y ago

The problem is that in terms of file sizes, a "quite lossy" dithered PNG file is still likely to be larger than a "low loss" AVIF. AVIF can look fine in full color at 0.5 bits per pixel. That's equivalent of a black and white dithered bitmap with 2:1 compression ratio. Low-color dithering can be a nice artistic filter, but it's not useful in image compression in general.