Creating sprites tp reduce site speed

Hello,

I ran my website through https://gtmetrix.com/ and the first and most important recommendation I have in order to reduce the speed of my website is to combine images into sprite.

I’m not sure how this can be done?

Has anyone done this?

Basically all you have to do is create one image with all the little images that will ever be used on the site placed inside. This way it will have to be loaded only once for each page (and it will be cached most likely for all the other pages) and this will reduce load time significantly. But then every time you need to insert any of the smaller images from this sheet, you have to place the main sheet into the container with overflow:hidden, give the sprite an absolute positioning and manually adjust its placement so that only the part of image containing the illustration you need is visible. Obviously this is more useful for smaller elements like icons not full screen photos.

1 Like

@dram Great advice. I never really thought about how to implement Sprites… but now that I’ve finally read how it’s done, it’s totally obvious in hindsight.

Thanks for sharing.

No problem, but to be honest I’ve never used them myself in webflow in actual interface - too much hassle with manually adjusting the images position. I used sprites for animation though here - the tail wag is a sequence of images placed one after another, and an interaction on mouse hover to quickly move them step-by-step one frame after another in succession and then returning to the starting position.