Уменьшение количества запросов. Объединение изображений. Обзор методов клиентской оптимизации
Объединение изображений
Встраивание внешних объектов в код веб-страницы
Исключение избыточных HTTP-запросов
Настройка кэширования
Технология объединения изображений для уменьшения числа запросов к серверу достаточно проста. Файл с несколькими объединенными в определенном порядке изображениями (спрайт), загружается единожды, после чего в разных частях страницы отображаются те или иные его области. Возможно даже создание эффектов анимации при помощи объединенных изображений.
Рисунок 1.11. Примеры объединения изображений в одном файле
Хорошим примером может послужить метод использования единственного изображения для анимированной двухпозиционной кнопки. Верстка такой кнопки представляет собой обыкновенную ссылку с текстом:
<a class="button" href="#">Текст кнопки</a>
В стилях же, при помощи свойства background и псевдокласса :hover, задано положение фона для различных состояний кнопки:
a.button {
background: url(http://site.ru/img/button.png) 0 0 no-repeat;
display: inline-block;
width: 100px;
height: 20px;
}
a.button:hover {
background-position: -100px 0;
}
Перед объединением изображений следует разбить их на следующие группы: изображения, повторяющиеся по всем направлениям (repeat); изображения, повторяющиеся по горизонтали (repeat-x); изображения, повторяющиеся по вертикали (repeat-y); изображения, не повторяющиеся по вертикали и горизонтали (no-repeat).
Эти группы нужны для того, чтобы исключить возможность появления остальных изображений из группы в области другого изображения. Так изображение с фиксированной высотой, повторяющееся на странице по горизонтали (например, градиентная заливка фона) может находиться в группе аналогичных изображений, выше или ниже их, но никак не слева и не справа.
Если изображение всегда фиксированного размера и не повторяется, по какому-либо направлению, его можно размещать в любом месте итогового файла.
А если изображение будет, например, использовано в роли маркера для списка, находящегося в левом верхнем его углу, установленного фоном тега элемента списка, необходимо обеспечить пустое пространство в объединенном изображении правее и ниже этого изображения.
Анимированные изображения лучше объединять отдельно, в зависимости от их размера и палитры.
Минусом объединенных изображений является усложнение верстки, однако автоматизация процесса создания спрайтов позволяет устранить этот минус, подробнее об этом написано в четвертой главе. Плюсом же является уменьшение как числа запросов к серверу, так и непосредственно размера страницы в ряде случаев более чем на 40%.
Не стоит забывать и про достаточно старый способ оптимизации, когда несколько расположенных рядом изображений объединяются в одно и при помощи тега <map> на этом изображении размечаются доступные для взаимодействия области.