html images

HTML <img> element allows us to embed image from different sources and location to our webpages and make them visually pleasing. It supports image formats namely JPG, JPEG, PNG and GIF. The <img> element is an empty tag which contains attributes only and does not have a closing tag. The src attribute specifies the URL (web address) location of the image.

Syntax:

<img src="image-url" >

HTML Images Examples

The alt Attribute

The alt attribute provides an alternative text for an image which is displayed in the browser in case the image could not be loaded because of slow internet connection, an error in the image url or if the user is using a screen reader. The value of the alt attribute should describe the image. Although, browsers will display images without any issue, HTML validator will not validate HTML files if <img> element does not contain alt attribute. Adding alt attribute to <img> elements will help search engines index images too.

<img src="web-design.jpg" alt="web design background image">

Image Width and Height

Width, height as well as style attribute can be used to define the size of an image in HTML web pages. You need to define the width and height of the image to get a desired size inside the web page or it will automatically take up it's original size. However, it is better to use style attribute insted of width and height to prevent the size value of the image from being overridden from stylesheets which you will learn later.

<img src="image.jpg" alt="An image" width="500" height="600">
<img src="image.jpg" alt="An image" style="width:500px;height:600px;">

Image Location

If no image path is specified as in above examples, the browser will look for the image in the same directory where the web page is. However, it's a common practice to store images in a sub-directory to keep things well organized. In such cases, you must add the sub-directory name before the image file name which is termed as the image path.

In this example, you will see an image loaded from a sub-directory named images.

<img src="images/students.jpg" alt="Students" style="width:400px;">

Image from Online Sources

You can also fetch images from other online sources and display them in your web page. You might need to be careful about image copyright issues while embedding an image from other sources on your web page that you aim to upload live on server, but, while practising on your own, you can do that without any worries. You can also use images from a huge number of online photo galleries who provide great images for free.

<img src="https://www.tesroaankha.com/wp-content/uploads/2018/11/Singha-Durbar.jpg" alt="government house" style="width:300px;">

Animated GIFs as Images

HTML allows you to embed animated GIFs instead of images too in your web page.

<img src="html.gif" alt="animated gif" style="width:300px;">

Image as a Link

You can use images as link to other pages of the same website or other websites by simply wrapping the image by an <a> (anchor) element.

<a href="https://www.webtrickshome.com/tryiteditor">
  <img src="logo.png" alt="HTML Try It Editor" style="width:100px;">
</a>

Floating Image

You can align an image to the left or right side of a text paragraph using CSS float property.

<p><img src="web-design.jpg" alt="web design banner" style="width:300px;float:left;"> Some text here...</p>

Image Maps

The <map> tag defines an image-map. An image-map is an image with multiple clickable areas. In the image below, move your mouse over each letters and see which pages they are linked to.

image map example

The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map while the <map> element contains a number of <area> tags that define the clickable areas in the image-map.

You can visit image map where you can upload image from your computer or load them from other websites and get map coordinates.

<!-- Image Map Generated by https://www.image-map.net/ -->
<img src="seo.jpg" alt="image map example" usemap="#image-map">

<map name="image-map">
    <area target="_blank" title="HTML Introduction" href="https://www.webtrickshome.com/content/html-introduction" coords="142,266,0,54" shape="rect">
    <area target="_blank" title="HTML Headings" href="https://www.webtrickshome.com/content/html-headings" coords="146,54,166,247,293,226,310,210,296,189,267,114,263,54" shape="poly">
    <area target="_blank" title="HTML Paragraphs" href="https://www.webtrickshome.com/content/html-paragraphs" coords="361,133,85" shape="circle">
</map>

The <picture> Element

The <picture> element contains a number of <source> elements, each referring to different image sources. This instructs the browser to choose the image that best fits the current screen size. Each <source> element have attributes describing screen sizes where the image is best fit. The browser will use the first <source> element with matching attribute values and ignore the rest. An <img> element is added as the last element inside the <picture> element which acts as a default value in case none of the <source> element matches the screen size or in browsers where the <picture> element is not supported.

<picture>
  <source media="(max-width: 465px)" srcset="web-design.jpg">
  <source media="(max-width: 767px) and (min-width: 466px)" srcset="seo.jpg">
  <img src="web-code.jpg" alt="Web design and Development Tutorials">
</picture>

0 Like 0 Dislike 0 Comment Share Tweet