> Compress your JPG images with the compression level of 70‑80.
In practice some images can get noticeable artifacts even at around 90. Most of JPEG compressors always apply chroma subsampling which is often destructive on its own [1]. On the contrary, many hidpi images can be compressed at around 50.
> Use Progressive JPEG… Thanks to this, a visitor can roughly see what’s in the image way earlier.
That's not the point of using progressive JPEGs nowadays. The 10-200% decompression slowdown is for the 5-15% size reduction.
> Use Interlaced PNG.
Don't. Interlaced PNGs can easily be 1/3 bigger. There are better ways to show loading images, and it's already used on the website.
> webpack has image-webpack-loader which runs on every build and does pretty much every optimization from above. Its default settings are OK
> For you need to optimize an image once and forever, there’re apps like ImageOptim and sites like TinyPNG.
These tools are no good for automatic lossy image compression [1]. The default is mostly JPEG 4:2:0 at quality 75, PNG quantized with pngquant at settings as low as conscience allows, missing out many PNG reductions and optimal deflate, no separation between lossy and lossless WebP if at all, etc.
As a result, the images on the website have about 13-24% more to optimize losslessly.
[1] https://getoptimage.com/benchmark
In practice some images can get noticeable artifacts even at around 90. Most of JPEG compressors always apply chroma subsampling which is often destructive on its own [1]. On the contrary, many hidpi images can be compressed at around 50.
> Use Progressive JPEG… Thanks to this, a visitor can roughly see what’s in the image way earlier.
That's not the point of using progressive JPEGs nowadays. The 10-200% decompression slowdown is for the 5-15% size reduction.
> Use Interlaced PNG.
Don't. Interlaced PNGs can easily be 1/3 bigger. There are better ways to show loading images, and it's already used on the website.
> webpack has image-webpack-loader which runs on every build and does pretty much every optimization from above. Its default settings are OK
> For you need to optimize an image once and forever, there’re apps like ImageOptim and sites like TinyPNG.
These tools are no good for automatic lossy image compression [1]. The default is mostly JPEG 4:2:0 at quality 75, PNG quantized with pngquant at settings as low as conscience allows, missing out many PNG reductions and optimal deflate, no separation between lossy and lossless WebP if at all, etc.
As a result, the images on the website have about 13-24% more to optimize losslessly.
[1] https://getoptimage.com/benchmark