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;
Test and analyze the loading times of your website.
Minimize CSS scripts and files for page speed.
Check how and whether your website files are cached.
Check whether your web pages have Gzip compression enabled.
Minify your JS files and scripts to maximize performance.
Tests your image delivery so you can improve it.
Reduce your PNG image filesize while keeping quality.
Play with the quality and size of JPEGs to save disk space.
Place multiple images in one image to make fewer requests.
Analyze your CSS to make improvements to the CSS Delivery.
Test your web pages for broken links and requests.
How many HTTP requests do your web pages produce?
Encode JPEG and other files into a Base64 string.
Check whether your website has keep-alive settings as enabled.
Check the HTTP server header of your site.