Информационный портал
«SoftTime-INFO»

• Наши книги
• Форум PHP
• Форум Apache
• Форум "Регулярные выражения"
• Форум MySQL
• Форум "HTML+CSS+JavaScript"
• Форум "Разное"
• Учебник PHP
• Работа с Apache
• Справочник PHP
• Статьи о PHP
• Дистрибутивы
• Гостевая книга
• Задачи на PHP
• Downloads (web-приложения)
• Примеры PHP скриптов
• Примеры Javascript
• Примеры Action Script
• Типовые документы
• Раздел C++

Мир – Internet уже достаточно давно и прочно вошел в наши дома и офисы, предоставляя все больше и больше возможностей для работы, творчества и отдыха. Как и на заре формирования всемирной паутины, так и в наши дни, единственным наиболее стабильным средством отображения информации в среде WEB является язык разметки гипертекста или HTML. Считается что, реализовав 3 основные задачи – дизайн, навигацию и материалы, можно выпускать сайт, что называется «в люди». Данный цикл статей посвящен как WEB графике в целом, так и WEB анимации в частности. Но все по порядку.

Авторы:
Усов А.А.
Голышев С.В.

1. Статическая web графика. Общие понятия.

Лектор: существует очень много различных графических форматов, у каждого из которых есть свое предназначение. Какие же форматы подходят для такого частного случая, как WEB графика ?

Читатель: Я знаю JPG, GIF, PNG, …

Лектор: замечательно, какие форматы и почему вы могли бы использовать на вашей страничке?

Читатель: Скорее всего, для полноцветных картинок лучше использовать JPG – он и жмется хорошо и цветов в нем много. Для анимации остается только один формат – GIF.

Лектор: действительно, JPG является наиболее удачным решением во многих задачах, где не требуется наличие прозрачных областей в изображениях. Кстати, аббревиатура JPEG расшифровывается как Joint Photographic Experts Group — объединенная группа экспертов в области фотографии. JPG является форматом с 24-битной цветовой палитрой и вследствие этого он хорошо подходит для сохранения полноцветных изображений. Он способен нести как стандартную цветовую модель монитора (RGB), так и полиграфическую – CMYK.

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

Пожалуй, единственным недостатком данного формата является… его достоинство – а именно, способность к сильному сжатию. Проблема сводится к тому, что для понижения объема файла применяется методика «усреднения» цветов в области 8х8 пикселей. Весь файл разбивается на такие зоны- кластеры. Чем выше коэффициент сжатия, тем больше пикселов в кластере принимает соседнее или промежуточное с соседним пикселем значение цвета. Меньше цветов - меньше информации о цветовых компонентах, а следовательно, меньше и вес самого файла. Естественно, что это сжатие с потерей качества, хотя, используя определенные методики можно восстановить «побитый» компрессией файл. Вы, кстати, не упомянули формат PNG-24, как родственника JPG. Он обладает улучшенным алгоритмом сжатия, альфа-каналом прозрачности и гамма-коррекцией.

Альфа-канал прозрачности используется для определения прозрачных областей изображения. Гамма-коррекция — это автоматическая коррекция яркости изображения при воспроизведении на разных системах

Читатель: но GIF тоже имеет прозрачность, а еще он поддерживает анимацию. И почему, когда фотошоп сохраняет JPGшку, то чем больше коэффициент, тем лучше качество и меньше сжатие, и наоборот?

Лектор: GIF используется преимущественно тогда, когда изображение требует повышенной четкости (размытие и фрагментация - побочный эффект JPEG-сжатия) или когда требуется небольшая анимация стандартными средствами. Прозрачность у этого формата «битовая» (т.е либо прозрачный пиксель, либо нет), в отличие от PNG-24, у которого может быть 256 степеней прозрачности пикселя. С JPG в фотошопе, как и во многих других редакторах, все просто: при сжатии указывается не коэффициент сжатия, а степень качества изображения. Чем выше это значение - тем выше качество и больше вес.

Читатель: значит для предельного уменьшения веса картинки, нужно всегда выбирать самый минимально возможный коэффициент? А как понять, что этот коэффициент достаточен?

Лектор: Как правило, критерием выбора коэффициента служат 2 момента - это визуальное состояние изображения и требуемый объем файла. Если сжатие происходит в фотошопе, то сдвигаем ползунок в сторону уменьшения коэффициента качества, смотрим на состояние картинки и на показания объема сжатого файла внизу палитры.
Не стоит забывать про плагин фотошопа – Save for WEB. Он в состоянии не только помочь с оптимизацией, но и сам настроить изображение под определенный вес.

