Пути оптимизации Web

Цели:






Знать определение "оптимизация".
Понимать необходимость оптимизации графики для Интернет.
Иметь представление о способах оптимизации графических JPEG-и GIFизображений.
Знать определение "дизеринг".
Понимать в чем сущность дизеринга.
Знать общие средства оптимизации и параметры оптимизации, специфические для
каждого формата.
Оптимизация - процесс выбора такого формата файла, его размера и цветовых
параметров, которые позволяют в максимально возможной степени сохранить качество
изображения, но при этом обеспечить высокую скорость загрузки его по сети.
Даже если не заниматься оформлением Web-страниц, велика вероятность того, что в
какой-то момент нужно будет представить свои работы на страницах WWW. А это значит,
что со всех точек зрения оправдано заранее разобраться в том, каким образом можно
вставить графику в HTML-документ (причем с требуемой эффективностью), в чем состоят
специфические ограничения Интернет и каким образом эти ограничения можно обойти.
Три главнейших обстоятельства, которые следует учитывать при разработке графики для
Web-страниц, это скорость и еще раз скорость. Нужно приложить все силы к созданию
графики, которая подгружалась бы по сети как можно быстрее, чтобы посетители узла не
были разочарованы графическим оформлением большей мере, чем проинформированы
или развлечены с его помощью. Скорость загрузки в основном, хотя и не полностью,
определяется размером графического файла, так что если добиться, чтобы размер
изображений на Web-странице был минимально возможным и свести к минимуму число
используемых цветов, то можно получить файл меньшего объема, быстрее подгружаемый
на броузеры посетителей узла.
Оптимизация графики
Графика для сайта в корне отличается от графики для полиграфии. Ее не должно быть
много. Ее надо применять только для стилевого оформления сайта и для улучшения
представления информации там, где это необходимо.
Большинство сайтов используют неоптимизированную графику, которая замедляет
открытие сайтов. При этом правильная обработка изображений может уменьшить
размеры графических файлов в 2-3 раза, а иногда и в 5-6 раз.
Для web-страниц очень важным является вопрос размера фотографии. Какого размера их
делать? Не будут ли они слишком долго грузиться? При оптимизации можно уменьшить
размер файла, но вряд ли стоит оптимизировать фотографию, не несущую смысловой
нагрузки. Самый первый этап оптимизации - выделение в фотографии главного (с
отбрасыванием всего остального) и акцентирование на иллюстрируемом элементе. Это
достигается при помощи операции кадрирования и нахождения наиболее выразительной
части, передающей смысл фотографии. После этой операции уже можно оптимизировать
изображение, и в этом случае оно действительно будет иметь наименьший размер.
А с размерами фотографий нужно придерживаться определенного компромисса - не
делать их слишком мелкими, на которых даже под лупой ничего не разглядишь, и не
делать их слишком огромными, чтобы время не растянулось в вечность. Хотя есть
исключения: правильно оптимизированная большая фотография может занимать время
пересылки, эквивалентное времени пересылки обычной фотографии и, наоборот, дурно
оптимизированный маленький рисунок будет грузиться до конца дней. Под обычной
фотографией понимается фотография размером примерно 250x300 пикселей и
занимающую порядка 6 -10 килобайт. Это не значит, что все фотографии должны иметь
такие размеры, но площадь фотографии должна быть ей эквивалентна. Эти рекомендации
относятся к "иллюстрирующим" текст фотографиям и не относятся к рисункам,
выполняющим функции элементов навигации.
Многие пользователи платят за время подключения к Интернет или за трафик — объем
скачанной информации. При этом они хотят, чтобы web-страницы как можно быстрее
загружались и занимали меньше места в килобайтах, чтобы соответственно меньше
платить. Сайты, которые оптимизированы для подобных задач, пользуются большей
популярностью таких пользователей.
Одним из самых объемных элементов web-страницы является графика — рисунки,
иллюстрации, декоративные элементы документа. Чем меньше объем графического
файла, тем быстрее изображение будет показано в браузере. Уменьшение объема
достигается снижением качества рисунка и управлением различными параметрами
графического формата. Снижение качества не должно доходить до того, что картинка
превращается в головоломку, в которой требуется понять, что же изображено на рисунке.
Поэтому перед публикацией веб-страницы, графику оптимизируют — подбирают такие
параметры графических файлов, чтобы они занимали меньше места при максимальном
сохранении качества изображений.
Графические изображения
Графические вставки являются наиболее объемными элементами обычных Web-страниц.
По этой причине большинство приемов оптимизации ориентировано именно на
изображения. В Интернете используются (в основном) два типа форматов хранения
графики: GIF(Graphics Interchange Format) и JPEG(Joint Photographic Experts Group) Оба
они имеют свои достоинства и недостатки и имеют немного различные области
применения. Если нужна точность сохранения каждого пиксела (точки изображения) и
ограничение на количество цветов не так уж важно, нужно использовать формат GIF.
Если же необходимо иметь в изображении больше чем 256 цветов, не используя никаких
технологий смешивания, придется остановиться на формате JPEG, обеспечив с помощью
подбора коэффициента сжатия оптимальное соотношение качества и байтового размера.
Видеовставки -- самый объемный элемент современных Web-страниц. Нужно стараться не
вставлять их прямо в документ (inline). Лучше вставить один из кадров в виде статичной
картинки и сделать ссылку на весь фрагмент. Кроме того, можно выбирать формат и
способ компрессии, достигая при этом оптимального соотношения размер / качество.
При сохранении изображений в файлах форматов GIF, JPEG и PNG можно указать ряд
параметров. Для каждого формата существует свой набор параметров. В Photoshop
имеются удобные средства оптимизации параметров файлов для их последующего
использования в Web-дизайне. Аналогичными средствами обладает и приложение Adobe
ImageReady (поставляемое в одном пакете с Photoshop), главное назначение которого
состоит в подготовке графики для Web. Критерий оптимизации: требуется получить файл
с графическим изображением возможно меньшего объема при достаточно высоком
качестве. На практике часто снижение объема файла в десятки и даже сотни раз не
вызывает сколько-нибудь заметного ухудшения качества изображения или, наоборот,
незначительное увеличение объема файла существенно повышает качество картинки.
Качество изображения определяется субъективно, на глаз, а вот объем файла — вполне
объективная характеристика, определяющая занимаемое место на диске и влияющая на
скорость передачи по линии связи и загрузки в Web-браузер.
Пути оптимизация GIF-изображений.
GIF-изображения можно оптимизировать несколькими способами:
Уменьшение количества цветов. Для большинства изображений, не являющихся
фотографиями, количество необходимых для воспроизведения цветов часто меньше 256.
Лишние цвета можно убрать из изображения, тем самым уменьшив его размер. Это
возможно потому, что GIF поддерживает размер палитры меньше 256 цветов. Количество
цветов в изображении выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем,
что для представления цвета используется всегда целое число бит, а приведенный выше
ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на
пиксель. При оптимизации количества цветов нужно ориентироваться на приведенный
выше ряд. Это позволит получить более качественную картинку.
Оптимизация палитры изображения. Палитра конечного изображения может быть
либо фиксированной, либо оптимизированной. В первом случае графический редактор
просматривает каждую точку изображения и подбирает ей ближайшую по цвету из
палитры. Этот способ дает самые худшие результаты с точки зрения верности
воспроизведения цветов. Этот способ применяется, в основном, для того, чтобы
изображения приемлемо выглядели на мониторах с малым количеством цветов (16, 256).
Обычно в этом случае пользуются палитрой Netscape (или безопасной палитрой),
состоящей из набора часто используемых цветов и их оттенков. Палитра Netscape
гарантирует, что изображения, использующие эту палитру, будут одинаково показаны
всеми броузерами. Во втором случае, когда используется оптимизированная палитра,
графический редактор вначале анализирует рисунок и составляет список всех
используемых в изображении цветов. Далее, на основании частоты появления цветов,
составляется палитра, которая называется оптимизированной. После этого, уже обычным
способом, просматривается рисунок, и цвет пикселя изменяется на ближайший из
палитры. Этот способ дает гораздо лучшие результаты, и именно его следует применять,
если нет иных причин для использования фиксированной палитры.
Оптимизация изображений с помощью дизеринга. При оптимизации конкретного
изображения задача состоит в том, чтобы выбрать наиболее оптимальное количество
цветов в палитре. Тут уместно сказать о способе увеличения количества используемых
цветов при их недостатке, т.н. дизеринг (Dithering). Например, есть 16 стандартных
чистых цветов, а нужен отсутствующий оранжевый цвет. В таком случае, можно
составить его из красных и желтых точек, разместив их в шахматном порядке. Издалека
покажется, что это сплошной оранжевый цвет. Это классический пример дизеринга. Его
использование при преобразовании изображений может дать очень хорошие результаты.
Но с точки зрения оптимизации размеров файла происходит совсем обратное. Дизеринг
может увеличить размер файла, причем довольно существенно. А все дело в методе
хранения изображения форматом GIF. Изображение перед сохранением на диске
подвергается сжатию методом LZW, а основная особенность этого метода заключается в
том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и
хуже всего - области, состоящие из набора разноцветных точек. Дизеринг же как раз и
основан на том, что получает недостающие цвета путем "перемешивания" точек разных
цветов. Поэтому к оптимизации при помощи дизеринга нужно относиться очень
аккуратно и по-возможности не использовать.
Стилизация изображения. Для уменьшения количества используемых цветов в
изображениях, содержащих фотографические сюжеты, возможно применение стилизации
фотографии. Для этого можно воспользоваться такими приемами, как тонирование
изображения и применение художественных фильтров, имитирующих рисунки.
Фотографии, обработанные таким способом, будут сжиматься лучше и требовать палитру,
содержащую менее 256 цветов.
Искажение размеров изображения. Этот метод оптимизации основан на искажении
размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо
подходит для рисунков, состоящих из элементов типа линий и однородных областей. При
помощи него удобно задавать пустышки на страницах, абзацные отступы, фиксировать
минимальную ширину (высоту) таблицы и делать другие полезные вещи. Методом
искажения очень удобно создавать графические разделительные линии. Достаточно
нарисовать ее сечение шириной (высотой) в один пиксель, а в HTML-документе указать
нужную ширину линии (или высоту, если линия вертикальная).
Фрагментарная оптимизация. Фрагментарная оптимизация применяется в случае, если
имеется некоторое большое изображение, содержащее сильно отличающиеся по
количеству цветов области. В этом случае изображение можно разрезать на фрагменты и
поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь
каждый фрагмент исходного рисунка оптимизируемтся отдельно. Для фрагментов,
содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых
цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в
формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом,
примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того,
изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться
параллельно. Хотя, если количество фрагментов превысит 10, то возможного
выигрыша не получится, т.к. каждый фрагмент должен будет хранить свою копию
палитры и служебной информации.
Оптимизация "прозрачных" изображений. Формат GIF позволяет сохранять
"прозрачные" изображения. На самом деле, GIF не поддерживает прозрачность в
изображениях (альфа-канал), он лишь позволяет назначить одному любому цвету в
палитре атрибут прозрачности. Когда броузер рисует на экране такой GIF, то встретив
"прозрачный" пиксель, он просто игнорирует его и не печатает на экране. Само по себе
это хорошо, но в случае использования метода сглаживания краев изображения (antialiasing) и последующего сохранения в формате GIF возникает проблема появления
ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне,
отличном от того, на котором происходил anti-aliasing. Это прямое следствие отсутствия
поддержки канала прозрачности форматом GIF. Единственным способом уменьшения
проявления этого эффекта является назначение прозрачным пикселям по цвету, близкому
к фону, на котором будет использоваться GIF и проведение anti-aliasing'а на этом же
фоне.
Использование чересстрочной развертки. Версия GIF89a позволяет сохранять файлы с
использованием чересстрочной развертки. При использовании этого способа строчки,
составляющие изображение, перемежаются, и при загрузке браузер вначале показывает
каждую 8-ую строчку, потом каждую 4-ую, каждую 2-ую, и, наконец, загружается полное
изображение. При этом посетитель странички сможет понять, что же нарисовано на
данной картинке, не дожидаясь ее полной загрузки, что очень удобно.
Оптимизация JPEG.
У формата JPEGУ не так уж много способов оптимизации, точнее сказать, - один:
выбрать оптимальный коэффициент сжатия. Для осуществления оптимизации нужен
графический пакет или утилита, которые позволяют регулировать степень сжатия
изображения.
Для определения оптимальной степени сжатия, нужно сохранить фотографию при
нескольких значениях коэффициента сжатия, а затем внимательно рассмотреть ее.
Критерием потери качества будут так называемые "дрожащие контуры", наиболее
заметные в местах контрастных переходов, и появление пятен в областях с плавными
переходами. Тот коэффициент сжатия, при котором искажения еще не видны, но с
увеличением его (коэффициента) на одну ступеньку становятся заметными, и будет
оптимальным. Размер файла при таком разрешении будет минимальным и без потери
качества.
Еще один небольшой метод оптимизации JPEG - использование прогрессивной
развертки. Это практически не сказывается на размере фотографии, но заметно при
загрузке. В случае записи изображения в стандартном формате вывод на экран
осуществляется горизонтальными полосками, и до загрузки всего изображения нельзя
определить его смысл. Напротив, при записи файла в прогрессивном формате
изображение появляется сразу целиком, но в грубой форме, и постепенно улучшается. Это
дает посетителям возможность сразу же оценить фотографию и решить, стоит ли ожидать
ее докачки, что позволит сэкономить немного времени при просмотре Ваших страничек.
Рассмотрим основные опции по оптимизации графики в некоторых графических
редакторах.
Оптимизация графических файлов для Web с использованием Adobe Photoshop
Изображения, которые предназначаются для печати обладают размерами, которые явно
завышены для веб-страниц. Соответственно перед добавлением изображения на вебстраницу, необходимо уменьшить его вес.
Программа Photoshop предлагает несколько средств по управлению размером
изображения, причем содержит для этого как явные методы, так и не столь очевидные.
Модуль Save for Web (Сохранить для Интернет)
Photoshop также имеет мощное средство оптимизации, реализованное в виде
подключаемого модуля Save for Web (Сохранить для Web). Его диалоговое окно
открывается одноименной командой меню File (Файл). (рис.10.1.)
Рис.10.1.Окно Save for Web, предназначенное для
оптимизации графики в Photoshop.
Основную часть окна занимает область предварительного просмотра. Она может
находиться в одном из четырех режимов, устанавливаемых с помощью вкладок. Режимы
позволяют просматривать результаты оптимизации без промежуточной стадии экспорта в
файл.
В правой части окна, ниже кнопок OK, Cancel (Отменить) и Output Settings (Настройки
экспорта), находится область, содержащая параметры оптимизации изображений для
экспорта в выбранный формат. В списке Settings (Установки) выбираются
предустановленные и сохраненные варианты оптимизации, а ниже располагаются
настройки. В модуле Save for Web (Сохранить для Web) есть вкладка Color Table
(Цветовая таблица), находящаяся под областью с установками оптимизации. Вторая
вкладка, Image Size (Размер изображения), позволяет масштабировать изображение не
покидая модуля экспорта. Это экономит время на подборе оптимального размера.
В нижней части окна есть строка, отображающая цвет пиксела, на котором находится
курсор в любом из окон просмотра (индекс цвета в палитре). Рядом с ней находится
кнопка предварительного просмотра экспортированного изображения в браузере.
Левую сторону окна занимает панель инструментов. Инструменты Zoom (Масштаб) и
Hand (Панорама) предназначены для управления масштабом и прокрутки областей
просмотра и действуют так же, как и в самом Photoshop. Пипетка в модуле просмотра
используется для прямого редактирования индексированной палитры.
Переключатель Toggle Slices Visibility (Переключение видимости фрагментов) управляет
видимостью границ фрагментов. Инструмент Slice Select (Выделение фрагмента)
предназначен для выделения отдельных фрагментов при оптимизации.
Инструмент Image Size (Размер изображения)
Другим способом изменения размеров изображения выступает инструмент Image Size. Он
вызывается через меню Image\Image Size... (Изображение\Размер изображения...). После
этого открывается диалоговое окно, показанное на рис. 10.2.
Рис.10.2. Вид диалогового окна для изменения
размера изображения
Условно диалоговое окно делится на три части: Pixel Dimension (плотность пикселов),
Document Size (размер документа) и блок различных настроек. Далее рассмотрим их
подробнее.
Pixel Dimension (плотность пикселов).
Основной единицей измерения на web-документе выступает пиксел — элементарная
одноцветная точка, которую может отобразить монитор. Соответственно, размеры
фотографии, предназначенной для публикации на сайте, также логично указывать в
пикселах. И здесь главной величиной выступает ширина изображения. Действительно,
чтобы не возникло горизонтальной полосы прокрутки, ширину картинок следует
ограничить определенным значением, например, 800 пикселов. Что касается высоты, то
она пропорционально связана с шириной и вычисляется автоматически.
Document Size (размер документа).
Блок Document Size в диалоговом окне Image Size предназначен в первую очередь для
печати документа и содержит три параметра. Width — ширина изображения, выводимого
на печатающее устройство. Height — высота изображения при печати. Resolution —
разрешение (для экранной копии изображения достаточно разрешение 72 dpi).
Ширину и высоту можно задавать в следующих единицах:






