А вы знаете, что картинки можно вставлять прямо в HTML?

17.11.2011 04:48

Есть технология с бородой - data URI, о которой пока мало кто знает т.к. современные браузеры только-только пару лет как стали ее нормально поддерживать.

Технология позволяет вставлять картинки прямо в HTML, без загрузки каждой с сервака. Для страниц с множестов мелких изображений, особенно на мобильных клиентах, скорость загрузки возрастает вплоть до в 10 раз.

Применять просто:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />

где после base64, собственно и идёт закодированная в base64 картинка.

Пример для пхп:

<img src="data:image/png;base64,<?=base64_encode(file_get_contents("image.png")); ?>" />

В CSS всё аналогично, единственное что IE до 9й версии некоторые поля нормально не обрабатывает.

 

 
disserman

Отредактировано disserman 17 ноября 2011 04:48

2 1380
    icon   icon   icon   icon   icon
Комментарии (2)
Смотреть профиль

15.01.2012 13:15

kamedov

для этого обычно используют css-спрайты. идея такая: берем все мелкие картинки и собираем из них одну большую, в css определяем классы, которые будут в нужный блок фоном вставлять нужную картинку. размер блока = размеру нужной картинке.
для больших такое не используют, т.к. их лучше грузить параллельно. чтобы хоть часть сайта сразу после загрузки отображалась как надо.
Смотреть профиль

16.01.2012 6:42

disserman

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

Войдите чтобы оставить комментарий

Лучшие