Оптимизация изображений для сайта
 |
Недавно решил воспользоваться предоставляемым компанией Google сервисом, служащим для принятия web-администраторами мер по увеличению скорости доступа к сайту — PageSpeed Insights. Он автоматически анализирет указанную вами страницу (любую) вебсайта и предлагает решения, выполнив которые вы можете сократить время доступа к нему как со стационарных компьютеров, так и с мобильных устройств. |
Одним из решений для ускорения загрузки страниц вашего сайта, предлагаемым данным сервисом, является «оптимизация изображений» с целью уменьшения их размера без существенной потери визуального качества. Такая оптимизация позволит улучшить скорость доступа к сайтам для тех клиентов, кто пользуется медленными каналами, и позволит сэкономить тем, кто имеет дорогой тариф от своего провайдера на объем скачиваемой информации.
Сам Google предлагает воспользоваться программами Jpegopt — для оптимизации JPG изображений, и OptiPNG — для оптимизации PNG изображений и служащая также для конвертирования изображений формата BMP, GIF, PNM и TIFF в PNG.
Итак, Jpegopt – утилита для файлов формата jpeg/jfif, которая обеспечивает выполнение оптимизации без потери качества, основанной на методе таблицы Хоффмана, и «с потерями», при выборе установок на максимальное сжатие. Сайт проекта.
Во FreeBSD порт утилиты находится по пути:
# cd /usr/ports # make search name=jpegoptim Port: jpegoptim-1.3.0 Path: /usr/ports/graphics/jpegoptim Info: Utility to optimize jpeg files Maint: ehaupt@FreeBSD.org B-deps: jpeg-8_4 R-deps: jpeg-8_4 WWW: http://www.kokkonen.net/tjko/projects.html#jpegoptim
Установка проста и заключается в следующем:
# cd /usr/ports/graphics/jpegoptim # make config ===> No options to configure # make install clean
Все доступные опции вы можете узнать из: man jpegoptim.
Пример использования:
# jpegoptim --all-progressive --strip-all -fn /home/max/*.jpg /home/max/DSC_8402.jpg 4000x3000 24bit N [OK] 3415739 --> 3192457 bytes (6.54%), optimized. /home/max/DSC_8403.jpg 4000x3000 24bit N [OK] 3412139 --> 3189137 bytes (6.54%), optimized. /home/max/cutecat.jpg 1920x1200 24bit N JFIF [OK] 711712 --> 660912 bytes (7.14%), optimized. /home/max/sleepy_cat.jpg 1024x640 24bit N Adobe JFIF [OK] 548154 --> 488465 bytes (10.89%), optimized.
где:
--all-progressive— все выходные файлы будут оптимизированы в прогрессивный jpeg;
--strip-all— удаляет все маркеры комментариев и exif в выходном файле (по умолчанию они сохраняются);
-fили--force— принудительная оптимизация, даже если выходной файл больше исходного;
-nили--noaction— не выполнять реальную оптимизацию, просто показать предварительный результат;
- удобно еще использовать ключ
-tили--totals— который выведет в конце итог отработки команды. Что-то вроде этого:Average compression (1866 files): 12.36% (40670k).
Использование утилиты полезно также для уменьшения общего веса всех jpeg файлов на вашем web-сервере. Если вы дадите эту команду на исполнение под root’ом на работающем web-сервере, не забудьте после ее выполнения переназначить права на оптимизированные файлы, как это было у исходных изображений, иначе они станут недоступны для, например, apache.
# ls -al /home/max | grep *.jpg -rw-r--r-- 1 root www 3192457 28 окт 16:19 DSC_8402.jpg -rw-r--r-- 1 root www 3189137 28 окт 16:19 DSC_8403.jpg -rw-r--r-- 1 root www 660912 28 окт 16:19 cutecat.jpg -rw-r--r-- 1 root www 488465 28 окт 16:19 sleepy_cat.jpg # chown www:www /home/max/*.jpg
Данную утилиту я также использую для уменьшения “веса” графических файлов на корпоративном файловом сервере, куда помимо документов выкладывается просто уйма фотографий. Расшаренный ресурс примотнирую к серверу на базе *NIX и работаю с ним, как с локальным. Шаблон для рекурсивной проверки таков:
# jpegoptim --all-progressive --strip-all -ft /mnt/samba/ГЗН/*/*/*/*/*/*/*.jpg
где звездочкой обозначен очередной уровень вложенности папок на windows сервере. И прямо скажу – результат очень впечатлил! В среднем – размер папок с фотографиями или иными графическими файлами уменьшился от 10 до 20 процентов!
Утилита OptiPNG предназначена для сжимания изображений формата PNG без потери качества. Она также может преобразовать изображения форматов BMP, GIF, PNM и TIFF в оптимизированный PNG и выполнить проверку целостности и исправлений полученных PNG изображений. Сайт проекта.
Во FreeBSD порт утилиты находится по пути:
# cd /usr/ports # make search name=optipng Port: optipng-0.7.4 Path: /usr/ports/graphics/optipng Info: An optimizer for PNG files Maint: tom@hur.st B-deps: png-1.5.17 R-deps: png-1.5.17 WWW: http://optipng.sourceforge.net/
Установка также не должна вызвать никаких затруднений. Она заключается в следующем:
# cd /usr/ports/graphics/optipng # make config
Отметьте необходимые вам пункты опций:
И завершите установку:
# make install celan
Все доступные опции вы можете узнать из: man optipng.
Пример использования:
# optipng -strip all -force -keep /home/max/*.png ** Processing: /home/max/0_b0b35_82134e75_XL.png 800×792 pixels, 4×8 bits/pixel, RGB+alpha Stripping metadata… Input IDAT size = 568263 bytes Input file size = 569169 bytes Trying: zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 502737 Selecting parameters: zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 502737 Output IDAT size = 502737 bytes (65526 bytes decrease) Output file size = 502794 bytes (66375 bytes = 11.66% decrease) ** Processing: /home/max/23fevral.png 500×250 pixels, 4×8 bits/pixel, RGB+alpha Stripping metadata… Input IDAT size = 160579 bytes Input file size = 160701 bytes Trying: zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 183853 zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 170171 zc = 9 zm = 8 zs = 1 f = 5 IDAT size = 160986 Selecting parameters: zc = 9 zm = 8 zs = 1 f = 5 IDAT size = 160986 Output IDAT size = 160986 bytes (407 bytes increase) Output file size = 161043 bytes (342 bytes = 0.21% increase) ** Processing: /home/max/499cb90562d0.png 1248×832 pixels, 3×8 bits/pixel, RGB Stripping metadata… Input IDAT size = 446081 bytes Input file size = 446249 bytes Trying: zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 461714 zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 435045 Selecting parameters: zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 435045 Output IDAT size = 435045 bytes (11036 bytes decrease) Output file size = 435102 bytes (11147 bytes = 2.50% decrease) ** Status report 3 file(s) have been processed. 0 error(s) have been encountered.
где:
-strip all— очистить любую информацию во всех полях, кроме tRNS;
-backupили-keep— сохранит бекап модифицируемого изображения;
-simulate— запуск в режиме симуляции, файлы не изменяются;
-force— принудительная оптимизация, даже если исходный файл имеет цифровую подпись dSIG или выходной файл получается больше исходного.
В результате работы утилиты мы получили вот такой результат:
# ls -al /home/max -rw-r--r-- 1 root www 502794 28 окт 16:19 0_b0b35_82134e75_XL.png -rw-r--r-- 1 www www 569169 28 окт 16:14 0_b0b35_82134e75_XL.png.bak -rw-r--r-- 1 root www 161043 28 окт 16:19 23fevral.png -rw-r--r-- 1 www www 160701 28 окт 16:14 23fevral.png.bak -rw-r--r-- 1 root www 435102 28 окт 16:19 499cb90562d0.png -rw-r--r-- 1 www www 446249 28 окт 16:14 499cb90562d0.png.bak
Не забудьте опять же, в случае необходимости, переназначить права на графические файлы.
Как итог: по результатам выполнения этих двух утилит, сервис от Google перестал указывать мне на то, что используемые мной изображения на данном сайте нуждаются в оптимизации. К тому же, я высвободил примерно 200 мегабайт из 1,2 гигабайта используемых под все мои графические файлы. :)
