The right image sizes for websites

I'm writing this following a phone call from one of our clients about their website. They didn't really understand the problem they'd created and it's safe to assume that a lot of other people don't either. The problem in question was making a new page for their website that took a full two minutes to load, even on our reasonably fast broadband connection...

The page was a mixture of text and some product photographs that had been carefully (and quite well) taken the day before - 26 images to be precise - each one uploaded to the website in full, straight off the camera resolution and then made the right size in the website's editing pages. A quick bit of maths here should highlight the problem - 26 pictures at about 3mb each, plus the rest of the website equals about 80mb of data to download each and every time someone looks at the page - at broadband speeds that's a lot, on a slow connection, you could be waiting for a good while.

Image sizes.

As web developers, we understand how digital images work because we need to, but most people don't. At a very basic level, a digital image is a collection of pixels (dots) and each pixel is told what colour and brightness to be to create the image - so more pixels equals more data and a bigger file size. An 8 megapixel camera will produce files of around 2mb, but the image will also be around 3000 pixels wide - around three times the width of a typical website and definately wider than the post you're reading now, which is 620 pixels wide.

The mistake many people make is uploading a full size picture to their website (Joomla, Wordpress, etc) and then changing the size in the article editor - the problem is, it's only when the full size picture arrives in the website visitors browser that the size is changed - the browser has had to download the full size image in order to make it smaller, which is a bad thing to do.

If the page has maybe one large image, it shouldn't be too noticable - start to do the same with five, ten or more images and things are going to get very slow...

The right way to do it.

Unless there's a reason that visitors to your website need access to a full sized image, the image you upload should be somewhere close to the size it's going to be displayed on screen - if I want an image to be the width of this article, 600px (pixels) wide will be about right, so that's what I upload. Using your chosen CMS to change the sizes a bit is fine, say from 700px to 600px wide, but from 3000px to 600px isn't - you need to resize your images first.

The good news is that there are plenty of ways to resize images - photos you've taken yourself, or something you've downloaded from elsewhere. If you've got image editing software like Photoshop, it's easy enough, but if you haven't, there are a few excellent, free websites around that will do the job just fine - www.shrinkpictures.com is one of many, just upload an image and tell the website what size you want it to be.

To give you an idea of what you're after, here's the same image in a few common sizes:

600 pixels wide

600px wide landscape

500 pixels wide

500 pixel image

400 pixels wide

400 pixel image

300 pixels wide

300 pixel image

200 pixels wide

200 pixel image

Getting your image the right size in the first place is good for visitors and Google - the longer a page takes to load, the more likely people are to look elsewhere and the less likely you are to rank at the top of the search results in Google - all in all, a few minutes of time well spent.

Something from our blog?

The rise and fall of the drop down menu...

It could just be me, but is anyone else noticing that there seems to be a move away from drop down menus? Back in the mists of time, menus were just simple text links to other pages, either arranged across or down the page. This was mainly because there just wasn't a practical way of 'animating' things on the web - but then Flash became the animating tool of choice and designers started to get a little more adventurous, making sub-menus drop down (or pop out) from the original text link, normally when a user hovered over the top level link.

Read more...

A rare victory for common sense

You might have read our post a few months back about the proposed creation of a new top level domain called '.uk'. We thought it was a stupid idea set to create confusion and additional cost, whilst giving little or no benefit to anyone. Well, surprisingly, Nominet, the people responsible for UK domain names, seem to agree...

Read more...

From Twitter

The hilarious and terrible *Santa* brand book. Make sure you are on brand in time for Christmas. #SantaBrandBook quietroom.co.uk/santa_brandboo…

TALK TO US

O191 6454455

EMAIL US

This email address is being protected from spambots. You need JavaScript enabled to view it.

FIND US

GOOGLE MAPS

© 2013 inSquare Media

Sitemap