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?

A business website for £159

The Google search results are littered with companies offering to build you a website for little more than some people spend on a pair of trainers. We're not for one minute suggesting that these companies are doing anything wrong, but if you spend a bit of time thinking about what goes into a website, you'll see that whilst cheap, there's very little value in a budget website.

Read more...

Wow, it's more than six months...

There's an old saying - don't do as we do, do as we say. Well, this is one of those occasions where we'd encourage everyone not to do what we've done. What we always say is 'keep adding as much good content to your website as you can manage' or 'set aside at least a couple of hours each week to write some website content'. We know that content is the most important part of any website, but we haven't added any to this one since March - nothing, not a thing!

Read more...

From Twitter

Due to an error, potentially a timed-out connection to Twitter, this user's tweets are unable to be displayed.

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