CSS sprites make it possible to to join multiple images into one image. You can then use this one image to call the multiple images by using CSS X and Y background coordinates to tell the browser where the multiple specific images are located in the one bigger picture and where to place them on your page.
One of the ways to improve site speed is reducing the number of HTTP requests your site requires to fully display your page. Using a lot of images for design or functional purposes will create a lot of these additional requests. A good way to combat this is to combine images using CSS sprites.
You should only use sitewide images. In other words, images which are used on most of your websites' pages. Follow these steps to detect and download them:
Select the images you have saved by following the four steps outlined in the above paragraph and use the CSS Sprites Generator to combine them into one image file by clicking the "Build" button. The generator will also automatically create the CSS code you need to call the multiple images on your site.
- Copy the code in the CSS tab and paste it to your site's CSS script.
- Asjust the background-position: X and Y coordinates to position the image in the exact spot you want it to appear in your website your website. For example:background-position: -808px 25px;
If you already used CSS to call your images instead of HTML tags you should replace your old CSS code used to call images with the new code found in the CSS tab:
For instance, replace background-image: url('image.png') with background-image: url('sprite.png') background-position: 0px -197px; width: 365px; height: 360px;
We can help with that! We have professionally optimized the speed of thousands of websites. Because of this we know how to get the best results quickly while keeping our prices low. Get an instant price quote for our services here.
