How to resize images

After spending hours planning and styling your shot, getting the lighting just right and adding the final touches in post production, the next step is to upload your images to your online portfolio or social media. Part of this process is resizing your images for web.

Here I answer the most common questions when it comes to resizing images and break down the simple steps for resizing images in Photoshop (as well other popular photo editing softwares). I cover this in far more detail in our 'Preparing images for web class', but these are just the basic steps.

As file sizes steadily increase with advancing technology (some of the images I shoot on my Hasselblad H6 can be upwards of 600MB), there’s often a need to reduce file sizes. In this post, I’m going to share how I resize and reduce the file size of my images specifically for use on my website and social media.

Regardless of what software you’re using to resize your images, there are a few key things you’ll need to adjust to change the image and file size. Below are the key points you need to consider when it comes to reducing the file size of an image:

File format: Most websites and social media platforms accept JPEG, PNG or GIF files, though I tend to stick to JPEG. A new format for web images is WebP. This format can be converted by using a website plugin or content delivery network from the JPEG images you upload.
File size: The recommended image size for web use is between 1000 and 2500 pixels (on the longest edge) while the recommended file size is no more than 500KB. Keep in mind where the image will be used and what size container it will be placed in. If the image is to be viewed on retina display, it should be resized to twice the size of the container. This will guide you in sizing your image. Adding images that are too large may negatively impact the load speed of your website.
Resolution: DPI and PPI do not influence the web display of an image, they are only relevant when printing images.
Colour profile: I recommend sticking to the sRGB colour space for using images online.

I share my exact image dimensions and talk you through finding the right balance between image quality and file size in this Preparing your images for web post production class.

Preparing images for web in Photoshop can be done in just a few simple steps.

1. Image size
To start, you’ll need to change the image size. To do this, go to Image > Image Size. Once you’ve changed the width, height, resolution and resample settings (you can see the new image size at the top of the dialogue box) click OK.

2. Export
Once you’ve resized your image, go to File > Export. Here, you can choose either Export As or Save for Web (Legacy).

Start by selecting your Format (PNG, JPG or GIF). Next, select the image quality. The higher the quality, the larger the file size. Here, you’ll have to decide whether you want to prioritise reduced file size or higher image quality and find a balance between the two.

If you skipped step one, you can also change the dimensions of you image and resample settings here too. Export As also allows you to adjust the ‘Canvas Size’ of your image (this is something you can’t do with Save for Web). Next, you can choose whether to embed the metadata of the image and what colour space you’d like.

Once you’ve changed the relevant settings, all that’s left to do is click Export, select where you’d like to save the image to and click ‘Save’.

Remember, you can use the preview window to see how each adjustment influences the overall image. This can be particularly useful when adjusting the quality. You can also see the image size on the left hand side of the dialogue box (along with the file type and image dimensions). This updates as you make changes and is very useful if you’re aiming to get your image down to a particular file size.

It’s also worth noting that this process could be automated using Actions.

Once you’ve made the necessary adjustments to the image you want to upload, go to File > Export. This will open your image(s) in the export window, where you’ll see custom options similar to those in Photoshop.

Previously exporting images in Lightroom opened a new dialogue box (shown above), where you could specify a number of customisations, including: export location, file naming, file settings, image sizing, output sharpening, metadata, watermarking, and post-processing. It's worth noting that these export functions are still available if you're using Lightroom Classic. In the newer versions of Lightroom, the export function is much simpler.

To export your image, go to File > Export. This will open a new window, where you can select the file type, dimensions and quality. You can also choose from further options, which include metadata, file naming, output sharpening and colour space. Once you’ve made the desired changes, click ‘Export Photo’, choose the destination where you want to save the image and click ‘Export’.

If you’re resizing images to a certain size, you can see the file output size at the bottom left of the window (shown below).

Luminar is a popular editing tool for photographers and, unlike Adobe softwares, it is available for a once-off fee. Developed by Skylum, Luminar is a bit of a mix between Photoshop and Lightroom, allowing you to work with layers and masks while also offering a number of filters and preset adjustments.

To resize images, go to File > Export. This will open a dialogue box where you can name your image and select the file destination. You can then select ‘Low’, ‘Medium’ or High’ sharpening (or ‘None’). To resize the image, select which option you would like to change from the Resize dropdown menu and enter the new dimensions accordingly. Then, select the Colour space, Format and Quality you want. Once done, click ‘Save’.