How To “Save For Web” in Affinity Photo

If you are someone who works mainly with web-based images in Affinity Photo, there really isn’t any need for large-sized files that take up space on your hard drive. Instead of saving the file as is, you should save it as a document optimized for web use. But how is it done?

Files in Affinity Photo can be saved for web using the Export Persona. This is a dedicated space for exporting various file formats. Users may also want to remove the metadata from the photo so that the minimum about of information is populated.

Images meant for the web don’t require as much information as those designed for print. Below you will find out how to save images for web in Affinity Photo so that you can use up less space and achieve reasonable download times online.

Saving Images for Web Using the Export Persona

Affinity programs use different workspaces called Personas for each aspect of the design process.

By default, users are brought to the Photo Persona when loading into the program. This is where you will find all of your photo editing tools such as crop, brush, and erase. However, when trying to save a file in a specific way, you need to switch to Export Persona.

To do this, navigate to the toolbar at the top of the screen and select the Export Persona button. This is the icon that looks like a blue dot connected to two smaller dots. You can also access the different Personas from the File menu.

Once in the Export Persona, you will see a few new panels to work with. From the Export Options panel, you can set up your export settings such as file format, pixel format, and resampler. Settings can also be saved as presets for future use.

Choosing Your File Type

When selecting which settings to apply to your exported file, it’s important to think about the file format. Not all formats have browser support, so you’ll want to select the most appropriate format for the site your image will be posted to.

 There are several different file formats that are generally used on the web:

  • JPEG
  • PNG
  • GIF
  • SVG
  • WebP

Though Affinity Photo is capable of opening various file types, not all of these can be exported. As a general rule, JPEG and PNG are safe options for exporting files for web use. You can find more information on supported file types here.

Preparing Images to Save for Web in Affinity Photo

Saving images for the web optimizes them for web use, but this isn’t the only thing you’ll need to do. Before you can save your file, it needs to be prepared with the proper settings, such as cropping the image and removing unwanted elements.

Unnecessary information can create a larger file. Since high loading speeds are important for website performance, it’s important to rid the photo of any unwanted or non-essential information so that the photo can be compressed as much as possible. The following steps should help you achieve that.

Crop and Resize the Image

Research has shown that most users won’t wait more than three seconds for a site to load. Large image sizes can really bog down load times. so, make sure images are cropped and resized before exporting the file.

To crop a photo:

Click on the Crop Tool from the toolbar. Adjust the settings to the area you would like to crop, then click Apply.

To resize a photo:

Images in Affinity Photo can be resized using two methods: scaling or resampling. Scaling is typically used for print images, so you’ll want to focus on resampling. This will change the number of pixels in the image, making it larger or smaller.

Resampling is done from the Document menu by selecting the Resize Document option. In the pop-up window, you’ll want to make sure that ‘Resample’ is switched on for the pixels to change. Otherwise, you’ll only affect the dpi.

After you’ve selected your dimensions, simply click Resize.

Remove Metadata from Exported Images

One of the easiest ways to compress a file is to remove much of the useless metadata from the image, such as time, camera model, and white balance. This can help to reduce the size of the file dramatically, making it much more optimal for the web. However, this can’t be done by simply exporting.

To remove metadata from the image, you will need to access the Metadata panel. To do this, click on the View menu at the top of the screen, then click Studio and select Metadata. This can be done from the Photo, Develop, or Export Persona.

Within the panel, you will be able to add new data and edit/remove any existing data. The metadata you’ll want to specifically focus on removing is the EXIF data. This contains any information about the hardware, such as the type of camera and the settings that were used.

To remove the EXIF data, open the panel’s preferences and select Strip All EXIF. This will get rid of all the hardware data and shrink your file size.

Why You Should Save for Web

Various photos and graphics add a lot to a website. But they can also slow it down and create long load times. The best way to keep this from happening is to optimize the images for the web. This is typically where the ‘Save for Web’ feature in graphic design programs comes into play.

For example, let’s say you’ve finished creating your mockup photos on Placeit for a brand new product you’re launching. Though the mockups may look great, if the files are large and create long load times, this could cost you a sale.

Therefore, shrinking file sizes and compressing photos are essential when creating images and designs that are meant to be displayed online.

Final Thoughts

Whether you work with print designs or photos created for the web, it’s important to optimize your files to yield the best results. Hopefully, this guide gave you an idea of how to save for web in Affinity Photo.