Мир – Internet уже достаточно давно и прочно вошел в наши дома и офисы,
предоставляя все больше и больше возможностей для работы, творчества и
отдыха. Как и на заре формирования всемирной паутины, так и в наши дни,
единственным наиболее стабильным средством отображения информации в
среде WEB является язык разметки гипертекста или HTML. Считается что,
реализовав 3 основные задачи – дизайн, навигацию и материалы, можно
выпускать сайт, что называется «в люди». Данный цикл статей посвящен
как WEB графике в целом, так и 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
оптимизируется уменьшением количества цветов, но не простым сокращением
их количества в палитре, а согласно специальному алгоритму, который
позволяет сохранить выходное изображение похожим на оригинал.
Еще
одна проблема, которую не очень качественно решают дорогие графические
пакеты - это изменение размеров изображений малого разрешения.
Алгоритмы, применяемые в этих пакетах, просто не рассчитаны на работу с
такими файлами. В результате, снимок получается несколько мутнее, чем
хотелось бы.
Читатель: Хм, в таком случае, на какой вес всей странички следует ориентироваться и чем это обусловлено?
Лектор: Подавляющее
большинство пользователей стран СНГ и России пользуются обычным
модемом, подключаемым к телефонной линии – Dial Up (звонилка).
Пропускная способность, в данном случае, даже при наличии хорошей
линии, как привило, не превышает 6 килобайт в секунду. Т.е. решающим
фактором все еще остается время полного развертывания странички в
браузере пользователя.
Принято
считать, что среднестатистический пользователь согласен ждать около 10
секунд для загрузки неизвестного ему сайта. Исходя из выше сказанного,
получаем среднестатистический объем странички 50-60 Кбайт (10 секунд
умножаем на 6 Кб). Это вес HTML-файла, графики и скриптов, которые
будут загружены на 1-й страничке. Авторы: Усов А.А., Голышев С.В.
|