Tealmermaid Designs

web design, coding, and SEO tips and tricks

Codes for image display


Display images neatly

Displaying images on a web page is not as difficult as it would seem. A very basic code will display any image from virtually any web site in the world:

<img src="http://tealmermaid.com/includes/css-image.png">

It is simply a matter of placing the image on the page so it displays at the desired coordinates.

Align an image

The float property sets the alignment of the image: left or right.

<img src="http://tealmermaid.com/includes/css-image.png" style="float: left; margin-left: 5px; margin-bottom: 5px;">

<img src="http://tealmermaid.com/includes/css-image.png" style="float: right; margin-left: 5px; margin-bottom: 5px;">

Important: You will need to "turn off" float after using it with the following code.

<p style="clear: both;">

Resizing an image

The width property can be added to make your image wider or narrower. The height property can be added to make your image taller or shorter. This can be expressed as a percentage or in pixels. A percentage is a better choice when aligning multiple images at once.

This example is 300px wide x 300px tall. The codes will resize it to be respectively 200px wide x 200px tall (smaller) and 400px wide x 400px tall (larger).

<img src="http://tealmermaid.com/includes/css-image.png" style="width: 200px; height: 200px;">

<img src="http://tealmermaid.com/includes/css-image.png" style="width: 400px; height: 400px;">

Note: As you can see, it is generally recommended to start with a large image to resize smaller instead of trying to resize a small image to be larger. Images get blurry when the pixels are stretched.

Captions under an image

If you are like most coders, you will want to have a caption under your image. This code will create a centered caption underneath the image.

<p style="float: center; width: 300px; margin-left: 5px; margin-bottom: 5px; text-align: center; font-size: 8pt;">
<img src="http://tealmermaid.com/includes/css-image.png">Your caption here</p>

Your caption here

Alt tags

The alt="text" property displays a text description of the image. This is most useful for the visually-impaired. You can see the alt text by hovering your cursor over the image.

<img src="http://tealmermaid.com/includes/css-image.png" alt="Display images neatly">

Display images neatly

What is hotlinking?

There is one caveat to displaying images on your web page: it must be your image. You cannot simply link to someone else's image (you don't own other people's images). You may have noticed that in my examples, the URL for all the images begins with http://tealmermaid.com. That means it is hosted on this domain here (tealmermaid.com).

Why is it bad to hotlink an image? For one, it uses someone else's bandwidth. This will cost them an extra fee each month. Additionally, if you hotlink another image, you don't know what image will appear. It could simply be an image reprimanding you for stealing the image (this example is from one of my other sites).

No stealing

It also could be something inappropriate for public display. Don't risk it. Only link to your own hosted images.

Note: If your site is in an affiliate program such as Amazon, as part of the affiliate agreement you will have their permission to hotlink their images.