html картинка кодом

[Aerrt85]

Есть html страничка, в неё вставляем картинку - иконку. в браузере получаем отображение этой картинки (файла картинки). все типовое, никаких проблем. все работает.

Как можно уйти от файла -картинки, вставить в html сам код картинки? ОСновная задача - избавиться от файлов - картинок, но в браузере получить отображение этих картинок?

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

[lexxcode]

читайте об base64, но учтите, что размер на выходе "файла" будет ~33% больше + забудьте о кэшировании этих файлов

[madhed]

Если иконка позволяет - ее можно определить в шрифт, или же нарисовать с помощью css3 (если опять-таки позволяет само изображение). Так же ее можно вставить через canvas.

[rgl]

Попробуйте "порыть" в сторону формата svg

[klierik]

1. http://webo.in/artic...ata-url-images/

2. http://webo.in/artic...owser-data-url/

3. Yahoo! Smush.it™ - www.smushit.com/

4. http://www.dailycodi...geToBase64.aspx

читайте об base64, но учтите, что размер на выходе "файла" будет ~33% больше + забудьте о кэшировании этих файлов

не совсем так:

1. размер в base64 зависит от самой картинки. 33% это средневзвешанное. если картинку предвариательно сжать/почистить то размер будет существенно меньше оригинала.

2. интегрирование base64 непосредственно в CSS решает проблему в кешировании.

2.1 кеширование недоступно только в случае использования base64 непосредственно в верстке. к примеру:

<img
src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7"
alt="Larry" />

PS: все иконки сайта можно запаковать в "css спрайт"

Edited January 11, 2013 by klierik

[Aerrt85]

YES!!!! Всем спасибо!

Картинки предполагается "вшить" в CSS, увеличение размера - будет на 50 кило больше весить, ну и что? картинки сами маленькие (иконки) ....

Всё, закрыли тему.