The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Reducing number of http requests for large number of images.

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #145391

    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,


    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?

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.