7 ms·

Essential Image Optimization

212 points by mmazzarolo 9y ago

therealmarv 9y ago
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%.
- zzzcpan 9y ago
  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.
GvS 9y ago
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 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-up/ https://blog.tjl.rocks/cheap-secure-and-fast-ghost-blog-set-...
- therealmarv 9y ago
  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 https://github.com/cryptofuture/nginx-hda-bundle so that you can use nginx, brotli and pagespeed all in one package :)
Houshalter 9y ago
Pngnq is a bit better than pngquant, and zopflipng is really good at compressing pngs even further.
the8472 9y ago
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/ https://xkcd.com/1683/
styfle 9y ago
This was posted yesterday https://news.ycombinator.com/item?id=15933687 https://news.ycombinator.com/item?id=15933687
- jwilk 9y ago
  There was no discussion, so there's no point linking to it.
mikerg87 9y ago
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 https://caniuse.com/#search=WebP
- Theodores 9y ago
  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.
stereo 9y ago
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.
- Klathmon 9y ago
  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!
nayuki 9y ago
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?
olegkikin 9y ago
I have a mini benchmark of lossless PNG compressors, in case anyone finds it useful. https://www.olegkikin.com/png_optimizers/ https://www.olegkikin.com/png_optimizers/
- gravypod 9y ago
  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)
  - olegkikin 9y ago
    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.
- ssttoo 9y ago
  Here's another older one with sample of 12000 random images off the web http://www.phpied.com/give-png-a-chance/ http://www.phpied.com/give-png-a-chance/
- vladdanilov 9y ago
  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 https://imgur.com/a/opWft
Klathmon 9y ago
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 https://github.com/Klathmon/imagemin-webpack-plugin
- nabeards 9y ago
  Couldn't tell from the readme, apologies if I missed it, but: does the optimization happen if the optimized files are already present?
  - Klathmon 9y ago
    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)
    - nabeards 9y ago
      Ok good to know. Will give it a try in a project I'm working on. Thanks!
- spookyuser 9y ago
  Hey thanks, I used this recently with responsive-loader and it worked great, although responsive-loader was a little finicky to get working!
  - 9y ago
trishume 9y ago
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 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.
eashish93 9y ago
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 https://imgsquash.com
Splines 9y ago
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.
- klodolph 9y ago
  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.
  - nitrogen 9y ago
    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.
    - solidr53 9y ago
      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.
jenhsun 9y ago
I do use https://tinypng.com/ https://tinypng.com/ to do JPEG or PNG optimise. Not bad at all.
fold_left 9y ago
I have some benchmarks of image optimisation tools here at https://foldleft.io/image-tools/ https://foldleft.io/image-tools/
vladdanilov 9y ago
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 http://getoptimage.com [2] https://github.com/GoogleChrome/essential-image-optimization/issues/55 https://github.com/GoogleChrome/essential-image-optimization...
IgorPartola 9y ago
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.

212 points by mmazzarolo 9y ago

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%.

zzzcpan 9y ago
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.

GvS 9y ago

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 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-up/ https://blog.tjl.rocks/cheap-secure-and-fast-ghost-blog-set-...

therealmarv 9y ago
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 https://github.com/cryptofuture/nginx-hda-bundle so that you can use nginx, brotli and pagespeed all in one package :)

Houshalter 9y ago

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

the8472 9y ago

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/ https://xkcd.com/1683/

styfle 9y ago

This was posted yesterday https://news.ycombinator.com/item?id=15933687 https://news.ycombinator.com/item?id=15933687

jwilk 9y ago
There was no discussion, so there's no point linking to it.

mikerg87 9y ago

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 https://caniuse.com/#search=WebP

Theodores 9y ago
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.

stereo 9y ago

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.

Klathmon 9y ago
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!

nayuki 9y ago

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?

olegkikin 9y ago

I have a mini benchmark of lossless PNG compressors, in case anyone finds it useful. https://www.olegkikin.com/png_optimizers/ https://www.olegkikin.com/png_optimizers/

gravypod 9y ago
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)
- olegkikin 9y ago
  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.
ssttoo 9y ago
Here's another older one with sample of 12000 random images off the web http://www.phpied.com/give-png-a-chance/ http://www.phpied.com/give-png-a-chance/
vladdanilov 9y ago
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 https://imgur.com/a/opWft

Klathmon 9y ago

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 https://github.com/Klathmon/imagemin-webpack-plugin

nabeards 9y ago
Couldn't tell from the readme, apologies if I missed it, but: does the optimization happen if the optimized files are already present?
- Klathmon 9y ago
  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)
  - nabeards 9y ago
    Ok good to know. Will give it a try in a project I'm working on. Thanks!
spookyuser 9y ago
Hey thanks, I used this recently with responsive-loader and it worked great, although responsive-loader was a little finicky to get working!
- 9y ago

trishume 9y ago

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 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.

eashish93 9y ago

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 https://imgsquash.com

Splines 9y ago

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.

klodolph 9y ago
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.
- nitrogen 9y ago
  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.
  - solidr53 9y ago
    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.

jenhsun 9y ago

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

fold_left 9y ago

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

vladdanilov 9y ago

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 http://getoptimage.com [2] https://github.com/GoogleChrome/essential-image-optimization/issues/55 https://github.com/GoogleChrome/essential-image-optimization...

IgorPartola 9y ago

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.