What is HTML image tag?
When the web page loads, the image should pop up quickly. Humans are visual creatures, and we like to browse the web with color images. They attracted our attention and attention.
These images are prompted by image tags, which are a type of code that tells the web server where to find the image, how to load the image, and how to process the image after it is loaded.
The image tag is a description of how to display the image, because the image is not actually embedded in the page. An image is a file extracted and displayed on the page based on the code or image tag used. This code can change the attributes or functions of the image when it is loaded.
You can send some important SEO signals by optimizing the images of your website. We will have an in-depth discussion here with our guide on image SEO.
What is HTML image tag?
Let’s take a closer look at the image tags:
<img src="https://static.semrush.com/blog/uploads/media/43/b0/43b0b9a04c8a433a0c52360c9cc9aaf2/seo-guide-to-yoast-for-wordpress.svg" alt="yoast seo" height="288" width="388"/>
<img src="https://static.semrush.com/blog/uploads/media/20/b9/20b9fc4db7fe16be59032ff15883e98d/google-advertising.svg" alt="google advertising" height="288" width="388"/>
In the above code, you can see 2 attributes: SRC and ALT.
- SRC indicates the path of the image to be displayed.
- ALT indicates the alternative text displayed if the image itself cannot be displayed.
After the ALT attribute, you can see the height and width attributes. You can manually set the size of the image, which is very convenient if you have strict space requirements for the web page.
When setting the image size, make sure to avoid distorting the image. This can lead to a bad user experience.
The source (SRC) attribute creates the path of the image file. If the link is broken, the file has moved or there is a typo in the code, you will see a “broken image” icon on the page.
The ALT attribute specifies the alternate text of the image (if it can’t be loaded or not). Alternate text Useful for people with poor eyesight. The text-to-speech tool can tell the viewer what image is being displayed.
This is also good for SEO results. Is there anyone in Google Image Search?
Width and height
These attributes determine the height and width of the image. If you use these attributes with the image tag, the best practice is to set the height and width at the same time, so the page knows how much space is needed on the page to display the image.
If you do not specify both at the same time, you may encounter problems when the page tries to load the image.
The width and height attributes are as follows:
<img src="img_logo.jpg" alt="Semrush logo 1" width="500" height="600">
This code uses the file name img_logo.jpg to load the Semrush logo mage. The image will be 500 pixels wide and 600 pixels high.
You can also use some other attributes in the image tag. Another attribute that can be used for formatting is the “Align” attribute. This attribute places the image in the desired position on the page.
Nowadays, with the use of creators and editors of modern web pages, this tag is almost redundant. You can click and drag and insert the image where you want. However, some coders still use the align tag to align their images to the desired position.
Examples of using this attribute include “left” and “right”, which place the image on the left or right side of the page.
“Text Top” aligns the image with the highest text example; “abs bottom” (absolute bottom) aligns the image with the bottom of the current line where it is placed.
How to add HTML image tags
If you want to manually add an image on the page, we will show you how to do it.
Add standard image
<img src="semrush.jpg" alt="Semrush logo" width="50" height="50" style="vertical-align:bottom">
This code will find and insert an image of the Semrush logo with a width and height of 50 x 50 pixels. The image will be aligned with the bottom of the screen.
<img src="semrush.jpg" alt="Semrush logo" width="50" height="50" style="float:right">
The code also inserts a 50 x 50 pixel Semrush logo image. The style is “floating to the right”, which means the image will be on the right side of the page. Nearby elements will flow around the image, just like word-wrapping in a word processing program.
Add image border
<img src="semrush.jpg" alt="Semrush logo" width="50" height="50" style="border:10px solid green">
The code above will add a 50 x 50 pixel square image of the Semrush logo and add a 10 pixel thick green border.
This can help highlight important images on the page and draw where you want users to see it.
Add left and right margins to the image
<img src="semrush.jpg" alt="Semrush logo" width="50" height="50" style="vertical-align:middle;margin:0px 50px">
This code loads the Semrush logo, aligns it vertically to the middle of the page, and adds 50-pixel-wide margins to the left and right of the image. Now, no text will appear within 50 pixels on both sides of the image.
Add top and bottom margins to the image
Similar to the above, the Semrush logo will load again and align to the middle of the page, but will now have a margin of 50 pixels above and below the image. There are no other elements within 50 pixels of the top or bottom of this image.
Visual elements increase the user experience of the page. If the page looks attractive, people will stay longer, and Google will notice this.
The image tag can anchor the image so that it is displayed relative to other elements on the web page. You can use the image tag to configure how the image is displayed and optimize it for search engine robots and users.
The markup you use will affect your page load speed, which will affect the user experience of the site.
All current browsers support these image tag codes, so it doesn’t matter which browser you or your visitors use. Image tags can be converted to all browsers for a consistent experience.
You can use image tags when the image is part of the content and not part of the page design itself.
For example, if your page template contains logo images or similar images, you don’t need to use image tags in your code. Templates with images need to be consistent throughout your website.
Your website will load a template containing an image, and then add content to the page.
The image tag specifies how to use the image and where to display the image in the content.
On-site audit tool There are more than 130 website checking functions that can be executed on your website, including some image tags and any related links. The site review tool can check whether the link is still correct or the link is broken.
Fixing any image errors, repairing broken image links and improving the user experience of the website is easier than ever.
You can use the “site audit” tool wherever the project is relevant. If you do not currently set up a project, you need to configure a project before using the “Site Audit” tool.
After the tool is opened, the system will prompt you to configure the crawl range of the tool:
After the review is complete, the tool will return a list of issues to be reviewed, including all issues related to the image:
The 3 main questions that may appear about the image are:
- The picture is no longer located: You need to find the picture or its code and change its source URL.
- The image has been deleted: replace the image with a new image and update the link.
- No longer need images: remove images and code from the page.
Image tags are part of stylizing and optimizing web pages, user experience and SEO.
You can place or position the image by adding other attributes (such as “width” or “alignment”) to the image tag.
When making changes, always preview your website to ensure that any attributes you add to the image code will not break the image or your website.
Use site review tools to ensure that your image code is accurate and that you can obtain and view images.