Конечно желательно заранее это делать. Можно использовать какие-нибудь онлайн-сервисы или вручную сжимать и оптимизировать всю графику которую собираетесь использовать на сайте. На практике же про это многие разработчики забывают, да и крупные проекты обычно редактируют и наполняют другие люди, далёкие от оптимизации и программирования. Дизайнер, редактор новостей или секретарша, которая выкладывает свежие фоточки в альбомы сайта вполне могут взять 10Мб фотки со своего крутого фотика и залить их на главную страничку сайта. Да сайт будет и дальше работать, но тормоза будут всё время увеличиваться. Правильно настроенный кеш немного сгладит ситуацию, но с годами такой сайт превращается в неповоротливого монстра.
Как оптимизировать уже загруженные изображения на сайте?
Вот несколько вариантов:
- Можно сидеть вручную вытаскивать каждую картинку, сжимать её, обрезать под нужные размеры и обратно заливать. Но это очень долго, а если таких изображений сотни и тысячи?
- Еще как вариант можно использовать готовые плагины, для вашей cms. Мне лично понравился вот такой бесплатный плагин reSmush.it там есть версия под WordPress, Drupal, Joomla и многие другие cms.
- Автоматизировать всё самому, написав скрипт который автоматически всё будет делать. На этом способе остановимся поподробнее ниже.
Если у нас есть доступ на хостинг или сервер где лежит наш сайт, всё можно сделать быстрее и без всяких дополнительных плагинов. К тому же плагины в большинстве своём платные и существуют не под все 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: можно попробовать использовать консольную утилиту от разработчиков того же плагина про который я уже писал выше, но я её сам не пробовал, поэтому ничего сказать не могу. Если кто испытает опишите свой опыт в комментариях.