Image Compression

Image Compression

Tools for image optimization 18 Image Compressors to Speed Up Your Website

Windows tools

Desktop Windows tools, in order of usability:

  • JPEGmini is the perfect tool.

  • PNGoo is nice GUI for pngquant (lossy), but you can use Pngyu also.

  • PNGGauntlet, Lossless only: PNGOUT + OptiPNG + DeflOpt

  • SuperPNG Photoshop plug-in that uses pngquant.

  • RIOT Supports external optimizers out of the box (PNGout Xtreme, OptiPNG, AdvPNG)

  • Fast Image Optimizer & ScriptPNG & ScriptJPG Beautiful mix of all the best algorithms.

  • Shrink-O-Matic does not really do any optimizatio, only resizing etc.

  • ImageOptim is Mac only. ImageOptim seamlessly integrates the best optimization tools: PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle.

Linux command-line tools

The baseline vs. progressive trendline is the same: images 10K or bigger are better optimized when using progressive encoding.

Install what’s needed:

apt-get install -y libjpeg-progs

To convert to progressive with doing re-compression:

jpegtran -copy none -progressive -outfile saveup-banner-300x250-prog.jpg saveup-banner-300x250.jpg

-copy none strips all the EXIF metadata, -optimize does a lossless optimization of the Huffmann compression and image is converted to progressive mode with -progressive.

find . -name "*.jpg" -type f -exec jpegtran -copy none -optimize -progressive -outfile {} {} \;

Best compression tools

PNG Compression

Great Overview of all the PNG optimization tools.

pngquant

pngquant is for lossy compression of PNG images, both for Linux and Windows.

Both TinyPNG and Kraken.io services are on-line interfaces for pngquant.

  • PNG lossless: AdvanceCOMP’s AdvPNG is good and fast and can also use Zopfli. ZopfliPNG is the best, albeit slower. Zopfli is Google’s compression algorithm. google/zopfli ScriptPNG

    Windows tool that supports ZopfliPNG

Please note that neither pixel data, not filters applied to image data are not changed. This script may be treated mostly like DeflOpt replacement. That means, PngOUT or other PNG compressing tools must be applied before this one.

subzey/zopfli-png

Image Compression tools via command line

mozilla/mozjpeg

GIF? Gifsicle: Command-Line Animated GIFs

How to use Zopfli?

http://superuser.com/a/569063/194248

An effective workflow is to pass your images through a PNG optimiser such as optipng (to deal with PNG-specific aspects), then through advdef.

optipng -quiet -o2 -nb mypic.png && advdef -z -4 mypic.png

the -4 option tells it to use ‘insane’ compression levels, i.e. zopfli.

sayurin/optipng-zopfli

Overview of PNG optimization tools

If you’re running on OS X: ImageOptim CLI

Other PNG compression techniques:

  • Ken Silverman’s KZIP-based PNG encoder PNGOUT used to be the single most size-efficient PNG encoder available. It was displaced by Zopfli-based PNG encoders and optimization tools.

  • OptiPNG

  • Pngcrush

Intro to image optimizing using jpegoptim and optipng | Gray Ghost Visuals Press

Other tools:


Detect possible JPEG image size reductions in on this page


find $1 -name *.jpg -print0 | xargs -0 c --strip-all -f
find $1 -name *.png -print0 | xargs -0 optipng  -o7
find $1 -name '*.jpg' -exec  /home/joop/bin/jpegrescan -s {} {} \;
find $1 -name '*.jpg' -exec jpegtran -copy none -optimize -progressive -outfile {} {}\;

How to compress JPEG images from the command line on Linux - Ask Xmodulo How to compress png files on Linux - Xmodulo


Command line utility that does it all is ajslater/picopt - a multi format optimizer that uses external tools.

apt-get install optipng pngout libjpeg-progs gifsicle python-imaging

git clone git@github.com:kud/jpegrescan.git
ln -s jpegrescan/jpegrescan /usr/local/bin/jpegrescan

pip install picopt

Image Optimization, Part 1: The Importance of Images Image Optimization, Part 2: Selecting the Right File Format Image Optimization, Part 3: Four Steps to File Size Reduction Image Optimization, Part 4: Progressive JPEG…Hot or Not? Image Optimization, Part 5: AlphaImageLoader

Ultimate setup

source: http://velocityconf.com/velocity2014/public/schedule/detail/35128

sudo apt-get install imagemagick jpegoptim libjpeg-progs webp gifsicle python-imaging optipng

sudo apt-get -y install libfile-slurp-perl
sudo wget https://raw.githubusercontent.com/kud/jpegrescan/master/jpegrescan -O /usr/local/bin/jpegrescan
sudo chmod +x /usr/local/bin/jpegrescan

sudo wget https://raw.githubusercontent.com/technopagan/adept-jpg-compressor/master/adept.sh  -O /usr/local/bin/adept.sh
chmod +x /usr/local/bin/adept.sh

cd /usr/local/src/
git clone https://github.com/technopagan/mss-saliency
cd mss-saliency/Release
sudo apt-get -y install libmagick++-dev
make all
cp SaliencyDetector /usr/local/bin

sudo apt-get -y install bc

Now, typing adept.sh will give us what we need.


Webpagetest.org:

We use a standard of compressing the images at a quality level of “50” in Photoshop’s “Save for Web” mode but generally you should compress them as much as you can before they start to look bad.

WebPagetest only looks at JPEGs right now (for lossy optimization) and doesn’t do anything for png’s or gif’s which is why you are seeing it not detect your static images.

So, webpagetest.org checks for lossy optimizations on JPEG files only.


Smush.it was online service from the Yahoo! Developer Network, now defunct, that only did lossless optimizations - stripping out comments, etc.

Optimizilla runs pngquant, but with fewer colors (lower quality) by default.


FN=ackermann-gutschein
jpegoptim --preserve --strip-all --max=80 "$FN.jpg" ; adept.sh "$FN.jpg" ; mv "$FN"_adept_compress.jpg "$FN.jpg" ; chown --reference=. "$FN.jpg"

jpegoptim will skip file if resulting file would be bigger than original.

Sometimes adept is bigger than original.


Verlustfreie Optimierung von Bildern (png und jpg) in einem Verzeichnis // Timme Hosting - Schnelles nginx Hosting, professioneller Support


Comparison of JPEG Lossless Compression Tools

Mine process finally (jpeg, jpg):

find . -name "*.jpg" -type f -exec jpegoptim --preserve --strip-all --max=80 {} \;
find . -name "*.jpg" -type f -exec jpegtran -copy none -optimize -progressive -outfile {} {} \;
find . -name "*.jpg" -type f -exec chown -R --reference=. {} \;

SVG to remember

Perfect read for Illustrator: Tips for Creating and Exporting Better SVGs for the Web

SVG Sprite Sheet Methods How SVG Fragment Identifiers Work | CSS-Tricks

Using SVG | CSS-Tricks

Woow: SVG Editor SVG-Optimiser

SVGOMG - SVGO’s Missing GUI Testiranjem sam ustanovio da je SVGO oko 10 puta bolji od SVG-Optimiser-a.

And other: b64.io - image optimisation & base64 encode

What a great tool:

Publish icons as SVG Sprites: fontastic Neko se već igrao sa mogućnostima: Iconic

Novo? FileOptimizer Guezli, PNG, WebP etc???


Great opens-source tool: Caesium | Free Image Compression Tool

Online compress: Extract all hidden information of your JPG/JPEG/PNG/GIF/WebP images | Compress-Or-Die

date 01. Jan 0001 | modified 28. May 2021
filename: Design & Content - Image Optimizations