I’m a website designer for holiday rental property owners, and one of the questions that crops up all the time is image size and quality.
Whereas the majority of UK households are now on broadband, many around the world are not, and indeed, the definition of broadband is pretty loose. As I write, I’m on a 500k ‘broadband’ connection in South Africa, and am finding the internet pretty slow compared to my 8MB connection in the UK.
So for many people, the consideration you give to the size of your web pages can alter their experience of your website. Note here, that I’ve put the size of your web pages not of your images. This is an important point. If your page contains 6 images, each of which are 50k (not unreasonable for an individual image size) that’s a total of 300k before the rest of the page is taken into consideration.
The speed with which a web page loads is governed by the total page size, the visitors internet connection, and the power & bandwidth of your website hosting solution. So when you’re optimising your images, bear in mind what other pages are going on the page before deciding how much to compress images.
Many times I see ‘home made’ web pages where images are embedded in the page at full size.. 500k – 1MB per image. You can spot them as they load in like a blind dropping from top to bottom. This is a prime mistake that budding DIY web designers make and which messes up the overall visitor experience.
As an aside, images are bigger file-size-wise when:
they’re taken high res with a huge megapixel camera
they’re big dimensions-wise
they have lots of different colours in the same photo
My rule of thumb is to try to keep all images on a website to less than 50k and no greater than 100k per image at a real push, and ensure that no individual page is over 200k file size in total.
Bear in mind though that if you over-compress an image, particularly if you intend to show it ‘big’ on your page, it can appear slightly pixelated. You may need to play around to get exactly the right level of compression for you and your visitors.
So how do you compress images?
You can compress images in a variety of ways, usually using an image editor such as Photoshop, Gimp or Paint.net. Open the image, select file > save as > and select either jpg or gif and generally you’re given the options to select the compression level, along with a preview of what the output image will look like.
However, by far my favourite ‘quick’ method of compressing lots of images at once is a little known shortcut which requires nothing but a copy of Windows with Outlook Express installed (standard on most machines). Here’s how you do it:
Save all the images you want to compress in a folder on your desktop. Create another folder on the desktop called ‘compressed’. Open the original file folder, and select all the images in the folder (CTRL + A). Now with your cursor over one of the images, RIGHT click on your mouse and on the pop up menu select send to > mail recipient
I’ve blanked out my embarassing desktop wallpaper from the above image.
On doing this, Outlook Express should launch, and you’re given the option to select the size of image you want to send. Select the ’Make my images smaller’ option, and then you should see them all attached to an email.
Now all you need to do is click in the ‘attachments’ area of that email, CTRL + A to select them all, then click and drag them all into your ‘compressed’ folder on your desktop.
Hey presto, you’ve just batch compressed a load of images in one go, and Windows very helpfully makes them all less than 50k for your website needs.
Go on... click it... you know you want to!
2 Comments
I absolutely agree with all that you’re saying about large image sizes. Even with the widespread adoption of broadband it makes it much better for your visitor if the website loads snappily.
One handy Firefox plugin is “view dependencies”. When you right click on a page, select ‘Page Info’, then the new ‘Dependencies’ tab you’ll see a quick summary of all the file sizes (images, HTML, CSS, etc) of the page you’re on. Then you can target any that look too high.
Personally I use the great IrfanView program (over on http://www.irfanview.com) to compress images by dropping the image size, reducing the colour depth, etc. I’ve found this gives really good compression results whilst the end images still look perfectly good (unlike some sites – such as blogger – that make a horrendous hash of your beautiful images).
Cheers, Geoffrey
thanks for the ‘view dependencies’ idea, I’ll take a look at that plugin Geoffrey.