debbie T Designs - Web Design Made Simple
Photos, decorative bars, heading graphics, buttons and animations add a wonderful creative touch to a web page.
If you would like to practice adding images to a web page of your own, you are welcome to download the graphics.zip file. There are several images for practice. (Download and unzip the file into the same folder as your example web files.)
Important Note Concerning Animated Graphics
When utilizing animated graphics, please keep in mind that fast moving, blinking, scrolling graphics should never be used on a web page. Besides being very annoying to your visitors, it could possibly cause medical problems for some.
If you would like to learn more, here are some very good sites that might help.
Resizing Is Important
If you are using your own image files, please make sure to resize them to an appropriate size. There are still many people using dial-up to connect to the Internet, so keep your images accessible for all your visitors.
- Resize the width of your images to less than 600 pixels.
- The total of all files should equal no more than 40 kb to 60 kb.
One kb converts to approximately 1000 bytes, so 40 kb would equal to approximately 40,000 bytes.
If you need help calculating the total size of all files on your web page (including graphics), there is a handy tool on websiteoptimization.com that will analyze your web file, and calculate its weight.
If you need to resize your images, there are many graphics programs that will do the job. (Please remember to keep your original files intact, and only resize a copy.)
- Google Picasa (free!)
- Irfanview (free!)
- iPhoto (mac only)
- Corel Paint Shop Pro
- Adobe Photoshop & Photoshop Elements
- Adobe Fireworks
- The software included with your digital camera might also be helpful in resizing
Tutorials for resizing: (Please remember to keep your original files intact, and only resize a copy.)
- Paint Shop Pro Tutorial – Crop, resize and export (tutorial by debbie T)
- Irfanview Tutorial
- Google Picasa Tutorial
- Photoshop Tutorial
If you do not have a graphics editor of your own, there is a neat web site that will resize your larger .jpg files for you. Check out http://www.321webmaster.com/optijpg.php. Keep in mind the file must first be uploaded to your hosting account and only works with .jpg files; it will not work on gif or png files.
If all else fails, please use the images provided in the tutorial zip file for practice.
Images Have URLs Too Ya Know
Every single file on the web has its own unique address, or URL (Uniform Resource Locator.) You also might see it referenced as URI (Uniform Resource Indicator.)
Just like any web page, an uploaded image file also has its own unique address.
For example: http://www.mysite.com/images/mypic.jpg is the unique address to an image file saved as "mypic.jpg" located in a sub-directory (folder) named "images".
<a> tag references an URL when linking to a web file. Very similarly, the
<img /> tag references the specific URL of an image file. Most often, you will be using a relative url for your image links because usually all image files are saved on your own web site. The browser reads the
<img /> tag, finds the graphic file, and displays it on your web page.
Important to Remember About Image Files
- To minimize problems, always use lowercase letters when naming a graphic file. Never include spaces or any other characters other than (-) hyphens or (_) underscores.
- Do not use fast moving animated graphics that blink, flicker, or scroll.
- Just like .html files, all graphic files referenced on your web page must be uploaded to your web site.
- Do not type the path to the file on your hard drive.
For example: "C:My DocumentsMy Picturesimage.jpg" It might work when you personally view your page online, but visitors to your site do not have the image file on their hard drive so the image will not display. Image files are uploaded to your web host so all visitors can view them. You must reference the path to the images online, not on your own hard drive.
- Keep the size of your image files lower. The total of all your image files for one page should equal 40kb to 60kb (less is better.) Dial up visitors might not want to wait for graphic files to download in their browser. The percentage of dial-up visitors is dwindling, so if you know that most of your visitors have high speed connections, then this rule might not apply to you.
- Most modern browsers are equipped to view JPG, GIF and PNG image files. Never use files with extensions of tif, ps, psp, bmp, or other images formats. The file size will be massive and not all browsers will support them!
Never link to an image outside of your site unless the creator gives specific permission to do so. That is bandwidth theft and is not acceptable behavior! A lot of web hosts do not allow "hot linking" to images and use special scripts to prevent it.
Note: The W3C validation logo listed on your web pages, is actually linked to the W3C site, but it is okay to link to this image because they give permission.
A Word About Copyright
Before we learn how to display images, let’s get the files organized first. Remember, you must keep the same file structure online and offline, especially when first learning.
- Some designers prefer to save all files (.html and images) in the same directory or folder.
- Some designers prefer to save the image files in a separate directory or folder.
Personally, I like to organize my image files in a separate folder; most times I name the folder "images" but "graphics" "files" or "photos" are also appropriate names. Keep in mind that the path to the file will depend on where you save your images.
<img /> Tag
Just like the
<br /> and
<hr /> tags, the
<img /> tag is an empty tag. Make sure to always add the [space] and / at the end of the tag to close.
<img /> tag is an inline tag, so it should be contained in a block-level tag like
<hx>. This is very important if you are using a Strict doctype.
There are several attributes that can be used with the
<img /> tag. Some are required and some are optional.
Src Attribute (required)
The src attribute is required for referencing the location where the browser can find the image file. The "source" of the file so to speak.
I have nested this
<img /> tag in a paragraph.
<p><img src="blossoms.jpg" /></p>
The browser reads the tag, looks at the source (src) of the file, finds it, and displays it on the browser. Easy peasy.
If your image file is located in a sub-directory (folder) then you need to reference that location in the path to the file.
<p><img src="images/blossoms.jpg" /></p>
Notice I am using a back-slash, not a forward-slash as some Windows users might be used to.
Width and Height Attributes (optional, but recommended)
Using the width and height attributes is recommended, especially if your page contains many images and they are large in size. In all but a few situations, the exact width and height dimensions should be inserted as values.
<p><img src="images/blossoms.jpg" width="350" height="233" /></p>
Notice a space has been added in between each attribute. Each value is enclosed in "quotes."
Pages Seem to Load Faster!
Using the width and height attributes can help the browser render the web page, and in turn, the page appears to load faster.
What happens is, the browser reads the
<img /> tag and all its attributes. When the browser reads the width and height, it holds a specific space where the image is located on the page. Then the browser starts to download the actual image files to "fill in" the page. In the meantime, the text and other content starts to load on the page, creating the illusion that the page is loading quicker.
If width and height are not specified, the browser has to read each
<img /> tag and it must download the full image first before it can calculate the necessary space on the page for the image.
Did you ever go to a web page and see the content wiggling all over when many images are downloading. Each time an image is downloaded, the page moves over or down. This is because width and height were not specified. It can be very distracting to the visitor, and makes it difficult to read any text while the images are still loading.
Always remember to include the width and height attributes in your
<img /> tag and your web pages will load smoothly.
How To Find the Exact Dimensions
Okay, so you want to use the exact dimensions for width and height, but how do you find them?
Use a Graphics Editor
If you have a graphics editor (like Photoshop, Paint Shop Pro, Fireworks), you can easily view the exact width and height of any image file. Just open the file in your favorite graphics editor.
Use Windows Explorer or Macintosh Finder
For Win XP users, you can view an image file’s dimensions in Windows
Explorer. Open the folder containing your images in Win Explorer, click
once to highlight the image file. Take a look on the right side
of the window and you will find the dimensions (see screen shot.) You can also
find the image file size there as well.
For Macintosh OS X users, click to highlight the image file in the Finder (column view) and the dimensions are displayed in the far right column.
Viewing Image Properties From a Browser
One more way to figure out an image’s dimensions is to view it’s properties while viewing from a web browser, offline or online.
Once an image has been inserted into a web page, view the page in your browser. Right-click on the image (on the web page), and choose Properties. Voila, your dimensions!
Alt Attribute (required)
The alt attribute is extremely important when inserting images on your Web page. If it is not used, the W3C validator will scold you with an error.
- Alt is short for "alternative" – text that will serve as an alternative if the image doesn’t load on a web page.
- Do not apply enter breaks in the middle of an alt value. Keep it flowing on one line.
- Keep alt text descriptive, but to the point. Do not write a long detailed paragraph about your image. A quick sentence or phrase will do nicely.
<p><img src="images/blossoms.jpg" width="350" height="233" alt="beautiful blossoms" /></p>
Why is the alt attribute so important?
- Well, most importantly, if your image fails to download on the page, the alt text will display in its place to show the visitor what’s missing. Many times, Web hosts can hiccup or image files will "time out" before downloading is complete.
- Another very important reason is there are a lot of web users that are sight-impaired. Some use browsers that "read" the content on a web page to them. The "reader" recites the alt text along with the other text content on the page, so the visitor will know what is on the page.
- Another valid reason to use the alt attribute is for visitors using browsers with image-display turned off or browsers that render text only. The alt value will display on the page in place of the image file.
Empty Alt Values
There will be instances that you will not want any text for alt. In example, when inserting an image for decoration, use a blank (empty) alt value. Notice how I used an empty value in the
<img /> tag below.
<div><img src="images/horizontal-bar.gif" width="350" height="5" alt="" /></div>
Think of it this way. Say you have 10 decorative images on your web page. A person using a text "reader" visits your site, and begins to "hear" what your site is about. How annoying would it be to hear 10 insignificant "horizontal bar" explanations in between pertinent content information?
Text-only browsers display alt values on the page instead of the image. Using an empty value "" for alt will save the visitor from having to read through trivial information.
Title Attribute (Optional)
What is the difference between the title and alt attributes? Some browsers (Internet Explorer in particular) will display the alt text in a pop-up tooltip when the mouse is hovering over an image. Technically, this is not really the proper use of alt text, so standards compliant browsers like Firefox and Opera do not display alt text in this manner.
The title attribute can be used with most (x)html tags. Browsers (including Internet Explorer) will display the title text in a popup tooltip window. If you want to ensure that your images display a tooltip, then use the title attribute.
The title attribute is also very helpful in text readers and search engine optimization.
<p><img src="images/blossoms.jpg" width="350" height="233" alt="beautiful blossoms" title="Beautiful Blossoms make me smile" /></p>
Border Attribute (deprecated)
The border attribute has been deprecated by the W3C. They discourage use of this attribute, and suggest CSS instead. If you are working towards a strictly coded page, then do not use the border attribute. If you are using a transitional doctype, it’s okay to temporarily use the border attribute until you learn CSS borders.
<p><img src="images/blossoms.jpg" width="350" height="233" alt="beautiful blossoms" title="beautiful blossoms make me smile" border="1" /></p>
Alternative: If you desire a border around your images, but want to forgo the border attribute, then add a border to your image using a graphic editor.
Vspace and Hspace Attributes (deprecated)
The attributes vspace and hspace have been deprecated as well, but it is acceptable for use in a "transitionally" coded xhtml page.
- The vspace attribute will add extra "padding" to the top and bottom of your image.
- The hspace attribute will add extra "padding" to the right and left of your image.
<p><img src="images/blossoms.jpg" width="350" height="233" alt="beautiful blossoms" title="beautiful blossoms make me smile" border="1" vspace="5" hspace="15" /></p>
Do not use the hspace and vspace attributes to align an image to the page. Because visitors will be viewing your page with different sized monitors, displays, and browsers, it is not an efficient way to align an image.
Image Test Exercise
Create a quick test page.
- Launch your text editor, open your "template.html" file.
- Save as "img-test.html"
- If you do not have any graphics of your own, use one from the graphics.zip file. I am using the image "blossoms.jpg" on my page. Whichever image file you choose, please copy (or move) the file to a (new) folder named "images" located in the same directory/folder as the "img-test.html" file.
- In your text editor, after the opening
<body>tag, add a division
<div></div>tag set. Optionally include an id attribute for the division.
- Nest an
<img />tag in the division. Since the
<img />tag is an inline tag, it should be nested in a div, paragraph, heading, or other block level tag.
- Type all the necessary attributes in the
- Type in the exact name of the image file as the value for src and include the "images" directory in the path if that is where the image file is saved.
- Type the exact values for width and height for your own image file.
- Type an alt text value that describes your image, along with an optional title value.
- Ensure that all your values are "quoted" and don’t forget the [space] / to close the img tag.
<div id="test"><img src="images/blossoms.jpg" width="350" height="233" alt="beautiful blossoms" title="beautiful blossoms make my day" /></div>
Check your test page offline in your web browser. Does the image display on your page? If you see a big box with a red "x" – something is wrong.
If you see a red x on your page where your image should be, then check out these hints:
- Did you save the image file in the images directory/folder on your hard drive? It should be a sub-directory of the directory that your .html file is saved.
- Did you include the "images" directory in the path to your file in the src value?
- Does your image file name equal exactly to the name specified in the src? For example, "mypic.jpg" isn’t the same as "Mypic.jpg" or "mypic.JPG" or "MYPIC.jpg" so watch the case of your files. To save yourself from troubleshooting headaches like this, web files should always be saved as lowercase names.
Checking Web Page Online
Now, both html and image files must be uploaded to your web hosting account, and then a new "images" directory must be created.
- First, upload the img-test.html file to the main directory on your hosting account.
- In the main directory, create a new sub-directory/sub-folder named "images"
- Change to the "images" directory. It will be empty, so if you still see any of your prior html files, you are not in the correct directory.
- Upload the image file. This is the only file (at this point) in your "images" directory.
View the img-test.html file in your browser. Make sure you are not viewing the page offline. Does the image view properly? If not, read further.
Troubleshooting Images Online
To ensure your images are viewed online
- If you are viewing your main directory, and the image file is located there along with the .html file, then it is in the wrong place. Stop, and carefully re-read the directions above for uploading to a new "images" directory.
- Remember: Keep the same file structure online as your hard drive offline. If your image files are located in a sub-directory on your hard drive, then they must be saved to the same directory online at your web hosting account.
- Is the new directory created online misspelled? A new directory named "Images" or "IMAGES" is not the same as "images".
- Does your image file name equal exactly to the name specified in the src? For example, "mypic.jpg" isn’t the same as "Mypic.jpg" or "mypic.JPG" or "MYPIC.jpg". To save yourself from troubleshooting headaches like this, web files should always be saved as lowercase names.
Check out my img-test.html file.
If I use the same image file on the same page or on other pages in my Web site, will my visitors have to download the file each time I use it?
Answer: Once a visitor downloads an image, it does not have to be downloaded again, as long as the image is still in the visitor’s temporary tnternet cache. This is a great way to reuse heading images, buttons, backgrounds, etc. Once the file has been displayed on the first page, subsequent pages using that image, will load much faster since that file will be cached.
Where can I find image files to use on my Web pages?
- Printer Links