HTML Images

HTML Images

14 May 2024
Intermediate
1.21K Views
7 min read
Learn via Video Course & by Doing Hands-on Labs

HTML For Beginners Free Course

HTML Images

Initially, the Web was just text, and it was quite boring. Now, with the help of HTML Online Training, we can enhance websites by inserting images. It is logical to start with the humble <img> element, used to embed a simple image in a webpage. In this comprehensive article on HTML Online Training, we'll look at how to use the <img> element in depth, covering the basics and providing detailed insights.

Image Syntax in HTML

  • The HTML <img> tag is used to insert an image into a website.
  • Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a space for the referenced image.
  • The <img> tag is empty, it contains attributes only, and it does not have any closing tag.
  • You can insert any image on your web page by using <img> tag. This is the simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Image syntax in HTML</title>
   </head>
   <body>
      <p>Simple Image Insert</p>
      <img src = “ScholarHat.png" alt = "ScholatHat" />
   </body>
</html>

Output:

ScholarHat

The <img> tag has two required attributes:

img src attribute – Which specifies the path to the image 

img alt attribute– Which Specifies an alternate text for the image

We can use PNG, JPEG, or GIF image files based on our requirements but we have to make sure you specify the correct image file name in the img src attribute. The image name is always case sensitive.The img alt attribute is a mandatory attribute that specifies an alternate text for an image in case the image cannot be displayed.

HTML <img> title Attribute

The HTML<img> title attribute adds a tooltip with title text to the image. The title attributes attach additional information to the <img> element. Tooltips display text (or other content) when you hover over an HTML element.

Syntax

<img title="value">

Height and Width of image in HTML

 width

Width is an optional attribute in an HTML image that specifies the width to display the image. It is not recommended now. we should apply CSS in place of the width attribute.

height

Height is also an optional attribute in an HTML image and it helps to change the height of the image. It is not recommended now. You should apply CSS in place of the height attribute. Get an image from another directory/folder. To insert an image in your web page, that image should be present in the same folder where you have saved the HTML file. mage is available in some other directory then you can use this:

<img src="Image source link" height="180" width="300" alt="Alternate text"> 

Lazy Load Images in HTML

Lazy load images is a technique that is used in web development to delay the loading of non-critical resources, such as images until they are needed. When implemented on images, it means that the image will only be loaded when it enters the user's viewable area, or viewport, as they scroll down the page. To implement lazy loading for images in HTML, the "loading" attribute can be set to "lazy" on the "<img>" tag. This tells the browser to delay the loading of the image until it is needed.

For example

<img src="image.jpg" alt="An example image" loading="lazy">

The "loading" attribute is set to "lazy", which defers the loading of the image until it is needed. Lazy loading can help in improving the performance of a web page by reducing the amount of data that needs to be loaded at the start. It also reduces the amount of unnecessary resource fetching and improves the user experience by reducing page load times.

Image Formats in HTML

Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Image Formats in HTML

Read More: HTML Interview Questions and Answers
Summary

HTML images, including those related to HTML Certification, are a powerful means to display graphics on a web page. To insert images into an HTML document, we utilize the image syntax by employing the "img" tag. This tag allows us to specify the source file location of the image through the <src> attribute, as well as define its size and incorporate additional attributes such as <alt>, <text>, and a <caption>. By customizing the height and width attributes of the image in HTML, we can easily adjust its size as desired.

Take our Html skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE

Share Article

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
Angular Certification Course Jun 16 SAT, SUN
Filling Fast
09:30AM to 11:30AM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification Training Jun 17 MON, WED, FRI
Filling Fast
07:00AM to 08:30AM (IST)
Get Details
ASP.NET Core Certification Training Jun 17 MON, WED, FRI
Filling Fast
07:00AM to 08:30AM (IST)
Get Details
.NET Microservices Certification Training Jun 23 SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
ASP.NET Core (Project) Jun 23 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
Azure Developer Certification Training Jun 23 SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details
React JS Certification Training | Best React Training Course Jun 30 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
ASP.NET Core Certification Training Jun 30 SAT, SUN
Filling Fast
10:00AM to 12:00PM (IST)
Get Details
Generative AI For Software Developers Jul 14 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details

Can't find convenient schedule? Let us know

About Author
Sakshi Dhameja (Author and Mentor)

She is passionate about different technologies like JavaScript, React, HTML, CSS, Node.js etc. and likes to share knowledge with the developer community. She holds strong learning skills in keeping herself updated with the changing technologies in her area as well as other technologies like Core Java, Python and Cloud.

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Accept cookies & close this