Необходимость объединения нескольких изображений в один CSS спрайт возникла у меня для внутренней оптимизации сайта. Объединение нескольких изображений в один спрайт в плане оптимизации очень даже важный ход, так как браузер пользователя запросит только одну единственную картинку с Вашего сервера, вместо нескольких. Вместо десятков запросов на Ваш сервер, браузер отправит только один запрос и получит только одно изображение, которое сохранит в компьютера. Все дальнейшие изображение он будет вытаскивать из этого спрайта, уже не обращаясь к Вашему серверу. При использовании спрайта в плюсе остаются обе стороны:

• Пользователь получит более быстрое открытие страницы.
• Вебмастер уменьшит нагрузку на свой сервер.

Надеюсь, что с теорией всё более менее понятно, поэтому перейду к примеру. У меня нет необходимости использовать CSS спрайт на этом сайте, так как мой дизайн почти что не использует изображений. Но есть у меня другой сайт, который напичкан такими изображениями. Прошу рассмотреть онлайн-кинотеатр Amove.ru. Кстати, буду рад видеть Вас там. А теперь откройте вот спрайт по адресу http://amove.ru/img/sprite.png. Открыв его возьмите отдельное изображение и попробуйте найти его на самом сайте. Уверен что многие из этих изображений Вы найдете на главной странице. Оставшиеся изображения используются на других страницах. Вот Вам и яркий пример использования CSS-спрайта. Вместо десятков маленьких изображений, а соответственно десятков запросов на сервер, Вы предоставляете пользователю одно единственное изображение и координаты, откуда браузер должен достать необходимую часть.

Создание CSS спрайта

Процесс создания CSS спрайта интуитивно понятен: просто необходимо в одно большое изображение добавить несколько мелких. Для этих целей подойдет даже Paint. Да, Вы можете использовать и его. Но самый важный момент в создании спрайта - это знание координаты левого верхнего угла маленького изображения, а так же его длины и ширины. Именно поэтому я рекомендую Вам использовать специальный сервис под названием SpritePad, который находится по адресу http://spritepad.wearekiss.com/. Процесс создания CSS спрайта на данном сайте я подробно опишу ниже:

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

Исходя из приблизительных размеров Ваших изображений, лучше сразу настроить ширину и высоту рабочей области. Для этого нажмите SpriteMap -> MapSize . Далее укажите ширину и длину в пикселях.

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

Когда все изображения добавлены, нажмите кнопку Fit Documemts . Данная кнопка автоматически обрежет всю неиспользованную зону, поэтому не бойтесь во втором пункте указывать большую область.

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

Полученный спрайт, тот который в формате PNG, добавьте себе на сайт с помощью FTP-сервера или другого менеджера загрузки. Так же сохраните для себя путь данного файла.

Далее нам необходимо вмешаться в сам код дизайна Вашего сайта. Тут может быть два варианта:

Изображение в дизайн добавляется через CSS файл.

Изображение в дизайн добавляется через HTML посредством тэга .

Во втором случае просьба прочитать мою предыдущую запись о том, как . Когда все изображения будут добавляться в дизайн посредством CSS , можете перейти к следующему пункту.

А следующий пункт я опишу далее.

Добавление в дизайн изображения из CSS спрайта

Для примера я возьму пример из предыдущего поста:

