Оптимизация скорости загрузки страницы 2: изображения
Дорогие друзья!
В продолжение к предыдущей статье про оптимизацию скорости загрузки страницы, в которой я описал основные правила оптимизации подключаемых файлов (CSS, JavaScript), я обещал написать про такой важный в оптимизации скорости загрузки страницы процесс, как оптимизация изображений. На самом деле, оптимизация изображений более продуктивна в плане оптимизации скорости загрузки страницы. Ведь, если CSS или JS-код имеют объем до 300 Кб в среднем, и подгружаются на страницу единожды, то изображения подгружаются на страницу в большем количестве, да и размер их, частенько поболее, чем размер самого большого JS-файла.
Но вернемся к самому вопросу оптимизации изображений. Наиболее часто используемые форматы изображений на сайте это PNG, GIF и в некоторых случаях JPG. каждого формата свои плюсы и минусы.
[nocrosspost]
Форматы изображений.
Например PNG поддерживает 24-битные цвета и прозрачность (интересная статья про использование PNG для web), но при этом в том же IE 6.* png-изображения содержащие участки с α-прозрачностью отображаются неправильно. А именно — область этих участков заливается серым цветом. Конечно это лечится с помощью AlphaImageLoader или iepngfix, но это дополнительный код, дополнительные внешние файлы, дополнительный геморой.
GIF славится малым размером файлов изображений. Изображения в формате JPEG содержат миллионы цветов, а изображения в формате GIF – не более 256. Это предтеча формата PNG, который решили заменить по причине давления со стороны Unisys и их патента на алгоритм LZW-сжатия, используемый в GIF. Основным его плюсом, лично для меня, является отсутствие проблем с α-прозрачностью. Так же стоит заметить что все таки в некоторых случаях файл PNG может иметь больший размер, чем файл GIF. Но, по большому счету, там где может быть использован файл GIF, можно смело использовать файл PNG. Хотя, в этом вопросе важное место занимают личные пристрастия.
Формат JPEG был создан для фотографий и других полноцветных изображений. Как уже было сказанно, JPG разрабатывался как средство для хранения изображений, имеющих большую глубину цвета (24 бита на пиксел, что обеспечивает 16,7 Мб возможных цветов). Еще одним важным параметром файлов JPG является схема их хранения. Различают две схемы — обычная и прогрессивная (progressive). Прогрессивная схема хранения такова, что при выводе таких изображений создается впечатление постепенного проявления рисунка на экране со все большим уточнением отдельных деталей. Высокое качество фото-изображений может обеспечить и формат PNG, в этом случае привычно легкий формат уступает JPG. Таким образом, не смотря на отсутствие поддержки α-прозрачности, фото-изображения в формате JPG до сих пор наиболее адекватный выбор.
 |
 |
| Фото в формате JPG. 22,8 Кб | Фото в формате PNG. 162,9 Кб |
Изображение сохранялось в обоих форматах в PhotoShop CS2 через правильное сохранение (Файл > Сохранить для Веб). Причем, очень интересный момент хотелось бы отметить. После обычного сохранения (Файл > Сохранить как) Размеры файлов были следующими:
JPG: 124,5 Кб
PNG: 161,7 Кб
То есть, после сохранения для Веб, JPG уменьшился в 5,5 раз, а PNG наоборот увеличился 1,1 Кб, а без включения прозрачности на 1,5 Кб. Копейки конечно, но иногда даже 1 Кб имеет значение.
Как видите подходя к выбору формата сохраняемого изображения, можно значительно снизить его размер, и как следствие скорость загрузки страницы.
PNG чанки. Избавляемся от мусора
Теперь давайте перейдем к такому увлекательному занятию, как очистка png-файлов от ненужной информации, которая занимает свое место, увеличивая размер файла. PNG-файлы хранят информацию в так называемых «чанках», и далеко не все эти чанки необходимы для отображения самого изображения. В большинстве случаев они вообще не нужны. Существует несколько программ позволяют удалить не нужные чанки из вашего PNG, уменьшив его размер в среднем на 16-30%.
Обзор программ прекрасно написан в моем любимом блоге, так что не буду повторяться. Но все же немного расскажу о результативности этих программ. В один прекрасный, пятничный день, я решительно скачал основные приложения, используемые в оптимизации графики и провел тест на производительность. Оговорюсь, что использовал я приложения для Win и имеющие графический интерфейс. После 2 часового тестирования (и за что мне только на работе деньги платят :)) ), результаты были следующие:
| Исходный PNG файл: 133,8 Кб
После обработки: |
 |
