2.19.6. Оптимизация изображений

Оптимизировать изображения можно несколькими способами:

Без изменения исходных файлов

Оптимизация изображений на лету без изменения исходных файлов возможна с помощью следующих опций модуля PageSpeed:

  • inline_images — встраивание небольших изображений непосредственно в HTML в виде data: URL (сокращает количество запросов к серверу).
  • recompress_images — удаление избыточной информации из изображений (метаданные и цветовые профили ICC) и преобразование их в наиболее подходящий формат (включает в себя конвертацию в формат WebP, если браузер клиента его поддерживает) (ускоряет загрузку изображений).
  • resize_images — уменьшение изображений до размера, в котором они отображаются на странице (ускоряет загрузку изображений).

С изменением исходных файлов

Внимание!

Перед выполнением действий обязательно создайте резервную копию сайта на случай, если что-то пойдёт не так.

На серверах хостинга по умолчанию доступны утилиты для оптимизации файлов изображений популярных форматов:

Их можно использовать напрямую через консоль или создать собственный скрипт, который будет обращаться к ним и выполнять необходимые операции. Есть много готовых скриптов для оптимизации изображений, которые представляют собой набор команд для перечисленных утилит.

Готовый скрипт

Внимание!

Скрипт некорректно работает с файлами с кириллицей в названии.
После оптимизации все полученные файлы будут помещены в один из каталогов:
  • Либо в каталог, указанный после ключа -o.
  • Либо в подкаталог output текущего каталога, если ключ -o указан не был.

Для оптимизации файлов JPG/JPEG и PNG можно использовать такой Bash-скрипт.

Скачивание и запуск скрипты выполняется командами: 

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

Параметры:

  • -i или --input — каталог с исходными изображениями.
  • -o или --output — каталог, в который будут сохранены все оптимизированные изображения.
  • -q или --quiet — отключение вывода информации в процессе работы.
  • -s или --no-stats — отключение вывода статистики о размерах.
  • -h или --help — вывод справки по указанным ключам.

Скрипт использует утилиты: pngcrush, optipng и jpegtran.

Утилиты

Утилита для оптимизации изображений без потери качества. Синтаксис:
pngcrush опции исходный_файл.png оптимизированный_файл.png

Варианты использования утилиты:

  • Максимальное сжатие без потери качества:
    pngcrush -rem alla -rem text -reduce -brute исходный_файл.png оптимизированный_файл.png
  • Оптимизация файлов в каталоге без перемещения:
    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
    • Вместо example.com/www/images укажите путь к каталогу с изображениями. Обратите внимание, оптимизация не производится рекурсивно по всем каталогам, а ограничивается только указанным.
    • Конечный оптимизированный файл заменит исходный.

Подробная информация по работе с утилитой: 

pngcrush --help
Утилита сжатия и оптимизации изображения, созданная на основе pngcrush. Форматы изображений, которые могут быть преобразованы в оптимизированный PNG:
  • PNG
  • BMP
  • GIF
  • PNM
  • TIFF

Оптимизация одиночного изображения (файл изображения будет заменён оптимизированной версией): 

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

Оптимизация всех изображений в определённом каталоге: 

find ~/example.com/www/images/ -iname *.png -print0 | xargs -0 optipng -o7
  • Вместо example.com/www/images/ укажите путь к каталогу изображений.
  • Вместо *.png укажите нужный формат файлов в виде *.bmp или другие.

Подробная информация по работе с утилитой: 

optipng --help
Утилита для работы с анимированными GIF-файлами. С её помощью можно производить множество действий: оптимизировать, масштабировать, обрезать.

Оптимизация GIF-анимации с потерей качества: 

gifsicle -03 --lossy=80 -o оптимизированный_файл.gif исходный_файл.gif
  • Для указания степени сжатия нужно изменить значение параметра –lossy=XX.

Подробная информация по работе с утилитой: 

gifsicle --help
Утилита для оптимизации изображений JPEG и JPG.

Популярные способы использования утилиты:

  • Оптимизация одиночного изображения:
    jpegoptim image.jpg
    • Оптимизация всех файлов .jpg в каталоге:
      jpegoptim ~/example.com/www/images/*.jpg
      • Вместо example.com/www/images/ укажите путь к каталогу изображений.
  • Удаление всех метаданных изображения:
    jpegoptim image.jpg --strip-all
  • Преобразование в прогрессивный JPEG:
    jpegoptim image.jpg --all-progressive
  • Оптимизация изображения с потерей качества:
    jpegoptim -m85 image.jpg
    • Для управления уровнем качества оптимизированного изображения нужно изменить значение ключа -mXX.

Подробная информация по работе с утилитой: 

jpegoptim --help
Утилита для оптимизации изображений JPEG и JPG без потери качества.

Популярные способы использования утилиты:

  • Оптимизация одиночного изображения:
    jpegtran -copy none -optimize -outfile оптимизирофанный_файл.jpg исходный_файл.jpg
    • Удаление метаданных изображения производятся при помощи ключа -copy none.
  • Оптимизация и преобразование в прогрессивный JPEG:
     jpegtran -copy none -optimize -progressive -outfile оптимизирофанный_файл.jpg исходный_файл.jpg

Подробная информация по работе с утилитой: 

jpegtran --help
Содержание