Design Export Checklist: Size, Compress, Contrast and Alt Text Before You Publish

A design can look perfect in the editor and still fail on the page. The image is far larger than the space it fills, the text is hard to read on a colored background, or a screen reader user hears nothing at all. This checklist covers the four things worth checking every time you export a design from Canva, Figma, Visme or any other editor.

1. Export at the size the page actually shows

Start with where the image will appear. If a blog column is 800 pixels wide, a 4,000-pixel export only makes the page slower. A common rule of thumb is to export at the displayed size, or at twice that size if you want the image to look sharp on high-density screens. Do not guess: check the container width in your page template, then resize to match.

If your editor does not let you set an exact size, use the free Image Resizer after export. UrwaTools also explains the reasoning in its guide on using an image resizer to improve website performance.

2. Compress the file

Resizing removes pixels you do not need. Compression removes bytes you do not need. Photos usually compress well as JPEG or WebP, while flat graphics with sharp edges often suit PNG. Run the final file through the Image Compressor and compare the result with the original at full size before you replace it. If you see blocky edges or banding, use a lighter compression setting.

If you are choosing a format, the UrwaTools WebP format guide explains where WebP helps and where another format is the better choice.

3. Check text contrast

Low-contrast text is one of the most common design problems and one of the easiest to fix. The W3C's Web Content Accessibility Guidelines (WCAG) 2.2 set a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at level AA. Pale gray on white and white on a light photo are the usual offenders.

Paste your text and background colors into the Color Contrast Checker. If you need to read a color value from a design, the Color Picker converts between common color formats. If a pairing fails, darken the text or the background before you export, not after.

4. Add alt text

Alt text describes an image for people who cannot see it and for search engines. Write one short sentence that says what the image shows and why it is there. Skip phrases like "image of". If the picture is purely decorative, leave the alt text empty so a screen reader skips it. After the page is live, run it through the Image Alt Text Checker to find images that were missed.

5. Handle special cases

Product photos often need a clean cutout. UrwaTools covers the edge problems in its article on transparent backgrounds for product photos. If you generate images with AI, read the licence terms first; the comparison of AI image generators and stock photos explains what to check.

Which editor should you export from?

The checklist works with any editor, so choose the tool that matches the job. For social posts and quick marketing graphics, Canva is a common choice (see the Canva listing on ProductListo). For product screens and design systems, teams often look at Figma. ProductListo's roundup of the best design tools for non-designers and small teams compares seven of them on price and fit, and its design tools guide covers the wider category.

Makers of design tools can submit a tool to the ProductListo directory or read about sponsored placements on its write for us page.

The one-minute version

1. Resize to the displayed width (or twice that for sharp screens).
2. Compress and compare against the original.
3. Check text contrast against WCAG 2.2 AA.
4. Write short, specific alt text, or leave decorative images empty.
5. Re-check the published page.