Working with Images in Your Blog

I get a lot of questions about blogging and one of the more frequent requests that I get is about working with images. So here is my version of Blogging with Images 101:

Recently Reeholio asked the Bloke:

I have been trying to display my photos on my photoblog http://reeholiofavourites.blogspot.com/ slightly larger than the default large size in the posts. The problem I’m having is when I do the photos are just stretching and looking pixelated, which is not ideal. Any ideas?

Limitation of Images:

If you try to “stretch” an image larger than it’s original size it will always look “pixelated”. So if you want the image to look larger on your blog then your original image will have to be the same size dimensions that you intend to show it on your site, or you sacrifice losing resolution (quality).

If however the original image is not large enough you are basically out of luck. That is the limitation of images. Conversely, you can always shrink an image without losing resolution.

Coding your Images:

When you are coding your image it is always best to include the dimensions of the image. This is very important because images are one of the leading reasons why webpages load too slowly. By including image dimensions your browser won’t have to guess the size of the image and slow down the loading of your webpage.

For example, if an image is 320 pixels wide X 240 pixels high, this will be your code:

< img border=”0″ align=”left” width=”320″ src=”http://photos1.blogger.com/blogger/7506/607/320/vista-rc1.jpg” alt=”Windows Vista” height=”240″>

Just remember to close up the brackets, and it will look like this:

But if you try to make it larger than the original size it will look like this:

Notice how blurry it looks? But if I made the same image smaller than the original it would look like this:

It still looks good don’t you think?

Working with Images:

Now, if you are not sure what the original size of an image is it’s really easy to find out. If you are online, just right-click your mouse on the image and click on “properties”. You will see the URL address of the image as well as its pixel size.

Image Software:

But what if you are working with an image from your desktop? I recommend that you grab a free product called IrfanView. It will not only show the properties of your image, but it will also convert, optimize, scan and print, create slideshows, play movies and much more.

For more complicated image manipulation I use Photoshop Elements. Elements has a nice feature that optimizes your images for the web but I will discuss that at another time. With plugins Elements can be just as powerful as its big brother counterpart Photoshop and is much easier to use.

Resizing Images:

When you are looking at an image within IrfanView, click on the menu item “Image”, and then click “Resize/Resamble” to see the image size in pixels. From there you can change the size of the image if you like. But just remember to click on the box “Preserve Aspect Ratio” so that the proportions remain the same.

Using Images Online: The Bottom Line

So the rule of thumb is you should show your images online in the same pixel size as the original (or smaller). You can shrink images but you cannot stretch them to look bigger without losing quality.