Image as a section of one big imagefile containing many images

[peteritv]

Hi all,

I am probably not the first one to ask this question, but I can't any information about it, so I'll just try here, OK?

I am trying to build a card playing game with a deck of 52 cards, with 4 suits (clubs, diamonds, hearts and spades) and ranks 2 to Ace.
That means I'll have 52 images (+1 for the back side, but we can leave that one out of scope for now) for each resolution, and I want to support 4 resolutions or so to make it look crispy on different devices.

Now, what I have learned from webdesign techniques, is that it is much more efficient (performance and cache wise) to have 1 big picture file that contains all 52 images (for instance 4 rows and 13 columns), then 52 separate small image files for each card. I never got the time to find out how they assign a subsection of such a large image to a specific card image in HTML(5), but now I have to figure it out in Qt5/QML.

I already know that I can use a Rectangle as a view, and position the big image underneath it, kinda like using a looking glass to view part of a roadmap, but how do I make it so, that when that Rectangle resizes (anchored to parent size or so), the contents (the subsection of the image) resizes with it, and NOT resize the view?

So initially the Rectangle will be 100x150 size, to grab an image of the same size, and then when the Rectangle gets resized to 90x135 (aspect ratio is forced) I want the original contents (100x150 pixels image) to scale with is, and NOT get a different view on the underlying big image (which will then show just part of a card).

Question is:
How do I do this in Qt5?
Preferrably in QML?

TIA!
Peter

[peteritv]

Furthermore, and I forgot to ask this, is it really that much difference (performance and cache wise) to go through the difficulties of implementing a subsection image system like this?