How to resize images

Resizing images for web & social media
using Photoshop

Resizing images in Photoshop
Resizing images is an important process if you're wanting to upload your images to a website or social media.

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 All, 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 the Export dialogue box. Here you’ll find a number of sections, each of which cover similar processes to those you would have to go through using Photoshop.

            Exporting images in Lightroom
            Exporting images using Lightroom is a similar process to that in Photoshop.

            1. Export location
            Start by selecting ‘Specific Folder’. This will allow you to choose where you want to save your image. Next, click ‘Choose’ and select the destination for your image. You can then choose whether you want to create and put the image in a new subfolder (for example ‘Images for website’) or add it to a catalogue. For Existing Files, it’s best to select ‘Ask what to do’ (otherwise you may end up overwriting images accidentally).

            2. File naming
            Here you can select whether or not you want your image to be renamed and, if so, what you want the file to be renamed to. You can select different options from the dropdown menu, though I generally recommend ‘Custom Text’.

            3. File settings
            This is where you can set the file format, image quality and colour space that you’d like. The main difference here between Lightroom and Photoshop is that you don’t have a preview to see how these changes affect your image. 

            4. Image sizing
            To reduce your image size, click ‘Resize to Fit’. Then, from the dropdown menu, select the relevant option and fill in the required dimensions. You can also change the resolution here, but again, this has no bearing on web images.

            5. Output sharpening
            Lightroom allows you to apply preset sharpening profiles to your image. This sharpening is in addition to whatever you may already have applied to the image. Again, you can easily export different versions to see which setting, if any, works best for you.

            6. Metadata
            Including some of the metadata of an image can be a good idea and here you can select from the Include dropdown menu just how much you want to include.

            7. Watermarking
            I tend to apply a subtle watermark to my images when making adjustments in Photoshop, but if you don’t have Photoshop, you can apply a simple copyright watermark or more personalised watermark file to you images in Lightroom too.

            8. Post-processing
            Generally, After Export is left as ‘Do Nothing’, but you could also select either ‘Show in Finder’, ‘Open in Adobe Photoshop’, ‘Open in Other Application’ or ‘Go to Export Action Folders Now’.

              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