How to Export a Dotted Map for a Retina Display
Retina and other high-DPI displays can reveal soft edges in a low-resolution image, especially in a pattern made of many small dots. To keep a dotted map crisp, export it in a format and size that suit the place where it will appear.
For most responsive web use, SVG is the simplest solution. For raster placements, export a PNG with enough pixels for the largest screen size.
Prefer SVG when possible
SVG is vector-based, which means the map can scale cleanly across dense desktop displays and small mobile screens. It is a natural choice for a website hero, a responsive section background, or a design asset that will be reused in multiple dimensions.
Use PNG when the destination requires an image file or when the dimensions are fixed. In that case, the export scale matters more.
Export PNG above the display size
For a PNG that will render at a given width on screen, export it at a larger width so the browser has enough pixels to display smooth dots. This is especially important when the dots are small or the map has a detailed, high-density pattern.
Do not add resolution blindly, though. A very large image can slow a page down without improving a small on-screen placement. Match the export to the largest expected display size.
Simplify small map treatments
High-DPI output cannot fix a pattern that is too detailed for its visual size. If a map will appear in a narrow card or footer, reduce the density or use larger dots. The map will look clearer than a dense pattern that becomes visual noise.
Test at multiple sizes
Preview the map on a high-density phone display and a desktop browser. Check the smallest layout as carefully as the largest one. If the dots shimmer, blur, or merge together, simplify the pattern or adjust the map’s final dimensions.
Keep the page efficient
When using a PNG, avoid delivering a huge graphic to a small mobile placement. When using SVG, keep the decorative map no more detailed than necessary. Crisp design should not come at the cost of a slow page.
Final thoughts
For Retina displays, use SVG for scalable layouts and export raster maps at a size that suits their final display. Then test the real composition: clarity depends on density, placement, and responsive behavior as much as file resolution.