www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Фотолаборатория

Логотип Фото

Фрагментарная оптимизация изображений для Web

В предыдущих статьях ("Оптимизация изображений для Web" и "Уменьшение потерь при изменении размеров изображений") были рассмотрены вопросы подготовки и сжатия изображений для Web в форматах JPEG, GIF и PNG. Довольно часто характер изображения не позволяет получить оптимальный результат, то есть минимальный объем при хорошем качестве, сжатием в одном из этих форматов. Много таких смешанных изображений встречается в рекламе (буклеты, календари, каталоги продукции), где фотографии соседствуют с графикой и текстом. Для таких случаев оптимально разделить изображение на фрагменты - слайсы и каждый оптимизировать по своему алгоритму сжатия.

При подготовке изображений для Web этот метод редко используют, считая его сложным. Однако, как говорится, не так страшен большевик, как его малюют. Достаточно один раз выполнить фрагментарную оптимизацию, и вы увидите, что это очень просто, а результат, несомненно, порадует вас. При высоком качестве картинки, вы можете получить уменьшение объема до 50%!

Например, подготовим для размещения в интернете скриншот окна фильтра Smart Sharpen (Умная резкость) в Photoshop (рис.1). На разделительные линии и нумерацию пока не обращайте внимания.

Рис.1. Окно фильтра Smart Sharpen (разделение на 6 фрагментов)

Для качественного отображения картинки "Два ведерка" в этом кадре без фрагментации изображения возможно применение только формата JPEG. При этом сжатие со средним качеством (Medium) дает объем файла 45Кбайт, но при этом надписи имеют характерные для сжатия JPEG ореолы (рис.2).

Пример искажений при сжатии
Рис.2. Искажения при сжатии JPEG (увеличено)

Анализ рис.1 показывает, что здесь оптимально применение трех видов сжатия: рисунок - в формате JPEG, верхнюю синюю полосу - в PNG-8 с количеством цветов 64, а все остальное - в формате PNG-8 с количеством цветов 8. Вместо PNG-8, конечно, можно использовать формат GIF, но он дает несколько больший объем сжатого файла.

Для выполнения фрагментарного сжатия откроем исходное изображение в Photoshop и инструментом Slice (Фрагменты) Значок Slice из палитры Tool (Инструменты) выделим нужные области. Для этого, нажав левую кнопку мыши, протягиваем курсор по границам нужного фрагмента. При этом выделенный фрагмент нумеруется, а оставшаяся часть изображения автоматически делится на прямоугольные области. Они сохраняются как отдельные файлы и помещаются в таблицу, HTML-код которой создает Photoshop.

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

Первый вариант - фрагментация "в лоб" (то есть, не думая)

Так как нам необходимо выделить три области, то инструментом Slice (Фрагменты) выделим отдельно синюю полосу и отдельно картинку . На рис.1 показано такое разделение. Номера выделенных нами фрагментов 01 и 04 помечаются синим цветом, а оставшаяся область разделена программой на прямоугольники, помеченные серым цветом.

Далее оптимизируем полученное фрагментированное изображение при помощи команды Save for Web (Сохранить для Web) из меню Файл. Выбираем инструмент Select Slice (Выбор фрагмента) Значок выбора фрагмента , щелкаем мышью по синей полосе (область 01 ) и задаем сжатие PNG-8 с количеством цветов - 64, затем щелкаем на картинке (область 04) и задаем алгоритм сжатия для нее JPEG с качеством Medium, и, наконец, щелкнув по любой области вне этих двух, задаем режим PNG-8 с количеством цветов - 8. Последний алгоритм сжатия будет применен к областям 02, 03, 05 и 06.

Для сохранения фрагментированного изображения нажимаем кнопку Save (Сохранить) и обычным путем назначаем папку и указываем имя файла. Тип файлов выбираем "HTML and Images (*html)". В графе "Settings" указываем вид документа (по умолчанию XHTML), а в графе "Slices" выбираем все фрагменты - All Slices. Для завершения жмем "Сохранить". Полученный документ состоит из HTML файла и шести графических файлов отдельных фрагментов. Для нашего случая суммарный объем всех фрагментов изображения рис.1 составил около 24Кбайт, то есть мы уменьшили его почти в 2 раза! При этом мы не только сократили время загрузки, но и улучшили качество текста на рисунке.

Полученный HTML файл содержит обычную таблицу, в ячейки которой помещены выделенные нами фрагменты изображения (рис.3)

Таблицы фрагментов

Для просмотра полученного результата фрагментарной оптимизации можно сразу открыть сохраненный HTML документ в браузере. При вставке таблицы в интернетовскую страницу необходимо следить, чтобы HTML-код страницы совпадал с кодом, заданным при сохранении изображения. В нашем случае это HTML 4.01 Transitional (Переходный). При несовпадении кодировок возможно появление искажений в браузере: сдвиг фрагментов относительно друг друга или появление просветов между ними.

Не будет лишним, как при любой подготовке материалов для Web, проконтролировать правильность воспроизведения полученного оптимизированного изображения в разных браузерах и при разном масштабе показа страниц. Следует учесть, что чем сложнее таблица, тем больше вероятность появления искажений. В нашем случае наблюдается небольшой сдвиг при просмотре в Opera с масштабом более 150% в режиме показа "По ширине окна".

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

Второй вариант - фрагментация "с умом" (то есть, правильно)

Полученная нами таблица фрагментов изображения (рис.3) содержит четыре строки и три столбца, но ее можно значительно упростить. На рис.1 много участков однотонной серой заливки, которая при сжатии JPEG имеет небольшой объем. Поэтому есть смысл выполнить более рациональное разделение не на шесть фрагментов, а на три (рис.5).

Рис.4. Окно фильтра Smart Sharpen (разделение на 3 фрагмента)

Новая таблица имеет всего две строки и два столбца и состоит из трех фрагментов изображения (рис.4). При этом объем файлов практически не изменился (увеличение составило всего 70 байт), а таблица сократилась значительно. Небольшое ухудшение качества надписи "17%" под рисунком (сравните с рис.1) непринципиально. Но самое главное, полностью исчезли искажения при разных масштабах просмотра. Во всяком случае, мне не удалось их обнаружить в имеющихся у меня версиях различных браузеров. Это лишний раз подтверждает, что, чем проще HTML-код интернет-страницы, тем корректнее она воспроизводится различными браузерами.

Таким образом, фрагментарная оптимизация - удобный и эффективный способ подготовки изображений для Web, а если еще и работать "с умом", то результат порадует не только вас, но и посетителей вашего сайта.

4.09.2008 г.

Задать вопрос автору





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: оптимизация изображений для Web, скриншот, слайсы, фрагментарная оптимизация для Web