Adding Images

This page contains information on how to use images in and create images for web pages.

There are two basic ways to add an image: through the <img> element and with the background-image property in CSS. The image you’e using and how you are including it help determine which method you use.

Adding the img element

If the image is part of the main content of the page (i.e. an image of a product that is being sold) then you should use the <img> element.

Rule 1: Always include alt attribute

When you use the <img> element you include an alt property (this is mandatory in our class for all <img> elements) that serves a few purposes. 1)For people who are using a screen reader the software will read the alt property so they know what the image is about; this does’t happen with background images. 2) If the link to the image is broken or the browser can’t display images (or the user turned off images) then the alt text will show in place of the image. 3) Most browsers will display the alt text if the mouse hovers over the image

Rule 2: Always resize images in Photoshop

Many times your original image is not the exact size or dimensions (width and height) you need for your design. If this is the case, then take the image into Photoshop or another image editing program and change the image there. Then include this corrected image into your design. The width and height attributes for the img element should not be used to resize the image. They should just reflect the actual size of the image. This way you aren’t forcing people to download a 500×500 image to only see a 100×100 image.

Example: for a 200×200 image of a rose


<img src="rose.jpg" alt="Picture of a rose in bloom" width="200" height="200" />

Adding a background image

Background images are mostly meant to be used for more decorative purposes such as putting gradient backgrounds or drop shadow borders on boxes. One of the nice things about using the background-image property to add images is that you can easily change them across the site by changing your CSS file.

Example: basic background image


background-image:url(images/bg-search.gif);

Tip: your images should all do in a folder (usually named images) and then if you’e using Dreamweaver to add the background-image you can use the browse option for the value and let it write the url for you.

Rule 1: Never make a big background image when you can repeat a small part

The background-repeat property allows you to repeat the image horizontally (x), vertically (y) or both. The basic technique is to cut a small part of a background image and then use the background-repeat property to make it fit the width or height you need. This has the two advantages of 1) reducing the file size of the image and 2) allowing your background to grow and shrink to fit the size of the box. Here is an screenshot of a Photoshop document with small slices for the background image.

Screenshot of Photoshop file sliced for background images that will be repeated.

Screenshot of Photoshop file sliced for background images that will be repeated.

Example: basic background image with repeat


background-image:url(images/bg-header.gif);
background-repeat:repeat-x;

You can also use CSS to align the background image to the top, bottom, left or right of it’ box.

Example: background image aligned to bottom of the box


background-image:url(images/bg-header.gif);
background-repeat:repeat-x;
background-position:bottom;

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>