How to Export Sharp, Crisp Images from Figma & Photoshop

The Problem: Sharp Designs, Blurry Exports

You’ve spent hours crafting a beautiful design in Figma or Photoshop. Everything looks pixel-perfect on your canvas. But when you export it as a JPG or PNG and view it in a browser, it looks soft, blurry, or just… off.

This is a common frustration for designers. The blurriness is usually caused by one of two things: exporting at the wrong resolution or using incorrect export settings. This guide will give you a foolproof workflow for both Figma and Photoshop to get sharp results every time.

The Golden Rule: Export at 2x, Display at 1x

The key to sharp images on modern high-resolution screens (like Apple’s Retina displays) is to export your image at twice the size you actually intend to display it at.

For example, if you have a hero banner that will be displayed at 1200px wide on your website, you should export it from your design tool at 2400px wide. Then, in your HTML or CSS, you constrain its width to 1200px.

<!-- The image file is 2400px wide, but we tell the browser to display it at 1200px wide -->
<img src="my-banner-2400px.jpg" alt="A descriptive alt text" width="1200">

This technique provides the browser with double the pixel density, resulting in a much sharper image on high-resolution displays.

Exporting from Figma

Figma is a vector-based tool, which makes exporting sharp assets easy.

Step-by-Step Guide:

1. Select the Frame or Asset: Click on the item you want to export. It could be a single icon, a component, or an entire frame.
2. Open the Export Panel: In the right-hand sidebar, find the “Export” section and click the + icon.
3. Choose the Export Size: This is the most important step. In the “Export” settings, change 1x to 2x. This tells Figma to render the asset at double its canvas size. For very important graphics like logos, you might even choose 3x.
4. Select the Format:
   • JPG: Best for photographs and complex images. Set the quality to around 80-90%.
   • PNG: Best for graphics with sharp lines, text, or transparency (like logos and icons).
   • SVG: The best choice for simple logos and icons. Since SVG is a vector format, it will be perfectly sharp at any size.
5. Click “Export”: Save the file. Remember to compress the final image before uploading it to your website using a tool like our Image Compressor.

Exporting from Photoshop

Photoshop is raster-based, so it’s important to work in a high-resolution document from the start.

The Modern Method: “Export As”

This is the recommended workflow for web graphics. Go to File > Export > Export As....

1. Set the Dimensions: In the “Image Size” section on the right, ensure the width and height are correct. If you followed the 2x rule, your document should already be twice the intended display size.
2. Choose the Format:
   • JPG: Use the “Quality” slider. A value between 70-85 is a great starting point for a good balance of quality and file size.
   • PNG: Use this for transparency. You can often check “Smaller File (8-bit)” if you have a limited color palette (like a simple logo) for a huge file size saving.
3. Ensure Color Space is sRGB: At the bottom of the dialog, under “Color Space,” make sure “Convert to sRGB” is checked. This is the standard color profile for the web and prevents your colors from looking dull in the browser.
4. Click “Export All”: Save your image.

The Legacy Method: “Save for Web”

For older Photoshop versions, File > Export > Save for Web (Legacy) is still a powerful option.

1. Select a Preset: On the top right, choose a preset like “JPEG High” or “PNG-24” as a starting point.
2. Adjust Quality: Use the “Quality” slider for JPEGs. A value around 70-80 is usually perfect. For PNGs, you can choose between PNG-8 (smaller, limited colors) and PNG-24 (higher quality, full color).
3. Check Image Size: Verify the final dimensions at the bottom right.
4. Confirm sRGB: Ensure the “Convert to sRGB” option is checked.
5. Click “Save”.

By always exporting at 2x and ensuring your assets are properly compressed in the sRGB color space, you can finally say goodbye to blurry images and ensure your designs look as crisp online as they do on your canvas.