Уменьшение размера загружаемых объектов. Оптимизация изображений. Обзор методов клиентской оптимизации
Оптимизация изображений
Устранение избыточного кода
За счет использования подходящих графических форматов и эффективного сжатия без потерь суммарный размер страницы может быть уменьшен иногда на 50% и более.Изображения, полученные с фотоаппаратов или сохраненные в некоторых графических редакторах, могут содержать много килобайт дополнительной информации, комментариев (т.н. метаданных), а также избыточную цветовую палитру.
Существует несколько графических форматов, поддерживаемых всеми современными браузерами: PNG-8, PNG-24, JPEG, GIF, ICO. Каждый из этих форматов позволяет в определенных ситуациях получить значительный выигрыш в размере по сравнению с
другими форматами. Основные рекомендации для различных типов изображений приведены ниже: Полноцветные изображения, изображения с градиентами
Для полноцветных изображений с богатой цветовой палитрой (фотографий, сложных градиентов и т.п.) следует использовать формат JPEG высокой степени качества. Необходимо помнить о том, что JPEG - формат сжатия с потерями и чем выше степень сжатия, тем большее число артефактов появится на итоговом изображении. Полупрозрачные изображения
В случаях, когда для верстки требуются полупрозрачные изображения следует использовать формат PNG-24, поддерживающий альфа-каналы. Нельзя, однако, забывать о том, что браузер Internet Explorer 6 не поддерживает полупрозрачность в таких изображениях и для их корректного вывода следует применять фильтр AlphaImageLoader. Изображения с ограниченной цветовой палитрой
Для изображений с ограниченной палитрой следует использовать формат PNG-8. Этот формат, как и формат GIF позволяет использовать прозрачность (не альфа-каналы), но в большинстве случаев превосходит GIF по качеству сжатия итогового файла. Достигается это за счет более совершенной методики сжатия (фильтрации), которая охватывает и горизонтальные и вертикальные повторения, а также хорошо работает с градиентами. Анимированные изображения
Единственным кроссбраузерным форматом, позволяющим отображать анимацию в изображениях является формат GIF. Однако уже в ближайшем будущем ему может составить конкуренцию развивающийся формат APNG. Подробнее об этом формате можно узнать из главы 3.3. Иконка веб-сайта (favicon.ico)
Для иконок веб-сайта существует специальный формат ICO, однако большинство современных браузеров могут использовать в качестве иконки изображение любого поддерживаемого ими формата. Более подробно об использовании favicon.ico было рассказано в книге «Разгони свой сайт», во второй главе.
Наибольшего эффекта от оптимизации можно достичь, только используя наиболее подходящий формат для каждого случая. Нередко разделение сложных изображений, (содержащих, например, полноцветное изображение с некоторым количеством мелкого текста и полупрозрачную рамку) на несколько отдельных изображений, накладывающихся одно на другое, может существенно уменьшить размер веб-страницы.
Удобной программой для ручной оптимизации статических изображений в Windows и Mac OS является программа Adobe Photoshop, для анимированных изображений - Adobe Fireworks. В операционных системах семейства Linux одним из наиболее подходящих приложений является Gimp.
О том, как можно автоматизировать оптимизацию изображений, рассказано в третьей главе.