Between “finished designing” and “live” sits a craft
During my training as a graphic design technical assistant, export was an afterthought — “well, then you just save it as a PNG.” In eleven years of web practice I've learned: export is not an afterthought but the step that decides half the performance and the image sharpness of the finished page. And it's the step that a surprising number of designers routinely skip.
The most expensive mistake: just exporting
The default reflex — “Export as PNG,” everything at single resolution — produces files that are both too large and too blurry at once: too large for photos, too blurry for Retina. A good export distinguishes by image type: vector-like things stay vector, photos become modern raster formats, and resolution is chosen deliberately rather than picked up by accident.
SVG: the most misunderstood format
Logos, icons and illustrations with clean shapes belong on the web as SVG — sharp on every display, often just a few kilobytes. The catch: design tools like to export bloated SVG — with editor metadata, unnecessary groups, endless decimal places and embedded raster images. A raw Figma or Illustrator SVG is quickly three to five times larger than it needs to be.
That's why every SVG on my end runs through an optimization after export that strips exactly this ballast. What happens in the process and what to watch out for is in the article Shrinking SVG files. Important: if a “logo” only sits inside the SVG as an embedded pixel image, it's not a real SVG — then it belongs rebuilt as a clean vector.
Raster done right: 1×, 2× and the right format
For photos and complex graphics the rule is: export at 2× the display size for a sharp Retina rendering — but not at camera resolution. An image that appears 400 pixels wide needs 800, not 4000. And it shouldn't be exported as PNG but as WebP (or AVIF): same look, noticeably smaller. How to serve 1× and 2× cleanly instead of loading the big image everywhere is shown in the article on srcset and sizes.
Icons: no PNG dump
A common pattern: every icon exported individually as a PNG in three sizes — dozens of files loaded one by one. Icons almost always belong as SVG (inline or as a sprite), making them scalable, colorable via CSS and, in total, tiny. Which icon tolerates which format is settled by the comparison SVG vs. PNG vs. JPG for icons.
My export preset
- Logos & icons: export as SVG → optimize → check that no raster image is embedded.
- Photos: 2× the display size → WebP/AVIF → compress; serve 1×/2× via
srcset. - Flat graphics: SVG where possible; otherwise WebP with transparency.
- Never: camera resolution, uncompressed PNG for photos, text as an image.
Export is the unremarkable last stretch between design and experience. Take it seriously and you ship pages that are as sharp and fast as the design promised. At JNRT Pixel the preparation — resizing, converting, SVG optimizing, compressing — runs entirely locally in the browser, with no upload.
Sources
MDN — SVG · web.dev — Serve responsive images · web.dev — Serve images in modern formats.