| > 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 |
The self-promotion didn't bother me until this claim, because you posted some great advice along with it.
ImageOptim is great. If you choose "lossy minification" it does automatic lossy image compression, preserving perceptual image quality while making huge reductions to file sizes. Users can even adjust how aggressive it is.
I'll take your word for it that I could get 13-24% smaller file sizes with your Optimage product on top of the 80% (or whatever) that I can get with ImageOptim. But I'd prefer that you didn't claim that other choices are "no good".