Menu
Consider this conditions for my website:
I don't support IE8 and below so browser support is not a problem.
I also use gzip that would avoid data overload in CSS in cases that I copy and paste data URI images in my CSS file.
I only have one CSS file that is generated by LESS.
To make it easy, I use LESS variable for each image data URI.
With all this I am still not sure if it's best approach for loading images. Loading small images with this approach reduces number of HTTP requests and also we don't have to maintain a sprite image.
Is there any drawback in this approach you can think of?
777
What Is a Data URI? A data URI is a base64 encoded string that represents a file. Getting the contents of a file as a string means that you can directly embed the data within your HTML or CSS code. When the browser encounters a data URI in your code, it's able to decode the data and construct the original file.
A Data URL is a URI scheme that provides a way to inline data in an HTML document. Say you want to embed a small image. You could go the usual way, upload it to a folder and use the img tag to make the browser reference it from the network: <img src="image.png" />
If any image changes, the entire css file has to change. This breaks HTTP cache. With a sprite image, the css file itself would be served from cache, and only the changed image would have to be downloaded again.
It may be better to generate a css file only for the data:URI images, and another for the regular CSS stuff. This way, regular css updates don't require re-downloading the data:uri images.
Second problem is with foreground images, those that are served with <img> tag in the html. If it is a frequently used image, it will unnecessarily increase the size of the html.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
