Essential Image Optimization | Hacker News Reader

Essential Image Optimization

images.guide

212 pointsmmazzarolo37 comments

A bit of "self promotion" here, but I was annoyed with optimizing images manually, so I wrote a plugin for webpack that does it for me.

It allows you to use any imagemin plugins you want, which have wrappers for most image compressors out there. And since it runs every "production build" you can commit your unoptimized images to your repo.

https://github.com/Klathmon/imagemin-webpack-plugin

Couldn't tell from the readme, apologies if I missed it, but: does the optimization happen if the optimized files are already present?

Kind of...

In the beta there is a "cache" option, and if an image exists in the cache it will just use that.

However since I use the webpack asset system I can't easily (or safely) check the output to see if it exists (because using the asset system, other plugins could completely change, rename, combine, or delete files after my plugin runs, so trying to detect those files could break things for a lot of users).

1.6 should be promoted to "stable" soon. I only put it in beta since I won't be able to completely test it till Monday. (I also screwed up and merged it into master before I realized I wouldn't be able to do the release untill Monday, so the master Readme has options that won't work in version 1.5)

Ok good to know. Will give it a try in a project I'm working on. Thanks!

Hey thanks, I used this recently with responsive-loader and it worked great, although responsive-loader was a little finicky to get working!

That's actually why I created it in the first place! I no longer use responsive loader any more (fully offline web application, so the responsive images just weren't worth the extra complexity at that point), but it does work wonderfully once you wrangle it under control.

Yeah it does. But you're totally right about the complexity. Figuring out the right values to generate the srcset at felt insanely complicated for what you get out of it in data saving, but images were so blurry on chrome when downscaling them even a little bit that srcset almost seemed mandatory :(

I appreciate that using WebP has its advantages but when I look at canIuse, it’s support isn’t as widespread as the author suggests.

https://caniuse.com/#search=WebP

Yes so it is much better to use Google's Pagespeed module for Nginx or Apache to handle this aspect. In that way the compression is abstracted out and you don't have to worry about it. Pagespeed will know that someone is using an old version of Safari rather than Chrome and will send the correct type of image, i.e. one that will render.

I have a mini benchmark of lossless PNG compressors, in case anyone finds it useful.

https://www.olegkikin.com/png_optimizers/

It would be really cool to get something like this that is run against all formats and their specific optimizers. I'd like to see how MozJPEG stands up against the best PNG optimizers or how everything compares to webp (which in my experience is the smallest)

It's hard to objectively compare lossy encoders. Yes, there are various metrics, but you will get very different results depending on which metric is chosen.

Here's another older one with sample of 12000 random images off the web http://www.phpied.com/give-png-a-chance/

Thank you for keeping it. Slightly improved your current best using optimage:

  1_pingo.png - 8484 --> 8454
  2_pingo.png - 18540 --> 18483
  4_zopfli.png - 91846 --> 91838

https://imgur.com/a/opWft

Here's an open question that I'm having a hard time finding an answer for:

I have a series of images that are basically screenshots of a visual novel (pretty much a comic book). Most of the space of the screenshots are identical from image to image, and I'd like to compress these files together to save space. My first thought is to use some kind of video compression format to do this, but I'm wondering how to handle playback (currently the windows built in image viewer is used).

Backstory: My wife enjoys reading VNs on her phone and screenshots them so she can re-read them on the PC. I've automated most of the capturing of screenshots via some adb scripting and a WPF app that talks to the phone, but the resulting files are quite large and I can tell that I could be smarter with how the resulting files are stored.

Let's say you already have image X saved, and you want to also store image Y, which is mostly similar. Take all of the pixels which are the same in both X and Y and set them to RGBA (0,0,0,0). Instead of using the Windows image viewer, write a web viewer in JavaScript. The viewer takes image X and image Y, composites them in a Canvas, converts that into an image, and then displays the result.

The extra steps with compositing in a Canvas first will prevent you from getting artifacts from scaling the images, but the artifacts may not be particularly visible.

