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?

Web design trends for 2013

Ok, I know that we're really not far off a quarter of the way through 2013 - frightening, but true. That minor technicality aside, there are some very good things on the horizon for web design this year, some building on the big things that happened towards the end of last year and some just because we can. These are some of the web design trends that we think are going to be big (or get bigger) in 2013.

Read more...

Try seeing the web the way we do

I read something interesting on the BBC news website today - a piece about setting up your TV so that the colour and detail of programmes and films look more like how the producers intended. The information actually comes from a website called AVForums, who have taken it upon themselves to rid the world of overly bright, overly colourful tv screens - for which we think they should be applauded. If you fancy a spot of tinkering with your TV, take a look at the AVForums Picture Perfect page.

The thing is, whilst there's a bandwagon rolling through town, it seems a shame not to jump on it - so this is our version, for monitors.

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