What is CSS Sprites?
CSSSprites is the process of combining many image into a single bigger file to use in website which help in speeding the performance. This will fetch graphic to memory and only some part of image is displayed which results in faster loading.
What Does It Mean to Combine Images Using CSS Sprites?
Without CSS sprites, each image on your WordPress site is a separate file. When someone visits your website, that person’s browser issues an HTTP request to download each individual image file, which you can see if you look at the waterfall analysis chart in a performance optimization testing tool like Pingdom.
If you use five images on a page, that means five separate HTTP requests – one for each image. This creates problem in your page speed because, it sends HTTP request to five images causing decrease in loading speed. We should understand fewer HTTP requests means a faster loading site.
Cons of CSS Sprite?
To fix that, you can combine your images into as few images as possible using CSS sprites.
Essentially, this means that you combine all your separate images into a single image file. Then, you use CSS to manipulate that single image so that it only shows the specific image you want at each location. So you can still show five separate images on your page – they just all come from the same image file.
On the front-end, your human visitors won’t notice any difference between using CSS sprites and separate image files. But on the backend, visitors’ browsers will only need to download a single image file, which speeds up your site’s page load times.
This process can affect your SEO since you cannot at alt image to your images. Specially it can affect if you are trying to rank in Google Image Search. Also if people using screen readers this is going to be difficult.
You Can Use CSS sprite for:
- Decorative icons on your page specially that are static.
- Logos or picture of people in testimonials.
- Social buttons
WHICH IMAGED TO DO CSS SPRITE
images which are not important for SEO.
PREOCESS EXPLAINED ?
Here is the simple 2 step process to combine images using CSS sprites very easily. I will explain for WordPress developer but the process is similar to other platforms too.
1. Use Sprite generator tools.
You can use this site
https://www.toptal.com/developers/css/sprite-generator/
Add your files to be merged and generate css codes.
Let say I have flag of United states, United Kingdom and Srilanka.
Now you will get combined image in your right side and CSScodes in left.
2. Download the image on right and upload in your wordpress library.
4. Use to display image you can write <span> tags.
<span class=”class_generated”> </span>
Here class_generated are the class with dot that is generated as CSS.
You can edit in header or footer of the theme also if you know how to implement. For wordpress developer can easily update the theme code. If you are working on live server make sure you have backup your code.