Оптимизация изображений для web-страниц.

Статья в разработке.

Зачем это нужно:
1. Ускоряет загрузку страниц пользователями.
2. Снижает потребляемый пользователями трафик.
3. Снижает необходимое дисковое пространство, требуемое под хранение изображений.

В этой статье мы рассмотрим, как правильно оптимизировать изображения, не потеряв при этом их качество.

Размер изображения
Размер файла
Форматы файлов
JPEG
GIF, PNG

Размер изображения

Ширина и высота изображения не должны быть слишком большими.

Не рекомендуется на страницу, особенно где есть ещё какой-то текст, помещать изображение больше чем 800х600. Слишком широкие изображения портят страницы, где они расположены. И просматривать такие страницы не удобно, а если на них ещё есть текст, то его тоже неудобно читать, так как страница по ширине из-за большого изображения может не помещаться на экране монитора. (Не забывайте, что разрешение вашего монитора, часто не совпадает с разрешением монитора пользователя, просматривающего ваше изображение.)

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

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

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

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

Кроме того, размер изображения влияет на размер файла.

Размер файла

От чего зависит размер файла?

От размера изображения.

От выбранного сжатия изображения.

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

Форматы файлов

Предпочтительные форматы файлов изображений, предназнаяенных для web-страниц, являются GIF, PNG и JPEG.

Использовать другие форматы, не стоит, так как большинство из них не умеют показывать браузеры. Формат BMP тоже использоват не стоит, не смотря на то, что его «любит» Windows. По той простой причине, что он имеет слабые алгоритмы сжатия, обычно файл с изображением в формате BMP неоправданно велик.

JPEG

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

Минусом этого формата является то, что он не имеет прозрачности и анимации. Что, кстати, не часто нужно.

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

GIF, PNG

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

Градации цвета, также определяются как отдельные цвета. Поэтому изображение с антиальязингом (сглаживанием), например, для букв, потребует больший размер.

24 ноября 2005 (Обновление: 22 сен 2006)