“Image Tag in HTML” is one of the most essential elements used to display pictures on a webpage. Images make websites more engaging, visually appealing, and easier to understand compared to plain text content.
Without images, webpages often look dull and difficult to explore. HTML provides a simple way to add visual elements to webpages.
In this article, you will learn everything you need to know about adding images to your website using HTML, including syntax, attributes, and best practices. So, let us start.
TL;DR: Image Tag In HTML
Aspect | Summary |
What is Image Tag | The image tag allows developers to add pictures directly to a webpage using a simple syntax. It tells the browser where the image is located and how it should appear. |
Purpose of HTML Images | Images make webpages more engaging and visually appealing compared to plain text content. They help users understand information faster and improve overall presentation. |
Important Image Attributes | Image attributes like source, alternative text, width, and height help control how an image loads and displays. These attributes improve accessibility and user experience. |
Ways to Use Images | Images can be added normally, resized, used as clickable links, floated beside text, or applied as webpage backgrounds. Each method serves different design purposes. |
Best Practices & Learning Focus | Using correct file formats, proper attributes, and optimized image sizes improves website speed and professionalism. Practice helps developers use images creatively. |
What Is an Image Tag In HTML?
In HTML, many different tags are used to structure and display content on a web page. Tags act as instructions that tell the browser how content should appear or behave.
The image tag allows you to easily add images to a web page without needing complex code. It tells the web browser where the image file is located and how it should appear to users.
The HTML image tag is very useful and has a simple, easy-to-remember syntax:
General Syntax: <img src=”” alt=”” width=”” height=””>
Important Attributes Of The Image Tag:
An Attribute provides additional information about a tag. It works like a setting or parameter that allows developers to customize how an element functions.
The <img> tag uses attributes to control how an image appears and behaves. Some of the key image tag attributes are the following.
- The SRC attribute specifies the path or URL of the image
- The ALT attribute provides alternative text if the image cannot be displayed
- The WIDTH attribute sets the width of the image
- The HEIGHT attribute sets the height of the image
Are These Attributes Optional?
Some image attributes are optional, but they are still very important. They help developers control image size, appearance, and accessibility. Even when not required, using them improves user experience and page design.
Before working with image tags and their attributes, it is important to understand how HTML is structured. If you are still learning the basics, going through how to learn HTML easily for web development will help you a lot.
how to insert image in HTML?
After getting a basic idea about the HTML Image Tag, as your mentor, I will show you the practical implementation of this tag. Here, I will tell you the process in a step-by-step format.
One important thing I always tell my mentees to remember is that the image tag is self-closing, which means it does not require a separate closing tag like most other HTML elements.
Step 1: Adding An Image Using The SRC Attribute
The SRC attribute specifies the path (URL) of the image you want to insert into your web page. You can add images stored locally on your computer or from the internet.
When your web page loads, the browser gets the image using the src link and displays it. Below is an example of the same.
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Welcome to CodingZap!</h1>
<!-- Adding an image using the img tag -->
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="http://codingzaplogo.png"><noscript><img src = "codingzaplogo.png"></noscript>
<script>(()=>{class RocketElementorPreload{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}t(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this.i(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this.o(t)}catch(t){}})}o(t){const e=JSON.parse(t.dataset.settings),i=e.m||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let o=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this.l(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(o)})}i(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}l(t,e){this.i().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorPreload;requestAnimationFrame(t.t.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorPreload.run)})();</script></body>
</html>
Steps Of The Program:
- Here, a heading is added using the <h1> tag to display the text “Welcome to CodingZap!” prominently on the page.
- The <img> tag is used to display an image on the webpage.
- The SRC attribute inside the image tag specifies the file name ‘codingzaplogo.png’, which tells the browser where to load the image from.
- Finally, the browser renders the heading and displays the image below it on the webpage.
Step 2: Provide Alt Text using the ALT Attribute
You can also use the alt attribute to provide an alternate text to the image. This alt text, or alternate text, provides useful information to the users in case the image loading takes time.
If, for any reason, the webpage doesn’t reload due to an error or slow connection, this attribute helps in such cases. It will indicate the name of the image.
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Welcome to CodingZap!</h1>
<!-- Adding an image using the img tag and providing alt text-->
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt = "CodingZap Logo Image" data-lazy-src="http://codingzaplogo.png"><noscript><img src = "codingzaplogo.png" alt = "CodingZap Logo Image"></noscript>
</body>
</html>
Now, if there is some error in displaying the image, the alt text will appear in its place for the users. Alt text is also helpful to users who use screen readers. Thus, it improves accessibility.
Output:
How To Resize the image using the width and height attributes?
Often, we need to set an image size as per the requirements of our website and its structure. Let us now learn how to resize an image using an image tag in HTML. For this, you can use the width attribute and the height attribute.
In the HTML code below, we can observe that by specifying the dimensions of the image in pixels(px), we can adjust our image on the page.
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Welcome to CodingZap!</h1>
<!-- Adding an image using the img tag and provide alt text and dimensions-->
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20100'%3E%3C/svg%3E" alt = "CodingZap Logo Image" width = "300" height = "100" data-lazy-src="http://codingzaplogo.png"><noscript><img src = "codingzaplogo.png" alt = "CodingZap Logo Image" width = "300" height = "100"></noscript>
</body>
</html>
Steps Of The Program:
- The <img> tag is used to insert an image into the webpage.
- The SRC attribute specifies the image file name codingzaplogo.png, which tells the browser where to load the image from.
- The ALT attribute provides alternative text “CodingZap Logo Image”, which is displayed if the image fails to load and also improves accessibility for screen readers.
- The width attribute sets the image width to 300 pixels. The height attribute sets the image height to 100 pixels.
- Finally, the browser displays the heading and shows the resized image below it on the webpage.
Output:
From the output, we can see that the image is wider and appears larger than the one in the previous example.
How To Insert An Image Tag As A Link In HTML?
Sometimes, my mentees ask for assistance in webpage development where they want users to click on an image and open another page. In such cases, I make them aware of the Image Tag as a link in HTML.
In this method, you can wrap the image inside a link tag. This method is often used for clickable logos, product images, and navigation buttons. The image becomes interactive just like normal text links.
<!DOCTYPE html>
<html>
<body>
<h3>Insert Image Tag As A Link In HTML</h3>
<!-- Anchor tag creates a clickable link -->
<a href="https://codingzap.com/">
<!-- Image tag displays the picture -->
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%200'%3E%3C/svg%3E" alt = "CodingZap Logo Image" width="200" data-lazy-src="http://codingzaplogo.png"><noscript><img decoding="async" src="codingzaplogo.png" alt = "CodingZap Logo Image" width="200"></noscript>
</a>
</body>
</html>
Steps Of The Program:
- First, create the basic HTML structure and use the <a> tag to define the link destination.
- Place the <img> tag inside the anchor tag and provide the image path using the SRC attribute.
- Add alternative text using the alt attribute and adjust the image size using width or height.
Output:
Images are often used inside forms to improve design, such as adding logos, icons, or visual elements. If you want to build complete web pages, learning how to create HTML form design with examples will help you combine images with user input elements effectively.
How To Use Floating Images In HTML?
Another advanced use of the HTML Image tag is to make Floating Images in HTML. Floating images allow text to wrap around them neatly. You can float images to the left or right using CSS.
I usually share this method with the students who work on blogs, articles, and news website projects. Let us have a look at the code below.
<!DOCTYPE html>
<html>
<head>
<title>Floating Image Example</title>
<style></style>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8407dfc1-8fa5-4e2f-bbaf-42172feca716: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}.rll-youtube-player .play{--wpr-bg-56d54db6-dc69-418a-bb0e-5ead70dfb165: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8407dfc1-8fa5-4e2f-bbaf-42172feca716: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8407dfc1-8fa5-4e2f-bbaf-42172feca716","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-56d54db6-dc69-418a-bb0e-5ead70dfb165: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"56d54db6-dc69-418a-bb0e-5ead70dfb165","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h3>Insert Floating Images In HTML</h3>
<!-- Image floated to the left -->
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%200'%3E%3C/svg%3E" alt = "CodingZap Logo Image" width="120" class="float-left" data-lazy-src="http://codingzaplogo.png"><noscript><img decoding="async" src="codingzaplogo.png" alt = "CodingZap Logo Image" width="120" class="float-left"></noscript>
<p>
This text wraps around the image. Floating images improve content presentation and make webpages look more professional and readable. When you add more content here, you will clearly notice how the text flows beside the image instead of starting below it.
</p>
</body>
</html>
Steps Of The Program:
- First, create the HTML page structure and add a <style> section inside the <head>.
- Create a CSS class with the float property and choose left or right depending on layout needs.
- Add spacing using margin and apply the class to the image using the class attribute.
- In the end, add text content so wrapping becomes visible.
Output:
In real-world projects, images are often controlled using JavaScript, such as changing images on click or loading them dynamically. To do this properly, you need to know how to add JavaScript to an HTML document so your scripts can interact with image elements.
How To Use The Background Image Tag In HTML?
As you grow in web design, you will notice that not every image is meant to be part of the actual content. Sometimes images are used purely for styling and visual presentation, and that is where background images come in.
Instead of using an HTML tag, background images are applied through CSS, allowing you to control layout, positioning, and design more creatively. This approach helps you enhance the visual appeal of a webpage without mixing decorative elements with your main content structure.
When Should You Use Background Images Instead Of An Image Tag?
- When the image is only for decoration and not part of the main content, background images are a better choice.
- If you want to place text on top of an image, like banners or hero sections, background images work more smoothly.
- When you need better control over image positioning, background images give more flexibility using CSS.
- When responsive design requires different images for different screen sizes, CSS background images are easier to manage.
- If the image should not affect page SEO or accessibility content structure, it is safer to use a background image.
<!DOCTYPE html>
<html lang="en">
<!-- Adding background image and style-->
<body style="background-image: url('programming.jpg'); background-size: cover;">
<!-- changing text color for visibility-->
<h1 style="color:white;">Welcome to CodingZap!</h1>
</body>
</html>
Steps Of The Program:
- The ‘background-image’ property is used to load the image file ‘programming.jpg’ from the project folder.
- The ‘background-size: cover;’ property ensures the image fully covers the webpage without stretching disproportionately.
- The Inline CSS is applied to the heading using the style attribute to change the text color to white.
- This color adjustment improves readability when text appears on a dark or detailed background image.
- Finally, the browser displays the webpage with the background image and clearly visible heading text.
Output:
Which Image File Formats Can Students Use In The HTML Image Tag?
Over the years, I have seen many students use the wrong image types, which affects website speed, quality, and compatibility. As a student, you should understand that each image format is designed for a specific purpose.
So, selecting the right one improves both performance and user experience. Here are the most commonly supported image formats you can confidently use in HTML:
- JPEG is best for photographs and realistic images because it keeps file sizes small while maintaining good visual quality.
- PNG is ideal when you need high-quality graphics, sharp edges, or transparent backgrounds, such as logos and icons.
- GIF is mainly used for simple animations and short moving graphics, though it supports limited colors compared to modern formats.
- WebP is a modern format that provides excellent compression with high quality, helping webpages load faster without noticeable image loss.
- SVG works best for logos, icons, and illustrations because it uses vector graphics that stay sharp at any size without losing quality.
- AVIF is a newer format that offers very high compression and quality, making it suitable for performance-focused modern websites.
- BMP is supported by browsers but generally avoided in web design because it creates very large file sizes and slows down page loading.
As a mentor, my practical advice is simple: use JPEG for photos, PNG for transparency, SVG for scalable graphics, and WebP or AVIF for modern performance optimization.
Common Mistakes Students Make While Using Images In HTML:
From my mentoring experience, image-related mistakes are extremely common because learners focus only on displaying the picture and ignore structure, accessibility, and file management.
Once students understand that images are part of both content presentation and user experience, they become much more careful and confident while writing code.
I frequently notice a mistake where students add images without specifying the correct file path or required attributes. This usually happens when learners assume the browser will “find” the image automatically.
A confusing example created with this misunderstanding can look like this.
<!-- Incorrect image usage -->
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="http://logo"><noscript><img decoding="async" src="logo"></noscript>
<p>Welcome to our website</p>
This code often fails to display the image because the file name is incomplete and the browser does not know the image format. In addition, important attributes that improve accessibility and layout control are missing.
When I guide students to fix this mistake, I explain that an image tag must always include the correct file path, alternative text for accessibility, and proper size control. A corrected and professional version would look like this.
<!-- Correct image usage -->
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20100'%3E%3C/svg%3E" alt="Company Logo" width="200" height="100" data-lazy-src="http://images/logo.png"><noscript><img loading="lazy" decoding="async" src="images/logo.png" alt="Company Logo" width="200" height="100"></noscript>
<p>Welcome to our website</p>
In this corrected version, the file path clearly shows the image location, the alt attribute improves accessibility and helps if the image fails to load, and the dimensions help maintain proper layout structure.
Along with this, there are several other common mistakes that I regularly see, as follows.
- Students often forget to add alternative text, which makes webpages less accessible for visually impaired users.
- Many learners use very large image files, which slows down webpage loading speed and affects performance.
- Some students stretch images by setting incorrect width and height, causing distortion.
- I have seen learners place images randomly without using proper folders, making project management messy.
- Students sometimes use images for decorative purposes instead of using CSS backgrounds, which affects content structure.
- Many beginners forget that images are inline elements and may not align properly without CSS styling.
If students avoid these common mistakes, their webpages immediately look more professional, load faster, and provide a much better user experience.
Conclusion:
Using the “Image Tag in HTML” is an essential skill for anyone learning web development.
Images play a major role in improving the visual appeal, clarity, and engagement level of a webpage. A well-placed image can make content easier to understand and more attractive to users.
The key to mastering HTML is regular practice and experimentation. The more you work with elements like images, the more confident and creative you become in designing modern and user-friendly websites.
Key Takeaways:
- To add images in HTML, we can make use of the image tag and its various attributes.
- We can add images by specifying the path of the images in the form of URLs, and also give each image a name using the alt attribute.
- The image sizes can be adjusted using height and width attributes and also by using the style attribute.
- We can also set an image as the background of our web page by using the background-image attribute.
Frequently Asked Questions:
1) What is the purpose of the alt attribute in the HTML image tag?
The alt attribute provides alternative text when an image cannot be displayed due to loading errors. It improves accessibility by helping screen readers describe images to visually impaired users. Search engines also use alt text to better understand image content for SEO purposes.
2) Why is it important to specify image dimensions in HTML?
Defining image width and height helps browsers reserve the correct layout space before the image loads. This prevents layout shifts that can disturb the user’s reading experience. It also improves page performance and provides better visual stability.
3) What happens if the image file path is incorrect in the image tag?
If the file path is wrong, the browser fails to locate and display the image on the webpage. Instead, users may see a broken image icon along with the alternative text. This negatively affects user experience and makes the website look unprofessional.
