Is embedding background image data into CSS as Base64 good or bad practice

Question

I was looking at the source of a greasemonkey userscript and noticed the following in their css    even   background   fff url data image gif base64 R0lGODlhBgASALMAAOfn5 rq6uvr6 zs7O7u7vHx8fPz8 b29vj4 P39 f   wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7  repeat-x bottom    I can appreciate that a greasemonkey script would want to bundle anything it can within the source as opposed to host it on a server  that s obvious enough  But since I had not seen this technique previously  I considered its use and it seems appealing for a number of reasons    It will reduce the amount of HTTP requests on page load  thus enhancing performance If no CDN  then it will reduce the amount of traffic generated through cookies being sent alongside of images CSS files can be cached CSS files can be GZIPPED    Considering that IE6  for instance  has problems with cache for background images  this seems like it s not the worst idea     So  is this a good or bad practice  why WOULDN T you use it and what tools would you use to base64 encode the images   update - results of testing   testing with image  http   fragged org dev map-shot jpg - 133 6Kb  test URL  http   fragged org dev base64 html dedicated CSS file  http   fragged org dev base64 css - 178 1Kb  GZIP encoding server side  resulting size sent to client  YSLOW components test   59 3Kb  Saving of data sent to client browser of  74 3Kb   Nice  but it will be slightly less useful for smaller images  I guess      UPDATE  Bryan McQuade  a software engineer at Google  working on PageSpeed  expressed at ChromeDevSummit 2013 that data uris in CSS is considered a render-blocking anti-pattern for delivering critical minimal CSS during his talk  perfmatters  Instant mobile web apps  See http   developer chrome com devsummit sessions and keep that in mind - actual slide

User · Answer

This answer is out of date and shouldn t be used   1  Average latency is much faster on mobile in 2017  https   opensignal com reports 2016 02 usa state-of-the-mobile-network  2  HTTP2 multiplexes https   http2 github io faq  why-is-http2-multiplexed   Data URIs  should definitely be considered for mobile sites  HTTP access over cellular networks comes with higher latency per request response  So there are some use cases where jamming your images as data into CSS or HTML templates could be beneficial on mobile web apps  You should measure usage on a case-by-case basis -- I m not advocating that data URIs should be used everywhere in a mobile web app   Note that mobile browsers have limitations on total size of files that can be cached  Limits for iOS 3 2 were pretty low  25K per file   but are getting larger  100K  for newer versions of Mobile Safari  So be sure to keep an eye on your total file size when including data URIs   http   www yuiblog com blog 2010 06 28 mobile-browser-cache-limits

User · Answer

I disagree with the recommendation to create separate CSS files for non-editorial images   Assuming the images are for UI purposes  it s presentation layer styling  and as mentioned above  if you re doing mobile UI s its definitely a good idea to keep all styling in a single file so it can be cached once

User · Answer

I tried to create an online concept of CSS HTML analyzer tool   http   www motobit com util base64 css-images-to-base64 asp  It can    Download and parse HTML CSS files  extract href src url elements Detect compression  gzip  and size data on the URL Compare original data size  base64 data size and gzipped base64 data size Convert the URL  image  font  css       to a base64 data URI scheme  Count number of requests which can be spared by Data URIs   Comments suggestions are welcome    Antonin

User · Answer

You can encode it in PHP      lt img src  data image gif base64  lt  php echo base64 encode file get contents  feed-icon gif       gt   gt   Or display in our dynamic CSS php file   background  url  data image gif base64  lt  php echo base64 encode file get contents  feed-icon gif       gt      1 That   s sort of a    quick-n-dirty    technique but it works  Here is another encoding method using fopen   instead of file get contents      lt  php    convert image to dataURL  img source    feed-icon gif      image path name  img binary   fread fopen  img source   r    filesize  img source     img string   base64 encode  img binary     gt    Source

User · Answer

In my case it allows me to apply a CSS stylesheet without worrying about copying associated images  since they re already embedded inside

User · Answer

Thanks for the information here  I am finding this embedding useful and particularly for mobile especially with the embedded images  css file being cached   To help make life easier  as my file editor s  do not natively handle this   I made a couple of simple scripts for laptop desktop editing work  share here in case they are any use to any one else  I have stuck with php as it is handling these things directly and very well   Under Windows 8 1 say---   C  Users  your user name  AppData Roaming Microsoft Windows SendTo       there as an Administrator you can establish a shortcut to a batch file in your path   That batch file will call a php  cli  script    You can then right click an image in file explorer  and SendTo the batchfile   Ok Admiinstartor request  and wait for the black command shell windows to close   Then just simply paste the result from clipboard in your into your text editor      lt img src     gt    or     background-image   url          Following should be adaptable for other OS   Batch file     rem  echo 0ff rem Puts 64 encoded version of a file on clipboard php c  utils php make64Encode php  1   And with php exe in your path  that calls a php  cli  script      lt  php   function putClipboard  text       Windows 8 1 workaround        file put contents  output txt    text      exec    clip  lt  output txt            somewhat based on http   perishablepress com php-encode-decode-data-urls     convert image to dataURL   img source    argv 1      image path name  img binary   fread fopen  img source   r    filesize  img source     img string   base64 encode  img binary     finfo   finfo open FILEINFO MIME TYPE     dataType   finfo file  finfo   img source       build    data      dataType     base64      img string    putClipboard trim  build       gt

User · Answer

Base64 adds about 10  to the image size after GZipped but that outweighs the benefits when it comes to mobile  Since there is a overall trend with responsive web design  it is highly recommended   W3C also recommends this approach for mobile and if you use asset pipeline in rails  this is a default feature when compressing your css  http   www w3 org TR mwabp  bp-conserve-css-images

User · Answer

It s not a good idea when you want your images and style information to be cached separately   Also if you encode a large image or a significant number of images in to your css file it will take the browser longer to download the file leaving your site without any of the style information until the download completes   For small images that you don t intend on changing often if ever it is a fine solution   as far as generating the base64 encoding    http   b64 io  http   www motobit com util base64-decoder-encoder asp  upload  http   www greywyvern com code php binary2base64  from link with little tutorials underneath

User · Answer

One of the things I would suggest is to have two separate stylesheets  One with your regular style definitions and another one that contains your images in base64 encoding   You have to include the base stylesheet before the image stylesheet of course   This way you will assure that you re regular stylesheet is downloaded and applied as soon as possible to the document  yet at the same time you profit from reduced http-requests and other benefits data-uris give you

User · Answer

Bringing a bit for users of Sublime Text 2  there is a plugin that gives the base64 code we load the images in the ST   Called Image2base64  https   github com tm-minty sublime-text-2-image2base64  PS  Never save this file generated by the plugin because it would overwrite the file and would destroy

User · Answer

As far as I have researched    Use   1  When you are using an svg sprite  2  When your images are of a lesser size  max 200mb    Don t Use   1  When you are bigger images  2  Icons as svg s  As they are already good and gzipped after compression

User · Answer

If you reference that image just once  I don   t see a problem to embed it into your CSS file  But once you use more than one image or need to reference it multiple times in your CSS  you might consider using a single image map instead you can then crop your single images from  see CSS Sprites

[css] Is embedding background image data into CSS as Base64 good or bad practice?

Examples related to css

Examples related to base64

Examples related to background-image

Examples related to data-uri