процентах (percent) от исходного размера;
дюймах (inches), 1 дюйм = 2,54 см;
сантиметрах (cm);
миллиметрах (mm);
пунктах (point), 1 пункт = 1/72 дюйма = 1/12 пика;
пика, 1 пика = 12 пунктов.
Настройки
Дополнительно можно устанавливать или убирать следующие параметры.



Scale Style (масштабировать стиль). Если установлена галочка в этом пункте, то
параметры стиля слоя (величина тени, например) модифицируются
пропорционально размеру изображения. В противном случае, их значения
остаются первоначально заданными и никак не меняются.
Constrain Proportions (сохранять пропорции). При включенном пункте
сохраняется исходное соотношение между шириной и высотой изображения,
которое помечаются в виде значка цепи на рис. 10.3. При этом модификация
ширины приводит к автоматическому изменению высоты фотографии, и наоборот.
Если требуется независимо установить размеры изображения, то пункт Constrain
Proportions следует выключить. Но учтите, что тогда появятся искажения
содержимого картинки.
Resample Image (ресемплировать изображение) Если увеличить размер
изображения, то увеличится и количество пикселов, но т.к. они никак не появятся
из ниоткуда, то графической программе придется, используя алгоритмы
интерполяции, достраивать их самостоятельно. Тот же алгоритм применяется и в
обратном случае, когда необходимо уменьшить картинку. Данный подход
изменения размера изображения получил термин ресемплирование. Качество
ресемплирования напрямую зависит от типа изображения, чем больше оно
содержит мелких и контрастных деталей, тем хуже конечный результат, который
проявляется как размытость. В любом случае, часть информации теряется
безвозвратно.
Photoshop предлагает несколько алгоритмов интерполяции, перечисленных в пункте
Resample Image. Если галочку с этого поля убрать, то размер в пикселах станет
недоступным для изменения, и можно будет только управлять значениями блока
Document Size.
Ресемплирование изображений
В основе выполнения Resampling лежит использование метода интерполяции.
Интерполяция - способ увеличения-уменьшения размера или разрешения файла
посредством программы. При уменьшении данные отбрасываются, при увеличении программа их "сочиняет", т.е. интерполяция искуственно добавляет элементы цифровой
модели, но не увеличивает количество деталей изображения.
В зависимости от содержимого фотографии и желаемого результата при уменьшении
изображения, следует выбирать один из предлагаемых алгоритмов.





