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.

How a Monster Image is Born

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 for a web page. Big enough for a highway billboard actually.

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 as well. Even if you use the smaller sized ones on your web pages, you're still storing that MONSTER photo that you uploaded in the first place.

Depending on how you roll, this is the likely outcome:

• A monster size website that no software can backup, and can't be transferred to a new webhost should the need arise
• And if you are using those monster-size images on webpages then your website will be running as slow as molasses

Where did it all go Wrong?

Let's begin with the original photo you snapped on your phone. Before you dragged and dropped it into the Media Manager - did you:

1. Resize the image? (50 bonus points)
2. Compress it? (40 bonus points)
3. Make it progressive or convert it to .webp? (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 resize and compress your photos before you upload and use them on your website.

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: 640 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.

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:

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.

Introducing GIMP

If your images are still too large, you can resize (crop) them using image editing software like Gimp before you upload them to your website.

GIMP

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

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.

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 photo and removing detail that can't be detected by the human eye.

The compression we are talking about here is JPEG compression. JPEG stands for Joint Photographic Experts Group. Photos are always stored in the JPEG file format - eg myphoto.jpg or myphoto.jpeg (they're the same thing). Not all image types can be compressed, but photos definitely should be. Just once - more on that later.

You've Cropped, now you Compress

You can compress images using a free image editor like Gimp. But you can also do all this stuff online too. Imo one of the best online image editors is ResizePixel.com. When you're done resizing and/or cropping your photo, click on compress and choose 50KB. That'll squeeze it down as far as it can go without you having to know too much technical information. After that, just download it to your PC and then upload it to your website. Another good online facility is https://imageresize.org.

In GIMP, 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. If I use the online editor, I just set that to 50KB. If I'm using GIMP, I'm going to try 50% compression to get to my target filesize.

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.

GUESS?

I'm compressed to 50%

GUESS?

I'm not compressed

If the photo on your phone is a good crisp image, you can use GIMP to 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 JPG files progressive

For serving up on the web, you can make JPG images progressive. That setting is on GIMP when you go to save the 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.

Try out WEBP

If that heavyweight image just won't compress down under 100kB, consider converting it to .webp instead. webp is a new image format that can handle lossy and lossless compression, as well as transparency. By converting hugeimage.jpg to hugeimage.webp, you'll probably get a further 30% or so shaving off that file size. Just open up that photo in Gimp and hit Export As, and choose webp as the new file type.

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, windows, linux) 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