Оптимизируем картинки на сайте

Конечно желательно заранее это делать. Можно использовать какие-нибудь онлайн-сервисы или вручную сжимать и оптимизировать всю графику которую собираетесь использовать на сайте. На практике же про это многие разработчики забывают, да и крупные проекты обычно редактируют и наполняют другие люди, далёкие от оптимизации и программирования. Дизайнер, редактор новостей или секретарша, которая выкладывает свежие фоточки в альбомы сайта вполне могут взять 10Мб фотки со своего крутого фотика и залить их на главную страничку сайта.  Да сайт будет и дальше работать, но тормоза будут всё время увеличиваться. Правильно настроенный кеш немного сгладит ситуацию, но с годами такой сайт превращается в неповоротливого монстра.

Как оптимизировать уже загруженные изображения на сайте?

Вот несколько вариантов:

  1. Можно сидеть вручную вытаскивать каждую картинку, сжимать её, обрезать под нужные размеры и обратно заливать. Но это очень долго, а если таких изображений сотни и тысячи?
  2. Еще как вариант можно использовать готовые плагины, для вашей cms. Мне лично понравился вот такой  бесплатный плагин reSmush.it там есть версия под WordPress, Drupal, Joomla и многие другие cms.
  3. Автоматизировать всё самому, написав скрипт который автоматически всё будет делать. На этом способе остановимся поподробнее ниже.

Если у нас есть доступ на хостинг или сервер где лежит наш сайт, всё можно сделать быстрее и без всяких дополнительных плагинов. К тому же плагины в большинстве своём платные и существуют не под все cms. А этот способ подойдет для любого, даже самописного сайта.

Уменьшаем размеры слишком больших картинок и сжимаем остальные без потерь в консоле linux

Для этого нам понадобятся несколько утилит, которые обычно уже есть на большинстве хостингов. Если это личный  сервер, то можно самому их установить. Например в CentOS это будет выглядеть примерно так:

yum -y install jpegoptim optipng ImageMagick

Это утилиты для пакетной обработки изображений из консоли Linux. Они созданы специально чтобы решить нашу проблему с картинками на сайте. Они очень просто в освоении и вся работа сводится  лишь к освоению парочки команд и нескольких параметров к ним.

Покажу на примере как это работает. Заходим на наш сервер\hosting через консоль и идём в папочку с изображениями нашего сайта. Для wordpress это будет что-то похожее на путь_до_сайта/www/wp-content/uploads/ . А если это, например Bitrix, то путь будет примерно такой путь_до_сайта/www/upload/iblock.

Далее переходим в папку с картинками и выполняем следующие команды:

Осторожно! Перезаписывает существующие файлы. Поэтому перед экспериментами обязательно сделайте бекап, на всякий случай.

find -name *.jpg -exec mogrify -resize '2000x>' '{}' \;

Эта команда уменьшает слишком большие файлы (больше 2000px).

А сейчас сжимаем изображения без потерь:

find -name *.jpg -exec jpegoptim --all-progressive --strip-all -t '{}' \;
find -name *.png -exec optipng -o3 '{}' \;

После такого наш сайт точно оживёт. Можно и дальше оптимизировать и сделать например запуск этих команд автоматически по cron каждый день. Для этого нужно будет создать вот такой скрипт и сохранить его:

#!/bin/bash
find /путь/до/папки/c/картинками -name *.jpg -ctime -1 -exec jpegoptim --all-progressive --strip-all -t '{}' \;
find /путь/до/папки/c/картинками -name *.png -ctime -1 -exec optipng -o3 '{}' \;

Чтобы не тратить драгоценные ресурсы сервера будет обрабатывать только изменённые за последний день файлы. Остаётся только добавить в крон (crontab -e ):

0 0 * * * /путь_до_нашего_скрипта/img-optim.sh >/dev/null 2>&1

Собственно такой подход гораздо эффективнее и совершенно бесплатный. К тому же так можно оптимизировать изображения абсолютно на любом сайте и совершенно не важна какая там cms используется.

ps: можно попробовать использовать консольную утилиту от разработчиков того же плагина про который я уже писал выше, но я её сам не пробовал, поэтому ничего сказать не могу. Если кто испытает опишите свой опыт в комментариях.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *