The img src attribute
The img src stands for image source, which is used to specify the source of an image in the HTML <img> tag.
For example, this is how the image path is set along with title and alt attributes in img tag:
<img src="demo-image.jpg" title="Title of image" alt="alt text here">
<img src=http://www.example.com/demo-image.jpg title="Title of image" alt="alt text here">
Two options to specify a source
You may use absolute or relative paths to specify the source of the image in HTML img src attribute.
The absolute path
In this option, the complete URL of the image is specified in the src attribute of HTML img tag. For example:
<img src="https://www.jquery-az.com/html/images/banana.jpg" title="Title of image" alt="alt text here"/>
You may also specify the URL of the image without “http”.
<img src="//www.jquery-az.com/html/images/banana.jpg" title="Title of image" alt="alt text here"/>
This will be useful if the server is changed from HTTP to HTTPs in the future, for example. This will work in both cases.
Where should I use Absolute path in img src?
- You should use this option when using images from some other web server.
- You do not want or permitted to host those images at your own server.
- In that case, the image download bandwidth consumption will cost at the server where it is hosted.
Although, absolute options will also work for the same server, however, recommended way is to use the relative path in case images are existing at the same server where your website is hosted.
The relative path option
In this option, you will specify image source based at the current directory. An example of relative path is:
<img src=”images/banana.jpg” title=”Title of image” alt=”alt text here”/>
If you are working in a source file e.g. index.html and use above line of code, it means:
- The images directory/folder is at the same location where the source file (index.html) is placed.
- The images directory contains the banana.jpg file.
See another possibility to specify the path:
<img src="../strawberries.jpg" title="A banana image" alt="Banana is good in taste!"/>
In that case, I used “../”, which specifies going back one step.
To get back two steps, use “../../”. e.g.
<img src=”../../banana.jpg” title=”A banana image” alt=”Banana is good in taste!”/>
If image is placed at the same directory where the source file is:
<img src=”banana.jpg” title=”A banana image” alt=”Banana is good in taste!”/>
What if the image does not load? The alt attribute
There may be a few reasons that images do not load, for example:
- The specified path in img src tag is not correct.
- There are speed issues at the user’s side and the image is too heavy to be loaded.
- Your web server got slower or taking much time to complete the request.
- And more.
In any case, where an image is unable to download at user’s computer the alt attribute text will be shown. The alt means alternate which is specified in the <img> HTML tag. For example:
<img src="images/banana1.jpg" title="A banana image" alt="Banana is good in taste!"/>
So if the path is incorrect or image is not loaded for any reason, the text “Banana is good in taste” will be shown in place of the image, as shown in the demo.
The HTML alt attribute is recommended to use for images generally. This will benefit as far as SEO is concerned. As such, search engines are unable to read the text inside the images so the only way you may tell the purpose of images is by “alt” or “title” tags.
Display title as Bootstrap tooltip
The title tag of the <img> tag (and others) can be used to display the tooltips. By default, tooltips use the default style which is small in size and small text.
By using a tooltip with CSS, you may style it quite beautifully.
In this demo, I will show you tooltip by using the Bootstrap component. For that, I simply included the Bootstrap libraries and jQuery in the head section.
The tooltip is called in the <head> section by using jQuery (see script section). The style contains the look and feel of the tooltip.
For more on Bootstrap Tooltips, go to its detailed guide.
Out of the two options to specify the path in img src tag of HTML, you should use relative if images are located at your own hosting.
If you are referring images from other servers then use absolute URLs in the src attribute.
You should also consider using absolute URLs if you are using high-quality images and your hosting package offers limited bandwidth consumption.
There are third party image hosting solutions where you may host images while the bandwidth cost is incurred by that server.