О спрайтахОтсебятина от 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.
При таком подходе важны не столько байты, сколько количество кода и отсутствие проблем с версткой.
|