Лагатып OpenStreetMap OpenStreetMap

Sprite Sheets

Апублікавана карыстальнікам pnorman 20 Жнівень 2025 на мове English

Vector Tile styles require icons are served in a sprite sheet. This contains all of the icons in one file. Years ago there were a few options for these, none of them great. These days, there are three common options: spreet, @basemaps/sprites, and sprite-one. The first is written in Rust while the other two are written in Javascript.

All have the same basic functionality of turning a folder of SVGs into a json+png spritesheet, and doing so at multiple resolutions. Spreet has the additional option of de-duplicating icons. If two icons are identical it will only put one copy in the PNG and reference the same image twice.

I benchmarked all three options with two sets of sprites: all the SVGs from OpenStreetMap Carto, and the OpenStreetMap Americana icons. The former is 973 icons and the latter is 248 icons. These are larger than a typical set of icons but are a good test.

  Test spreet sprite-one @basemaps/sprites
osm-carto SVGs @1x pixels 4194304 4078074 8339456
osm-carto SVGs @1x bytes 513159 763531 837792
osm-carto SVGs @1x bytes after oxipng 474750 649894 706845
osm-carto SVGs @2x bytes 1442588 2176457 2411489
osm-carto SVGs @2x bytes after oxipng 1325707 1896784 2088729
osm-americana @1x pixels 128265 122400 151760
osm-americana @1x bytes 75749 91870 92066
osm-americana @1x bytes after oxipng 75497 84986 85828
osm-americana @2x bytes 136177 213876 210650
osm-americana @2x bytes after oxipng 132462 197687 194950

I ran oxipng with oxipng -o max --strip all --alpha -i 0 -Z --fast spreet.png to recompress the PNG to be as small as possible. Spreet came out significantly ahead in file size and appears to have a better PNG encoder, as less space was saved by oxipng.

Email icon Bluesky Icon Facebook Icon LinkedIn Icon Mastodon Icon Telegram Icon X Icon

Абмеркаванне

Увайсці каб пакінуць каментар