If you're learning web development and wondering how to insert an image in HTML, you've come to the right place. In this article, we will explain in a clear and simple way the process, best practices and common mistakes to avoid. In addition, we will see the tag to insert an image in HTML and practical examples for you to apply it in your code.
What is the HTML Insert Image Tag?
To insert an image in HTML, we use the <img> tag. This tag is fundamental in web development, since it allows us to display images on a page without the need for a closing.
Basic syntax:
<img src="image-path.jpg" alt="Image description">
Key Attributes of the <img> Tag:
src: Defines the location of the image file.
alt: Provides an alternative description for accessibility and SEO.
width and height: Allows you to adjust the image size.
Steps to Insert an Image in HTML
1. Save the Image in the Project Folder
Project/
│-- index.html
│-- images/
│ │-- example.jpg
2. Adding the <img> Tag in the HTML Code
Inside the index.html file, add the following line of code:
<img src="images/example.jpg" alt="Example of HTML image">
3. Verify the Image Path
If the image is not displayed, check that the path in the src attribute is correct. You can try an inline image using a direct URL:
<img src="https://example.com/image.jpg" alt="image from url">
4. Adjust Size and Styles with CSS
To improve the presentation of the image, we can add CSS styles:
<style>
img {
width: 300px;
height: auto;
border-radius: 10px;
}
</style>
<img src="images/example.jpg" alt="Example of a stylized image">
Recommended Image Formats for Web
When inserting images into HTML, it is important to choose the right format:
JPEG: Lossy compression, ideal for photos.
PNG: Supports transparency, excellent quality
SVG: Scalable graphics with no loss of quality
WEBP: High compression and optimal quality
Common Mistakes When Inserting an Image in HTML
Incorrect Path: Make sure the image path is accurate.
Unsupported Format: Verify that the browser supports the image format.
Missing alt Attribute: Always add a description for accessibility and SEO.
How to Insert an Image as Background in HTML?
If instead of a standalone image you want to use one as background, use CSS:
body {
background-image: url('images/background.jpg');
background-size: cover;
background-position: center;
}
Now that you know the steps to insert an image in HTML, you can apply this knowledge in your web projects. Remember to use correct paths, optimized formatting and good practices to improve the performance of your page.
📌 Need more guides on web development? Explore our blog and keep learning.