Оптимизация изображений. Как увеличить скорость загрузки страниц, часть вторая.

Прошлой статьёй я открыл цикл под названием «Ускоряем загрузку страниц сайта», призванный увеличить не только удобство пользователей, но и повысить позицию в выдаче поисковика.

Напомню, что во многих странах широкополосный интернет ещё является редкостью. Один человек посмотрел статистику в Google Analytics и сказал мне: «dial-up’ом пользуются всего 2%, зачем оптимизировать страницы?» Можете взглянуть в свою статистику и задуматься над тем, какая скорость у Unknown соединения.

Статистика скорости интернет-соединения посетителей русскоязычного сайта

Могу предложить вам ещё одну статистику, показывающую наиболее распространённую скорость доступа в интернет городов и федеральных округов России (москвичам открою страшную тайну: жизнь за МКАДом есть).

Самая распространенная скорость соединения по крупным городам и федеральным округам России

Теперь, когда я вас убедил, что оптимизировать страницы надо, вернёмся к теме сегодняшней статьи: оптимизация изображений. Почему начнём мы именно с оптимизации изображений? Всё просто: оптимизировать изображения легко, а эффект от этого очень хороший.

Для начала, взглянем на нашу страницу, не имеет значения статическая она или шаблон: она состоит из одного-двух больших изображений (шапка, баннер), и нескольких десятков маленьких (кнопки, элементы оформления).

Итак: как оптимизировать изображения?

1. Мелкие объекты необходимо делать в PNG.
Это, казалось бы, простой совет, который выполняют совсем не многие. Если вы с детства любите GIF– можете использовать его, но я сомневаюсь, что вы сможете привести хоть одно доказательство в пользу последнего, не считая того, что очень древние браузеры не поддерживают PNG. Я предлагаю вам взглянуть на изображения.

GIF: 7,57 КБ

PNG: 4,33 КБ

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

2. Ещё больше сжать PNG.
В интернете можно найти огромное количество программ для сжатия PNG. Из кроссплатформенных можно использовать OptPNG, с графическим интерфейсом – PngOptimizer или PNGout.

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

4. Крупные объекты и фотографии конвертировать в JPG.
Формат JPG позволяет сжимать большие изображения с потерей качества. В случае если мы работаем с фотографией, или, к примеру, шапкой сайта, изображение, сохранённое без потери качества, будет очень большим. Придётся искать компромисс между качеством и размером.

5. Необходимо сжимать JPG.
Сегодня существует много программ, использующих разные алгоритмы оптимизации. Я не буду останавливаться на их обзоре, это материал для отдельной статьи, но напомню, что оценка качества у разных программ разная, поэтому очень важно не быть обманутыми разработчиками.
Photoshop, между прочим, отлично сжимает JPG и многие программы стараются равняться на его систему оценки качества изображений. Хочу обратить ваше внимание на тот факт, что при качестве ниже 6 (51) по шкале оценки Photoshop, включается дополнительный фильтр, поэтому изображения с большим количеством мелких деталей следует оптимизировать с качеством равным или выше 6 (51).

6. Убрать из JPG всё лишнее.
Обычно файл JPG содержит много разной информации, часто совершенно не нужной в веб-дизайне. Это теги, оставленные различными приложениями, информация о дате создания и прочее. Удалить это можно с использованием утилиты jpgtran.
Утилита не обладает GUI, но её использование не представляет труда. Просто скопируйте исполняемый файл из архива в папку пользователя windows, туда же скопируйте изображение JPG. Зайдите в Пуск->Выполнить, запустите cmd. Пропишите:
jpegtran.exe –optimize in.jpg out.jpg
где in.jpg – входное изображение, out.jpg – имя выходного изображения, optimize указывает на то, что кроме удаления тегов, будет ещё использоваться и алгоритм Хаффмана.

До использования jpegtran: 300 КБ

Оптимизация изображений без потери качества.

После использования jpegtran: 264 КБ

7. Использовать базовые JPG вместо последовательных.
Разницу между базовыми изображениями и последовательными можно заметить при загрузке: базовое изображение загружается построчно, а последовательное отображается сначала плохого качества, затем лучше, затем ещё лучше.
В чём плюс такого метода? Если у вас большое изображение, то пользователям не придётся ждать, пока загрузится всё изображение, чтоб понять его суть: они поймут что нарисовано ещё в первом отображении.
Один из веб-разработчиков Yahoo! Stoyan Stefanov исследовал разные JPG изображения и пришёл к выводу, что последовательные изображения получаются размером меньше базовых в 95% случаях (при условии, что файл больше 10кб).
Для создания последовательного JPG файла, можно воспользоваться той же утилитой jpgtran, запустив её с параметром –progressive:
jpegtran.exe –progressive in.jpg out.jpg
В Photoshop, при сохранении изображения можно указать Progressive и изображение сохранится как последовательное.

Пример загрузки последовательного изображения

8. Не использовать масштабирование.
Согласитесь, будет глупо бороться за несколько десятков килобайт во всех предыдущих пунктах, а потом залить изображение с разрешением 300×300 на сервер и написать в html:
Несмотря на то, что сейчас всем понятна абсурдность подобного действия, многие продолжают масштабировать огромные фотографии размером более тысяч пикселей по высоте в маленькие превьюшки по сотне.

9. Сократить количество изображений (CSS Спрайты).
Я не предлагаю отказываться от какого-нибудь изображения: раз вы его используете, значит это вам надо. Я предлагаю объединять несколько изображений в одно. Что это даёт?
Логично, что если у нас есть 2 файла по 50кб, а объединив их в один, мы получим 100кб, то в обоих случаях загружаться будет 100кб. Любопытный момент состоит в том, что клиент за каждым файлом посылает запрос к серверу, сервер обрабатывает, возвращает файл и, если этих файлов много, то на посылку запроса и обработку в сумме уходит много времени.
Техника объединения нескольких файлов в один называется CSS Sprites и используется очень часто. Для описания этой техники необходимо писать отдельную статью. Пока я её не написал, я предлагаю вам попробовать разобраться самим с помощью этого инструмента.

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

10. Smush.it™
Инструмент от Yahoo!, отличный помощник в оптимизации изображений. Вы можете опробовать его тут: Smush.it. Просто загрузите шапку вашего сайта и оцените, сколько процентов вы сможете сэкономить только с помощью этого инструмента. Для того, чтоб использовать все возможности инструмента, вам необходимо установить YSlow от Yahoo! Как это сделать, описано в предыдущей статье цикла.

На этом я заканчиваю эту статью. Замечу, что на тему оптимизации изображений можно писать ещё много, я описал всего лишь ключевые моменты. Если у вас будут вопросы – задавайте, не стесняясь, и я отвечу на каждый из них.
В будущем планирую собрать ссылки по теме «Оптимизация изображений» в отдельной статье. Если у вас есть интересный материал на эту тему – можете прислать мне ссылку.

Related posts:

1. Как увеличить скорость загрузки страниц. Часть первая.
2. Семантическое ядро. Часть вторая: практика
3. Скорость топовых блоггеров. Ускорь свой сайт – 4.

Узнавай о новых статьях первым! Подпишись:

Понравилась статья? Поделись с друзьями!