Improve image quality

When importing webpages into Figma, html.to.design automatically detects if the images on the page are low resolution and can be improved. If they have a higher resolution source available, the plugin offers the option to import these high-resolution versions instead.

How to improve image quality

1. Import a webpage via URL or the Chrome extension

Import the webpage into Figma as usual, either by entering the public URL or using our Chrome extension for pages behind a log-in.

2. Select to import high-res images

During the import an options menu will appear; make sure High-res images is selected. Then click ‘Go’ to complete the import and the plugin will automatically improve the images’ quality to the highest resolution available.

Screenshot of how to import high-res images into Figma.

3. Alternatively, use the side-menu shortcut

If you want to improve image quality for a webpage already imported, you can do so at any time from Figma’s bottom-right options menu.

With the entire webpage or any individual image selected, check the bottom-right side panel in Figma. If the images have a higher resolution available, you will see the option Import high-res images.

Screenshot of high-res images shortcut in Figma.

This feature is great for image-heavy pages such as Pinterest boards, your portfolio, a blog… For professional, accurate designs, it’s important to have good image quality.

html.to.design helps you create high-fidelity prototypes by importing the best quality images available.

ℹ️ This option is currently only available for PRO subscribers.