Отсебятина Статьи Проекты
Облако тегов
Web CMS CSS htaccess HTML Javascript MySQL Php Безопасность Мониторы Новостная лента Оптимизация Ошибки Разработка сайта Часы Юзабилити оптимизация ошибки

О спрайтах

Отсебятина от 21 ферваля 2010 года.    Теги: CSS HTML оптимизация


Спрайты и повторяющийся фон эффективны далеко не всегда. Иногда лучше взять цельную картинку, если разница между кусочками и цельной картинкой в сотню байт. Это компенсируется минимальным CSS, HTML и, возможно, самими картинками.

По своей привычке оптимизировать все и вся, я нарезал дизайн на спрайты, пиксели. При верстке мне нужно было сделать полупрозрачное поле с округленными уголками и фиксированной шириной. Для избежания багов с opacity и наследования полупрозрачности, я решил использовать полупрозрачные png. С data:URI возиться не стал — так и не получилось реализовать вариант для IE через mhtml.


Верстка шапки поля:
HTML:
<ul class="blue-crn"> <li></li> <li class="blue-cnt"></li> <li></li> </ul>

CSS:
.blue-crn { margin-left: 24px; } .blue-crn li { background-image: url('/style/images/blue-corners.png'); width: 5px; height: 5px; float: left; } li.blue-cnt { background: url('/style/images/blue-bg.png') repeat; width: 939px; } .blue-crn li:last-child { background-position: -5px 0px; }

Картинки (для статьи увеличены в 4 раза, содержит уголки и для подвала):
1.
2.


Размер картинок с http-заголовками (в байтах):
1. 2792 + 298
2. 2905 + 297

Итого: 6682 байт


Переверстываем.
HTML:
<div class="blue-crn"></div>

CSS:
.blue-crn { background-image: url('/style/images/blue-corners2.png'); width: 949px; height: 5px; margin-left: 24px; }

Картинки (для статьи уменьшены в 2 раза по горизонтали и увеличены в 2 раза по вертикали, содержит уголки и для подвала):


Размер картинок с http-заголовками:
1. 3007 + 298

Итого: 3459 байт.


Причины:
  • Из-за полупрозрачности, даже картинка в 1 пиксель весит порядка 2,8 килобайта. Если фон можно задать цветом, то способ становится не очень эффективным.
  • Подгружается на 1 картинку меньше => меньше заголовков. Габариты картинки при однотонности цветов, не играют особой роли в png и gif.

При таком подходе важны не столько байты, сколько количество кода и отсутствие проблем с версткой.
Оставить сообщение






Любое копирование должно сопровождаться ссылкой на сайт.
Если вам что-то не понравилось — сообщайте.
Кича Владимир
x
Мне не нравится этот сайт, удалить его