2.19.6. Оптимизация изображений
Оптимизировать изображения можно несколькими способами:
- Без изменения исходных файлов — файлы преобразовываются сервером на лету.
- С изменением исходных файлов — файлы преобразовываются заранее с помощью специализированных утилит.
Без изменения исходных файлов
Оптимизация изображений на лету без изменения исходных файлов возможна с помощью следующих опций модуля PageSpeed:
- inline_images — встраивание небольших изображений непосредственно в HTML в виде data: URL (сокращает количество запросов к серверу).
- recompress_images — удаление избыточной информации из изображений (метаданные и цветовые профили ICC) и преобразование их в наиболее подходящий формат (включает в себя конвертацию в формат WebP, если браузер клиента его поддерживает) (ускоряет загрузку изображений).
- resize_images — уменьшение изображений до размера, в котором они отображаются на странице (ускоряет загрузку изображений).
С изменением исходных файлов
Внимание!
Перед выполнением действий обязательно создайте резервную копию сайта на случай, если что-то пойдёт не так.На серверах хостинга по умолчанию доступны утилиты для оптимизации файлов изображений популярных форматов:
- GIF: gifsicle.
Их можно использовать напрямую через консоль или создать собственный скрипт, который будет обращаться к ним и выполнять необходимые операции. Есть много готовых скриптов для оптимизации изображений, которые представляют собой набор команд для перечисленных утилит.
Готовый скрипт
Внимание!
Скрипт некорректно работает с файлами с кириллицей в названии.- Либо в каталог, указанный после ключа
-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 опции исходный_файл.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
- 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-анимации с потерей качества:
gifsicle -03 --lossy=80 -o оптимизированный_файл.gif исходный_файл.gif
- Для указания степени сжатия нужно изменить значение параметра
–lossy=XX
.
Подробная информация по работе с утилитой:
gifsicle --help
Популярные способы использования утилиты:
- Оптимизация одиночного изображения:
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
Популярные способы использования утилиты:
- Оптимизация одиночного изображения:
jpegtran -copy none -optimize -outfile оптимизирофанный_файл.jpg исходный_файл.jpg
- Удаление метаданных изображения производятся при помощи ключа
-copy none
.
- Оптимизация и преобразование в прогрессивный JPEG:
jpegtran -copy none -optimize -progressive -outfile оптимизирофанный_файл.jpg исходный_файл.jpg
Подробная информация по работе с утилитой:
jpegtran --help