HTML <img> Tag
Beginner’s Guide on Using the <img> Tag in HTML
You are going to need to insert some images if you will create a website to enhance visual appeal. This is where <img> comes to play. A completely nice and easy way of placing images into your HTML. This tutorial will explain everything you need to know about <img>, starting from the very basics and delightful tips and tricks.
1. What the <img> Tag Is?
The <img> tag allows the images to be included on the webpage. It is a self-closing tag; that means it needs not to close with </img>. This is how simply it can be invoked:
<img src="image.jpg" alt="Description of the image">
src: This is the path of the image; indicates to the browser where to find it. You can alternatively specify it as the folder file (likeimage.jpginside your project), or even an image link available online.alt: It is a text description of the image. Its importance is significant in accessibility, enabling it to give a description when the image is not loading properly.
2. Some Key Attributes of the <img> Tag
Along with a few other attributes, the <img> tag has some useful attributes that assist you in controlling the behavior of the image. These include:
a. src – Find Image
This is the path for your image. It must not be empty; otherwise, there’ll be nothing for the browser to display!
Example
<img src="sunset.jpg" alt="A beautiful sunset over the ocean">
b. alt – Alternative Text
The alt attribute is like a backup plan. If the image doesn’t load, this text will show up instead. It’s also used by screen readers to describe the image to visually impaired users.
Example:
<img src="dog.jpg" alt="A golden retriever playing fetch in the park">
3. A Complete Example
Here’s how you might use the <img> tag in a real webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<img src="images/welcome.jpg"
alt="A colorful welcome banner"
width="600"
height="400"
title="Welcome Banner"
loading="lazy">
</body>
</html>
4. Tips for Using the <img> Tag Like a Pro
- Always Add
altText: It’s not just good practice—it’s essential for accessibility and SEO. - Optimize Your Images: Large image files can slow down your site. Use tools like TinyPNG to compress them.
- Specify Width and Height: This prevents your page layout from shifting as images load.
- Use Lazy Loading: For images below the fold,
loading="lazy"can speed up your page load time. - Make Images Responsive: Use
srcsetandsizesto serve the right image for the right device.
5. Common Mistakes to Avoid
- Forgetting the
altAttribute: This makes your site less accessible and can hurt your SEO. - Using Huge Images: Always resize and compress images before uploading them.
- Not Setting Dimensions: Without
widthandheight, your page might look janky while loading. - Using Inline Styles for Sizing: Stick to the
widthandheightattributes instead.
6. Bonus: The <picture> Tag for Advanced Scenarios
If you want to get fancy, you can use the <picture> tag to serve different images based on the user’s screen size or device. This is called art direction.
Example:
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<img src="large.jpg" alt="A responsive image example">
</picture>
7. Wrapping Up
The <img> tag is one of the easiest ways to add images to your website. By using its attributes wisely, you can make your site faster, more accessible, and more user-friendly. Whether you’re adding a single photo or a gallery of images, the <img> tag has got you covered.