精灵VS大图

Question

While doing some performance testing on my website, I noticed that the 3 images on the home page were taking 1 second per image to load.

These images are 3 1000 x 1000 high def images that only load on the homepage.

I was thinking about turning those 3 into a sprite sheet to reduce the load time of the website.

Do you think this is a good idea? I know that sprites work well with small images, but I have never tried it with 3 1000px images that are high def.

Would if be better to use the sprite or just keep them loaded individually?

I found a few similar questions online but was not able to come to a conclusion.

Answer 1

Good question, the problem that sprites solves is meant mostly when there are many and small images. So instead of making 100 requests to a server you make a single one.

When using large images you won't get much benefit from this concept. Also with larger images, it's better if the first image get's loaded and you could render it to a user and meanwhile load other images.

Third option would be to render some small thumbnails 20x20 pixels JPG files(usually <~10KB size), and then stretch these to the same size as the larger ones. This causes some blurry image but it's understandable what's on the image. Now when the larger images gets loaded you replace the small ones. This requires additional JavaScript execution.