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

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.

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to base64

How to convert an Image to base64 string in java? How to convert file to base64 in JavaScript? How to convert Base64 String to javascript file object like as from file input form? How can I encode a string to Base64 in Swift? ReadFile in Base64 Nodejs Base64: java.lang.IllegalArgumentException: Illegal character Converting file into Base64String and back again Convert base64 string to image How to encode text to base64 in python Convert base64 string to ArrayBuffer

Examples related to background-image

How to add a color overlay to a background image? CSS: stretching background image to 100% width and height of screen? CSS blur on background image but not on content Adding background image to div using CSS How to apply a CSS filter to a background image How to use responsive background image in css3 in bootstrap Responsive background image in div full width Overlay a background-image with an rgba background-color Is there a way to set background-image as a base64 encoded image? Using HTML data-attribute to set CSS background-image url

Examples related to data-uri

Send a base64 image in HTML email Drawing an image from a data URL to a canvas Download data url file Is embedding background image data into CSS as Base64 good or bad practice? Is there any way to specify a suggested filename when using data: URI?