How to prepare photos for the web

January 27, 2015 — Simon Kelly

Create photos for web pages

If I was to tell you that 40% of users will abandon a website that take more than 3 seconds to load and that Google have confirmed that site loading speed is a ranking factor – what would you do to speed up your site? Do you know what it slowing it down? It’s clear that a fast loading website is important but how do you optimise your site?

One of the simplest ways to speed up a website is to optimise images and photos before you upload them and below are the two steps you need to take to do this to help improve your website speed.

  1. Resize your image to the correct dimensions
  2. Optimise file size using TinyPNG or

Read on for more detail about each step.

Step 1: Resize your image

Resizing your photo to the correct size is the first step to making sure you’re not loading bigger images that you need to. The majority of digital cameras and phones will save photos at the highest possible resolution which is usually many times bigger than what it needs to displayed on the web. A 1 megapixel photo is about 1200 pixels × 900 pixels which is a good size for most websites. Unless you still have a fax machine, it’s very likely that the camera / phone you are using takes photos much larger than 1 megapixel, so it’s important to reduce this size first.

What size should I resize to?

The dimensions you should resize to depends on where you want the photo on your site and in most cases the photo will not need to be bigger than 1200 pixels wide by 900 pixels high. Consult your web designer / developer to ask for the exact dimensions if you are not sure.

You can also quite easily use Google Chrome’s “inspect element” feature to see the size of any element on a web page. The screenshot below shows that the width of this article is 795 pixels wide, so if I want to add an image that takes up the full width of the article I should resize my photos so they are no bigger than 795 pixels wide.

Use Chrome’s “Inspect Element” tool to see the width of any element on a website


How do I resize?

Now that you know that you need to resize, how do you do it? You need a graphics editing program. My own workflow goes something like this:

  1. Open image in Photoshop
  2. Perform any touch ups or small edits and cropping
  3. Save the image for web and devices
  4. Select PNG if I need transparency or JPEG if I don’t. JPEG high is usually what I’ll save my images as.
  5. Optimise image file size (more detail below)

Unless you need Photoshop for your profession then it’s probably unlikely that you have a copy. Thankfully, there are great Photoshop alternatives that are much more lightweight and can easily help you crop your images to the correct size:

    A great benefit of is that it let’s you resize the image while it’s system optimises it for you. Two steps in one is always good!
    Simple image editing tool for Windows.
  • Pixlr
    Photo editing program for Mac, Windows, iOS and Android
  • Skitch
    Amazing screenshot tool from the folks that brought us Evernote.

Step 2: Optimise file size

Photos contain metadata that takes up space and increases the size of the photo. Unless you have specific reasons to keep this content, it can be stripped away without affecting photo quality at all. After you have resized you image, upload the saved image to TinyPNG or to optimise the image and see how much you can save. For an even faster workflow, TinyPNG has a Photoshop plugin and has a WordPress plugin.

TinyPNG is an awesome tool and super fast to use. Their Panda mascot even congratulates you on your sweet image optimisation skills.


Now that your image is resized and optimised you’re ready to upload it to your site. Don’t stop now, keep the panda happy and optimise all your images!

Share this article:


Simon Kelly

Simon started his first web agency in 2009 which he merged with the SGD team in 2023. With a strong background in digital strategy and a history of working with fast-growing Australian companies, including CyberCX, Envato and Agency Mavericks, he's passionate about using ethical digital marketing that delivers business value. Simon's experience includes coaching digital agencies, running digital marketing workshops, driving growth and excellence within the SGD team.

Read more posts by Simon Kelly

Get Started

How can we help your business?*
Please select one or many
This field is for validation purposes and should be left unchanged.
Start Now
Start Now

Tell us about your project

How can we help your business?*
Please select one or many
This field is for validation purposes and should be left unchanged.