Once you’ve edited your image in Affinity Photo and you’re ready to save it for use on the web – your website, social media, blogs – how do you get the best result? Let’s take a look.

How to Crop, Resize, Sharpen and Export a Photo Using Affinity Photo for Web Use

Cropping

You might want to crop your image to make it more appealing aesthetically, or you might just need to remove something distracting from your shot. Either way, it’s easy to crop in a variety of ways: 

• Unconstrained — freely crop
• Original — returns the image to the original aspect ratio
• Custom aspect ratios — you manually input the numbers for width and height
• Resample — set dimensions at chosen measurements, for example to a chosen print size at print resolution

Select the Crop tool from the Tools Menu and you’ll get a handy Thirds grid on your image, which you can change to Golden Spiral or Diagonals in the menu at the top. Also in the menu you’ll see the cropping Mode options mentioned above, Units and DPI, plus the option to rotate and straighten.

Sharpen

Sharpening is a tricky one. Ideally you should resize your image first and then look at sharpening that specifically so that you can be more accurate about the results, if you rely on sharpening just the original size and then resizing and exporting, it might not look how you want. However, if you use the Export option to resize (we’ll talk about that soon) then you’ll need to sharpen beforehand.

There are three sharpen filter options and two ways to access them.

 1. Filters > Sharpen. Warning: this is destructive, it will alter your photo directly.

2. Through Photo Persona > Live Filters. This is non-destructive and will appear as an adjustment layer.

I’d recommend you use this option in most cases. Click the egg timer icon at the bottom right and choose your sharpening option.

• Unsharp Mask – sharpens edges and affects the whole image or selection.
• Clarity — affects local contrast to sharpen
• High Pass — similar to Unsharp, focuses on edges

If you’re unsure which to choose, try Unsharp Mask. Zoom your image in to 100% so that you can see what your changes look like without pushing it too far. Slide the sliders until you get the desired result, keep zooming back out to check how the image looks. A smaller Radius enhances smaller scale detail, Factor will bump the contrast of the edges and Threshold controls that contrast (you might find higher values for Threshold more beneficial for noisier/grainy images).

Resize

Which Size to Choose?

For years there’ve been a variety of guides, articles and general advice about what size image is best for which platform, and it’s something for which ‘best’ seems to have a different meaning every couple of months.

I used to be quite fastidious about having a resized version of each image specifically based on where I’d be posting it, but really, who has time for that. My ‘go-to’ now is to make an image of 1700px at the widest part of the photo, save for web as a JPEG at a high quality 80-100% and that seems to work well for Twitter, Facebook and my blog. For Instagram I usually make a separate image of 1080px at the widest and save in the same way.

Social media sites are becoming more media (photo and video) focussed and so they’re doing less-terrible things to images in terms of compression and display, than they used to. So there’s a little more wiggle-room to make your life easier and to still display nice-looking imagery.

Resizing and Exporting Your Photograph

There are a couple of ways you can resize and save your images in Affinity Photo

1. Resize Document

Available in the menu at Document > Resize Document. This will alter your current photograph.

You’ll get a box of options including which units you’d like to use as a measurement for your save. Most of these are self-explanatory, though if you’re wondering what a Pica is, it’s a unit of measurement used for typography and is about 1/6 of an inch.

You’ll likely use pixels as it’s for web use.

Resampling can be turned off or on. If it’s off, you’ll be scaling, which will embed a print resolution into the metadata of the photo. This means it’ll be forced to print at a specific DPI without changing the dimensions. This isn’t really relevant for saving images for web, but it’s good to know.

Assuming we’re resampling; that can mean a few different things. It could be increasing or decreasing the number of pixels, or it could be keeping the ratio the same (unconstrained) when you resize. If you’re saving for web then the main thing for you here is that you want to reduce the image size for the best results on-screen plus to keep it a reasonable file size.

In the photo above you can see your resampling options, here’s what those mean, as outlined in the Affinity Photo Help docs:

• Nearest Neighbour — simple resampling which has the fastest processing time. Use for hard-edge images and pixel work.
• Bilinear — algorithmic resampling for use when down-sampling images.
• Bicubic — algorithmic resampling for use when up-sampling images. Resampling is smoother than Bilinear but has a slower processing time.
• Lanczos 3 — complex algorithmic resampling that offers sharp results but with the longest processing time. Available as ‘separable’ and ‘non-separable’; the latter gives marginally better results, but is slightly slower than ‘separable’.

