How to resize images for web in Photoshop

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.

What size should images be for web

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.

The terms ‘image size’ and ‘file size’ are easily confused, but it’s important to understand the difference.

Image size: File size refers to the dimensions of the image (the width and height) and is measured in pixels, inches or centimetres.
File size: This refers to the amount of space an image uses on your computer, hard drive or memory card. This is measured in Kilobytes (KB), Megabytes (MB) or Gigabytes (GB).

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.