Оптимизация изображений

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

Графика нередко является одной из самых «тяжелых» составляющих web-страниц с точки зрения размера данных. Это означает, что ее размер напрямую влияет на скорость загрузки страницы. Влияние оказывает как размер передаваемых данных, так и количество элементов (кол-во запросов к серверу). Оба эти значения желательно минимизировать.

Минимизация размеров файлов с изображениями

Разумеется, в зависимости от изображения, следует подбирать наиболее подходящий формат.

Для многоцветных сложных изображений содержащих градиенты, например, фотографий, в большинстве случаев подойдет JPEG с качеством «на глаз». Обычно я увеличиваю степень сжатия для каждого изображения до тех пор, пока не начинают появляться заметные артефакты или цветовые искажения.

Для более простых изображений, содержащих большие области одного цвета (т.н. «векторные изображения») или изображений с малым количеством цветов лучше использовать PNG, т.к. этот формат показывает отличные результаты сжатия без искажений. В случае же, если нужна прозрачность, особого выбора и нет: GIF, PNG. Первый я считаю устаревшим, поэтому всегда использую PNG. В любом случае, никогда не помешает провести сравнение и выбрать из этих двух вариантов наиболее оптимальный. В большинстве случаев этих двух форматов хватит.

Но это еще не все

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

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

Хочу рассказать о простом инструменте, который является «комбайном» и использует сразу множество различных утилит, выбирая наиболее эффективный вариант для каждого конкретного изображения. Любой набор графики с помощью него можно оптимизировать в один клик.

Программа FileOptimizer

Оптимизация графики

Достаточно перетащить необходимые файлы и нажать на кнопку «Optimize all files»

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

Размер файлов:
До оптимизации: 966 Кбайт
После оптимизации: 800 Кбайт

Как видно на скриншоте, FileOptimizer позволил сэкономить 16% от объема всех файлов проекта, что составило около 166 Кбайт. По-моему отличная экономия для одного клика и пары минут ожидания!

Скачать программу FileOptimizer можно здесь.

Следующим шагом клиентской оптимизации может быть уменьшение количества запросов к серверу, за счет уменьшения количества файлов с изображениями. Это можно сделать применив технику CSS-спрайтов. Если кратко, то изображения склеиваются в одно или несколько больших изображений. Нужная часть отображается с помощью CSS-свойства background-position: X Y;