2.17.2.6. Image optimization

There are several ways to optimize images:

Without modifying the original files

Optimizing images on the fly without changing the original files is possible using the following module options PageSpeed:

  • inline_images — embedding small images directly in HTML as data: URL (reduces the number of requests to the server).
  • recompress_images — removing redundant information from images (metadata and ICC color profiles) and converting them to the most suitable format (includes converting to WebP format, if the client's browser supports it) (speeds up the loading of images).
  • resize_images — reducing images to the size in which they are displayed on the page (speeds up the loading of images).

With modified source files

Attention!

Before proceeding, be sure to create a site backup in case something goes wrong.

On the hosting servers are available by default utilities to optimize image files of popular formats:

They can be used directly via console or create your own script that will access them and perform the necessary operations. There are many ready-made scripts to optimize images, which are a set of commands for the listed utilities.

Ready script

Attention!

The script does not work correctly with files with Cyrillic in their names.
After optimization, all the resulting files will be placed in one of the directories:
  • Or to the directory specified after the key -o.
  • Or in a subdirectory output current directory if key -o was not specified.

To optimize JPG / JPEG and PNG files, you can use such a bash script.

Downloading and launching scripts is performed by the commands: 

wget https://gist.githubusercontent.com/lgiraudel/6065155/raw/24f667559eee61dd00a99a9940e06b46a125d3ec/optimize.sh 
sh optimize.sh -i ~/example.com/images/input -o ~/example.com/images/output

Options:

  • -i or --input — directory with source images.
  • -o or --output — the directory where all optimized images will be saved.
  • -q or --quiet — disable information output during operation.
  • -s or --no-stats — disable the output of statistics about dimensions.
  • -h or --help — displaying help for the specified keys.

The script uses utilities: pngcrush, optipng and jpegtran.

Utilities

Utility to optimize images without losing quality. Syntax:
pngcrush options source_optimized .png file_.pngfile

Utility use options:

  • Maximum compression without loss of quality:
    pngcrush -rem alla -rem text -reduce -brute исходный_optimized .png file_.pngfile
  • Optimizing files in a directory without moving:
    for file in ~/example.com/www/images/*.png ; do pngcrush -reduce -brute -rem alla -rem gAMA -rem cHRM -rem iCCP -rem sRGB "$file" "${file%.png}-crushed.png" && mv "${file%.png}-crushed.png" "$file" ; done
    • Instead example.com/www/images specify the path to the directory with images. Please note that optimization is not performed recursively across all directories, but is limited only to the specified ones.
    • The final optimized file will replace the original one.

Detailed information on working with the utility: 

pngcrush --help
Image compression and optimization utility based on pngcrush... Image formats that can be converted to optimized PNG:
  • PNG
  • BMP
  • GIF
  • PNM
  • TIFF

Optimizing a single image (the image file will be replaced with the optimized version): 

optipng ~/example.com/www/images/image.png

Optimizing all images in a specific directory: 

find ~/example.com/www/images/ -iname *.png -print0 | xargs -0 optipng -o7
  • Instead example.com/www/images/ specify the path to your images directory.
  • Instead *.png specify the desired file format as *.bmp or other.

Detailed information on working with the utility: 

optipng --help
Utility for working with animated GIF-files. With its help, you can perform many actions: optimize, scale, crop.

Optimizing GIF animation with loss of quality: 

gifsicle -03 --lossy=80 -o optimized_.gif file source_.giffile
  • To specify the degree of compression, you need to change the value of the parameter –lossy=XX.

Detailed information on working with the utility: 

gifsicle --help
Utility to optimize JPEG and JPG images.

Popular ways to use the utility:

  • Single image optimization:
    jpegoptim image.jpg
    • Optimizing all files .jpg in the directory:
      jpegoptim ~/example.com/www/images/*.jpg
      • Instead example.com/www/images/ specify the path to your images directory.
  • Removing all image metadata:
    jpegoptim image.jpg --strip-all
  • Converting to progressive JPEG:
    jpegoptim image.jpg --all-progressive
  • Image optimization with loss of quality:
    jpegoptim -m85 image.jpg
    • To control the quality level of the optimized image, you need to change the key value -mXX.

Detailed information on working with the utility: 

jpegoptim --help
Utility to optimize JPEG and JPG images without quality loss.

Popular ways to use the utility:

  • Single image optimization:
    jpegtran -copy none -optimize -outfile optimized_file.jpg original_jpgfile
    • Image metadata is removed using a key -copy none.
  • Optimization and conversion to progressive JPEG:
     jpegtran -copy none -optimize -progressive -outfile optimized_file.jpg original_jpgfile

Detailed information on working with the utility: 

jpegtran --help
Content