Data URIs

Для быстрой загрузки изображений используйте data:url

В css это делается данной конструкцией:

.class {
background: url("data:image/png;base64,you_code_here") no-repeat 0 0;
}

Вместо png впишите тот формат, который вы закодируете (gif, jpg, png).

В html это выглядит так:

<img width="10" height="10" alt="star" src="data:image/png;base64,you_code_here" />

Собственно формат записи:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Зачем мне использовать data:url ?

Главная причина это http запросы. С помощью данной технологии меньше запросов. Меньше запросов, значит лучше :)

Как закодировать картинку?

Используйте в поиске фразу base64 online или один из ресурсов:

Поддержка браузеров

Все современные браузеры поддерживают. IE начинает поддерживать с 8 версии.

1 комментарий к записи

  • #

    Сам использую, но мне кажется это для маленьких картинок использовать лучше)