Adding Images to Web Pages
13 Apr 2013
Having looked at basic XHTML formatting, let’s have a look now at adding images to web pages
All inline images are placed in the HTML document using the <img> tag
The image format can be any type of image format, though browsers generally only support GIF, JPEG and the latest format, PNG
Support for the PNG image format is growing considerably
The Image Tag
The required src attribute specifies the filename or url of the image to be displayed
[sourcecode language=”html”]<img src="image or url" />[/sourcecode]
<img src="outsidemarket.jpg" />
<img src=“images/minilogo.jpg" />
<img src="https://www.cookwood.com/images/minilogo.jpg" />
The alt (alternative text) attribute of the <img> tag must be specified for XHTML. It allows the page author to provide a textual alternative or substitution for an image.
There are a number of situations where this attribute is useful:
- Browsers that do not support images at all such as lynx. In this case, the alternative text description will appear in brackets
- Where the user has graphics turned off and only wants text to be displayed
- If the image cannot be displayed in the browser. For example, the can occur if the src referenced in the <img> tag no longer exists or is not available
The required alt attribute specified is used as follows:
[sourcecode language=”html”]<img src="images/minilogo.jpg" alt="Cookwood Press Logo" />[/sourcecode]
Remember attribute values are always in double quotes: attribute-name=”value”
The width and height attributes indicate the dimensions of the graphic in pixels.
Without the width and height attributes, the browser must download the image and see how big the image is and then allocate space for it on the page
If image sizes are specified, the browser knows the dimensions of the graphic and can concentrate on laying out the page. This can result in the overall page appearing a number of seconds faster.
However, the width and height attributes should never be used to resize a large image. This should be done in an image editing programme such as Fireworks or Photoshop. Any images that you place on your website should have as small a file size as possible so that they load quickly for your visitors.
Determining Image Size When Adding Images to Web Pages
You can use your browser to get the exact dimensions of your image
To find the size of your image with your browser:
- Right click on the image. A contextual pop up window appears
- In internet Explorer choose Properties. A properties box appears that indicates the width and height of the image.
- In Chrome or Firefox choose Inspect Element. This handy feature will help you to find the image size and also show the underlying HTML and CSS code.
In Internet Explorer the properties popup shows you the size of the image
Example of specifying the width and height of an image that is 48 pixels wide and 36 pixels high
[sourcecode language=”html”]<img src="images/minilogo.jpg" width="48" height="36" alt="Cookwood Press Logo" />[/sourcecode]
If the pixel values that are specified using the width and height attributes are different from the actual dimensions of the image, the browser will resize the image to match the specified values. This can cause the image to look distorted and blurry. It is therefore not advisable to attempt resize images in this manner to make them fit on your page. Resize the image using an image-editing program instead.
It is also important to remember that if you change the size of your image with an image-editing program, you may also need to update the width and height attributes within the XHTML file.
If you use an image as a link, it will automatically have a coloured border to indicate that it’s a link. The colour of the border will match the colour of the linked text on the page. This border can be eliminated using inline CSS.
CSS stands for Cascading StyleSheets. CSS is used for styling and layout of your HTML content. It is recommended to use HTML to add content to your page and to use CSS to style it.
[sourcecode language=”html”]<img src="images/minilogo.jpg" style=“border: 1px solid red;" /> <!– border of one pixel –>
<img src="images/minilogo.jpg" style=“border: none;" /> <!– no border –>[/sourcecode]
In this example you can see that we are using the inline style attribute to change the style of the image border. We use the CSS border property with a value of none to remove the border.
If the image is not linked, a border will not be displayed, unless added using CSS.
You can add a border around the image by setting the CSS Style attribute as shown on the previous slide.
[sourcecode language=”html”]<img src="images/minilogo.jpg" style=“border: 1px solid red;" />[/sourcecode]
Note that the use of the old HTML border attribute is not recommended, as it is a deprecated tag.
Use CSS style as shown above instead.
To align an image to the left or right we can use the CSS float property. This positions an image to the left or right and wraps the text around the image.
[sourcecode language=”html”]<img src=“images/myDog.jpg” alt=“Pic of my dog” style=“float:left;” />[/sourcecode]
Vertical Image Alignment
By default, graphics are displayed with the bottom of the image lined up with the baseline of the surrounding text
To correctly align an image vertically, we use the vertical-align CSS property.
[sourcecode language=”html”]<img src=“images/myDog.jpg” alt=“Pic of my dog” style=“vertical-align:middle;” />[/sourcecode]
Stopping Text Wrapping
A wrapped image affects all the text that follows it unless a special line break is inserted
This can be done using the CSS clear property which instructs it to start the next line below the image
[sourcecode language=”html”]<br style="clear:left;" />[/sourcecode]
The clear property has three possible values, “left”, “right” and “both”.
- Use “left” to ensure that there is nothing to the left of the element that is cleared.
- Use “right” to ensure that there is nothing to the right of the element that is cleared.
- Use “right” to ensure that there is nothing to either side of the element that is cleared.
Spacing Around Images
For spacing around an image we use the CSS margin property. You can define the extent of the margin in pixels, cm, inches, percentages and other measurements.
[sourcecode language=”html”]<img src=“images/myDog.jpg” alt=“Pic of my dog” style=“margin:20px;” />[/sourcecode]