Оптимизация изображений
Форматы изображений
Изображения могут содержать килобайты лишней информации. Это различного рода комментарии и избыточная цветовая палитра.
Поэтому важно правильно выбрать выходной формат изображения и метод сжатия.
Для фотографий лучше всего подойдет формат 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 | ||||||||||||||||||
|
| ||||||||||||||||||
| Рисунок в векторе 200х150 пикселей | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Не оптимизированный для web | Оптимизированный для web | ||||||||||||||||||||||||
|
| ||||||||||||||||||||||||
Размеры изображений
Следует помнить еще об одной распространенной ошибке. На многих сайтах используются изображения с неверно указанными размерами. Чаще всего, они меняются прямо в стилях. Чтобы показать, насколько важно указывать верные размеры, проведем небольшое исследование.
Самый часто встречающийся пример: в маленькое поле вставляют большое изображение, а потом искусственно уменьшают его размер с помощью стилей. Вот как это выглядит:
| Размер: 66.8 КБ | |
|---|---|
| Как выглядит на сайте (200х150 пикселей) | Как выглядит на самом деле (400х300 пикселей) |
 |
 |
Давайте теперь оптимизируем фотографию по методу, описанному в начале статьи и предоставим картинку нужного разрешения.
| Размер: 12.7 КБ | |
|---|---|
| Как выглядит на сайте (200х150 пикселей) | Как выглядит на самом деле (200х150 пикселей) |
|
|
|
По сравнению с первоначальным, размер картинки уменьшился в 5 раз! Улучшения на лицо.
Краткий итог: если вы хотите, чтобы ваш сайт загружался быстрее, в первую очередь оптимизируйте ваши изображения.
- Выбирайте правильный формат для сохранения, в зависимости от типа изображения.
- Постарайтесь максимально сжать изображение, не забывая о сохранении качества.
- Используйте на сайте изображения с правильными размерами.
- Указывайте правильные пропорции для изображения в стилях.