Sunday, June 7, 2009

Insert Larger Images into a Blog

Sorry Picture Not Found

If we want a picture bigger than the default blogger size on our page, then we have to link to it ourself. This is often the case when we have made our blog wider than the standard 400 pixels, and increased it up to 550 pixels. The standard blogger pictures can look quite undersized on this wider setup.

Enlarging a standard sized blogger picture in edit mode on the Blog Post will often just make the picture blurry and fuzzy. In order to get a good quality larger picture, we need to use our own larger sized pictures.

Using an Image editor, (like Photoshop or Fireworks), resize the picture to be 500 pixels wide. We then transfer the image up to our own private website, and then link to it from within the blog Html like this:

Damn! Picture Not Found

Click the above image to see a larger version of it.



Eg. The above HTML will put the picture from the website at:

http://www.passyworld.com/F111%20Photos/alienppa.jpg

into the blog. Note that we also need to specify the picture’s size for the styling part as well, so we need to know how big our picture is by taking it into an image editor and noting its image size (Width and Height in pixels) .

This is why in the above HTML code we wrote the code as: style="WIDTH: 500px; CURSOR: pointer; HEIGHT: 360px because our “alien” picture we are linking to is an actual size of 500 pixels wide by 360 pixels high.

Another way to find out how big a picture is, right click on it, on its original web page, and then click on “Properties” (in Windows XP).

And that's about all there is to it.

Enjoy,
Big Passy Wasabi