An image on a web-page increases the viewer’s interest and also improves the appearance and design of the web-page.
Images can explain better than words. You must use images in your website wherever appropriate.
One thing you must remember is that image tag is a single tag (empty tag). It doesn’t have any closing tag.
In link element, the href attribute was used to specify the URL of an image, web-page or any file. But in image element, the src attribute is used to specify the URL of an image.
You can also specify the relative path (if linking within site) to the image as discussed in the links chapter.
The second thing to remember is the alt attribute. It is required to create a valid image element.
The alt attribute is to provide an alternate name to the image file due to the following reasons-
- If the image doesn’t open due to slow connection then alt name is displayed.
- People using screen readers can know about the image. (useful for blind users)
<img src="dog-foods.jpg" alt="List of foods for dogs">
3width and height attributes
Third important thing is to specify the height and width of the image. If it’s not specified then the screen might flicker.
These both are measured in pixels. (pixels is the standard unit for measuring anything on a screen)
<img src="dog-foods.jpg" alt="List of foods for dogs" width="600" height="300">
By default, the units of height and width are considered in pixels (px). Therefore no need to specify the units.
Suppose you have specified the CSS for height and width of all images in your CSS file like this-
Because of the above CSS, all the images will appear with the height of 200px and width of 300px. This CSS will also overwrite the height and width attributes of all images.
But, in case you want any particular image to appear with the height of 500px and width of 800px then, you can write the inline CSS for that image using style attribute.
<img src="dog-foods.jpg" alt="List of foods for dogs" style="width:128px;height:128px;">
Now the CSS won’t overwrite because of this particular image element because it has its own inline CSS specified.
Its good practice to specify height and width using inline CSS to avoid overwriting of height and width HTML attributes.
You can always specify additional styles inside the style attribute like padding, margins, border, float etc (explained in CSS chapters).
5Linking to an external image
You can always link any image from any website using the absolute URL of that image. Make sure that the path ends with the image file like .jpg or .jpeg or .png or .ico or .gif
Specify the absolute URL in src attribute and you are done!
<img src="https://4coals.in/wp-content/uploads/2017/06/celebrity-portrait-6-min-2.jpg" alt="4coals Portrait" style="width:300px;height:210px;">
6Image as a Link
You can convert any image to a link by wrapping it inside the <a> and </a> link tags.
For example, when you click the logo image of a website it takes to the homepage. That’s because the logo image is wrapped inside the link element with src attribute specified with destination URL.
<img src="http://ultraxart.com/wp-content/uploads/2018/07/272x92-bi-colored.png" alt="ultraxart logo">
Click on this output to check the behavior of image link.
More possibilities with images will be discussed in advance HTML images chapter. like image maps, picture element, background images.