• Создание сайтов
  • Рекламные компании
  • Продвижение сайтов


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


Форматы изображений

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

Для фотографий лучше всего подойдет формат 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
ПримерФорматРазмер
JPG39 КБ
PNG63.6 КБ
ПримерФорматРазмер
JPG12.7 КБ
PNG21.9 КБ
Рисунок в векторе 200х150 пикселей
Не оптимизированный для webОптимизированный для web
ПримерФорматРазмер
JPG11.6 КБ
PNG9.29 КБ
GIF4.89 КБ
ПримерФорматРазмер
JPG4.74 КБ
PNG1.31 КБ
GIF2.06 КБ

Размеры изображений

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

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

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

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

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

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

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