17.2 Raster Tiles vs Vector Tiles

Key takeaways

• Raster tiles are pre-rendered pixel images; vector tiles are compressed geometry data.
• Vector tiles enable client-side styling, smooth zoom, interactivity.
• Raster tiles remain relevant for imagery, legacy workflows, and simple setups.

Introduction

Both raster and vector tiles solve the same problem: deliver map content to browsers at any zoom level without downloading the whole world. They make different trade-offs. This lesson covers each and when to use which.

Raster tiles in depth

• Format: PNG (lossless, supports transparency), JPEG (smaller, natural imagery), WEBP (modern, smaller).
• Size: 256 × 256 or 512 × 512 pixels per tile.
• Styling: baked in at generation. Change colour schemes → regenerate all tiles.
• File count: zoom 18 alone has 68 billion tiles for the world.
• Storage: typically 100–500 KB per tile (PNG), much less for JPEG.

When raster wins

• Satellite imagery — natural-colour photos are raster by nature.
• Historical maps — scanned content.
• Specific styled output — a fixed map for a report, not meant to change.
• Simpler stacks — any HTTP server can serve images; no WebGL needed.

When raster loses

• Styling is baked in.
• Retina / high-DPI screens need 2× resolution → 4× storage.
• No interactivity at the client.
• Larger total size for the same information.

Vector tiles in depth

• Format: Mapbox Vector Tile (MVT), a protocol-buffer-encoded binary.
• Size: 256 × 256 tile extent in tile coordinates (no pixels).
• Styling: a JSON style specification applied at render time.
• File count: identical to raster (per z/x/y).
• Storage: typically 10–100 KB per tile (vector is compact).
• Rendering: client-side WebGL via MapLibre / Mapbox GL / OpenLayers.

When vector wins

• Dynamic styling — change colours, hide layers, swap symbols without re-tiling.
• Smooth zoom — geometry scales continuously, not pixelated.
• Retina / any DPI — vector renders pixel-perfectly at any resolution.
• Interactivity — click a feature, get its attributes.
• Smaller total size — often 5–10× smaller than raster for the same content.

When vector loses

• Natural imagery (satellite, aerial) — can't be encoded as vectors.
• Complex visual effects (watercolour, hand-painted styles) — harder to replicate at runtime.
• Client compute — WebGL rendering draws on GPU, which may not be available.

Tile generation tools

Vector tiles

• Tippecanoe (Mapbox, open) — industry standard for generating MVT from GeoJSON.
• tegola — live vector-tile server with PostGIS backend.
• Martin — fast tile server, PostGIS and MBTiles support.
• OpenMapTiles — pre-built schema and toolchain.
• Planetiler — generate planet-scale vector tiles quickly.

Raster tiles

• MapTiler Desktop / Server — commercial.
• tilemaker — C++ OSM-to-MVT with raster output option.
• gdal2tiles.py — rasters to tiles.
• TileMill / CartoCSS — legacy open-source raster styling.

Pre-rendered vs live

Pre-rendered

Generate all tiles ahead of time, upload to storage. Fast for clients, no server compute needed. Drawback: large disk (planet raster tiles can exceed 1 TB).

Live

Serve tiles on demand from a source database (PostGIS). Flexible for frequent data updates; higher server compute.

Hybrid: pre-render popular tiles, fall back to live for others.

PMTiles — single-file tile archives

PMTiles packages a whole tile pyramid into one file. Client reads specific byte ranges via HTTP range requests. Benefits:

• Zero infrastructure (static file server only).
• Easy CDN caching.
• Atomic updates (replace the file).
• Vector or raster support.

Perfect for self-hosted static-site maps.

Cost comparison

A global OSM dataset:

• Raster tiles zoom 0–10: ~5 GB.
• Vector tiles zoom 0–10 (planet): ~80 GB.
• Full raster zoom 0–18: ~500 GB + .
• Full vector zoom 0–14: ~80 GB (Planetiler).

For anything beyond zoom 10, vector is dramatically cheaper.

Performance

• Initial load — raster renders immediately; vector requires WebGL shader initialisation (~200 ms).
• Pan — both smooth once tiles are cached.
• Zoom — vector is smoother (no pixelation).
• Memory — vector uses more GPU memory at high zoom.

Self-check exercises

1. You're building a real-time dashboard that shows 100 000 moving objects with custom icons by status. Raster or vector?

Vector. With raster, you'd need a tile server regenerating tiles every few seconds — infeasible. Vector tiles (or better, WebGL layers in deck.gl directly) render the points client-side and allow per-feature styling based on live attributes. For this kind of real-time visualisation, deck.gl or MapLibre with GeoJSON sources is the right approach, not either tile type.

2. Why do high-DPI screens benefit more from vector than raster?

Vector tiles render mathematically at any resolution — a 1 px line is always crisp. Raster tiles at 256 px pixel dimension look soft on a 2× retina screen unless you serve 512 × 512 ("@2x") raster tiles, quadrupling storage. Vector scales losslessly; raster doesn't.

3. When would PMTiles be the wrong choice?

When your tiles change frequently (several times per hour) — PMTiles is one file; updating means uploading a potentially multi-GB file each time. For near-real-time tile generation, live tile servers (tegola, Martin) are better. For static or daily-updated data, PMTiles is excellent.

Summary

• Raster tiles: pre-rendered pixels; simple, universal.
• Vector tiles: geometry data + style; flexible, smaller, interactive.
• Vector wins for most new web map projects.
• Raster still matters for imagery and fixed styles.
• PMTiles simplifies single-file deployment.

Further reading

• MVT specification (Mapbox Vector Tile).
• Protomaps blog — PMTiles design decisions.
• OpenMapTiles schema documentation.
• Planetiler project — planetary-scale vector tiles.