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

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

• Без изменения исходных файлов — файлы преобразовываются сервером на лету.
• С изменением исходных файлов — файлы преобразовываются заранее с помощью специализированных утилит.

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

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

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

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

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

К примеру, для оптимизации файлов 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 -quality 80 -copy none -optimize -outfile оптимизирофанный_файл.jpg исходный_файл.jpg

  • Для управления уровнем ухудшения качества нужно изменить значение ключа -quality XX.

Более детальную информацию по работе с утилитой можно получить, выполнив команду:

jpegtran --help