For the the purpose of this guide i'm going to use this image of a rather subdued Lemur I took at Toronga Zoo. The image to the left is one that I've edited to a size that I wanted with dimensions of; Width 300 x 225 and 133 pixels or dpi (dots per inch).
But the original file size was; W 3648 x H 2736, Resolution 180 pixels.

If I were to upload the orginal image, without any editing the blog post would look something like this (above). As you can see it's massive and doesn't even fit onto the screen properly, even when I zoom out.

Now I could edit the image in Wordpress like I have done here;

but as Jon explained even though it's been made to look smaller by Wordpress, the file size and quality hasn't been adjusted (just disguised) and could slow down the speed with which your site loads.

So the first way that you can change the image quality is by using Photoshop.
If I open my image and go to; image> image size, in the tool bar along the top, it will show you the file dimensions of your image.

As I tried uploading this image previously to our blog, I know that the original image is going to be too big to put on the site. So to change the image size, I reduce the resolution first to 133 pixels/inch and then altered the width and height to 300 x 225.

Now the width and height will differ depending on the width of your site or blog and you will have to find a size that works for you - but as a general rule the pixels/ dpi (dot per inch) for web is around 72 dpi. With people viewing more websites on their iPad/iPhone, etc the quality of the image can go up to about 133 dpi, maximum.

Once you've done that go to file > save for Web & devices.

Once you've done that you'll see a screen similar to this (below). If you click 'original' in the top left, it will display your image as it appears in Photoshop, where as '4-up' will show you the same image but four different ways, varying in quality size.

On this screen you will also have the oppertunity to save your image in a different file format such as GIF, JPEG, PNG and WBMP. For information about saving for 'web & devices' and different file formats click here.

And that's the basic guide to how you can change your image format in Photoshop for Web.

Why are my images blurred / pixelated?

A note of caution if you have an image that is small in size or quality and you want to make it larger, you will lose a lot of the quality of the image.

Look at the image below, the left side was a smaller sized image that I tried to increase to a larger format like on the right.

As you can see the image isn't as sharp - even though they are being shown at the same height x width and dpi.

The difference is that on the right I started with a larger, quality image and reduced the size and on the left I had a small image and made it bigger.

The rule is, start with a really large, really high resolution image and reduce the quality for perfect results, every time.