If you are comfortable with NumPy this whole process should be fairly easy and painless. I have done something similar in the past, but it was for making animated GIFs.

If you are particularly adventurous, you could remove large chunks of the VN foreground by taking the per-pixel median value from a large stack of images that share a background. You could then use this as a base image.

This is basically how GIF works. If you have a GIF viewer that can pause and advance frame by frame, you could use GIF without the canvas needs.

But the compression in GIF is so terrible that it will possibly be way bigger than individual JPEG or WEBP. I would say, go with WEBM and a mobile frame-by-frame player, there are dozens.

Appreciate the ideas - I'll look into this. Thanks!

Would it be good enough to combine many of the images into one large "sprite"?

Then you can just use any image compressor and viewer I crunch them down, hopefully leveraging the image files properties to crunch the size down.

Shameless plug for my tool for automatically taking in a static site and spitting out one that uses responsive optimized images: https://github.com/trishume/enfasten

Unlike all non-custom Gulp/Webpack/JS based tools I know, it does incremental builds so that it only resizes/optimizes images that you change or add, so it won't substantially slow down your site build times. It also rewrites the output of your existing static site generator so you don't have to do much to integrate it.

Images in the guide can be further compressed by 7% (lossless) and 25% (lossy) using Optimage [1], and even these results can be improved. There are many nuances in image optimization, and sadly, some of them are not in the guide [2].

[1] http://getoptimage.com

[2] https://github.com/GoogleChrome/essential-image-optimization...

I have some benchmarks of image optimisation tools here at https://foldleft.io/image-tools/

Good article, and very comprehensive coverage of different aspects. However, they are using JPEG images for screenshots and clean vector artwork. Isn't this worse than using PNG in terms of quality and size? And doesn't this violate their own goal of promoting better image optimization practices?

Hi, please avoid if not useful. I built an image compressor with bulk uploading and parallel processing of images. It's free to use. Suggestions, bugs, new features welcome. Link here: https://imgsquash.com

Pngnq is a bit better than pngquant, and zopflipng is really good at compressing pngs even further.

I use the ngx_pagespeed module for Nginx for automatic image optimization. It's really good and easy to install: https://github.com/pagespeed/ngx_pagespeed

I describe the whole setup step by step on my blog: https://blog.tjl.rocks/cheap-secure-and-fast-ghost-blog-set-...

yes agree about ngx_pagespeed but personally never liked the idea of keeping care of nginx compilation (and all the modules). My advice: https://github.com/cryptofuture/nginx-hda-bundle so that you can use nginx, brotli and pagespeed all in one package :)

This is such a low-hanging fruit yet so rarely done. I’ve been getting good github mileage out of submitting PRs that just losslessly optimise images with ImageOptim.

I completely agree!

People will complain over a few hundred kb of JavaScript, but a 3mb unoptimized image will be ignored.

It drives me insane!

I do use https://tinypng.com/ to do JPEG or PNG optimise. Not bad at all.

great guide!! Only downside: I think it needs an essential text/article optimization, the text is huge, had to scale it down at least to 75%.

It's easier to read. I appreciate proper font size for once. I have to use 200% zoom on HN to get the same font size, for example.

Is there any real benefit to progressive JPEGs? I kept reading about how it’ll load in a better fashion in browsers but it seems no browser actually supports it.

Except image hosting sites applying lossy "optimization" contribute to the VHS problem, especially when they don't allow you to download the original. I am looking at you, twitter "gifs". Stripping out metadata on a high-res photo shot with a DSLR is also a minor nuisance, since you can't even check at which settings it was taken. Optimizing lossless compression is ok, although even that has a minor downside that it makes data deduplication more complex, i.e. you can't rely on zfs or btrfs deduplication, you have to use format-specific tools that compare the decompressed output.

Most of these things can be avoided by providing a link to the original.

https://xkcd.com/1683/

This was posted yesterday

https://news.ycombinator.com/item?id=15933687

There was no discussion, so there's no point linking to it.

Reply on news.ycombinator.com