How to Export Images Correctly

Exporting images the right way is essential for maintaining good visual quality while keeping file sizes small. This guide shows how to export optimized images from Photoshop, Figma, Canva, and other design tools using the best workflow available today.

Many creators export images without considering the final format, compression level, color profile, or intended display size — and this leads to unnecessarily heavy files, blurry exports, or color inconsistencies across devices. Exporting correctly is not about selecting “Save As.” It is about choosing the right combination of format, quality, resolution, metadata, and color profile.

1. Start With the Right Resolution

Exporting at the wrong resolution is one of the biggest mistakes designers make. Oversized images waste bandwidth, while undersized ones look pixelated.

  • Website hero images: 1600–2000px wide
  • Blog images: around 1200px wide
  • Thumbnails: 400–600px wide
  • Retina mode: export at 2x only when needed

Never export assets larger than the display area required.

2. Choose the Correct Format

The format you export in determines how your image behaves visually and how much space it consumes. Use this quick rule:

  • JPG: best for photos or gradients
  • PNG: best for text, UI, and transparency
  • WebP: best all-around performance and quality
  • SVG: best for vector logos and icons

Whenever possible, export in WebP. It keeps high quality with a fraction of the size.

3. Use the Right Quality Settings

Each tool uses different terms for compression, but the principles are the same.

Suggested settings:

  • JPG: 70–85% quality
  • PNG: 8-bit or reduced palette if possible
  • WebP: 70–80% lossy
  • SVG: Minify + remove metadata

Most design exports look identical at 80% quality compared to 100%, but with far smaller files.

4. Exporting Correctly in Photoshop

Photoshop's “Save for Web (Legacy)” is still the most reliable method for control.

  • Use File → Export → Save for Web
  • Select the right format (JPG/PNG/WebP)
  • Set JPG to Quality 70–80%
  • Check Convert to sRGB
  • Enable Metadata: None

5. Exporting Correctly in Figma

  • Select your frame or element
  • Go to Right Panel → Export
  • Choose PNG, JPG, or WebP
  • Use 2x exports only when required
  • Prefer WebP for final assets

Figma exports are naturally optimized, but WebP offers the best results.

6. Exporting Correctly in Canva

Canva defaults to high-quality heavy PNGs. You must manually adjust settings.

  • Use File → Download
  • Select JPG or WebP
  • Set quality to 70–80%
  • Disable “Transparent Background” unless needed

7. Always Export Using sRGB

Many tools allow exporting in Display P3 or AdobeRGB — which causes color shifting in browsers.

Always export using sRGB for universal color consistency.

8. Remove Metadata to Reduce File Size

Tools often include hidden metadata like camera information, editing history, and geolocation. Removing metadata reduces file size and improves privacy.

Tools for removing metadata:

  • ImageOptim
  • ExifTool
  • Squoosh app

Final Recommendation

Exporting images correctly is a combination of choosing the right format, applying proper compression, exporting in sRGB, sizing appropriately, and removing unnecessary metadata. Once you master this workflow, your images will load faster, look sharp, improve your Core Web Vitals, and provide a better user experience.