Your website is getting bigger and bigger. It's taking forever to backup. Ever wonder why? Chances are you're suffering from the Great Big Image Problem.

If you're using the High Quality setting on your phone's camera and uploading them onto your website then chances are the photo you just uploaded is going to be 1000 times larger than what you actually need.

AND A MONSTER IS BORN!

  • A monster size website that no software can backup
  • A monster size website that can't be transferred to another webhost should the need arise

Content management systems like Wordpress makes it so easy for you to just drag and drop those images into it's media manager and then it scrunches them up into some smaller sizes. Of course you'll use the smaller sized ones on your pages, but you're still storing that ENORMOUS photo that you uploaded in the first place. And that's going to make backups more and more difficult.

Let's begin with the original image (and where it all went wrong...)

Before you dragged and dropped that lovely photo from your phone into the Media Manager - did you:

  1. Resize the image? (50 bonus points)
  2. Compress it? (40 bonus points)
  3. Make it progressive? (10 bonus points)

If the answer to all of those is no, or I don't know what you're talking about, then guess what? You might benefit from understanding how to prevent your website from growing into a 5 Gigabyte monster that can't be backed up (or transferred to a new webhost) because it's so large.

Image Size (width x height)

Just like physical photos that can be measured in inches or centimetres, digital images also have dimensions measured in pixels. Pixels (px) refer to each dot on your screen. So a 640 x 480px image means it's occupies 640 pixels across and 480 pixels down of your screen.

Let's imagine that an average large-ish image displayed on a website is: 640px x 480px. For an idea of what that looks like in actual size, then gaze upon the image below. It's pretty generous and it's going to overflow the screen on a smaller device.

typical photo 640 x 480px

Now lets compare that to the actual size of an image coming straight off your phone. Look at your phone camera settings and check it against this handy chart. This chart was calculated using a 4:3 aspect ratio:

(Calculations from https://www.scantips.com/mpixels.html)
Phone Camera Setting Width (px) Height (px) Typical Use
Low Quality 640 480 Uploading to the web
Medium Quality (c. 2 Megapixel) 1633 1255 High quality (250dpi) photo prints up to 16.6 x 12.4cm
High Quality
(4 Megapixel camera)
2309 1732 High quality (250dpi) photo prints up to 23.5 x 17.6cm
High Quality
(11 Megapixel camera)
3830 2872 Posters (150dpi) 64.9 x 48.6cm
High Quality
(20 Megapixel camera)
5164 3873 Billboards (30dpi) 4 x 3 metres

Clearly all you need for a webpage is a LOW QUALITY image off your phone's camera. Even for printing, Medium Quality has more than enough pixels to produce a fine looking photo from the family holiday.

And guess which type is most uploaded onto websites? Of course - the High Quality ones - which is overkill x infinity + beyond!! You are stockpiling enormous files of no practical use which make websites that are just too large to backup (even with paid software).

TL;DR

If you're taking photos on your phone for the website use the LOW QUALITY setting

Or

Use image editing software like Gimp to resize your photos before you upload them to your website. Gimp is free, well-documented and open-source.

GIMP
Gimp

Once you've cropped those images down to a size that's used on webpages (as opposed to the size of a motorway billboard) you've won half the battle! Reducing the physical width and height of digital images will reduce their filesize.

Image History (so far) Width x Height (px) Filesize (KiloBytes)
Original High Quality Image
(off my phone)
3840 x 2160 362000 KB
Crop to 640 x 480px 640 x 480 258 KB

If you look at those figures closely, you'll see that the high quality image off my phone is over 1000 times the size of the image that I've cropped (resized). Just by reducing the physical dimensions of that original monster image I've reduced the filesize to just under 1/1000 of it's former glory.

But that's not the end of the story. I can squeeze another 75-80% reduction in filesize by compressing that image and removing detail that can't be detected by the human eye.

Other Half of Battle - You've cropped, now you compress

You can do this if your image is a JPG. Phone image formats are nearly all jpg (except for IOS 11+ - but even they can be converted to the jpg format). You can compress a jpg using a free image editor like Gimp. IMO one of the best online image editors is Photopea and if you prefer a strictly no frills - just resize, crop and compress - then https://imageresize.org should do the trick.

Compression is done using percentages. Your cropped image starts off as un-compressed. So it's at 100% quality. If you compress by 25%, your image will be at 75% quality. If you compress by 50% your image will be at 50% quality. And so on.

Right now, my cropped image is weighing in at 258KB, but I'd like it to be as close to 50 kilobytes as possible.

The Image (start to finish) Width x Height (px) Filesize (KiloBytes)
Original High Quality Image
(off my phone)
3840 x 2160 362000 KB
Crop to 640 x 480px 640 x 480 258 KB
Compress to 75% quality 640 x 480 79 KB
Compress to 60% quality 640 x 480 63 KB
Compress to 50% quality 640 x 480 56 KB

I want to get as close to possible to 50 kb. Why? To keep filesizes as small as possible.

In the images displayed below, can you guess which is the high quality (uncompressed) and which is the lowest quality (50% compressed)? Well I bet you can't! Click on the Guess button to see which is which.

If the photo on your phone is a good crisp image, you can compress it by up to 50% without losing any detectable quality. If the image is terrible to begin with, then compression will only make it worse. Never compress more than 50%, things can get weird. Also - only compress the original image. JPG compression is lossy which means stuff gets removed permanently once you hit that Save button. If you keep compressing previously saved and compressed jpgs you'll start to see weird artefacts and pixelation appear.

Bonus Points - make em Progressive

For an additional bonus, make the image progressive. You can only do this with jpg images, but it's very worthwhile. That setting is on all image editors when you go to save the jpg image. It doesn't affect file size but it allows the image to load at a low resolution to begin with (a little blurry), and then fills in the mixing pixels as the page loads in. What that does is help your webpage load a little faster. And it earns you some SEO points for faster loading images.

Easy (and short) Gimp Basics Video

I find a lot of "beginner" Gimp tutorials are too advanced and assume you've used it before. I've selected this video because it really sticks to the basics of resizing the photo (jpg) and saving it with compression. Just install Gimp onto your laptop/desktop (available for mac and windows) and follow along. Note: you'll find the option for Progressive in the Advanced section of the Save dialog which he doesn't show. Watch the video here: https://www.youtube.com/watch?v=6DHxgkSG_Zw

Tagged under: Websites

Last updated: 06 Nov 2019