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.
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...
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:
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.