I'm working on an art asset for a webpage that's made up of a few 8x8-pixel "tiles", repeated and arranged in different configurations. Sort of like a level in a video game:

A screenshot of "Littleroot Town" from Pokemon. The town is made of 8x8-pixel tiles.

Ideally, I'd like this image to be really big, like 3140x2160, so that I can include enough stuff to fill even a really big monitor without looking like it's repeating. But I don't want the filesize to be huge. Are there any popular image formats that can compress images like this efficiently by storing each tile only once and reusing it? (I heard JPEG uses 8x8 blocks -- would that help here?) Or do I need to make some kind of custom SVG/HTML/CSS code?

  • No, but i would say the tradeoff is having this done today versus having it done in future.
    – joojaa
    Sep 7, 2020 at 5:50
  • 1
    I think you need to save the tiles in a tilemap PNG (avoid using JPEG for pixel art) and use HTML/CSS/JS to distribute the tiles. Perhaps save the pattern in some kind of home brewed text file. You might be able to find a JavaScript library which can do this, or you will have to code it yourself. For example use JavaScript to draw the tiles on a canvas or use HTML elements with the tilemap as background image with different offsets.
    – Wolff
    Sep 7, 2020 at 16:10
  • 1
    I'd use PNGs like Wolff said but use Canvas to render things since it's more performant en masse. Sep 7, 2020 at 23:27


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.