How to resize images

Resizing images for web & social media
using 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.

    Resizing images for web

    How to resize images in Photoshop

    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).

      Saving images in Photoshop
      There are two options for exporting images in Photoshop: 'Export As' or 'Save for Web'.

      NOTE: Save for Web is the method many users may already be familiar with, but Adobe also introduced the Export As feature in Photoshop CC 2015. For those unfamiliar with either way, both allow you to do basically the same thing (though the newer Export As option does have a few extra features).

      Here, I’ll explain how to resize files using the Export As feature (though in this video I explain both Export As and Save for Web).

      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.

        Resizing images in Photoshop example
        The original image at quality 100.
        Resizing images in Photoshop example
        Resized to quality 10, banding appears and overall quality is reduced.

        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.

          How to resize images in Lightroom

          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.

            Exporting images in Lightroom
            Exporting images using Lightroom is a similar process to that 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).

            Image

            How to resize images using other softwares

            How to resize images in Luminar

            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’.

              Resizing images in Luminar example
              Exporting images in Luminar.
              Resizing images in Luminar example
              Luminar's Export functions allows for resizing and sharpening.

              How to resize images in GIMP

              GIMP is a free photo open-source editing software considered by many to be a good alternative to Photoshop or Lightroom for those wanting to make adjustments to their images. Although it doesn’t offer nearly as many features as Photoshop, it does offer an impressive range of tools (though it does come with a steep learning curve).

              To start, go to Image > Image Scale. This is where you would change the width and height of the image. Once done, click ‘Scale’. Next, go to File > Export As. This brings up the Export Image dialogue box. Here you can set what you want you file name to be and where you want to save it. You can also choose the file format by clicking ‘Select File Type’. Then click ‘Export’. This will bring up another dialogue box where, depending on what your file format is, you are able to make adjustments such as the quality of your image and what metadata you want to include. To finish, click ‘Export’.

                Exporting images in GIMP
                GIMP is another free alternative to Photoshop or Lightroom that allows you to resize images.

                These are just a few of the softwares you can use to prepare your images for web. Of course, you can also use your camera editing software too (most camera manufacturers offer a free photo editing software which will offer basic features for this) if you don’t have access to these other softwares. Regardless of which one you use, the key thing to remember is finding the right balance between file size and quality.

                If you’re looking to resize your images for print, you can find the techniques I use to enhance reproduction quality in this video.

                  Recommended Content

                  To learn more about Photoshop and Lightroom, visit our Post Production section. There you'll find a range of classes covering everything from understanding digital images to practical examples of start-to-finish retouches.

                  Leave a Comment