Способы оптимизации графического контента
Одна из самых распространенных ошибок начинающих дизайнеров - излишнее увлечение графикой. Конечно, если изначально планируется, что сайт может быть интересен только тем, кто подключен по выделенной линии, то такой подход вполне оправдан, но в остальных случаях сайт может потерять множество посетителей, у которых просто не хватит терпения дождаться, когда он, наконец, загрузится.
В среднем, время, в течение которого пользователь ждет загрузки страницы, составляет примерно одну минуту, после чего он может нажать кнопку "Стоп" или закрыть браузер. Если учесть, что средняя скорость связи у пользователя, подключенного через модем, находится в диапазоне от 19200 до 28800 бит/с, то получается, что Web-страница со всей графикой должна занимать не более 140 Kb.
Кроме этого, очень желательно сделать так, чтобы пользователь мог увидеть текст страницы до окончания ее полной загрузки. Для этого надо явно указать размеры всех загружаемых картинок. Некоторые HTML-редакторы, например Namo Web Editor, умеют делать это автоматически, в остальных придется это явно указать либо в свойствах рисунка, либо переключиться в режим редактирования HTML-кода, найти тег IMG для каждой картинки и прописать атрибуты height и width.
Также обязательно следует указывать в атрибуте alt тега IMG текст, который появляется на месте картинки до ее загрузки или при отключенной графике, особенно в тех случаях, когда картинка является ссылкой. Это позволяет нормально ориентироваться на сайте пользователю с отключенной графикой (или с полным отсутствием ее поддержки), кроме этого атрибут alt учитывается поисковыми системами при индексировании страницы, причем он является даже более значимым, чем обычный текст.
Что же делать, если объем страницы получается больше этих 140 Kb? В этом случае ее можно попытаться оптимизировать (точнее, оптимизировать графику нужно всегда, поскольку чем меньше по объему страница при той же самой информативности, тем более позитивно к ней отнесется пользователь). Правильно выполненная оптимизация графики может привести к значительному уменьшению объема при почти незаметном уменьшении качества.
Оптимизация графики начинается с выбора формата, в котором она будет помещена на Web-страницу. В данный момент в Сети используется 3 графических формата: GIF, JPEG и PNG. Каждый из них имеет смысл применять в определенных ситуациях.
GIF – из рассматриваемых форматов исторически появился самым первым. GIF поддерживает сжатие без потерь и позволяет хранить изображения, содержащие не более 256 цветов, при этом один из цветов может быть прозрачным (т.е. при выводе картинки в броузере на месте прозрачных пикселей отображается фон). GIF поддерживает также создание простейших анимационных роликов, которые хранятся в виде последовательности кадров в одном GIF-файле.
PNG – существует два варианта этого формата: с отображением по палитре и полноцветный, причем оба варианта обеспечивают сжатие без потерь. PNG с отображением по палитре во многом похож на GIF: позволяет отображать не более 256 цветов и поддерживает прозрачность, но использует другой алгоритм сжатия. PNG на данный момент не позволяет создавать анимационных роликов.
JPEG – графический формат, который разрабатывался специально для хранения оцифрованных фотографий. JPEG – это формат для сжатия информации с потерями, т.е. после сжатия изображение несколько отличается от исходного. JPEG разрабатывался с учетом восприятия цвета человеческим глазом, и алгоритм сжатия построен таким образом, что на многоцветных рисунках с большим количеством полутонов и плавных переходов цвета эти потери будут практически незаметны. Однако на рисунках с малым количеством цветов и резкими переходами из одного цвета в другой (например, надписи или схемы) произойдет размытие этих границ, в результате чего изображение станет нечетким.
С учетом всех этих особенностей можно дать следующие рекомендации по применению форматов:
‒ JPEG следует применять для цифровых фотографий и больших рисунков с плавными цветовыми переходами. Это позволит добиться эффективного сжатия при совершенно незначительном уменьшении качества;
‒ PNG хорошо подходит для небольших многоцветных изображений, в которых присутствуют как плавные переходы, так и четкие контуры. Примером таких изображений могут являться логотипы и надписи с градиентной заливкой букв;
‒ для простейших анимированных роликов можно использовать только GIF, т.к. другие форматы анимации не поддерживают;
‒ для изображений, содержащих небольшое количество цветов и четкие контуры (надписи, схемы, вспомогательные элементы оформления сайта) следует применять GIF или PNG с палитрой. Дать однозначную рекомендацию, какой из этих форматов лучше, довольно сложно, поэтому имеет смысл каждый раз пробовать сохранить изображение в оба формата и смотреть, в каком из них сжатие получается эффективнее.
После того, как формат выбран, можно приступать непосредственно к оптимизации изображения. Оптимизация изображений в формате JPEG производится путем подбора коэффициента потери качества, который может принимать значения от 1 (максимум потерь) до 100 (сжатие без потерь). Рекомендуется сохранять несколько вариантов изображения, изменяя коэффициент потерь от 100 в сторону уменьшения с шагом 5 или 10, затем последовательно просмотреть их и выбрать из тот, который имеет наименьший коэффициент, но устраивает вас с точки зрения качества.
Оптимизация файлов в форматах GIF и PNG с палитрой производится путем уменьшения количества цветов в палитре (при этом убираемые цвета заменяются наиболее похожими из оставшихся в палитре), а также изменением параметра Dithering, который отвечает за передачу полутонов путем «разбрасывания» по изображению точек другого цвета (особенно сильно использование Dithering влияет на рисунки в формате GIF).
В некоторых графических редакторах (например, в Adobe Image Ready, Macromedia FireWorks, Ulead GIF Animator) имеется возможность производить сжатие в GIF с потерями. В этом случае из изображения убирается часть пикселей, которая наиболее сильно оказывает влияние на эффективность сжатия (например, отдельные пиксели другого цвета в середине одноцветной области). В большинстве случаев применение этой возможности приводит к значительному ухудшению качества изображения, но иногда такое сжатие оказывается эффективным. Поэтому имеет смысл попробовать использовать различные показатели этого параметра в диапазоне от 100 до 90 и посмотреть, как это будет влиять на изображение и его размер.
Еще один важный способ оптимизации графики – это уменьшение ее размеров по ширине и высоте и последующее растягивание до исходных размеров средствами браузера. Этот способ применяется, в основном, для элементов оформления сайта: фоновых рисунков для таблицы, разделительных полос и т.п.. Основан он на следующих особенностях отображения HTML: если рисунок, вставленный с помощью тега <img> по ширине или высоте меньше, чем указано в свойствах height и width, то он будет растянут (или наоборот, сжат) до нужного размера, а если рисунок описан как фон таблицы, ячейки или другого объекта в свойстве background, то он будет повторяться до тех пор, пока не заполнит весь объект. В результате вместо того, чтобы сохранять в файл весь элемент целиком, достаточно вырезать его небольшой кусок, а дальше растянуть или размножить непосредственно в браузере с помощью свойств, описанных выше.
Например, если требуется создать полосу-разделитель с плавным переходом цвета по вертикали размером 600x10, то достаточно вырезать из нее кусок размером 1x10 и вставить его с помощью тега <img>, указав в атрибутах height=10 width=600. В результате отображаться он будет точно так же, как и исходная полоса размером 600x10, но объем файла с нескольких килобайт уменьшится до двух-трех сотен байт.
Аналогично можно поступать и с фоновыми рисунками для таблиц и ячеек (в тех случаях, когда фон является достаточно абстрактным) – вырезать куски шириной несколько десятков пикселей, после чего они будут дублироваться браузером по всей ячейке. Однако при этом возможна ситуация, когда левый и правый край изображения плохо стыкуются между собой. В этом случае можно применить следующий несложный трюк: увеличить размер области рисования (canvas size) в 2 раза по горизонтали, выделить исходное изображение и вставить его в появившееся свободное место, после чего применить функцию «отобразить горизонтально» (Flip horizontal). В итоге получившееся изображение будет идеально стыковаться по горизонтали и в браузере выглядеть как совершенно однородный рисунок.
Этот простой трюк решает также еще одну важную задачу: он позволяет задавать ширину таблицы не только в виде жестко фиксированного числа, но и в процентах. В результате фон будет корректно отображаться при любой ширине таблицы, что дает возможность создавать «растягивающиеся» сайты, которые одинаково отображаются при любом разрешении экрана у пользователя.
Еще один способ оптимизации графики – нарезание крупных изображений на «ломтики». Сам по себе этот метод почти неэффективен, так как каждый «ломтик» занимает примерно такой же объем, как и в исходном изображении, кроме того, к нему добавляется заголовок файла и необходимость выполнить дополнительный HTTP-запрос для получения еще одного файла (что добавляет еще примерно 1 Kb передаваемой/принимаемой информации). Исключение составляют только те случаи, когда изображение содержит резкие переходы между различными областями, которые совпадают с границами «ломтиков», т.к. в этом случае возможно увеличение эффективности сжатия). Однако если в разрезаемом изображении есть однородные области, то можно применять сочетание этого метода с методом растягивания в браузере, описанным выше, и тогда его эффективность значительно повышается.
Подводя итог всему изложенному выше, можно сказать, что оптимизация графики сайта – довольно трудоемкая работа, требующая как определенных знаний, так и умения подбирать оптимальные параметры экспериментально. Но тщательное выполнение этой работы даст свой результат: у вас не будет ситуаций, когда не дождавшиеся окончания загрузки пользователи будут закрывать браузер, так и не увидев всего того, что вы хотели им предложить. Кроме этого, если ваш сайт стоит на хостинге с оплатой по трафику, ваши расходы на оплату хостинга уменьшатся, так как на каждого посетителя будет приходиться меньший объем трафика при той же самой его информативности. [10]