2.17.2.6. Image optimization

There are several ways to optimize images:

Without modifying source files

You can optimize images on the fly without modifying the source files using the following options in the PageSpeed module:

  • inline_images — embedding small images directly into HTML as data: URL (which reduces the number of server requests).
  • recompress_images — removing excess data from images (metadata and ICC color profiles) and converting them to the most suitable format (including conversion to WebP if the client's browser supports it) (speeds up image loading).
  • resize_images — resizing images to the size at which they appear on the page (which speeds up image loading).

With modifying source files

Attention!

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

By default, the hosting servers support utilities for optimizing image files in popular formats:

You can use them directly via the console or create your own script to access them and perform the necessary operations. There are many ready-made scripts for optimizing images, which consist of a set of commands for the listed utilities.

Ready-made script

Attention!

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

To optimize JPG/JPEG and PNG files, you can use this Bash script.

The script is downloaded and run using the following 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

Parameters:

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

The script uses the following utilities: pngcrush, optipng, and jpegtran.

Utilities

A utility for optimizing images without losing quality. Syntax:
pngcrush options source_file.png optimized_file.png

Ways to use the utility:

  • Maximum compression without loss of quality:
    pngcrush -rem alla -rem text -reduce -brute source_file.png optimized_file.png
  • Optimizing files in a directory without moving them:
    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 of example.com/www/images, specify the path to the directory containing the images. Please note that optimization is not performed recursively across all directories; it is limited to the specified directory only.
    • The final optimized file will replace the source file.

Detailed instructions for using the utility: 

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

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

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

Optimizing all images in a specific folder: 

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

Detailed instructions for using the utility: 

optipng --help
A utility for working with animated GIF files. It allows you to perform a variety of tasks, such as optimizing, resizing, and cropping.

Optimizing GIF animations with some loss of quality: 

gifsicle -03 --lossy=80 -o optimized_file.gif source_file.gif
  • To specify the compression level, change the value of the –lossy=XX parameter.

Detailed instructions for using the utility: 

gifsicle --help
A utility for optimizing JPEG and JPG images.

Common ways to use the utility:

  • Optimizing a single image:
    jpegoptim image.jpg
    • Optimize all .jpg files in the directory:
      jpegoptim ~/example.com/www/images/*.jpg
      • Instead of example.com/www/images/, specify the path to the images directory.
  • Removing all image metadata:
    jpegoptim image.jpg --strip-all
  • Conversion 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, change the value of the -mXX key.

Detailed instructions for using the utility: 

jpegoptim --help
A utility for optimizing JPEG and JPG images without losing quality.

Common ways to use the utility:

  • Optimizing a single image:
    jpegtran -copy none -optimize -outfile optimized_file.jpg source_file.jpg
    • Image metadata is removed using the -copy none key.
  • Optimization and conversion to progressive JPEG:
     jpegtran -copy none -optimize -progressive -outfile optimized_file.jpg source_file.jpg

Detailed instructions for using the utility: 

jpegtran --help
コンテンツ