Как видно из приведенного эксперимента наилучшие результаты показала программа Riot (Radical Image Optimization Tool), это приложение сжало без потери качества PNG изображения в 15 раз, что действительно можно считать поразительным результатом. Ко всему прочему, с помощью этого приложения можно оптимизировать не только PNG, но и JPG/GIF-файлы. К сожалению, я пока что не измерял производительность приложений для очистки мета-данных JPG, но думаю результаты и по этому тестированию позволяют судить о том, что программа относится к разряду Must Have.
JPEG-метаданные. Зачистка ненужных данных
Как я уже говорил чуть раньше, если для элементов дизайна оптимальным выбором будет являться формат PNG, то для фото-изображений лучше всего подходит формат JPG. Фото изображения в формате JPG имеют меньший размер по сравнению с тем же PNG, но ведь нет пределу совершенства. Поэтому, даже правильно сохраненный JPG-файл можно немного подчистить. Дело в том, что JPEG-файлы содержат некоторое количество метаданных, которые включают:
- комментарии
- метаданные, нужные для приложения (например, для Photoshop)
- EXIF-информацию, например, от фотоаппарата, которая может содержать дату фотографии и даже небольшое превью или аудио-запись!
Эти пусть и не слишком объемные данные отнимают у вас дисковое пространство, а у ваших посетителей драгоценный трафик и нервы. Один из инструментов, который позволяет выполнять последнюю операцию, называется jpegtran. Ниже приведена характерная консольная команда, которая копирует исходное изображение, оптимизирует его и не добавляет никаких лишних метаданных:
01
> jpegtran -copy none -optimize src.jpg dest.jpg
Стоит заметить, что в последних версиях в конце используется синтаксис src.jpg > dest.jpg
Параметр -optimize позволяет jpegtran оптимизировать таблицы Хафмана (Huffman) и улучшать компрессию (без потери качества).
Тем, кто не дружит с консолью и предпочитает приложенияс интерфейсом могу посоветовать приложение JPG.Cleaner.2.6.
Нет пределу совершенства?
Ну и на последок, хочу предложиться Вам Smush.it – on-line сервис от Yahoo, который позволит Вам оценить, на сколько еще можно оптимизировать Ваше изображение.
Все приложения и изображения, описанные в этой статье вы можете скачать отсюда.
[/nocrosspost]
[/nocrosspost]
По теме
Уникальных посетителей темы: 6
“Так же стоит заметить что все таки в некоторых случаях файл PNG может иметь больший размер, чем файл PNG.” Иль очепятка, иль непонятка !:)
опечатка, спасибо за замечание – исправлю )))
Люди давайте уважать друг-друга… Мне кажется что автор правильно написал, ну можно было и помягче. P. S. Всех с новым годом, который уже наступил: )
АААааааа!!!!!!!!
Это самый прекрасный коммент во всем блоге!
И тебя с Новым годом, добрый человек! В сентябре то…
ну да, неплохой пост :). как думаете, завтра Арсенал победит манукунианцев ? з.ы. жаль по обычному телевидению не посмотришь… :( придётся идти в бар, где есть спутниковое
Да. Мне тоже нравится этот пост. Я его с душой писал)))
А по поводу Арсенала – не знаю. Но очень надеюсь, что ЦСКА сегодня обыграет Бешекташ. А потом Манчестер, а Потом, все таки отомстит Вольфсбургу.
Красно-Синий – самый сильный!
Автор молодец. Затронул тему до глубины. Кстати хочу тоже поделится некоторыми открытиями – Трахеобронхомегалия. Я сам в шоке
А у меня опытным путём победила PNGMonster, сделав все сервисы и программы, хотя она чуть дольше других работает.
Попробуй на своей тестовой картинке, интересен результат по сравнению с RIOT (до PNGMonster у меня тоже побеждал RIOT, который я попробовал с твоего комментария здесь: http://inforedesign.com/notes/byistraya-optimizatsiya-png/)