Spritesheets (RFC?)

Hello, something that could greatly improve the performance of websites with many raster icons/logos is the support for sprite sheets (i.e. have multiple images embedded in a larger one). Since Zola already has a system for resizing images, the idea of doing a bit more image processing within Zola doesn’t look too out-of-scope to me.

The way I see it working is that you’d have a sprite tera function that takes:

  • a path to the image that you want to have embedded in a sprite sheet
  • a path to the target location where the spritesheet should be outputted (which also acts as a key to decide which images should end up in the same spritesheet)

This function would then return a Sprite object that contains the absolute path to the spritesheet and the coordinates of the sprite within it (x, y, width, height). This should be sufficient as a low-level building block. I don’t think the original images should be removed just because they appear in a spritesheet, it’s probably much simpler to keep them as-is even if they’re never directly used.

Now, for the sprites to be more easily usable, it may be useful to have an equivalent to the tera function that works inside CSS, to generate the appropriate properties (background: url(<path>) <x_coord> <y_coord> + width: + height:). If there was a way to create some kind of “built-in mixin” in the sass preprocessor (grass), this would probably be the cleanest way to go. Unfortunately, their API doesn’t provide a feature like that as of today. If that’s in their roadmap, maybe that could be something to wait for before considering my idea altogether.

I don’t know if this would be useful to anyone, and if this is in the scope of the project in the first place, but maybe some discussion can stem from here?

Hi there. I don’t speak for Zola, I’m just another user, so this is just an opinion: Unfortunately I don’t think this is the sort of feature that would make it into either Zola or Tera: it’s pretty niche in 2024. I’ve been creating websites for over 25 years and I’ve not seen anyone using bitmap spritesheets for at least a decade, since most websites these days serve their UI images as SVGs.

I suspect you’d need to either find an off-the-shelf tool for creating spritesheets, or perhaps you could write a standalone script that compiles your spritesheet before you run zola serve.

1 Like