Combining Images Using CSS Sprite
| What it is: | The pictures on your site are combined from a single source, and instead of calling many pictures individually during the opening of the site, it provides a noticeable speed increase since the pictures from one source are requested. |
| Solution: | Combine images with CSS. |
| Expert Comment: | This structure is valid for background images called with CSS, not for images. It can be done while the site is live. It is a very useful application. |
General Explanation
You can combine the images on your website in as few files as possible using CSS sprite. This defragmentation process helps you reduce delays and round trips when downloading other resources. You can also reduce the total number of bytes downloaded by the web page, by reducing the request overhead.
Details from Google
Similar to JavaScript and CSS, downloading multiple images causes additional rounds. A website with a lot of images can combine these images into fewer output files to reduce latency. This will be more affordable in terms of cost.
If you combine images using CSS Sprite, if you are using multiple icons on your website, you can reduce the confusion to a simpler form by combining them all in one file instead of sending separate requests for each. Instead of defining separate image paths for each icon, it is sufficient to define a single image path.
Apart from these, combining the images and icons on your website with CSS Sprite will speed up the opening of your block when clicked. In terms of site page speed optimization, doing this will increase the site speed by an estimated 3% to 5%.
Programs such as Photoshop or Illustrator should be used to optimally combine images with Css Sprite. Because you must know exactly the height and width of the pictures used. Apart from this, it should be noted that there is no space between the pictures.
Page Speed Terms and Solutions
