When preparing images for the web, you want them to be as small as possible so they load as quickly as possible. Pixelmator Pro lets you export versions of your images optimized for the web using a range of optimization settings, reducing their file sizes. Exporting for the web removes the color profile, any unnecessary metadata, and lets you use advanced compression techniques to export images that load much faster online.
Pixelmator Pro lets you export images for the web in the PNG, JPEG, GIF, WebP, and SVG formats. In addition, you can export the same image in multiple formats or at different sizes at once. As you adjust the export options, you’ll see a live preview of how the image will look when exported.
Note: If you’d like to keep the metadata and other additional image information, make sure to export your image using the regular Export command.
Do one of the following:
Click Presets to select an export preset or choose a custom export format by changing the settings in the Format and the Scale Factor pop-up menus.
Tip: You can also drag and drop the thumbnail in the Export for Web section of the Tool Options pane onto the Desktop, a Finder window, or elsewhere to export one or multiple versions of the image with the current export settings.
Adding an additional export format will mean that, once you export, you will have two versions of your image exported with the chosen settings.
If you’d like to remove an export format, click Format and choose Remove.
Click the disclosure triangle next to the export format.
Use the following settings to customize the image:
By default, images exported for the web are exported at 1x, which means they are exported at the original size of the image you created. When preparing images to be displayed on high-resolution displays such as Retina, in addition to regular displays, you'll need to make sure the Retina image is twice as large as the standard image. This is due to the fact that higher resolution displays usually have at least twice as many pixels. Scale factors let you export a version of your image that is scaled up or down.
Choose the Export for Web tool by doing one of the following:
Choose a scale factor from the Scale Factor pop-up menu.
Note: If your image contains vector and text elements only, you can work on the standard size of the image first and export a 2x version for Retina displays later. If the image has any raster (image) layers, you'll need to work on the Retina version first and export a 0.5x version of the image for standard displays to make sure every detail remains sharp.
The optimized preview is only visible when using the Export for Web or Slice tools. It simulates how the image will look when exported.
Choose the Export for Web tool by doing one of the following:
–click the image and choose Hide Optimized Preview or Show Optimized Preview.