Как се задават изображения по този начин

K

kWo_2

Registered
Hi. Стана ми любопитно как се задават изображения в css по този начин:
Код: 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAA3CAMAAADZn0ObAAABgFBMVEX%2F%2F%2F%2Fy1pHuLjfMm2W4yfA1TrPukgZDats3V8fwTEypjWy8u7oPsSWVsOoBdwwClhI%2FZdlasGjpOUOVlJjx0c20CyZpea36pAdIdebyu7COlqpYaql2hLH40Gn59vayuMlZiOunpqjYGy9wiNLd5PRqlOzzcmz%2Fwi4FpRrqsDisbm7O2O%2FKycrGfHmdo7CFmdPs7Ozz8%2FPIDSvcFC%2BTR0vCw8Xj5OTc3Nynvu7l6%2FfVjyw7Xc%2FSMT%2FZbgbT09NDbuHKz9BKf1Hr5ubiHTLt8vz%2Btxj1%2BOrT1txYedhLcNfwjYjTES6yq6r27Oqnq7NJZsiykpDNEiyxUVOTptiys7LNs6%2FhegO3p5L46MRveZiXcHBFXbY5dkLUysj0Pj9OfOjRS1JVZZzMrZGoXWCzKjn%2BrgpcdsflfIKh26frpKHJGzIqxDe4cC2AoOnOXl%2FYaWx204D4XVWsPEjRXwXqoRqYFSnN5dBhfMwZjipRaLvUmpk3x0SualZBXcJIV5A9nk5h34NHAAAJe0lEQVRo3u1YC1fa2BYGBBJA2lSeRjzyUKmQQgJNAoYhlJciiKJYHx2hYm2rre2140zHmem9f%2F3uE16JOpVZpcuuu%2B5eLpeSsPOdb3%2Fn2%2FtEp%2Ft%2FdAOV3%2F4L4tGj39DI3ynOp%2BznEPaUcZ77LqjKb%2F989%2Be7d5OPreKIDygaz9teWSYIgpJlb9u%2FnUqj8cP6jX87OTn58Pd6dqTkabvfS6z66FgsEKN9rymi4l31x6NjB1YWeODqwTNbfpTURgDlpgNNPrciilmGj7kpQEZQIaE4bmDcJIbFsyPUD6iq%2BGK2rMAhWARCnJCNbVAUJZlCwrgJ44Cth8%2F4u6U1f%2B4nrhwBRs0rYvkr0mQ6CqyMvY5KEe%2BGVTz3y18czetbgxM3TEcO29jZQiD5EYqIoILSfl3UPB7%2FEzW5AdX4nWtyJLZSfi81E8jdvM04Z%2BOF7%2BBdI0l%2BfsFPbDhuuwsJYn78zgVsvRuBLVzCmYB42%2FPRjQ%2B%2FFSUatYhpv18m923sSDmd02uLb9ZOnTdSoj19GMesfq94DXoxajSmcNjt9nP7vALroaaI65B1cXFtWl2a1IKX%2BuIYpROg6YtWy2IxtOD3mra6e7Ph8FJnYqlUAmR76ksoeu5vt%2F0QbS9BUXGoyjW21tcsEDiz5XS4XOiD1FXgbmUj52Lrw2ataatZpyAs00P3L8%2BGS52mzcbYdjGwkp4bAIv65VA8vkrIXmgibndgDlyoxxbXS3thmKjVms0nsNypjyzq17AN0mreXUOg6knNlhUFYWXnpWFqqvAH1xfgbHhpN8CLLMsKzNJJqXTSYfvW027XAe8cTcEA8Dlg40Xc%2FcHkB7CmLwyb8F3I2pkyGApP2P5yvLLkvltagOqDg1esFbGHUwVDIbnDDriy1rPdf7js5UnpxNNBvd0k082sAHDj0Mgo3wrbk%2FwAlvOiFQkcYkUgdsKQDJ71koJpEZL7rt0KFbQYHAC%2B%2Bzjuj0KhkMxklW%2FthcPLjqHrdU5OTjyXilah%2FbsDue5KQhRBSXPdZw7ZWsdpe%2BJHzmDD5Yp0LcHexmzd5W1o7cKwpTIR9iXAqkbymKxw%2BNLazA%2BHzyWAZe4Ar8UFv%2BzuXUE5SqYkd7bL1gAW1ODlIO1p8sz160GuD4ugru6C5bywGI5VlUanAKtxxkBqPYbFDNlGsxjWMnxi9Lep%2FX4dUFumKLKbogsL%2FkSLF4bjZrey05ag6%2BmBw9Zjy%2BuVqas7tAVktYIHTHn4SR6zldgUMFklszWn8oQ9DMvcyWOfptxM%2F4odpiQyhnc8etyHBcpq%2FYWfjU5bhUwk0MSTVVdbMCZLG%2FWvw1oHsgCWeuyxFJIJ1%2FEKAmWVLq3q4QctAaznVlG30Maw%2BjwaoYgmWtBoaxrybvHrzkVD4cNms8mIfX%2FQGTFbEv1133KCiQYjakp0bzCspwyCGp6YrZpTzCyGtZxDAIvYGMgjKlMkGRCHbAGsNUvLsLVrmZqaAKIYYWh3unlZhqK7v%2B7yzlbLEPxLM2NMK7B4Ftzh0mxVf72sx7DeM9w5WChVFwYPosgjxbaHkl%2BDvJkafzhnUxHVlyKwtTF3rYqoiFuY3b5tj8ejnLNlMAS3NC7iTCYbrqc2Vh8uAVu8SnY6DOuX9zkuRcjYq1CfLcnUbb0qtiBvdXdFEPLsdVq2KVmpItIegwh8wvD7VwnpNZN3GqYMyVeafeEsJF2YLQXWshoW2jsxm3%2BCXZCGnkMR%2FQWnMFnXDOLUAMuN3DqVRzEsqsJwmhOjfTtG03SlQpAmmmed0BaCZ7uCBlbV5TrguT3oNR5zTY14D2r4C9QVzcHSiNcrSvNkocU5ugsbsqXkfZm7zcu5z7gvSNoDDhKyh7ksT0gSaXKs4H1XKFQj6pnMmay6foXBQ3FPj1V9Se8x%2F%2FQei3t9W5IkahUAoKifUgZwFVsAcR23weDmrTaQkzAuStutOY5D3DxBwdmnBiSBexaCGX5dJXmseGxDeo%2Fn0rOsJnvWA2QpxLD1K1KiZP%2F5gp%2BC415v5ejxwx5baDEDiTPMbVUshiQMrHKTyzQBZJnw7lnPBIPBs01VFd9gsvCK2UsPdk%2FVpRLsQ4fSLxGbi%2FncvpAfj%2BW2QYOa7MMCKeD1frjtcIXmK11cN6SXhu7aZQvtVBvVaoYf3IEymCxcOqQ3m82eS35gOnuYrL7QubzI8CFvBY90%2FRvQ48F0yj2B5RYKH2%2FFlfsCVMPGuz5HpCu4iIrzlJ80Go3qh4GEFmEbOhjl2cXOcwC21L9ULsE2rA21hrhiCDbVl9iQz2GrRvlMo5pMBl86UX8Czg%2BFZCNJDEze1tpHmiB7RYRaRRKJBOBSJnUEJXw6OCyxHTMAW4LMCI85gCqmFcS5TBDgFP0hH7T14MHPTcVT0OGrRqKRTBY%2BnjoF5%2FSbzI4KAj7XY2BESGOraShhjy1Y1%2BYrVyKRWXM6naeZ6quDAN8f58vpnWXAdbKk1%2BvDnucTjmZWS3u0QmAb3O7l%2Fs8DJX5%2F9hZr4HDL5Uo0EkkgrZo429G8cOCyPpMJkFHE6rZxXllWMWqvAFemf%2FfmfMTyB5%2FOgLFktfoJmj0zfPmF2OyudRkUZjYvd3abvPZwl45GV7F4ZSqkMCE8evazEo%2B68hI3P7m68eo4YBM5rVHZ3BiYRMKyVldDqxUJCni0f%2BQIMOzgncRO5HhraysSqfGMoCEE5W2d5YnliYldGNdVZUinFioUQW68UGpBdM2RzfI2HoLpQkACv3n8FCLiqDE3tM%2BKPO1%2B8UIhjXxxdeWj6Rr09UNB9RROELM5hsmKLHf962VWWFkRRSFfVo0B522KCtGxer1Ov8DileJKq%2BZYTvnp38mxYpaBEIXbjvasyMRot3vmCE5ONA2TBhwOytcP1kiJrxyZ1e82CMrnCEAeURB5NwmWT%2F7NvIkQ%2BPffnicQmxdEMZuFVcNxBX3byR5QSfv4nMbhLYpEH%2BAifeI3vCYYx%2FuQ6IIXUDGDSqE8dBPTDMP9YzTjjDToinSoa4aEDRDtSC87vl8Y2xXCRGtKhuLA1j3DssPJRYppHcxOmvbvGxb4OqllSxeH4Y1B9woriseSDV4Nolgh92Pi%2FcLSKZPpa%2FWwFCdnHDx3v6h07GdoOFJlLq1TbEs3HyJn6PG%2FTf%2FH9ie6cY%2BViJA9lUqdQ7f2Be4fFfap2IzSYLG7k1c%2BGDp%2BAFTKJF%2FzufdnZtz7PrrevDZ03GPAaJDjbRA8dGsW6X6cgNmAhSEG%2FUiY%2Fsfiv02O7iVu1LunAAAAAElFTkSuQmCC
Забелязвам го вече в няколко сайта. Кешират изображенията в браузъра ми ли, какво? И след това как ги извикват, ако е така.
Ако някой знае каква е тази работа..
 
