Обзоры, статьи, исследования



Оптимизация графики для веб-страниц


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

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

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

В случае сжатия без потерь информации (Lossless data compression) сохраняются все детали изображения. Это означает, что закодированная информация может быть восстановлена с точностью до бита.

Сжатие данных с потерями (Lossy compression). Закодированная информация может значительно отличаться от оригинального файла, но незначительно отличаться для человеческого глаза, имея при этом значительно меньший вес. Недостатки изображений, причинённые сжатием с потерями, которые заметны для человеческого глаза, известны как артефакты сжатия. Артефакты сжатия снижают чёткость на границах цвета.
Дополнительная информация о сжатии:

Русскоязычный сайт о разных методах сжатия данных
Lossless Data Compression
Graphics: Use Lossy Compression for Smaller GIFs and PNGs

2. Битовая глубина (глубина цвета, качество цветопередачи, битность изображения)

Битовая глубина выражает количество цветов доступно в цветовой палитре изображения. Это не означает, что все цвета должны присутствовать в изображении, а лишь возможность их использования. Для полутоновых изображений (grayscale images) битовая глубина выражает количество доступных градаций тени. Изображения с более высокой битовой глубиной могут иметь большее количество теней и цветов.

Сравнительная характеристика

Следующая таблица иллюстрирует различные типы изображений в зависимости от битовой глубины
Bits Per Pixel Number of Colors Available Common Name(s)
1 2 Monochrome
2 4 CGA
4 16 EGA
8 256 VGA
16 65536 XGA, High Color
24 16777216 SVGA, True Color
32 16777216 + Transparency
48 281 Trillion

Источник: Bit Depth

Человеческий глаз способен различить 10 миллионов цветов, поэтому нет необходимости использовать изображения с битовой глубиной больше 24.

Советы:

Для форматов, использующих индексированную палитру - PNG, GIF, снижение битовой глубины влияет на уменьшение размера файла. Однако при сохранении файлов с индексированными адаптивным методом палитрами следует учесть, что это часто дает незначительные, но тем не менее нежелательные перемены в цвете. Кроме того, использование опции Dithering часто может увеличить, а не уменьшить размер файла.
При работе над уже проиндексированным изображением, достаточно подправить цвет фона и основных цветов, а также цветов, которыми залиты большие однородные области.
При использовании сглаженных шрифтов, количество цветов изображения возрастает. Поэтому стоит попробовать убрать сглаживание с целью уменьшения размера файла (в основном речь идёт о баннерах, где минимальный размер файла играет ключевую роль).

Особенности различных графических форматов

При порезке макета на слайсы (slices) важно выбрать наиболее оптимальный формат. Зачастую это определяется экспериментальным путём, но зная особенности различных форматов, можно быстрее определиться с выбором формата.

В компьютерной графике в целом применяется множество различных графических форматов, но лишь три из них нашли массовое применение в Веб – это растровые форматы GIF, JPEG, PNG. Все эти форматы позволяют оптимизировать размер изображения за счёт сжатия. Однако алгоритмы сжатия эти форматов различны и соответственно, различны сферы их применения. Также различаются цветовые модели, разная поддержка прозрачности изображения и т.д.
Graphics Interchange Format (GIF)

GIF (Graphics Interchange Format) – использует алгоритм сжатия LZW, который значительно уменьшает размеры исходного фала за счёт смешения сходных оттенков в один. Формат использует индексированную палитру с 256 цветами, что ограничивает применения этого формата для truecolor-изображений. Наиболее существенное ограничение по сравнению с PNG состоит в том, что GIF корректно сжимает только горизонтальные одноцветные области.

Формат GIF также имеет 1-битовую прозрачность (пиксель либо прозрачный на 100%, либо непрозрачный).

Также важной особенностью является чересстрочная развёртка или постепенная загрузка (interlace). Вначале отображаются 1,5, 10 строки изображения, затем 2,6 11 и т.д. Данная техника ускоряет взвод изображения при ограниченной полосе пропускания. Однако на сегодняшний день от использования этой опции лучше отказаться в пользу уменьшения размера файла.

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

Оптимизация GIF-файлов:

Лучше не использовать опцию interlace.
Эксперименты по понижению битовой глубины (читайте далее в статье) весьма эффективно влияет на размер файла.
Чтобы убрать ненужный фон из файла GIF, исключите цвета в которых больше не нуждаетесь (при редактировании файла).
Учтите, что GIF эффективно сжимает горизонтальные одноцветные области. Вертикальных одноцветных областей старайтесь избегать или используйте PNG.
Об специфике оптимизации GIF-анимации читайте статью Optimizing Animated GIFs.

Joint Photographic Experts Group (JPEG)

JPEG (Joint Photographic Experts Group) — графический стандарт, созданный на основе одноименного алгоритма сжатия изображений с потерей качества.

Поддерживает 24-битные полноцветные изображения (full-color images) и 8-битные черно-белые полутоновые изображения (grayscale images).

Степень сжатия при сохранении в графическом редакторе выражают в условных единицах от 1 до 100, или от 1 до 10 (в зависимости от редактора). При сильной компрессии (сжатии) изображения проявляется наиболее неприятный недостаток формата JPEG – артефакты на границах контрастных элементов изображения и прямоугольные поля одного цвета в одноцветных областях изображения.

В связи с 24-битовой глубиной изображений, формат обеспечивает поддержку более 16 миллионов цветов и прекрасно подходит для сохранения фотографий, а также картинок с большим количеством полутонов, градиентов, бликов и других эффектов.

Советы по оптимизации JPEG-изображений:

Для снижения количества артефактов следует избегать обширных одноцветных участков
С наименьшей потерей качества сжимаются фотографии с разрешением 150-300 dpi
Применение незначительного размытия, использование сглаженных шрифтов, уменьшение насыщенности и контраста в разумных пределах при оптимальном качестве изображения также может значительно уменьшить размер результирующего файла.

Дополнительная информация по JPEG:

Expert Optimization: Five Tips for Optimizing JPEGs in Photoshop CS2
Графика в веб-дизайне
Официальный сайт JPEG
Оптимизация JPEG. Часть 1, Часть 2, Часть 3.

Portable Network Graphics(PNG)

PNG (Portable Network Graphics) – формат, использующий сжатие без потерь. Был создан для замены формата GIF, не требует лицензии для использования. Есть два режима хранения цветов – с 24-битовой глубиной цвета и 8-битовой. Файлы формата PNG-24 сохраняют абсолютно все детали, хотя и имеют очень большой вес. В файлах формата PNG-8, как и в GIF, используется индексированная палитра, причем формат одинаково хорошо сжимает и вертикальные области, и горизонтальные.

Поддерживает, как и GIF, чересстрочную развёртку, однако в отличие от GIF, она двумерная. Единственное преимущество GIF перед PNG состоит в поддержке анимации - PNG может хранить лишь одно изображение в одном файле.

Главное же преимущество PNG – полная поддержка прозрачности за счёт 8-битовой прозрачности (использование альфа-канала).Альфа-канал, также известный как маска-канал, - это способ объединить переходную прозрачность с изображением.

Все современные браузеры корректно работают с PNG (включая IE7). Для поддержки 32-битной (полной) прозрачности картинки формата PNG в IE6 есть несколько способов, обзор которых планирую опубликовать в ближайшее время.

Купить диплом образца 2014 смотрите на originall-diploma.com.