Image to DataURI Converter

Drop you image in the box

Copy the code and use it in your css to embed your image into CSS.

Why Data URL / Base64 encoded images are needed?

Data URI is a method for embedding tiny images directly in your CSS code using base64 encoding. This will allow images to stay inside an HTML or CSS file. Specially helpful when there are many smaller images used as a background image. This will keep server busy by sending a request for resource. Embeding small image will reduce numbber request made to the server.

What are the benefits of using Data URI:

Improved Load Times : Embedding a few small images within your HTML or CSS will reduce server request and let it do other comuptational tasks.
Reliable : Since it is inline, It will load faster than linked resource.
Compability : It is supported by all major browsers (Explorer and Edge have limited support).

What are the Downsides of using Data URI:

Rigid Nature : Once converted, We can't edit the image easily. We have to edit iamge and then convert again which makes it bit difficult to maintain.
File Size : It is good for small images. Mostly icons. If we embed big images, there are limitation of file sizes and the page will becode render blocking.
Errors : If anything within the coded string is altered, the image won't render. There is no way to debug this problem.