Картинка в base64 в CSS

[vga1]

Привет!

Решил поускорять загрузку картинок, переписал на base64
Было

.ratings_1 {
background: url("/images/rating.png") repeat-x;
}
.rating_2 {
background: url("/images/rating.png") repeat-x;
}

Переделал

.ratings_1 {
background: url("data:image/pgn;base64,МНОГО-МНОГО-МНОГО-ТЕКСТА") repeat-x;
}
.rating_2 {
background: url("data:image/pgn;base64,МНОГО-МНОГО-МНОГО-ТЕКСТА") repeat-x;
}

И тут получается, что картинку в формате base64 надо вставлять 2 раза, а это по размеру много. И как это дублирование убрать?

[ziliboba0213]

Решил поускорять загрузку картинок, переписал на base64

Это вы где прочитали про скорость?

А по коду непонятно, какое дублирование?

[vga1]

Сообщение от ziliboba0213

Это вы где прочитали про скорость?

Тут и читать не надо, если 20 мелких картинок, которые до этого из разных файлов грузились, всадить в один css в base64, то скорость отображения полной страницы сайта вырастет. Количество соединений к серверу уменьшится. Я уж молчу, что css у меня прямо в странице грузится. Самопис, кода мало.

Cпрайты у меня не прижились.

Сообщение от ziliboba0213

А по коду непонятно, какое дублирование

Когда имя /images/rating.png в нескольких местах используется, броузер его закеширует и второй раз скачивать не будет.

А мне надо две одинаковые картинки в base64 вставить. Но как бы так похитрому, чтобы длинный base64 один раз описать, а из других мест на него ссылки были или что-то подобное.

[ziliboba0213]

vga1, я поофтопю немного, простите А нахуха так извращаться?

[vga1]

Сообщение от ziliboba0213

vga1, я поофтопю немного, простите А нахуха так извращаться?

Да пожалуйста, мне 25 сообщений еще набрать надо

Чтобы побыстрее сайт грузился. Индусы же страдают, когда на их кнопочном смартфоне медленно грузится. Да и карму Гугль долгой загрузкой понижает, хотя бы в их инструментах. Страница меньше дергается, когда все картинки в теле. У меня пунктик, я программировать начинал с ассемблера, поэтому хочу чтобы код был маленький и быстрый

[ziliboba0213]

Сообщение от vga1

Да пожалуйста, мне 25 сообщений еще набрать надо

Чтобы побыстрее сайт грузился. Индусы же страдают, когда на их кнопочном смартфоне медленно грузится. Да и карму Гугль долгой загрузкой понижает, хотя бы в их инструментах. Страница меньше дергается, когда все картинки в теле. У меня пунктик, я программировать начинал с ассемблера, поэтому хочу чтобы код был маленький и быстрый

https://ru.wikipedia.org/wiki/%D0%97...B5%D1%82%D0%BE

Я сам люблю, когда красиво, но это уже совсем перебор, имхо

[Diversant]

vga1, а почему так никто не делает ? Есть какая то инфа по этому вопросу?

[Academik]

vga1, может так?

.ratings_1, .rating_2 {
background: url("data:image/pgn;base64,МНОГО-МНОГО-МНОГО-ТЕКСТА") repeat-x;
}

[Geers]

Сообщение от vga1

Тут и читать не надо, если 20 мелких картинок, которые до этого из разных файлов грузились, всадить в один css в base64.

Так это не так делается..
Я не понял откуда вы это взяли)

Грузите все иконки в один файл рисунка, потом вычесляется его местоположение:

PHP код:

.online {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(../images/online.png) no-repeat 0 -146px;
} 


base64 - вообще тут никак не при делах )
Может вам надо шрифтовые иконки или svg

[vga1]

Сообщение от Academik

vga1, может так?

.ratings_1, .rating_2 {
background: url("data:image/pgn;base64,МНОГО-МНОГО-МНОГО-ТЕКСТА") repeat-x;
}

Это пример упрощенный, В реалии, у .ratings_1 и .ratings_2 куча других различающихся параметров.