2.19.6. Optimizing images

There are several ways to optimize images:

• Without modifying the original files - files are converted by the server on the fly.
• With modified source files - files are converted in advance using specialized utilities.

Optimization without changing the source files is possible thanks to the module PageSpeed... To do this, you can enable the following options in its settings:

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

Hosting servers have a number of utilitieswith which you can optimize image files.

• PNG:
  • pngcrush
  • optipng
• GIF:
  • gifsicle
• JPG/JPEG:
  • jpegoptim
  • jpegtran

They can be used directly through the console, by connecting to the hosting via SSH... You can also create your own script that will access them and perform the necessary operations. There are many already ready-made scripts for image optimization, these scripts usually include only a set of commands for the specified utilities and one-by-one execution for the corresponding images.

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

To download and run the optimization script, run 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 - defines the directory in which the images to be optimized are located.
• -o or --output - defines the directory where all optimized images will be saved.
• -q or --quiet - disables the output of all actions.
• -s or --no-stats - disables the output of size statistics.
• -h or --help - displaying help for the specified keys.

The script uses utilities:

• pngcrush
• optipng
• jpegtran

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

More detailed information on working with the utility can be obtained by running the command:

pngcrush --help

Image compression and optimization utility based on pngcrush... Image formats that can be converted to optimized PNG:

• PNG
• BMP
• GIF
• PNM
• TIFF

To optimize a single file, you need to run the command (the file will be automatically converted and replaced with the optimized version):

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

To optimize all files in one directory, you need to run the command:

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

More detailed information on working with the utility can be obtained by running the command:

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.

More detailed information on working with the utility can be obtained by running the command:

gifsicle --help

Utility to optimize JPEG and JPG images.

Popular ways to use the utility:

• Single file optimization:

  jpegoptim image.jpg

  • To optimize all files .jpg in the directory, you need to run the command like this:

    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.

More detailed information on working with the utility can be obtained by running the command:

jpegoptim --help

Another utility for optimizing JPEG and JPG images without losing quality.

Popular ways to use the utility:

• Single file 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

• Optimization with quality change:

  jpegtran -quality 80 -copy none -optimize -outfile optimized_file.jpg original_jpgfile

  • To control the level of degradation, you need to change the key value -quality XX.

More detailed information on working with the utility can be obtained by running the command:

jpegtran --help