• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / HTML Images

HTML Images

30 August 1997 / Leave a Comment

This tutorial shows you how to include images in your HTML Web pages. It’s aimed more at the beginner than the expert, and shows some common pitfalls encountered when using HTML images.

The HTML img tag

To place images in your page, use the img tag. This takes the basic form:


<img src="image-path" alt="alternative-text" />

where image-path is the directory (folder) and file name of your image, and alternative-text is text that should be shown if the image can’t be displayed for some reason.

The alt attribute is required for all images. However, it can be empty (""). Use an empty alt attribute if your image doesn’t have any inherent meaning — for example, if it’s used purely for presentation. Read more about the alt attribute.

Knowing what to put for image-path is one of the first hurdles for the beginner. Let’s look at a few examples to help explain paths and folders.

Say your web page is called mypage.html and your image is called tree.gif. On your Web server or hard drive, you have a website directory called website/.

Example 1: Image and Web page in the same directory

The easiest example to understand is when your page and image are in the same folder, or directory – for example:

website/
    mypage.html
    tree.gif

Then, to include the image in your Web page, you just specify the filename "tree.gif":


<img src="tree.gif" alt="Tree" />

…and the browser knows to look in the same folder as the Web page for the tree.gif graphic.

Example 2: Image in a subdirectory

A more common scenario is having the image in a folder below the one containing the Web page. This allows you to group all your Web graphics in a single folder (often called images) to make them easier to manage:

website/
    mypage.html
    images/
        tree.gif

This time, the HTML to include the image in your Web page looks like this:


<img src="images/tree.gif" alt="Tree" />

In other words, this time we have to tell the browser to look for tree.gif in the subdirectory called images.

Example 3. Image in a completely different directory

What if your image file is in a completely different directory from your HTML page? Often this is done so that there is one shared images directory at the top of the site, which all pages in subdirectories can use. For example:

website/
    mystuff/
        mypage.html
    images/
        tree.gif

In this case, the HTML to include the image would look like this:


<img src="../images/tree.gif" alt="Tree" />

How does this work? Well, the ".." tells the browser to go up a directory. So the browser sees this HTML as: “Go up a directory (from mystuff/ to website/), then go into the images/ directory, and find tree.gif in there.”

Using width and height attributes with the img tag

It’s a good idea to specify the image width and height as part of the img tag. This helps to maintain the correct layout of your page while the images are loading, or if the user has disabled the loading of images in their browser.

To specify the width and height, use the following HTML:


<img src="image-path" width="x" height="y" alt="alternative-text" />

where x is the width of the image in pixels, and y is the height of the image in pixels.

But how do you find the width and height of the image? Well, with most browsers you can open the image in a browser window and it will tell you the width and height in the title bar at the top of the window. In Internet Explorer you can right-click on the image and select Properties. You should see the width and height next to “Dimensions” in the resulting dialog.

In Photoshop, you can Alt+click (Windows) or Option-click (Mac) in the status bar to find out the dimensions of the current image (see the Photoshop tutorial Viewing image information). Also, most paint packages come with an option to change the size of the image (usually called something like “Image Size” or “Resize Image”). These bring up a dialog box which will show you the current image width and size. If this doesn’t work, consult your paint package manual or technical support.

Image borders

HTML image with borderIf you use your image as an HTML link or a button, you may find that you get a coloured rectangle around the image. This is the image border and is used to indicate that the image is a link. However, it’s also incredibly ugly. You can turn it off by specifying the following in your HTML img tag:


<img src="image-path" width="x" height="y" alt="alternative-text" style="border: none;">

This will ensure that the border does not appear around the image.

Common mistakes when using HTML images

1. Getting the image path wrong

If you see an “image not found” symbol (a red cross or a broken picture symbol) on your Web page where you should see an image, the chances are you’ve specified the wrong path to the image. Look at the three examples above and see if you can work out where the problem might be. Don’t forget to include the image file extension (such as .png or .jpg) when specifying the path.

2. Not uploading the image

It’s amazing how often even seasoned Web coders get caught out with this one! Make sure you’ve uploaded your image to your Web server, and that it’s uploaded to the right directory…

3. Using the wrong case for the image filename

Don’t forget that most Web servers are case-sensitive, so if you specify img src="tree.jpg" and the file you uploaded is called "tree.JPG", the server won’t find it…

Now you know how to work with images in HTML!

Filed Under: HTML Tagged With: broken images, fixing, graphics, html basics, html help, html images, html tutorials, img tag, missing images, troubleshooting

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits