Image quality

[CardsLab]

Hi everyone.

My boardgame cards are in 1024 x 1418 size but when reduced to 120 x 166 as requested by my developer, the image quality decreases a lot when we see them in BGA.

I'm sure this is a common issue, but couldn't find much information in the forum. How have you overcome this? Thanks.

[ufm]

Resizing is usually required to reduce file size and create a sprite.
If there are texts in the card, reduce to a reasonable size and let the dev deal with the rest by adjusting background-size css property.
Or you can separate texts from the card and let the dev add texts in UI (imo this is way better).

[LeSteffen]

The pixel ratios you provided are not the same, although close. This can result in incorrect pixel placement and murky looks.
Since the greatest common divisor of 1024 and 1418 is only 2 and 1418/2=709 is a prime number it will be difficult to have a pixel perfect result.

You could crop your images to 1024x1416 and shrink them to 128x177.

[CardsLab]

The pixel ratios you provided are not the same, although close. This can result in incorrect pixel placement and murky looks.
Since the greatest common divisor of 1024 and 1418 is only 2 and 1418/2=709 is a prime number it will be difficult to have a pixel perfect result.

You could crop your images to 1024x1416 and shrink them to 128x177.

Thanks! I did as you suggest but didn't notice much difference. Here is the result:
https://www.dropbox.com/scl/fi/20jpyeey ... kxqch&dl=0

I'm exporting as PNG with bilinear option. Should I try other encoding?

[Victoria_La]

128x177 cannot be good qualify. Why such a request? It is not reasonable now days, Should be at least twice this size.

[GTSchemer]

Indeed, that size is extremely small. JPG with decent quality can also be used if PNG file sizes become too large, but it's more important to get card dimensions higher.

[CardsLab]

128x177 cannot be good qualify. Why such a request? It is not reasonable now days, Should be at least twice this size.

Thanks, will talk to my developer. According to him, bigger images would impact the mobile experience. Do you share the same view?

[Victoria_La]

128x177 cannot be good qualify. Why such a request? It is not reasonable now days, Should be at least twice this size.

Thanks, will talk to my developer. According to him, bigger images would impact the mobile experience. Do you share the same view?

Cards for terrafoming mars 320x400 and nobody complained about loading speed. It does take longer to load (its not instant). Image sprites for cards 5Mb each. This is not ideal but if you get your file under 2Mb it should be fine

Card width in pixel have direct corrlation with image qualify but not with size of the file (which is concern of developer I guess),
There are tool to deal with size of file
* developer has to use sprite format (total sprint size cannot be more than 4096 in any dimention)
* it has to be jpg (because its smaller and most reasonable choice for square images)
* use resonable card size (width between 200 and 400 I would say)
* can use some online tools to reduce the size (that will affect qualify - need to experiment)

[Tisaac]

128x177 cannot be good qualify. Why such a request? It is not reasonable now days, Should be at least twice this size.

Thanks, will talk to my developer. According to him, bigger images would impact the mobile experience. Do you share the same view?

How much of these cards are going to be displayed in a regular game ? I am asking because one popular workaround is to put separated images in a subfolder of the img directory. That way, these images wont get preloaded by default, reducing the bandwith, but will be fetched only when needed (HTTP2 even allow to natively batch fetch them). This is done lie this in Agricola with almost 50Mb of assets that are not prealoaded by default, since it's reprensents assets for all the 843 cards where instead at least 14 cards * #players are used in a single game so around 50 at most.

[Oberstille]

Just to add another datapoint, I've been working on adding more content to The Shipwreck Arcana, and as part of that I needed to add more card images; I landed on 250x427 (mostly because the source assets that I have were double that in each dimension). That seems pretty similar to what VictoriaLa mentioned!

They look much nicer and the text on them is way more readable than in the currently-published version, at least to me. Even on mobile, I'd expect the final assets to be cached after the first time that they load; I'm probably not going to be redownloading them over LTE while I'm running around! Here are pictures of similar assets "before" and "after": https://i.imgur.com/c7JURCi.png, https://i.imgur.com/tylxkEw.png. Other quality stuff aside, the cards in the "before" assets are 100x256.

From the perspective of also being a player of a lot of these games, I agree with what everyone else is saying---please consider using a little bit of extra storage and bandwidth to make the game look nicer!

If preprocessing, scaling, or spritesheeting are giving you trouble (or if there's anything else that I can do to help), I'd be happy to share what my asset pipelines look like. They aren't fancy (they're a combination of shell scripts wrapping ImageMagick and Grunt (the JavaScript tool) build files) but they get the job done pretty effectively, and in a repeatable way.