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

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

Для фотографий лучше всего подойдет формат JPG. При сохранении укажите качество 60 из 100 или 8 из 12, в зависимости от заложенных стандартов в графический редактор. Самый простой способ подготовить фотографию к размещению на сайте: пережать ее в Photoshop. Откройте вашу фотографию в Photoshop и нажмите одновременно комбинацию клавиш Ctrl + Alt + Shift + S. В появившемся окне, выберите слева формат "JPEG"и профиль "High". Нажмите "Сохранить". Вот и все.

Для рисунков в векторе и просто маленьких изображений (меньше, чем 10х10 пикселей) лучше всего подходит формат PNG или GIF. Программа Color quantizer позволит дополнительно уменьшить размер выходного изображения. Она умеет вырезать ненужные заголовки и лишние цвета из палитры, что позволяет серьезно уменьшить размер изображения. Вам будет достаточно указать, сколько цветов использовать при сохранении изображения. Это число должно быть кратно 2. Меньше цветов - меньше размер изображения. Нет никакого смысла хранить информацию о 256 цветах, если в изображении, например, всего 6 цветов.

Ниже приведена таблица, которая позволяет наглядно убедиться в справедливости вышесказанного:

Фотография 200х150 пикселей
Не оптимизированная для web	Оптимизированная для web
Пример Формат Размер JPG 39 КБ PNG 63.6 КБ	Пример Формат Размер JPG 12.7 КБ PNG 21.9 КБ

Рисунок в векторе 200х150 пикселей
Не оптимизированный для web	Оптимизированный для web
Пример Формат Размер JPG 11.6 КБ PNG 9.29 КБ GIF 4.89 КБ	Пример Формат Размер JPG 4.74 КБ PNG 1.31 КБ GIF 2.06 КБ

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

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

Размер: 66.8 КБ
Как выглядит на сайте (200х150 пикселей)	Как выглядит на самом деле (400х300 пикселей)

Давайте теперь оптимизируем фотографию по методу, описанному в начале статьи и предоставим картинку нужного разрешения.

Размер: 12.7 КБ
Как выглядит на сайте (200х150 пикселей)	Как выглядит на самом деле (200х150 пикселей)

По сравнению с первоначальным, размер картинки уменьшился в 5 раз! Улучшения на лицо.

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

• Выбирайте правильный формат для сохранения, в зависимости от типа изображения.
• Постарайтесь максимально сжать изображение, не забывая о сохранении качества.
• Используйте на сайте изображения с правильными размерами.
• Указывайте правильные пропорции для изображения в стилях.