Оптимизация препятствует эволюции. (Алан.Дж.Перлис)

Советы по оптимизации изображений для более быстрой загрузки сайтов

Главное меню » Статьи » Советы по оптимизации изображений для более быстрой загрузки сайтов

29.07.2018

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

На любом среднем сайте большинство переданных данных связаны с файлами изображений. Например, загрузка первой страницы вещательной компании составляет 1,4 МБ данных, из которых 0,9 МБ — файлы изображений. Другой пример: первая страница другого сайта насчитывает 365 КБ данных, из которых 284 КБ приходится на изображения.

Поэтому быстрый и простой способ ускорить загрузку вашего сайта — это оптимизация изображений. Пользователи Linux могут легко сделать это, используя программы optipng и jpegoptim, которые доступны в большинстве дистрибутивов Linux. После установки программ откройте консоль и перейдите в каталог, где находится ваш веб-сайт, например cd /var/www/. Затем запустите следующие команды, чтобы автоматически искать все файлы png и jpeg в каталоге и его подкаталогах и оптимизировать их на месте:

find . -iname '*.png' -print0 | xargs -0 optipng -o7 -preserve
find . -iname '*.jpg' -print0 | \
 xargs -0 jpegoptim --max=90 --strip-all --preserve --totals

Оба optipng и jpegoptim работают без потерь, что означает, что качество видимого изображения не будет уменьшаться, даже если размеры файлов уменьшатся. Кроме того, у jpegoptim также есть опции для сжатия с потерями, что означает, что качество видимого изображения может быть немного уменьшено, но обычно потеря качества очень мала, но размер файла большой. В нашем примере выше используется опция -max = 90, которая уменьшит качество изображения JPEG до 90 для изображений, которые находятся над ним. Это довольно безопасно, так как уровень качества 90 все еще очень высок, и ни один посетитель веб-сайта не может обнаружить какие-либо дефекты изображения. Если требуется большее сжатие, лучше экспериментировать, например, используя Gimp и Save for web с предварительным просмотром в реальном времени. В команде jpegoptim опция -strip-all будет удалять любые метаданные, включая Exif-данные из изображений. Для веб-сайтов метаданные JPEG, скорее всего, не нужны, поэтому предпочтительным решением является их удаление. Если администратор сервера хочет автоматически оптимизировать все изображения на сервере (например, на серверах andreyex), создайте сценарий с содержимым:

#!/bin/bash
echo `date` >> /root/optipng.log
find /var/www/ -mtime -2 -iname '*.png' -print0 | \
 xargs -0 optipng -o7 -log /root/optipng.log -preserve
echo `date` >> /root/jpegoptim.log
find /var/www/ -mtime -2 -iname '*.jpg' -print0 | \
 xargs -0 jpegoptim --max=90 --preserve --totals >> /root/jpegoptim.log

Затем сделайте это в cronjob, добавив строку в cron как:

# m h dom mon dow command
0 1 * * * /root/optimize-images.sh

С помощью этого сценарий будет запускаться каждую ночь в 01:00, и он найдет все изображения PNG и JPEG, которые были созданы или изменены в течение последних двух дней, а затем он будет оптимизировать их на месте и сохранять все остальные файлы. Exif и метаданные не разделяются, так как в этом случае мы не можем быть уверены, что все изображения, хранящиеся в папках веб-сайтов, предназначены только для просмотра веб-сайтов.

С версии jpegoptim v1.3.0 доступна новая опция ‘–all-progressive’, которую рекомендуется использовать, поскольку изображения в формате JPEG будут загружаться постепенно и, таким образом, обеспечить лучший визуальный опыт конечного пользователя во время загрузка страницы.

Если у сервера есть общедоступная папка с возможностью загрузки, может быть хорошей идеей уменьшать изображения для использования в Интернете, так как изображения 8Mpix, непосредственно загружаемые с цифровой камеры, слишком велики для любого разумного использования в Интернете. Чтобы автоматически масштабировать все изображения в каталоге до более длинного края с максимальным значением 1000 пикселей, запустите Mogrify (часть GraphicsMagic):

mogrify -resize "1000x1000>" *.jpg

Существуют и другие программы, такие как pngcrush и jpegtran, но в наших тестах они хуже, чем optipng и jpegoptim. Однако кажется, что есть также некоторые возможности для улучшения этих инструментов, например, служба Yahoo Smush.it может лучше выполнять работу, в частности, при оптимизации PNG с небольшим размером файла . Еще большее сжатие для файлов PNG может быть достигнуто с помощью службы TinyPNG , но оно работает с потерями и, следовательно, изображения могут иметь видимые дефекты. В большинстве случаев команды optipng и jpegoptim выше будут делать отличную работу.

Однако остается один вопрос: почему не все редакторы изображений имеют превосходные функции оптимизации, встроенные в первую очередь?

CSS спрайты, встроенные изображения и глиф-шрифты

Если у вас есть несколько небольших изображений, вы можете объединить их в спрайты CSS с помощью GraphicMagick, используя следующую команду:

gm convert +append *.png sprite.png

Теперь sprite.png будет вертикально комбинированным изображением ваших изображений PNG. Результирующий размер файла будет меньше, чем сумма небольших изображений, и он также будет загружаться быстрее, потому что браузеру нужно сделать только один HTTP-обратный путь для извлечения файла.

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

Другой вариант — использовать глифовые шрифты, такие как Font Awesome. Они имеют дополнительное преимущество масштабирования до любого размера, так как файлы шрифтов являются векторной графикой. Если графический дизайнер умный, весь сайт может быть создан только с помощью трюков CSS и пользовательских шрифтов, возможно, только с двумя или тремя фактическими изображениями и, таким образом, быстро загружается. Это мы оставляем в качестве упражнения для наших читателей.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров поста: 12