A product illustration will appear in a small menu and in a large guide header. Thick geometric strokes may read well in both, while fine lines disappear at small sizes. Before choosing a format, write down where the graphic will appear, how large it will be, and what readers need to get from it.

When does a vector source help?

For shapes, lines, and flat colour, a vector source scales to different sizes. If your publishing tool accepts safe SVG, consider it for simple artwork. A photo-heavy or strongly textured image may work better as a raster file. Keep the editable master separately whichever option you choose.

Export raster files for the destination

When a page cannot use SVG, try PNG or a suitable WebP export. Check transparent artwork on light and dark surfaces. A tiny icon may need thicker strokes. Scaling down a large file in CSS does not guarantee that its lines will remain readable.

Keep text and information accessible

If labels and values in a diagram matter, include them as nearby text. Important headings can often stay as page text instead of being baked into the image. Decide which information belongs in a short text alternative and which needs a fuller explanation beside the graphic.

Compare the small and large placements

Open the menu at its actual size and then check the larger header. Note contrast, edge detail, readability, and file size. If the graphic is a control, check focus and its accessible name too. Save the final file with a name that identifies where it belongs.

Prepare the artwork at three sizes

Imagine drawing a direction marker for a bus route. Fine lines can look elegant in a large header and run together on a small phone button. A presentation may need a more detailed version because the diagram is the main object on the slide. Make a copy of your source and view it at all three intended sizes. Compare the surrounding space, the separation between lines and how quickly you recognise the symbol. The smallest version may need fewer details or a thicker stroke. This is a design choice as well as an export choice. Keep the larger source available so the changes for a small icon do not make the large diagram unnecessarily heavy. If a graphic conveys a state, give viewers something besides colour to distinguish it. A shape, word or position can keep the meaning available on a dim display or a dark background. Check the graphic beside the other controls it will accompany.

Review it beside real text and backgrounds

A drawing is easy to inspect on an editor's empty canvas. A website may put it on a coloured card, next to a heading or under another symbol. Check contrast against the actual surface and see which lines disappear at the smallest size. For a raster export, inspect the edges for an unexpected fringe. For a vector version, check how the text renders and what information remains if the graphic fails to load. When all of the labels exist only inside a picture, a phone user may have to zoom to read them. Put important information in the page text too. Name exports according to their role so a colleague can tell why the button version is simpler. Finally, open the page at narrow and wide sizes. If a shape loses its meaning in one placement, try simplifying it before sending a heavier file. Keep the editable source and the accepted exports together so that later fixes begin with the intended drawing.