Logo {
top:0;
display:block;
text-align: left;
float: left;
margin-right: 48px;
width: 114px;
height: 59px;
background: url(/img/logo.svg) no-repeat;

Данный блок CSS файла определяет расположение логотипа всё-того же сайта. Тут он приведен в изначальном варианте, до использования спрайта. Как видите, тут указывается изображение logo.png. Так же указана ширина и длина изображения. Нам необходимо данный блок немного видоизменить до такой кондиции:

Logo {
top:0;
display:block;
text-align: left;
float: left;
margin-right: 48px;
width: 114px;
height: 59px;
background: url(/img/sprite.png) no-repeat;
background-position: -743px -375px;

Как видите изменения претерпела строка, которая указывает на местоположение файла. Теперь там указан адрес вышеописанного CSS спрайта. Но указать только местоположение спрайта недостаточно, нужно, как я и говорил, указать координаты крайнего левого верхнего угла. Для этих целей используется последняя строка. Что нужно делать Вам? Местоположение спрайта я просил Вас запомнить в 6 пункте, надеюсь Вы сможете изменить местоположение изображения на Ваш спрайт. Последнюю строчку Вы можете взять из CSS файла, который скачивали с сайта SpritePad, либо взять их с того же сайта, который я просил Вас не закрывать. Для этого найдите блок, который носит имя загруженного маленького изображения, и скопируйте первую строчку, где указаны координаты. Кроме координат там приведены так же ширина и длина изображения. Так как в моем примере они были изначально, я их не менял. Если у Вас ширина и длина не указаны, укажите их, взяв необходимые данные всё с того же сайта.

Вот таким образом происходит объединение нескольких изображений в один CSS спрайт. Единственное о чем хотел бы Вас предупредить: используйте спрайты только для статических изображений. Использование спрайтов для динамических изображений немного сложнее, об этом я напишу позже. А пока что имейте в виду, если рядом с местоположением изображения указано no-repeat , то все нормально. А если же указано repeat-x либо repeat-y , не включайте их в основной спрайт.

CSS – специальная технология, которая позволяет управлять видом веб-документа. Ее уникальные возможности позволяют веб-мастеру не редактировать большое количество html-файлов а, изменив лишь описание в одном, добиться кардинальной смены оформления на всем сайте. CSS разработан для того, что бы оперативно изменять и корректировать внешний вид элементов страницы.

Какие есть варианты включения CSS в HTML?

Способов объединить CSS и HTML несколько: применение при помощи элемента link внешних стилей в виде совершенно отдельного css файла, встраивание при помощи элемента style стилей прямиком в HTML файл в виде специально подогнаного css текста, применение inline стиля подразумевающего под собой назначение стиля непосредственно к HTML-элементу через HTML-атрибут.

Как произвести объединение при помощи внешних стилей?

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

Как применить таблицы стилей документа?

Применить CSS возможно через таблицы стилей располагающихся непосредственно в HTML документе. Данный встроенный стиль обычно располагается между закрывающим и открывающим тегом style. Сам же style, обычно может находиться в абсолютно любой части документа.

Как применить стили, подставляемые в строку?

Этот способ обычно используется в том случае, если появилась необходимость задать стиль одному специальному элементу на странице. Не смотря на то, что он весьма спорен и может порой даже испортить и смешать содержимое документа и его стили, порой, он может быть полезен. Прежде всего, вам необходимо воспользоваться атрибутом style (непосредственно атрибутом, а не элементом) находящимся в HTML элементе (за исключением не находящихся в элементе body).

Для наглядного изучения.

Полный курс «Css практика»

]]> ]]>

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

Для тех, кто хочет очень быстро научиться трюкам css стилей , ]]> рекомендую ]]> расширенный курс "CSS практика" Евгения Попова. .

Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега . Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan , с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, заменяет три ячейки, поэтому в следующей строке должно быть три тега или конструкция вида ...... . Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.

Пример 12.3. Неверное объединение ячеек

Неправильное использование colspan

Ячейка 1		Ячейка 2
Ячейка 3	Ячейка 4

Результат данного примера показан на рис. 12.5.

Рис. 12.5. Появление дополнительной ячейки в таблице

В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan , а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.

Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 12.4.

Пример 12.4. Объединение ячеек по вертикали и горизонтали

Объединение ячеек

Internet Explorer Opera Firefox 6.07.07.08.09.01.02.0

Браузер
Поддерживается	Нет	Да	Нет	Да	Да	Да	Да

Результат данного примера показан на рис. 12.6.

Рис. 12.6. Таблица с объединенными ячейками

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

Число запросов является наиболее узким местом при загрузке страницы. По последним исследованиям порядка 40% времени загрузки уходит только на установление новых соединений с сервером. В этом свете любые методы, позволяющие уменьшить число запросов, выглядят весьма перспективно. Однако каждый такой метод, начиная с простого объединения стилей или скриптов и заканчивая data:URI, достаточно сложен в технологическом плане, поэтому в ряде случаев может просто не окупать затраченного времени.

Зачастую cookie выставляются на весь домен или даже на все поддомены, что означает их отправку браузером даже при запросе каждой картинки с вашего домена. В результате 400-байтный ответ с картинкой превратится в 1000 байтов или даже больше, в зависимости от добавленных заголовков cookie. Если на странице у вас много некэшируемых объектов и большие cookie на домен, то стоит рассмотреть возможность вынесения статичных ресурсов на другой домен (например, так поступил Яндекс, расположив статические файлы на домене yandex.net) и убедиться, что cookie там никогда не появятся.