Nearest Neighbor (по ближайшим точкам)
Это наименее точный метод ресемплирования, но в то же время он не создает
сглаживания вокруг линий. Алгоритм можно рекомендовать в тех случаях, когда
требуется сохранить первоначальный набор цветов и резкость краев.
Bilinear (билинейный)
Этот алгоритм относится к среднему по качеству методу и выбирается, если
предыдущий алгоритм не устраивает своим результатом.
Bicubic (бикубический)
Наиболее популярный алгоритм интерполирования, дает сглаженные границы и
плавный тоновый диапазон цветов.
Bicubic Smoother (бикубический с размытием)
Аналогичен бикубическому алгоритму, но включает дополнительное сглаживание
изображения. Данный метод предназначен в первую очередь для увеличения
размеров фотографий.
Bicubic Sharper (бикубический с резкостью)
Аналогичен бикубическому алгоритму, но дополнительно повышает резкость
изображения. Данный метод предназначен для уменьшения размеров картинки.
Для сравнения действия методов возьмем фрагмент фотографии размером 172х185
пикселов и пропорционально уменьшим его до ширины 100 пикселов различными
алгоритмами. На рис. 10.3.показана оригинальная фотография.
Рис.3.Исходное
изображение
а. Nearest
Neighbor
б. Bilinear
в. Bicubic
г. Bicubic
Smoother
д. Bicubic
Sharper
Рис. 10.4. Результат
применения различных
алгоритмов при уменьшении
фотографии
Все полученные изображения практически похожи друг на друга и различаются только
деталями. Так, наиболее резкая картинка приведена на рис. 10.4.-а и на рис.10.4.-д.
Сглаженное изображение получилось на рис. 10.4.-г, графический файл с этой
фотографией занимает и наименьший объем среди прочих изображений. Сохранение
происходило при одинаковых параметрах в формате JPEG.
С текстом или изображением, содержащим четкие края, дело обстоит иначе, чем с
фотографией. Для примера возьмем картинку с текстом (рис.10.5.) и уменьшим ее в два
раза, опять же с применением разных методов.
Рис. 10.5. Изображение с текстом
На рис.10. 6. приведен результат применения алгоритмов интерполяции к исходной
картинке.
а. Nearest Neighbor
б. Bilinear
г. Bicubic Smoother
в. Bicubic
д. Bicubic Sharper
Рис. 10.6.Уменьшение размера изображения с текстом
Видно, что на рис.10.6.-а текст практически не читаем, но при этом отсутствует
сглаживание букв и в картинку не добавлены дополнительные цвета. Смена алгоритма на
билинейный (рис.10.6.-б) привела к повышению различимости формы символов при
сохранении резкости изображения. Использование бикубического алгоритма (рис. 10.6.-в)
повысило сглаживание текста и сделало его более различимым. Последующие методы
незначительно модифицируют бикубический алгоритм, делая текст сглаженным (рис.
10.6.-г) или повышают его резкость (рис. 10. 6.-д)
Оптимизация графических файлов с использованием Corel Draw.
Программа Corel Draw предлагает следующие средства по управлению размером
изображения:
Опция Публиковать в Web - Оптимизатор изображения Web :
Далее открывается окно- Оптимизатор веб-изображений (рис.10.7.):
Рис.10.7. Окно Оптимизатор web-изображений
В левом окошке можно оставить оригинал, а в правом, меняя форматы изображений (Gif,
Jpeg, Png), выбрать наиболее оптимальный.
Здесь можно выбрать необходимый формат файла, просмотреть, как будет выглядеть в
данном формате изображение, его размер, выбрать качество изображения и выбрать
самый оптимальный вариант.
Оптимизация графических файлов с использованием Corel Xara.
С помощью данного графического редактора можно оптимизировать gif-изображения при
вызове окна диалога Редактор цветов (Color Editor) ( правая кнопка мыши-Color Editor),
где имеется эффективное средство - кнопка Limit to browser palette (ограничить цвет до
палитры web-обозревателя)(рис.10.8.). Ее нажатие позволяет ограничить диапазон
выбираемых цветов цветами безопасной палитры Интернет. Это свойство позволяет
правильно передать цвета изображений при помещении их в Интернет, а также уменьшать
размер файла изображения за счет ограничения в нем количества цветов.
Рис.10.8.
Окно Color
Editor
(Редактор
цветов)
Вопросы для самоконтроля:
1. Для чего необходимо оптимизировать графику?
2. Какие средства по управлению размером изображения предлагает
Программа Photoshop?
3. Почему к оптимизации при помощи дизеринга нужно относиться очень
аккуратно и по-возможности не использовать?
4. Назовите параметры оптимизации для каждого формата.