base64-кодирование

[PavelTkachev]

Узнал о возможности внедрения картинок с помощью base64-кодирования. Поскольку статьи я читал стары, то хочу уточнить остаётся ли сейчас ограничение в размере картинок в 20kb? Существует ли падение производительности при отображении закодированных изображений? Можно ли внедрить в css шрифты с помощью base64-кодирования?

[iKNG]

Ограничения, насколько я знаю, нету. Производительность наоборот улучшается из-за сокращения кол-ва запросов. В CSS можно внедрить. Font Squirrel вроде такую функцию имеет.

[PavelTkachev]

Я читал вот эту статью:

http://www.xiper.net/collect/html-and-css-tricks/overclock-site/data-url.html

 

Тут сказано, что поскольку кодирование вставляется в url, то существует ограничение по длине кода. Чтобы везде работало надо не более 20 kb. При этом кодированный фрагмент больше оригинала примерно на треть. Это ограничение снято?

 

А про производительность в этой же статье сказано, что FireFox сильно тормозит при декодировании.

Edited March 27, 2014 by PavelTkachev

[PavelTkachev]

http://ru.wikipedia.org/wiki/Data:_URL

Internet Explorer, начиная только с версии 8 поддерживает этот формат и то в ограниченном размере до 32,768 знаков.

 

А какие данные для IE9?

Интересно, а favicon может быть внедрён с помощью base64-кодирования?

[PavelTkachev]

Поддерживают ли браузеры мобильных устройств отображение картинок после base64-кодирования?

[Sensei]

http://caniuse.com/#feat=datauri

[PavelTkachev]

То есть для всех браузеров, в том числе для IE9 и выше, я могу кодировать картинки до 4GB?

[iKNG]

То есть для всех браузеров, в том числе для IE9 и выше, я могу кодировать картинки до 4GB?

Какие браузеры какие размеры картинок поддерживают, я не знаю. Но в этой таблице написано не про размеры, а про поддержку base64 вообще.

[Veseloff]

А какой смысл в этом? Ну можно, да. Ну, возможно, сэкономит пару запросов к фронтенд-серверу. Не понимаю только цель этих извращений.

[PavelTkachev]

 

То есть для всех браузеров, в том числе для IE9 и выше, я могу кодировать картинки до 4GB?

Какие браузеры какие размеры картинок поддерживают, я не знаю. Но в этой таблице написано не про размеры, а про поддержку base64 вообще.

 

 

 

Support in Internet Explorer 8 is limited to images and linked resources like CSS files, not HTML files. Max URI length in IE8 is 32KB. In IE9+ JavaScript files are supported too and the maximum size limit set to 4GB.

А какой смысл в этом? Ну можно, да. Ну, возможно, сэкономит пару запросов к фронтенд-серверу. Не понимаю только цель этих извращений.

 

 

Нагрузка на сервер будет ниже, если есть 1 файл в котором закодированы все данные, чем 10 файлов.

[Veseloff]

Нагрузка на сервер будет ниже, если есть 1 файл в котором закодированы все данные, чем 10 файлов.

А вы представляете себе какая должна быть нагрузка, чтобы это реально стало заметно? Один из миллиона, что вам придётся работать с подобными вещами, так что советую не заморачиваться.

[PavelTkachev]

 

Нагрузка на сервер будет ниже, если есть 1 файл в котором закодированы все данные, чем 10 файлов.

А вы представляете себе какая должна быть нагрузка, чтобы это реально стало заметно? Один из миллиона, что вам придётся работать с подобными вещами, так что советую не заморачиваться.

 

 

Очень хочу заморочиться.

 

 

Про favicon знает кто-нибудь? Если я его закодирую, то будет браузер обращаться к серверу.

[Great Rash]

Про favicon знает кто-нибудь? Если я его закодирую, то будет браузер обращаться к серверу.

Почему бы вам не попробовать и не отписаться тут о результатах?

[PavelTkachev]

Так и сделаю. Просто если бы результат был известен заранее, то я не стал бы эсперементировать.

[PavelTkachev]

Тестирование закончено. Тестировалось

<link rel="shortcut icon" href="data:image/vnd.microsoft.icon;base64," />

 

Проверялось в FireFox, Chrome, Opera, Safari, Android, IE9(64bit). Во всех браузерах, кроме последнего, всё сработало как ожидалось. IE9(64bit) запрос к серверу для получения favicon не делает, но и закодированные favicon не отображает.

 

Также протестировал кодирование jpeg в теге img. Кодировал картинку размером 216кб. В всех выше заявленных браузерах она отобразилась корректно.

 

Вывод. В современных браузерах base64-кодирование картинок работает даже для изображений большого размера. Закодированный favicon в IE9(64bit) не отображается, хотя запрос в серверу за файлом не делает.

Edited March 28, 2014 by PavelTkachev

[nerv]

фронтенд-серверу

взорвал мой мозг =) 

[Veseloff]

взорвал мой мозг =)

А что не так?

[Николя223]

Нагрузка на сервер будет ниже, если есть 1 файл в котором закодированы все данные, чем 10 файлов.

 

Сомнительная экономия... Может быть для чего нибудь и имеет смысл. например всем известная колорзила градиент кодирует, удобно..

 

Но на самом деле я не представляю, как вы будете на код смотреть, если все изображения будут такими. не код, а каша 

[ShumNo]

Это отчасти перфекционизм. Желание сделать идеально совсем не плохое желание. Выше писали, что все это фигня и нет такой нагрузки, чтобы подобная оптимизация дала эффект, НО полагаю забыли про облачные хостинг или гибкие тарифные планы где оплачиваются ресурсы в том числе и запросы к серверу, вот тут оптимизация не снизит нагрузку на сервер, но сэкономит копейку

[Sensei]

Применительно к изображениям, думаю, кодирование в base64 удобно для оформительской графики.

Например, основной фон для сайта, если используется какой-то несложный паттерн, или уголок у блока с цитатой.

В общем для вещей, которые не связаны с контентом, но носят чисто декоративный характер.

[Zverushka]

Ой, а как ваш код читать, если там внутри будет такое чудо закодированное? Верстальщик это увидит и поперхнется чаем, а потом заскринит на память и будет коллегам показывать.

Я до 4кб только кодирую.

[PavelTkachev]

Ой, а как ваш код читать, если там внутри будет такое чудо закодированное? Верстальщик это увидит и поперхнется чаем, а потом заскринит на память и будет коллегам показывать.

Я до 4кб только кодирую.

 

Ещё одно преимущество base64-кодирования. Защита вёрстки от копирования.

[Николя223]

Ещё одно преимущество base64-кодирования. Защита вёрстки от копирования

 

и в чем же оно заключается? ))  проведи эксперимент - выдели любую картинку и вставь в визивиг - картинка встанет, но с линком на тот сайт с которого скопирована. А если закодирована - то тоже встанет, но в этом случае она попадет прямиком в бд

[PavelTkachev]

Тем, что

Верстальщик это увидит и поперхнется чаем

 

Не всякий после этого захочет копировать.