How to optimize and compress images with Affinity Photo

Affinity Photo is a professional level image editing program with features to impress for a reasonable price. In this tutorial we will look at how we can optimize and compress images with Affinity Photo.

I first came across Affinity Photo when I looked for an alternative to Photoshop as they decided to introduce a subscription based payment plan.

I tested Gimp, Canva and then finally Affinity Photo. 

For me the choice was easy as Gimp felt complicated whereas Canva was a bit too basic.

Since writing this article I have learnt how to scale and compress images with Gimp. I found existing tutorials somewhat complicated. For more information read my easy to follow tutorial on how to scale and resize images with Gimp.

Here today we will look at why we compress and optimize images. I will also show how even a total beginner can scale and optimize an image with Affinity Photo in less than 5 minutes. And yes, it will be much faster than that as you get used to the steps.

Why compress and optimize images

We want our website to load fast and present the reader with complete solutions to actual problems. And complete solutions will more often than not include both text and images.

When we purchase and download images we receive files that are enormous in size. And when I say size I mean both the actual dimensions of the image as measured in pixels (height x width) as the weight of the image measured in Bytes. 

We know that images will slow down our website if they are 

• bigger than they need to be
• of a higher quality than they need to be

This is the reason we compress and optimize our images.

How to compress images for WordPress and the web with Affinity Photo

Step 1: Open image in Affinity Photo

First we need to open the image file we want to optimize. Simply click File > Open and then browse to the location of the image you want to open.

Step 2: Choose Exporting options

With our image open the next step is to select to Export the image. Click File > Export per below.

Step 3: Select Export Settings format

We now move on to selecting the file format we want to use when we export the image. Affinity Photo let’s us choose from a range of formats: 

• PNG
• JPEG
• GIF
• TIFF
• PSD
• PDF
• SVG
• WMF
• EPS
• EXR
• HDR
• TGA

For our purposes we will mainly be using the JPEG format as it offers the best level of compression and optimization for images on the web.

Step 4: Resize image

From the window in Step 3 we can see that the image in question has a size of 1220 x 813 pixels. This correcsponds to a image eight of 131,17 kB (kilo Bytes).

Our website only needs a maximum width of 708 px.

If we keep the image as is we would make WordPress load an unnecessary large image and then re-size it before showing it to our website visitors.

This makes no sense.

As our website only needs a maximum width of 708px we will re-size the image and watch the weight of the image decrease to 58,76 kB.

Step 5: Choose level of compression

The next step is to decide what level of compression we think is appropriate.

So far we have chosen the “JPEG (High quality)” preset. We will now look at decreasing the quality from 85 to 70 on the scale. As you can see below size decreases further and is now 37,02 kB.

But the question is of course if we have given up too much quality in our effort to compress and optimize. Look at the images below and you be the judge.

Step 6: Remove EXIF data

In our final step we remove the EXIF data. EXIF stands for Exchangeable Image File Format and is meta data about the image that we have no use for. Examples of EXIF data would be information about the camera and information about where the photo was taken.

To remove EXIF data we click the “More…” button in the “Export Settings” window. In the new window that opens we uncheck the checkbox for “Embed metadata”. We then click “Close to return to the “Export Settings” window.

When we return to the “Export Settings” window we can see that the image file size now is 34,01 kB. This is a saving of 3 kB and every little bit helps.

And there you have it. We have optimized and compressed an image from 131,17 kB to 34,01 kB following 6 simple steps.

Common questions on how to optimize and compress images with Affinity Photo

How to save images for Web with Affinity Photo compare Photoshop

“Save images for Web” is a Photoshop command. In Affinity Photo we use “File > Export”

How to reduce file size with Affinity Photo

You reduce the image file size with Affinity Photo in 3 different ways.

Start by re-sizing the photo to the correct size (pixels) for your purpose.

Then export the image to the most suitable format for your purpose. When we optimize and compress images for the web we most often use JPEG or PNG.

Finally we remove the EXIF metadata that contains information about the photo that adds to the file size without serving any purpose for our website.

You can find step by step instructions in the tutorial How to compress images for WordPress and the web with Affinity Photo

How do I optimize an image for Web without losing quality?

When we optimize an image we have to make some hard choices and decide what is more important. Resizing and removing EXIF data does not affect image quality. Compressing the image will always be a trade-off between image quality and file size but you may want to read on.

Step 1 in any optimization is to re-size the image and it does not affect the image quality. When we use the correct size the image will weigh less and load faster without losing quality.

EXIF or meta data is information about the camera that took the photo and sometimes GPS information about the location. This information adds to the size of the image file and should be removed as it serves no purpose for our website.

When we compress the image we loose data and that means loosing quality. Now, you have to keep in mind that loosing image quality does not have to mean that the human eye can detect the loss.

Also, at times we prefer fast loading to perfect quality as we simply want the information. When we read about travel destination it may however be important with high quality photos. and images.

So to optimize the image without loosing quality you should re-size the image and remove EXIF data. However, depending on the purpose of your website you may also want to consider accepting some compression as not all loss of image quality can be detected by the human eye.