When you’re done you’ll need to save your image.

2. Using Export to Save a Web Version

This will resize the exported image only (make a copy).

This is my preferred way because it doesn’t touch your original image, so you won’t save over it by accident, plus you can see the final file sizes which is really useful for saving for web use.

You can see the file format options along the top. As you’re saving a photograph and it’s for web, JPEG is a smart choice. Resampling options are more or less the same as previously described, and default to bilinear, which is fine.

The main difference between this and the previous method were that you have a Quality slider which will reduce the size of the image – the estimated size is shown which is useful too – and you can preview it before you commit.

For example if I reduced the quality to ‘0’ and previewed it, you can see how awful that would look, but I can at least see it ‘live’ without having to keep saving it to see the result.

At these sizes, I can reduce the quality to about 65% before I start to see visible banding and obvious loss of quality. Even at 65% though the file size is reduced dramatically, to around 300kb compared to over 2mb – still working on 1700px at the longest side – so if you’ve got web storage constraints then you can really do some good file size reduction here without impacting the quality too much.

If it’s just for social media, go with the highest quality you can that the social platform allows. For example with this image, the 2MB at 100% would be fine for either Facebook or Twitter, so I’d choose the best I could.

You may have noticed a More option on the bottom right. If you click that, you’ll find further options and your choice of File Format will determine what those options are. Let’s still assume we’re using JPEG as it’s the best image format for web use. The options that are specific to JPEG are Progressive and Convert Clip to Paths.

Convert Clip to Paths

If ticked converts top level clipping curves to vector paths.

Progressive

If ticked means the photo is progressively compressed, which means the whole image is shown at once but might look pixelated until it’s fully loaded. This is in contrast to baseline where the image would load in a strip at a time. This is another good reason to keep file sizes smaller as the loading time will be much quicker.

There’s also the option to embed your metadata which can be useful for keeping your name or details attached to something, though be aware that is stripped out once you upload to most popular social media sites.

ICC (International Colour Consortium) Profile is a little set of data that basically tells devices how to display colour, so that it’s as accurate as possible. You don’t need to worry too much about this for your web photos.

If you’ve made changes in this menu and are likely to want to use them again, you can click Manage Presets in the bottom left and then choose Create Preset so that you can quickly apply the same settings next time.

Summary

As with most photo editing, there’s not really a right or wrong. Hopefully you’ve now got a good idea of how to use the basic tools in Affinity Photo to be able to crop, resize, sharpen and export your images ready for use on the web. It’s usually going to be a balance between quality and size; you always want your image to look the very best it can, so try to save your photograph at the highest quality available to you depending on your use: if it’s for social media you can get away with larger images than say a website, where file sizes might affect your load time or present storage issues.

Here are some of the key things to remember

• JPEG is usually best for images on the web
• Keep sizes reasonable, there are many online guides but I tend to find around 1700px is a good compromise
• Do any sharpening with your viewport zoomed in to 100%
• Choose the highest quality that any file size restrictions will allow, anything about 80% is great
• Export your photo as a copy so you don’t accidentally save over the original
• If you’ll be using the same settings each time, create a preset to save time

More Affinity Photo Resources

• 

  How to Make a LUT in Affinity Photo (.cube)

  LUTs are a great time-saver, but they also make your workflow more flexible and accessible. Let’s take a look at how you can create your own LUT in Affinity…
• 

  How to Export Photos From Adobe Camera Raw to Photoshop Alternatives (Affinity Photo)

  If you prefer the Adobe Camera Raw interface to Affinity Photo but don’t want to export into another Adobe Suite, then here’s how you can get the best of…
• 

  How to Use LUTs to Quickly Colour Correct Pictures in Affinity Photo

  Learn how to colour correct your photographs in Affinity Photo using LUTs – Look up Tables – for quick and professional results.
• 

  Transitioning From Adobe Photoshop to Affinity Photo

  Learn about the key differences between Photoshop and Affinity Photo to help you decide if you want to make the ultimate switch. Take a look at Affinity…

About the Authors

Marie Gardiner wrote this. Jackson Couse edited and published the page.