kWo_2 каза:
Ааха. :) Но все пак за какво го правят това? Google например?
Увеличете...
Според мен си е за да не се гледа кода -_-
Или по скоро за тия дето не знаят как да го видят ;)
Не че има голям смисъл :)
 
dashe каза:
kWo_2 каза:
Ааха. :) Но все пак за какво го правят това? Google например?
Увеличете...
Според мен си е за да не се гледа кода -_-
Или по скоро за тия дето не знаят как да го видят ;)
Не че има голям смисъл :)
Увеличете...
Да, сигурно е заради това... Иначе и това може да се де-криптира. :)
 
tedo96 каза:
Няма голям смисъл от това... :)
Увеличете...

http://www.stoimen.com/blog/2009/04/23/when-you-should-use-base64-for-images/

Overview of the problem

Let’s say we’ve a HTML document with 100 images into. That’s a rare case I agree, but sometimes it happens. You’ve to preload the thumbnails of an image gallery where only one image is displayed in a bigger size. As I mentioned before the progressive JPEG suits better for a large image but for the thumbnails you’ve to use baseline JPEGs.

Note: In fact the technique with base64 representation of the images is not well known. I think that’s because there are not so much examples with pages with more than 100 images.

But anyway. We’ve the HTML document with 100 images (100 <img> tags). That means directly 101 requests/responses from the server. In my tests on my localhost, which is supposed to be fast enough, that case loaded 2 MB with a simple small JPEG for the image, loaded 100 times, and approximately 3 seconds. Which yet again on the localhost is extreamly slow. The image is on my machine, the server is here… what else?
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе