Part 2 of Using Images in Posts: Formatting and HTML

In Part 1 of Using Images in Posts, Branding First impressions and Happiness were addressed. Unfortunately it’s now time for the boring bit, the backstage work that no-one really appreciates until it goes wrong.

Formatting

The three formats for web images are JPEGs, GIFs and PNGs. It is important to chose the right one because the affect the loading time of the image, and have other qualities and weaknesses. The idea is to get the balance between having a high-quality image and one that is small in terms of bytes, so less bandwidth is taken up.

JPEGs are best for larger, higher quality images where there is depth in the image, for example photographs or complex art. The quality settings can be altered to change the clarity of the image and increase/reduce image size.

GIFs and PNGs (portable network graphics) are used with Smaller and/or ‘flatter’ images, such as logos and graphic text. PNGs work well with screenshots and flat images, although for small logos a GIF may be smaller.

Almost all of the images I upload are PNGs, but in Photoshop you can select “Save for web” and Photoshop automatically optimises the image for web use.

HTML

The full HTML for an image should look like this:

<img height=”100″ width=”100″ align=”left” title=”Descriptive Title” src=’http://exampleURL.com/’ alt=’description for Google’ />

The alt tags should be a brief description of the image allowing it to be ranked in Google images and the size needs to be specified for Google images also.

Simply replace the made up dimensions, the example URL, title tags and description for Google with one of your own. A minor SEO point is that Google uses the alt tags of the images in your posts as a judge of the topic of the content, so it makes things a lot easier if the image is actually relevant so you can put a fair description. The alignment attribute dictates where the image will appear on the page (e.g. left, right, centre) and by using it causes the text to flow around the image.

Summary
There are other ways to show an image on a web page, but the above method is how I do it. It is important to remember that both the alt tags and dimensions must be specified for the image to be able to appear in Google image search.

Technorati Tags: formats for web images, image size, Google image search