Embedding images in CSS

Embedding images into your CSS is one of those things that might sound unfavourable but in fact gives you many benefits. First and foremost it can lower the number of requests your webpage needs to make, every connection to every resource requires a handshake, negotiation and then download. The more you have in one file, generally the better the performance. This is why some tools will give hints such as embedding the image into the CSS or using Sprites (which I will not cover in this article, and which I think are a horrible HACK in general).

Please bare in mind, it is recommended you only do this for very small images, maximum 2KB in size – don’t use this technique for large images as you have to remember that the browser is going to be needing that CSS file in order to render your pages, so if you have a enormous CSS file it is really going to have an opposite effect and will cause serious bottleneck to your web page load times.

So if you have things like buttons, small badges, small background images then you should seriously consider embedding them into the CSS to save on requests and resource load times.

So this is achievable by generating a BASE64 encoded string of the image file and then referencing it in CSS, much like when you embed an image into HTML IMG tags. We have a tool already which can take an image file and convert it to a BASE64 embeddable string which you can find below.

Embed Image into CSS

Let us know what you think of the tool.

How to embed image into CSS

The first thing you are going to want to do is convert your image into a BASE64 encoded string, the tool above can do this for you, and here is an example image I have done:

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABjFBMVEUAAAAdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHBsdHBsdHRsdHBsdHRsdHRsdHRsdHRsdHRsdHRsdHRsbLR8cKR4dHRsdHRsdHRsdHhsbLh8cJR0dHRsdHRsdHRsdHRsdGRoQkzkRjjgdHxwdHRsdHBscKh4RkTkQlzoeGBodHRsdHRsdHRsdGxoPnjwShDUdHRsdHRsdIRwRjjgPpT4dGxodHRsdHRsdGhodGxodHRsdHRsdHRsdHRsdGhodGxsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRv////7os7KAAAAgnRSTlMAACwUkJMVAgMg0P2sDjFtfIRxYGzA/vRALsjj7fxRSs/uo0/S97vi1deG5Ln1+1617/ngjxpi8wkzVVtHHjDRzhM+d2AZZXU02JE6TpdYf4ofJZV6Vpw/X68wb4CYsreTnUFBWg0POypBlTyNRxpORAplhHsFC4d8agEvagwRWGcm60v5hgAAAAFiS0dEg/y0z9IAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjBRAONDUj+gG9AAAA40lEQVQY02NggAFGRiZmRgYkwMjIwsrGyAhmsXMwAgEnFzcPLyOIz8cvICgkLCIq1iQuwQjkS0pJy8g2gYGsHCODPKtCExwoKikzqKgi+GJq6hoMsk2aWtpQAR1WblUGXT19RgkDQ24xI2MTUzMxcwYudU5GRgtLK2sbW3ZGO0N7BlYHRydnF0dGRlc3dw9XTy8Gb2sfXz//gMCg4JDQsPAIDwZms8io6JjYuPiExKRknpRUhjR5pfSMzKxsn5zcvPywgkKgS73DiopLSsvKKyrDmMB+q6qukatlZKyrb2gEehYAric3QRp0bvoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMTZUMTQ6NTI6NTMrMDI6MDDFuhn/AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTE2VDE0OjUyOjUzKzAyOjAwtOehQwAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==

To embed this into CSS you would do this:

.myclass {
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABjFBMVEUAAAAdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHBsdHBsdHRsdHBsdHRsdHRsdHRsdHRsdHRsdHRsdHRsbLR8cKR4dHRsdHRsdHRsdHhsbLh8cJR0dHRsdHRsdHRsdHRsdGRoQkzkRjjgdHxwdHRsdHBscKh4RkTkQlzoeGBodHRsdHRsdHRsdGxoPnjwShDUdHRsdHRsdIRwRjjgPpT4dGxodHRsdHRsdGhodGxodHRsdHRsdHRsdHRsdGhodGxsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRv////7os7KAAAAgnRSTlMAACwUkJMVAgMg0P2sDjFtfIRxYGzA/vRALsjj7fxRSs/uo0/S97vi1deG5Ln1+1617/ngjxpi8wkzVVtHHjDRzhM+d2AZZXU02JE6TpdYf4ofJZV6Vpw/X68wb4CYsreTnUFBWg0POypBlTyNRxpORAplhHsFC4d8agEvagwRWGcm60v5hgAAAAFiS0dEg/y0z9IAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjBRAONDUj+gG9AAAA40lEQVQY02NggAFGRiZmRgYkwMjIwsrGyAhmsXMwAgEnFzcPLyOIz8cvICgkLCIq1iQuwQjkS0pJy8g2gYGsHCODPKtCExwoKikzqKgi+GJq6hoMsk2aWtpQAR1WblUGXT19RgkDQ24xI2MTUzMxcwYudU5GRgtLK2sbW3ZGO0N7BlYHRydnF0dGRlc3dw9XTy8Gb2sfXz//gMCg4JDQsPAIDwZms8io6JjYuPiExKRknpRUhjR5pfSMzKxsn5zcvPywgkKgS73DiopLSsvKKyrDmMB+q6qukatlZKyrb2gEehYAric3QRp0bvoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMTZUMTQ6NTI6NTMrMDI6MDDFuhn/AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTE2VDE0OjUyOjUzKzAyOjAwtOehQwAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==);
}

And thats it!

List of SEO Stop Words ignored by search engines

When looking at the keyword density of a web page you will undoubtedly come across common words which make up sentences such as “and, or, is, in” and etc. Search engines call these Stop Words, they are words that are considered junk to search engines and don’t really make any sense to be counted or referenced in any way to a search. Our Keyword Density Checker has the option to ignore these Stop Words when calculating and displaying your keyword density, so that only keywords relevant to search engines are listed and calculated.

It is also commonly advised not to use Stop Words in your links/slugs.

 

Why are these words ignored?

consider the following sentence:

“I want to buy a ticket to benidorm and party all night!”

A search engine doesn’t need all the Stop Words, it can simply interpret the text as:

“buy ticket benidorm party night”

The search engine doesn’t need to waste space keeping the whole sentence because from the above text it can do everything it needs to show relevant results to searchers.

Of course in the era of natural language and AI learning, this doesn’t mean don’t construct meaningful content that is natural and readable, but this illustrates just one reason why we don’t count or show statistics for Stop Words in our tools.

 

List of Stop Words

Below is a comprehensive list of all Stop Words we have in our database that will get stripped from our calculations.

[keyword-extractor]