В силу накладных расходов на передачу каждого объекта, один большой файл загрузится быстрее, чем два более мелких, каждый в два раза меньше первого. Стоит потратить время на то, чтобы привести все вызываемые JavaScript-файлы к одному или двум, равно как и CSS-файлы. Если на вашем сайте их используется больше, попробуйте сделать специальные скрипты для публикации файлов на «боевом» сервере или уменьшите их количество. Если на странице в большом объеме располагаются десятки небольших GIF- файлов (для оформления границ или фона элементов), стоит рассмотреть ее преобразование в более простой CSS-дизайн (который не потребует такого большого числа картинок) и(ли) объединение в несколько больших ресурсных файлов.

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

CSS-файлы в начале страницы

При заботе о производительности веб-страниц мы всегда хотим, чтобы страницы могли быть отрисованы постепенно, чтобы браузер мог отобразить любой контент сразу же, как он у него появится. Это особенно важно для страниц, на которых много текстового содержания, и для пользователей с медленным подключением. Важность визуального оповещения пользователя о текущем состоянии загрузки страницы каким-нибудь индикатором прогресса детально изучена и задокументирована. Однако в любом случае, всегда лучше, если в роли индикатора прогресса выступает сама страница. Когда браузер загружает HTML-файл постепенно — сначала заголовок, потом навигацию, логотип наверху и т.д. — все это служит отличным индикатором загрузки для пользователя. Также это улучшает общее впечатление от сайта.

Размещение CSS в конце страницы не позволяет начать постепенное отображение многим браузерам, в числе которых находится и Internet Explorer. Браузер не начинает визуализировать страницу, чтобы не пришлось перерисовывать элементы, у которых во время загрузки изменится стиль. Firefox начинает сразу отрисовывать страницу, в процессе загрузки, возможно, перерисовывая некоторые элементы по мере изменения их свойств, но это является причиной появления нестилизованного контента и рекурсивного его обновления.

Спецификация HTML 4 устанавливает, что таблицы стилей должны быть включены в head документа: «В отличие от , может появляться только в секции , зато там он может встречаться сколько угодно раз». Ни одна из альтернатив — белый экран или показ нестилизованного контента — не стоит этого риска (хотя разработчики Firefox и Opera думают несколько иначе). Оптимальным решением является следование спецификации и включение CSS в head-секцию документа.

При проектировании небольших сайтов либо несложных дизайнов это правило является основным для максимизации производительности. Однако далее в этой главе мы рассмотрим и альтернативную его трактовку.

Объединение CSS-файлов

Зачастую на странице подключается несколько файлов стилей: это может быть связано как с модульной структурой построения CSS, так и с поддержкой различных устройств просмотра веб-страниц. Давайте рассмотрим последний случай: у нас есть два вызова CSS-файлов на странице, например:

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

Проблема в том, что браузер не отображает любую часть страницы (это не касается Opera: у нее время отображения страницы без полной загрузке файлов стилей задано по умолчанию в настройках, посмотреть их можно следующим образом: ‘preferences’ (ctrl-f12) -> ‘advanced’ -> ‘browsing’ -> ‘loading’ или ‘инструменты’ -> ‘настройки’ -> ‘дополнительно’ -> ‘перемещение’ -> ‘загрузка’), пока не загрузит все файлы стилей — в том числе и те из них, которые не предназначены для устройства, с помощью которого производится отображение страницы. Другими словами, браузер не покажет страницу, пока не загрузит и файл стилей для принтера, хотя он совсем и не требуется для визуализации страницы. Это неправильно с точки зрения производительности, но это так (Safari, на самом деле, ведет себя как раз «правильно»: ненужные файлы не задерживают загрузку, но это связано с особенностью модели визуализации, о нем более подробно рассказывается ниже).

Практическое решение

Решение выглядит весьма тривиально: мы можем в общем CSS-файле объявить правила для любого устройства через @media. Например, все стили для принтера могут быть записаны в следующем виде

@media print {
стилевые правила для принтера
}

в конце основного файла стилей. Таким образом, будет загружаться всегда только один файл. Данное решение может быть легко автоматизировано, и некоторые CMS уже применяют этот подход (в частности, Drupal).

