Should I embed images as data/base64 in CSS or HTML

by

Is this a good practice? Are there some reasons to avoid this?

It’s a good practice usually only for very small CSS images that are going to be used together (like CSS sprites) when IE compatibility doesn’t matter, and saving the request is more important than cacheability.

It has a number of notable downsides:

  • Doesn’t work at all in IE6 and 7.

  • Works for resources only up to 32k in size in IE8. This is the limit that applies after base64 encoding. In other words, no longer than 32768 characters.

  • It saves a request, but bloats the HTML page instead! And makes images uncacheable. They get loaded every time the containing page or style sheet get loaded.

  • Base64 encoding bloats image sizes by 33%.

  • If served in a gzipped resource, data: images are almost certainly going to be a terrible strain on the server’s resources! Images are traditionally very CPU intensive to compress, with very little reduction in size.

More Related Contents:

  1. What is the effect of encoding an image in base64?
  2. Specific order of inline-block elements on mobile and desktop devices
  3. Why doesn’t height: 100% work to expand divs to the screen height?
  4. Put icon inside input element in a form
  5. Grid properties not working on elements inside grid container
  6. Can I change the checkbox size using CSS?
  7. How to blur(css) div without blur child element [duplicate]
  8. Border length smaller than div width?
  9. Should I specify height and width attributes for my IMGs in HTML?
  10. Preventing double borders in CSS Grid
  11. Why is there a vertical scroll bar if parent and child have the same height?
  12. How to center an element in the middle of the browser window?
  13. Turn off iPhone/Safari input element rounding
  14. How do I center list items inside a UL element?
  15. Styling an anchor tag to look like a submit button
  16. Scrolling to an Anchor using Transition/CSS3
  17. Why does CSS not support negative padding?
  18. Can a ::before selector be used with a ?
  19. CSS data attribute new line character & pseudo-element content value
  20. CSS grid wrapping
  21. How can I create a row-based masonry layout using CSS?
  22. Selecting the last element among various nested containers
  23. Why using absolute position causes the div to be on top?
  24. How to put img inline with text
  25. Element with “display: inline-flex” has a strange top margin
  26. How to flatten nested divs to display them in a CSS grid?
  27. Img’s max-height not respecting parent’s dimensions
  28. backdrop-filter not working for nested elements in Chrome
  29. display: flex not working on Internet Explorer [duplicate]
  30. Fitting child into parent

Leave a Comment