img

img

HTML img Element

The HTML <img> element is used to render image media like graphics, illustrations, and photos. It is very important that web images be optimized by the webmaster. Which means that if you have a very large image, you should shrink it to the dimensions that it will be displayed on the page. You can use any supported image type(.jpg, .gif, .png, .bmp, etc...) in the img element. This is a Void Element so it does not have a closing tag.
We will show a few basic examples and supply you with a small image to play with.

Add an image to a web document

1. Take this image by right clicking it and choose "Save Picture As".
2. Save it to the same project folder where your web page is located.
3. Then add the following code to your web page and test it:

HTML CODE EXAMPLE

<img src="my_pic.jpg" alt="My Picture">

Create an Image Link

Wrap the <a> tag around your images to make them image links. Link to the full big size version of the thumbnail, or link to a web page.

HTML CODE EXAMPLE

<a href="http://www.developphp.com">
   <img src="my_pic.jpg" alt="My Picture">
</a>

Attributes for this element:

src - specify where the image to render is living in your file system
Possible Values: "relative or full URL string"
alt - specify fallback information if the image is missing or does not load
Possible Values: "fallback text"
width - specify image width
Possible Values: "integer"
height - specify image height
Possible Values: "integer"
usemap - specify a <map> element to tie to the image
Possible Values: "the map's name value"
ismap - specify access to an image map on the server side
Possible Values: "ismap"
global attributes - global core attributesSee: list of global attributes

Events handlers for this element:

global event handlers - global event handler attributesSee: list of global event handlers

Tweet