Если у нас CSS-файлы разбиты на модули, то нужно пересмотреть их структуру таким образом, чтобы на каждую страницу приходилось не более двух файлов (небольшие файлы — порядка 5 КБ — можно объединить в один для целого раздела). Для главной страницы я рекомендую всегда ограничиться только одним файлом либо вообще включать его в HTML-код (как сделано, например, для главной страницы Яндекса).

Два слова об условных комментариях

Очень часто верстка страниц производится таким образом, что у нас появляется основной файл стилей и несколько дополнительных, рассчитанных на конкретные браузеры (речь идет, в основном, о Internet Explorer, однако, иногда требуются какие-то специальные правила для Firefox, Opera или Safari). В этом случае файлы подключают через так называемые «условные комментарии», которые выглядят как обычные HTML- комментарии для всех браузеров, кроме Interner Explorer (у остальных браузеров есть свои способы загрузить какой-то файл стилей только для них).

Финальная конструкция выглядит примерно следующим образом:

Для всех браузеров используется main.css, а для IE6 и ниже — ie6.css. Однако Interner Explorer этих версий не запрашивает файлы стилей параллельно, поэтому при загрузке страницы произойдет ненужная задержка, связанная с доставкой еще одного файла.

Чтобы избежать ее (особенно в случае небольшого количества стилей конкретно для IE), можно использовать CSS-хаки уже в исходном CSS-файлы. Например, если нам нужно определить правило только для IE7, мы можем написать так:

*+html body {
margin: 0 auto;
}

* html body {
margin: 0 auto;
}

и для IE5.5- (эта группа браузеров не распознает экранирование символов, поэтому сможет применить только первое правило из двух, второе правило отработает для IE6, переопределив первое):

* html body {
margin: 0;
marg\in: 0 auto;
}

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

Объединение HTML, CSS и JavaScript в одном файле

Чтобы избежать дополнительных запросов со стороны браузера, можно включить непосредственно стилей и(ли) скриптов в сам HTML-документ.

Здесь стоит остановиться на следующем моменте: если размер CSS- (или JavaScript-) файла больше, чем 20% (и при этом больше 5 Кб в сжатом виде), лучше вынести его как отдельный компонент. Это позволит настроить его кэширование для постоянных пользователей вашего сайта.

Рассматривать включение всех ресурсов в исходную HTML-страницу стоит только в том случае, если достаточно большой процент посетителей (больше 90%) пришли на нее в первый и (возможно) в последний раз. Тогда эта технология будет замечательно работать: кэширование ничего практически не даст, а дополнительные запросы к серверу замедлят загрузку страницы для новых, незнакомых со спецификой сайта посетителей (что может быть решающим фактором для их окончательного ухода).

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

Как рабочий пример можно привести заглавные страницы Яндекса и Google - на них вызывается минимум внешних ресурсов, а стилевые правила включены в саму страницу.

Из книги Журнал «Компьютерра» №27-28 от 26 июля 2005 года автора Журнал «Компьютерра»

13-я КОМНАТА: Две в одном Люди готовы щедро платить за небольшую экономию и даже за потенциальную возможность таковой. Этот психологический нюанс давно используют маркетологи, и в компьютерной отрасли можно найти немало тому примеров. Например, если помните, главной

Из книги Разгони свой сайт автора Мациевский Николай

4.1. Объединение HTML- и CSS-файлов Число запросов является наиболее узким местом при загрузке страницы. По последним исследованиям, порядка 40% времени загрузки уходит только на установление новых соединений с сервером. В этом свете любые методы, позволяющие уменьшить число

Из книги Мифический человеко-месяц [как создаются программные системы] автора Брукс Фредерик

4.2. Объединение JavaScript-файлов Все внешние JavaScript-файлы с сайта можно слить в один большой, загружаемый только один раз и навсегда. Это очень удобно: браузер не делает тысячу запросов на сервер для отображения одной страницы, скорость загрузки резко повышается. А

Из книги Windows Script Host для Windows 2000/XP автора Попов Андрей Владимирович

Объединение JavaScript и CSS в одном файле Однако существует способ объединения CSS с JavaScript и сведения количества загрузок к одной. Техника основана на том, как CSS и анализатор JavaScript ведут себя в IE и Firefox.Когда анализатор CSS сталкивается с символом комментария HTML (