Satellite JPG — JPEG satellite tiles for web maps
Satellite JPG is the standard scheme for delivering satellite imagery to web maps as 256×256 pixel JPEG tiles, by XYZ or WMS schema. It's what you see when switching Google Maps or Yandex.Maps to "Satellite" view to peek at your house from orbit. Inside — regular JPEG with typical quality 70–85, optimized for maximum compression with minimal readability loss. For web maps with millions of visits this remains the best bandwidth-vs-quality compromise despite WebP and AVIF.
History: from MapServer 2000 to global tile providers
WMS (Web Map Service) — an OGC standard from 2000 for requesting map images over HTTP. Earlier each request rendered an image from scratch on the server based on bbox coordinates. Slow and unscalable — every zoom, every mouse move triggered a new render.
In 2005 Google Maps presented a radically different idea: pre-cut the entire Earth into 256×256 tiles at each zoom level (0–18), store statically on CDN. This XYZ tiling concept became the industry standard — Bing Maps, OpenStreetMap, Mapbox, Yandex.Maps, everything adopted it. Tile URL has format https://server/z/x/y.jpg where z is zoom, x/y are tile coordinates in the Web Mercator grid.
JPEG was chosen as the format for a simple reason: satellite imagery is photographically continuous information (grass, forest, asphalt, roofs) without sharp color borders. JPEG at quality 70 yields a typical 15–25 KB tile — vs 100–200 KB for an equivalent PNG. For billions of requests per day this difference is hundreds of terabytes of bandwidth.
Today satellite JPG is served by: - Esri World Imagery (free, commercial limits, ArcGIS basemap) - Mapbox Satellite (paid, best composite from multiple providers) - Google Maps Satellite (paid via API, usage limits) - Yandex Satellite (free for Russia) - Bing Maps Aerial (paid via token) - Maxar / Planet Labs (commercial high-res down to 30 cm/pixel)
What's inside a Satellite JPG tile
From a file standpoint — regular JPEG. Tile size — 256×256 or 512×512 pixels. Encoding — baseline JPEG with quality 70–85 (the sweet spot for maps). No georeference inside the file — coordinates are determined by request URL (z/x/y).
JPEG uses 4:2:0 chroma subsampling — simplifies color info by 50%, fine for photo-realistic imagery, gives artifacts on sharp color transitions (e.g., bright red roof on white snow). Rarely critical for satellite imagery.
Tile-to-coordinate mapping follows the standard Web Mercator (EPSG:3857) tiling schema:
- At zoom z, tile (x, y) covers (xmin, ymin, xmax, ymax) in projection
- xmin = -20037508 + x * (40075016 / 2^z)
- Similar for others
Browser libraries (Leaflet, OpenLayers, MapLibre) do this arithmetic automatically — the user just gives a URL template https://server/{z}/{x}/{y}.jpg.
Who needs Satellite JPG: five roles
Real-estate site. Zillow, Redfin, Rightmove all show satellite underlay next to property listings. Satellite JPG via Esri World Imagery (free with limits) or Mapbox (paid) is standard. Thousands of listings × thousands of views — millions of tile requests per day, where JPEG bandwidth savings directly convert to page-load speed.
Tourist site. Booking.com, TripAdvisor, Skyscanner show satellite next to hotels to convey "this is downtown or suburbs", "near beach or in mountains". Satellite JPG works well on mobile where traffic is costly. Hybrid mode (satellite + vector roads from OSM) is the gold standard.
Agricultural SaaS. Cropio, OneSoil, ClimateField show fields from above in their interfaces for agronomists. They use ESRI World Imagery as basemap, with proprietary vector field-boundary layers + NDVI overlay on top. Satellite JPG here is background, context; real analytics come from Sentinel-2 GeoTIFF.
OSINT journalist. Bellingcat, Spiegel, BBC Reality Check use before-vs-after satellite comparisons in war coverage. Sources — usually Maxar (commercial) or Sentinel-2 via Sentinel Hub. Final material is inserted as a web-viewer screenshot — that's satellite JPG.
Education and geolocation. Google Earth Web, Esri Story Maps — educational platforms where satellite JPG is the basis of visual storytelling. Any school geography project starts with a satellite view of the home city.
Software for Satellite JPG: seven tools
Leaflet. Open-source JavaScript library for web maps. Minimal code to plug satellite JPG:
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Esri World Imagery'
}).addTo(map);
Free. leafletjs.com
MapLibre GL JS. Open-source fork of Mapbox GL JS. Raster source support via declarative JSON style. Better than Leaflet for hybrid vector + raster maps. maplibre.org
OpenLayers. Open-source, another Leaflet alternative with deeper GIS features (reprojection, WMS). openlayers.org
QGIS XYZ Tiles plugin. In QGIS plug any XYZ source via Browser → XYZ Tiles → New Connection. Free path to preview satellite tiles on desktop. qgis.org
gdal2tiles.py. Utility from GDAL bundle for slicing a large GeoTIFF into XYZ pyramid of JPEG tiles. gdal2tiles.py -p mercator -z 0-15 -w leaflet source.tif tiles/. gdal.org/programs/gdal2tiles
MapTiler Engine. Paid SDK for slicing custom ortho imagery into satellite JPG tiles. Alternative to gdal2tiles with GUI and optimization. maptiler.com/engine
TileMill / Mapnik. Open-source stack from Mapbox. Used for vector-tile generation but also produces raster JPG tiles from ortho sources. mapnik.org
Pitfalls and tips
Quality vs size. Quality 70 is standard for satellite JPG, gives 15–25 KB tiles. Quality 85 — 30–50 KB with visibly better detail. Quality 60 — 10–15 KB but compression artifacts become visible on detailed imagery. Sweet spot — 75.
Clouds. Sources of satellite JPG are either single-pass imagery (clouds where they were at capture) or composite (best-of-many) where clouds are hidden by better tiles. Google Maps, Esri use composites; raw Sentinel — single-pass.
Date freshness. Unlike satellite GeoTIFF where each scene has a specific date, satellite JPG in most web maps is a composite, a "snapshot" assembled from many dates. Don't use for "what happened that day" analysis. For fresh imagery go to Sentinel Hub or Planet Labs.
Attribution required by license. Esri requires "Esri World Imagery" attribution prominently; Mapbox — "© Mapbox © OpenStreetMap"; Google — separate license agreement. Non-compliance can block your API key. Be especially careful in production — Google and Mapbox can auto-block.
JPEG has no transparency. If your underlay is partially transparent (e.g., region-boundary mask), JPEG is unsuitable — use PNG. Base limitation; common designer mistake is switching PNG → JPG for bandwidth and losing transparency.
Antialiasing on zoom boundaries. When transitioning between zoom levels JPEG tiles from different levels can visually differ slightly in color (compression artifact). On detail this appears as "tone shift". Fix — unified encoder or smooth crossfade in renderer.
Stale tiles in CDN. When updating the base source, CDN-cached tiles remain old. For CloudFront — TTL up to an hour. If deploying a fresh satellite layer — purge cache manually via AWS API.
Rate limits on third-party sources. Esri World Imagery — free up to certain QPS, then blocked. Mapbox/Google — payment threshold. If expecting a traffic peak — coordinate with the provider in advance or build your proxy + cache.
How to combine Satellite JPG with an OSM export from osm2cdr.ru
Satellite JPG is a raster underlay; osm2cdr.ru produces OSM vector layers. The hybrid map — satellite below + roads/POIs/labels on top — is the gold UX standard. Implemented in Leaflet or MapLibre without much effort.
Step 1. On osm2cdr.ru export the layers of interest for your city to GeoJSON or PMTiles. For a hybrid map typically needed: roads (with labels), labels (POI names), boundaries (district borders).
Step 2. Plug satellite layer + your OSM overlay in Leaflet:
const map = L.map('map').setView([55.752, 37.625], 14);
// Satellite layer below
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '© Esri World Imagery',
maxZoom: 19
}).addTo(map);
// OSM vector overlay
fetch('/data/moscow_roads.geojson')
.then(r => r.json())
.then(data => L.geoJSON(data, {
style: { color: '#fff', weight: 1.5, opacity: 0.9 }
}).addTo(map));
Step 3. In MapLibre GL JS the implementation is more declarative:
{
"sources": {
"satellite": {
"type": "raster",
"tiles": ["https://server/{z}/{x}/{y}.jpg"],
"tileSize": 256
},
"osm-vector": {
"type": "vector",
"url": "pmtiles://https://yourcdn.com/moscow.pmtiles"
}
},
"layers": [
{ "id": "satellite", "type": "raster", "source": "satellite" },
{ "id": "roads", "type": "line", "source": "osm-vector",
"source-layer": "roads", "paint": { "line-color": "#fff", "line-width": 1.5 }}
]
}
Result — a map showing the real urban fabric + crisp vector overlays with roads and labels. The base UX template of any modern map web app.
Related formats and resources
- Satellite GeoTIFF — source data for tile generation
- Satellite PNG — lossless alternative for line-art overlays
- JPEG — base format for satellite JPG container
- PMTiles — single-file vector tiles for the web
- MVT — Mapbox Vector Tiles for vector layers
Sources
- OGC WMS specification — ogc.org/standards/wms
- XYZ tile schema (Tile Map Service) — wiki.openstreetmap.org/wiki/Slippy_map_tilenames
- Esri World Imagery service — livingatlas.arcgis.com/wayback
- Mapbox Satellite product — docs.mapbox.com/data/tilesets/reference/mapbox-satellite-v1
- GDAL gdal2tiles documentation — gdal.org/programs/gdal2tiles.html
- Leaflet TileLayer documentation — leafletjs.com/reference.html#tilelayer