Shulou(Shulou.com)06/03 Report--

What is the method of using image data URI to deal with pictures in CSS? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Convert the picture resource to base64 string format and embed it into the page or style. In this way, even the request link for the picture is saved.

Such as:

Mode of use

CSS Code copies content to the clipboard

/ * data format * /

Data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

/ * style reference * /

.icon {

Width: 30px; height: 30px

Background-image: url (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC)

}

Tag syntax:

Data: get data protocol

Image/png: the name of the protocol to get the data (note that fonts can also be used for image resources, etc.)

Base64: data encoding method

IVBOR... : encoded data

Advantages

Reduce HTTP requests

Avoid some files crossing domains

There are no problems such as image caching (but generally css also has caching)

Shortcoming

Compatibility (IE6,7 is not compatible and can be resolved using MHTML)

The browser will not cache the image (I wonder if this is the case here, because it also seems to be slow when loading for the first time)

Increase css file size

Coding cost and maintenance (presentation is not intuitive, currently requires manual conversion, I do not know plug-ins such as automatic replacement)

I have seen a review before that the performance is weaker than that of sprite, and I can't find the link for a while.

Taken together, data URI can be used in the

* the size of the image is very small, so it is a bit wasteful to use a http request, such as a gradient background box.

* Images are widely used throughout the site and are rarely updated, such as loading

After reading the above, have you mastered the method of using image data URI to process pictures in CSS? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.