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 - 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 EU Cookie Directive is here and it's a big mess

Unless you've been hiding away under a small rock, you've probably heard lots of discussions about cookies recently. Unfortunately, not the nice chocolate chip filled variety, but those pesky internet ones. The reason for this is that the UK has now implemented the year old EU Cookie Directive, meaning that all UK websites that are accessible in the EU must comply.

Read more ...

It's November already - someone has clearly stolen a month this year

In a remarkable turn of events, it's now November. It's a month since Mick wrote about what we'd been doing in September and that's scary. So, to keep up the promise of an update each month, here's what we've been up to in October.

Read more ...


O191 6454455


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



© 2013 inSquare Media