Гипертекст против картинокОтсебятина от 20 июля 2008 года. Теги: HTML Оптимизация
Иногда, при верстке страницы появляется возможность пойти несколькими путями — использовать background-image или же, использовать простой гипертекст. В статье рассмотрен наиболее рациональный способ.
Посмотрите на шапку сайта — четыре цветовых полосы (три серого оттенка и одна зеленого). Воплотить такую шапку в явь можно тремя, довольно простыми, способами:
- Одной картинкой
- Четырьмя картинками
- Чистым гипертекстом
Речь не пойдет о нравах и удобствах. Речь пойдет о "безумной" оптимизации. Взвесим общий размер гипертекста с картинками:
- 50 байт картинка + 80 байт гипертекста = 134 байта
- 146 байт на картинки + еще больше на гипертекст
- 302 байта на гипертекст
На первый взгляд, рациональней использовать первый способ, а остальные два откинуть. Но есть один нюанс — заголовки. Для каждой картинки отсылается новый запрос на сервер, а это — время (отсылка запроса + время отклика + ответ сервера + время отклика + скорость загрузки картинки).
Тогда становится очевидно, что отпадает только второй способ.
Теперь посмотрим, какой же способ наиболее оптимален — "рисовать" гипертекстом или же, присылать одно изображение?
Первый способ - загрузка изображения.
И так, у нас 130 байт весит картинка и гипертекст. А теперь, взвесим заголовок картинки - 291 байт. Итого 421 байт + время отклика.
(данные могут отличаться)
Получается, что рациональнее в таких случаях использовать чистый гипертекст. Но сейчас появляется альтернатива - вместо адреса картинки, указывать её содержание "data", но такую вещь поддерживают еще далеко не все браузеры и стандарты.
В рамках данного сайта оптимизация, мягко говоря, никчемна. Однако, некоторые сайты используют множество картинок-бэкграундов. Для чего - мне не ясно, ведь каждая картинка - лишний запрос к серверу. А если пользователей тысячи, то на каждый такой бэкграуд приходит еще тысяча запросов. Картинки-бэкграунды так же мешают жить тем, кто заходит с телефонов — время загрузки сайта затягивается из-за плохого gprs-интернета, да и набегают лишние копейки.
Выводы за вами.
|