Re-sizing Images for the web

Re-sizing images is done before uploading to a website or attaching to an email

When sending media over the internet it’s best to re-size images. Images taken with modern digital cameras are usually wayyyyy too big to attach to emails or upload to a website photo gallery, so you need to shrink them. Many email servers today will only allow 20Mb files to be sent as attachments.

Google’s Gmail allows 25Mb files max. So if you’re attaching 10 x 10Mb files directly from your camera’s gigantic SD card;

  • It’s going to take ages to upload
  • It’s going to take ages to download
  • Google won’t like it and it may affect your SEO rank
  • It’s too big for your server and you may run out of space or have to upgrade
  • Your server might take ages to tell you the file/s is too big

Re-sizing images not only saves bandwidth, but it costs less for your users.

If I’m sending an image to a friend, or preparing an image for use on a website, I’ll rarely upload anything over 2Mb (2,000,000 bytes). Even that’s too big. I tell clients to provide us with 2,000 pixel wide images when I’m building a site. Your camera is designed to take the highest quality image for printing, so it includes a lot of extra detail that you just don’t need on the web.

Image Resolution

Print image resolution

Print companies talk about resolution in terms of dots per inch. A 300dpi image means there are 300 dots (pixels) every inch. It’s roughly the resolution you need to print a good quality photo. Newspapers are typically only 100-200dpi.

Monitor resolution

On the web you only need 72 dots (72dpi) per inch. Some newer monitors will display 100+dpi, but that’s still a far cry from 300. If you’re forwarding family pics to a friend or uploading a new pic to FaceBook, they don’t have to be big images.

Pixel dimensions

On the web we usually talk about how big an image is in terms of its pixel dimensions. For example, this website is about 1,200px (pixels) wide. It’s easy to work out that, when building this website, my largest image only needed to be 1,200 pixels wide. If I were to print the slideshow images out, they wouldn’t be as wide as an A4 page.

Shrinking a big picture will retain (and sometimes even enhance) image quality. Enlarging an image can do the opposite.

Most websites scroll down, so image height is rarely an issue.

How do I optimise images for the web?

If I wasn’t already using Photoshop, I’d probably use an on-line service such as Pixlr to manipulate my images. In fact, Pixlr is very much like Photoshop and can do most of the basic stuff that Photoshop does. You could probably do all your website graphics in Pixlr. It allows you to upload an image, manipulate it if you wish and then save it as a smaller version. It also does a whole lot of other things to images. Once you’ve uploaded an image, you can apply a myriad of effects filters before saving.

Let’s have a bash…

Using Pixlr.com online image editor to resize images


1. Go to http://pixlr.com/editor/ and upload any large (say 1mb or 2,000px wide) image from your computer. It will appear in its own window within the browser.

pixlr interface


2. Double-click the magnifying glass at the bottom of the tool window (left) to resize the image to 100%.

pixlr editor


3. Image Size from the pulldown menau up top and punch 500px into the width field. The height field will adjust accordingly.

pixlr editor


4. Select Image > Select File > Save from the pulldown. You are given a series of optons for resolution, but the deafult is fine.

pixlr pulldown menu


5. Give the image a name and save it to your computer. Hey presto. You have optimised an image for use on the web.


You can also send optimised images from Pixlr to Facebook and Flickr.

In General, Shrink!

Just remember that, as a general rule, any image that is wider than 1,200px is probably too wide for most websites in 2016 (unless it’s a background image). Most images are also too big to send when attached to an email.

The images coming out of your camera are much higher resolution. You need to shrink them.

When sending an image from mobile to mobile, send a small version – it’ll save you expensive bandwidth.

Let me know if all this made sense . . .

Author: Edwin James Lynch

Edwin wrote his first (Harrier Jumpjet) computer program in 1982. Today he builds websites utilising best practice, future-proof web development, online marketing and SEO. He lectured for 15yrs+ at Curtin University where (in 2007) he was voted 5th best out of 2,500+ university lecturers in Australia.

Popular Posts: