Last updated on October 31st, 2020 at 07:57 am.
12 Working with Images in HTML – HTML CSS Tutorial
In this post let us talk about how to work with images in HTML.
The tag responsible for images in HTML is the <img> tag .
The <img> tag does not need to be closed like most others.
How to add an image in your Web Page
To embed images on your web page you will need the following basic elements:
- <img> : This is the tag for embedding an image on any web page.
- src : This is the source attribute which represents the path of your image. It is an attribute within the <img> element. An example is shown below. It is important to note that in html you can use an external url path or a path within your directory.
The example for an image from an external source
<img src="https://lorempixel.com/400/200">
Alternative Text / alt attribute
<img src="https://lorempixel.com/400/200" alt="Random image from LoremPixel">
The alt attribute in html is a textual description of the image. And should always be added for every single image you embed on your web page.
In situations where , for whatever reason , the image will NOT be displayable, the alt attribute will be displayed.
The image may not be displayable because:
- the image file path is wrong or
- the filename is wrong or
- connection disappears mid way of loading the page or
- image viewing has been turned off in the browser, possibly by use of a browser add-on
You may do any of the above to test and see your alt text in action. For instance, name the file wrongly and the alternative text will be displayed and not the image.
From MDN , the following are some reasons to have an alternative Text for your image:
- screen reader : For visually impaired visitors, the screen reader will read out the alt attribute.
- If the file name is incorrect , the alt attribute will be displayed. And may give you output to use for checking what may be wrong.
- If an unsupported image/ media file is used. If the browser does not support the file type, then the alt attribute will be shown instead.
- Search Engines will index the text for the images on your page. Add alt attributes to help your images rank better.
- If your visitor’s browser has image viewing turned off, at least show them the alternative text, to help describe the overall page message.
All in all, always add a descriptive alt text for your images. Let it describe what the image represents, eg for a your logo, you may use “Bizanosa Logo” , FB icon , “Facebook Icon” and so on.
Image Width and height
You may explicitly define the width and height of your image by using the width and height attributes.
<img src="https://lorempixel.com/400/200" alt="Random image from LoremPixel" width="500" height="300">
Always bear in mind that when you explicitly define the width and height of an image it may become distorted. If you know the aspect ratio of the image, use that to calculate the length and width that will maintain the images appearance .Otherwise just add one dimension, either the width or the height. There is a good example of this in the video above.
Title attribute in <img> tags
<img src="https://lorempixel.com/400/200" alt="Random image from LoremPixel" width="500" height="300" title="A sample image">
If you add a title attribute in your image, it will be shown when a user hovers the image. It is essential a browser tooltip for your visitors.
SEO and images
Images are also indexed by search engines. The following are two tips to help you improve your image SEO:
- Your image filename should be clear and descriptive.
Example :
If you are embedding the product image for an iphone 4 , it is better to name the file iphone-4-image.jpg than, image123.jpg .
- Add SEO friendly Alternative Texts for your images .This will help search engines understand what the image is about.
To learn more about HTML and CSS join the full Tutorial using the button below.
