Reducing number of http requests for large number of images.

[salma]

Hi there,

I am making a puzzle program. Each puzzle will have 9 pieces and I may end up having 30 puzzles meaning that I will need 9*30= 270 images. This number may grow as the program grows. I am also considering responsive web. The puzzle pieces(images) will also be animated on some events and user interactions. My concern is having lots of images(http requests) slow down the page.

I’ve thought about css image sprits but I can’t have the images as background image because they are puzzle piece shape and not rectangular.

I also thought about having one svg image for each puzzle but wasn’t sure how I can place parts of an svg image in different positions on the page.

Any thoughts how I can do it?

Thanks in advance,
Salma

[salma]

For sure, if I want to use svg I have to illustrate the images in svg which is not a problem because they haven’t been created yet.

Well, I think if you have an svg element it will appear in the exact path shape and not in a rectangular shape. But if I use background image it will cover part of a rectangle, where I cannot detect whether the user clicked on the uncovered or covered area! This won’t happen with svg (<g></g>), right?

[Author]

Posts