Читатель: Я использовал файл разрешением 200 точек на дюйм и размером 10х15 см. При публикации снимка в WEB он получился гораздо больше, чем 10х15 см! Когда я задал картинке размеры принудительно, то качество существенно упало.

Лектор: Действительно, HTML не оперирует сантиметрами или дюймами. Единственная действительная кванта изображения и HTML-разметки – это пиксель. Стандартное разрешение WEB – это разрешение вашего монитора, т.е. 72 точки на дюйм (dpi). Естественно, вы можете изменить это в свойствах экрана, установив разрешение 96 или даже 120 dpi. Но, тем не менее, на PC принято стандартным разрешение 72 dpi, а на MAC – 96 dpi.

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

Так будет если использовать тег img без атрибутов высоты и ширины. Если же задать эти атрибуты, то заданный размер изображения сохранится, но качество от этого действительно не улучшится. Дело в том, что при избыточном разрешении, а равно и при уменьшении размера картинок со стандартным разрешением, происходит интерполяция (пересчет размеров геометрии). Конечно же, у браузера нет таких вычислительных средств, какими обладает графический пакет, поэтому интерполяция происходит самым экономичным и быстрым способом со всеми вытекающими…

Читатель: Значит, когда я использую графику стандартного разрешения, то можно опустить атрибуты высоты и ширины, сэкономив на объёме кода?

Лектор: Экономия кода, в данном случае, обернется неудобствами для пользователя. Процессы загрузки HTML-кода странички и изображений, которые в ней используются, протекают несогласованно и, практически всегда, изображение загружается позднее. Если не использовать атрибуты ширины и высоты, то браузер не сможет узнать размеры изображения до его полной загрузки и, следовательно, не сможет правильно отформатировать содержимое страницы до того, как будут загружены все изображения. В подобном случае, по мере загрузки страницы ее форматирование будет меняться. Если же атрибуты указаны, то браузер сразу же расставит загружаемые изображения на нужные места. Еще один плюс атрибутов в том, что они позволяют сохранить правильное форматирование при отключенных изображениях. Не секрет, что в нашей стране многие пользуются этим приемом для ускорения загрузки страницы и для экономии трафика.

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

Лектор: Рынок программного обеспечения предоставляющего услуги подобного рода достаточно широк – это и плагины к графическим пакетам и независимые программы. Носителем графической информации в большинстве случаев остаются стандартные форматы типа JPG, GIF или PNG (PNG-8 и PNG-24). Как правило, уменьшение искажений при повышенном сжатии достигается путем применения различных алгоритмов обработки исходного материала. Для JPG можно применить так называемое «зональное усреднение» - это когда область изображения бьется не на кластеры фиксированной геометрии, а на зоны произвольного размера с общими и близкими цветовыми компонентами в зависимости от балла качества. PNG-8 и GIF оптимизируется уменьшением количества цветов, но не простым сокращением их количества в палитре, а согласно специальному алгоритму, который позволяет сохранить выходное изображение похожим на оригинал.

Еще одна проблема, которую не очень качественно решают дорогие графические пакеты - это изменение размеров изображений малого разрешения. Алгоритмы, применяемые в этих пакетах, просто не рассчитаны на работу с такими файлами. В результате, снимок получается несколько мутнее, чем хотелось бы. В качестве примера достаточно успешной реализации этих задач, можно взять Xat.com.image optimizer ( www.xat.com).

Читатель: Хм, в таком случае, на какой вес всей странички следует ориентироваться и чем это обусловлено?

Лектор: Подавляющее большинство пользователей стран СНГ и России пользуются обычным модемом, подключаемым к телефонной линии – Dial Up (звонилка). Пропускная способность, в данном случае, даже при наличии хорошей линии, как привило, не превышает 6 килобайт в секунду. Т.е. решающим фактором все еще остается время полного развертывания странички в браузере пользователя.

Принято считать, что среднестатистический пользователь согласен ждать около 10 секунд для загрузки неизвестного ему сайта. Исходя из выше сказанного, получаем среднестатистический объем странички 50-60 Кбайт (10 секунд умножаем на 6 Кб). Это вес HTML-файла, графики и скриптов, которые будут загружены на 1-й страничке.