Сжатие картинок на сервере
Опубликовано: 11.10.2017
Уроки Gulp.js #4 | Работа с плагинами для картинок.image-resize,imagemin,img-retina,imacssОказывается картинки на ваших сайтах весят больше, чем положено. Происходит это по причине не оптимальных алгоритмов сжатия с помощью различных программ. Кстати, фотошоп File->Save for web довольно хорошо оптимизирует изображение. А вот ACDSee и уж тем более php-библиотеки типа GD дают далеко не оптимальный результат.
Кроме того, в изображении содержится дополнительная текстовая информация: дата снимка, параметры съемки, модель фотоаппарата и т.д. Пускай это 1%, но зачем это загружать пользователю.
Все ниже перечисленное относится к сжатию без потери качества. Т.е. картинка визуально те теряет качества.
Как сжать картинки сайта за один клик
Примеры
Одна из этих картинок весит 1.7 кб, другая 2.3 кб
Одна из этих картинок весит 32 кб, другая 42 кб
Для чего это нужно?
Для того, чтобы ускорить загрузку страницы, особенно для мобильных устройств (пост о мобильниках будет позже). Ну и место на диске не у всех резиновое.
Плагин Autoptimize. Правильная настройка плагина и оптимизации скриптов и стилей
Например, для этого поста , где половина фоток была оптимизирована Фотошопом, сжатие дало 5%, вроде бы не так много, но в абсолютном значении это 250кб, что уже хорошо.
И еще я заметил, старые фотки от первых цифровых камер или старые сканы сжимаются на 50%. Хотя внешне эти фотки выглядят и так сжатыми до предела.
С чего начать?
Сжатие производится с помощью библиотек, которые нужно установить на сервер
для jpg: Jpegoptim
установка apt-get install jpegoptimдля png: OptiPNG
установка apt-get install optipngдля gif: gifsicle
установка apt-get install gifsicleКак сжимать
Из консоли запускаем
jpegoptim /path_to_img/foto.jpg --strip-all optipng /path_to_img/foto.png gifsicle --batch -O2 /path_to_img/foto.gifЕсть команды для сжатия всех картинок в директории, но всё равно ручками замучаешься. Поэтому процесс нужно автоматизировать. Вообще, вся затея ниже имеет смысл, если у вас десятки сайтов и десятки тысяч изображения.