Do I need to pack small images as data:image;base64 in css or how to convince the opponent?

Hi,

Recently a friend raised a heated debate about whether to pack icons and small images in base64. The peculiarity is that we are writing a phonegap + sencha touch 2 app, but there is also a website.

He argued against this practice:

1) increase the size of the CSS file
2) increase the time to download the image (base64 decoding)
3) the disadvantage of working with CSS that contains binary data, the inconvenience of changing the image
4) one picture it can be used in many places — have for one image to do, and then to cascade to individual elements
5) good pictures keetsa
6) his friends of the web designers first heard about it

I'm in the rebuttal:

1) reduce the number of queries
2) getting rid of the bug when loading/rendering of multiple images is happening simultaneously (though you can group images into sprites)
3) if you are using sass/compas rid of the need to manually encode and embed images in css
4) adopted practice (see page speed as is done in sencha touch)
5) article about it on habré

Can anyone share their experiences and give arguments for or against or challenge the arguments presented to me?
October 8th 19 at 00:14
10 answers
October 8th 19 at 00:16
About the cache: Takashimaya css in the browser as well as a set of images.

Only then added one small picture (removed, changed) and the browser, instead of just drain it, pulling the css from the whole set.
Well, just a little css to tweak everything again to deflate.
if the css changes once in a month then why not - nasir17 commented on October 8th 19 at 00:19
October 8th 19 at 00:18
This approach is very relevant when You have the server is very heavily loaded connections, in other cases, the standard symbols is preferable, vseravno all is cached.
October 8th 19 at 00:20
Initially, You do not think in that direction, as many on Habre... Read about the Application Cache is a modern solution.
Yes, we use application cache, but the fact that the resources it loads consistently and all of these resources increase the manifest file. There is a question of convenience, since if you change one resource to another need to fix it in css and not to forget about the Manifesto. - nasir17 commented on October 8th 19 at 00:23
Then decide what is important to You — ease of development or performance of the project. - Vanessa_MacGyver commented on October 8th 19 at 00:26
I want to combine, is data:image;base64 so will adversely impact performance? - eloise_Hahn commented on October 8th 19 at 00:29
Why?
Data in Application Cache are downloaded the background, without delaying the main download. After the download is displayed instantly, as taken from the cache. Any unnecessary movements.
Application Cahe was originally conceived to perform these tasks. - Vanessa_MacGyver commented on October 8th 19 at 00:32
October 8th 19 at 00:22
1) increase the size of the CSS file
Pictures would be better put in a separate CSS-well, then nothing to worry about
2) increase the time to download the image (base64 decoding)
Time is negligible, so you can walk to that bmp instead of jpeg to give
3) the disadvantage of working with CSS that contains binary data, the inconvenience of changing the image
CSS in a separate file to collect the script from the pictures, the challenges will be. Sprites, in the end, editing is also not particularly convenient.
4) one picture it can be used in many places — have for one image to do, and then to cascade to individual elements
It's good, there will be code duplication.
5) good pictures keetsa
CSS not worse
6) his friends of the web designers first heard about it
Happen. But it would be better to keep silent about it and googling it.
Pictures would be better put in a separate CSS-well, then nothing to worry about

Then browser will issue another request to the server, than too take the time. It will still be to use the sprite, but also additional time for decoding. It is certainly a little, but if you use sprites the scheme work:
Sent a request for a sprite --> Loaded sprite --> Display the picture
Now work:
Sent a request for additional. CSS --> Downloaded the CSS --> Decrypted images --> Display
In other words, will the extra step and minuses will be still more. - nasir17 commented on October 8th 19 at 00:25
Ideally, all styles and scripts before production compressed and merge into one. - Vanessa_MacGyver commented on October 8th 19 at 00:28
> Ideally, all the styles and scripts before production compressed and merge into one.
Yeah, that's what I meant. Just it's clear that to edit the css-ku, where at least one picture in любимом_редакторе_с_красивой_подсветкой can be uncomfortable and people will rebel. - eloise_Hahn commented on October 8th 19 at 00:31
October 8th 19 at 00:24
My experience of using this technology is very positive. I really need to give not icons, and a full image, 10 to 20 pieces on the page, and all of them are generated dynamically, so the sprites are excluded. Time dekodirovaniya base64 ridiculous compared to the time for an additional request.

In the case of small static images big difference compared to a sprite will not.

The argument "web designers have not heard" can be dismissed out of hand. Once people about the web not heard.
October 8th 19 at 00:26
Generally, if you use Application Cache, then use base64 really is no need. It's like arguing to add 1 or 2 HP in the engine for 500 horses.

Thus, getting uncomfortable in situations with sprites for a few different elements.

When using Application Cache, the browser asks at first only the manifest file and if it changed, it starts to send requests if-modified-since for each file.

Now, let's calculate: let's say you have pictures/icons at 20KB * 10 PCs = 200KB
In base64 the size will increase by 1.37 = 274КБ + weight of the rest of the CSS.
I.e. if you change 1 file, you will have to reload 274КБ, at least.

Now what happens if you just cache the images, the overhead of the HTTP request (headers) — 0.15-0.3 KB
a total of 10*0.3 = 3КБ + 20KB new file = 23КБ. But there is an overhead on the network (keep-alive) 1*DNS Lookup + 1*Connect + 10*Send/Receive.

— Although I, for one, love this trick with the reduction of number of queries — in General, we have to proceed from the task — where it fit, and somewhere akin to saving on matches.

en.wikipedia.org/wiki/Data_URI_scheme#Advantages
For small pictures I podrozumeval icons, background, sprites, buttons and the like, an average size of 1-2 KB. - nasir17 commented on October 8th 19 at 00:29
October 8th 19 at 00:28
Such holivary always evoke boredom.

If there is no solution to the lethal advantages or the obvious drawbacks, we choose to be focusing on their personal convenience.
Why holivar, I think quite a specific question. For example, I believe that to build small karinka in css, it's like a sign of good taste, my friend on the contrary, considers it evil. So I want to get an objective point of view. - nasir17 commented on October 8th 19 at 00:31
Holivar because you don't complete the dispute unexpected killer-plus one of the solutions. Ultimately, the choice will be made on the basis not of the primary side of the issue.

It's almost like talking about singletons argue, only a higher level :)

I used both methods. Wrote scripts pictures -> base64 -> sass. Now as everyone started to use the Application Cache. Nobody has yet complained.

Ultimately, the cost difference how you store pictures there. In any case they will be stored, read and displayed. So why not make the entire problem went away as soon as possible to make it so that you were then comfortable to work with. - Vanessa_MacGyver commented on October 8th 19 at 00:34
October 8th 19 at 00:30
In itself, this does nothing in startup time ( online event even later, it happens ) no load speed.
But in the complex this is a very good method of optimization of the number of queries and the cache.

wott.info/wordpress/optimization-in-numbers/
October 8th 19 at 00:32
I propose a formula by which to calculate the relevance of storing images in css.
1) All pictures which users and admii site do not change (control sliders, pagination, logo, background...) stored in a css. The rest of the images connect.
2) image Size less than x bytes are also stored in css.
October 8th 19 at 00:34
23be233749b842fe8ae68ca3fed78ce0.png
W3C swears by base64.

Find more questions by tags Character encodingCSSWeb Development