We use cookies
This site uses cookies from cmlabs to deliver and enhance the quality of its services and to analyze traffic..
The primary source for SEO guidance with clear and expert-level insights.
How to Add Photos in HTML: Easy and Effective Tips!
Last updated: Jun 23, 2024
Disclaimer: Our team is constantly compiling and adding new terms that are known throughout the SEO community and Google terminology. You may be sent through SEO Terms in cmlabs.co from third parties or links. Such external links are not investigated, or checked for accuracy and reliability by us. We do not assume responsibility for the accuracy or reliability of any information offered by third-party websites.
The eventualities are an inevitability that drives every business player to prepare scenarios and adapt. Watch the Anti-Trivial podcast featuring Mas Rochman, Bro Jimmy, and Pak Agus; a combination of a business practitioner, investor, and company leader, discussing how to enhance the foresight of business leaders in welcoming 2025. Don’t miss this special year-end edition of cmlabs Class, Episode 24 with title "New vs Conventional Search Engine. Prepare for the Eventualities!"
See Event DetailsA website has several components, one of which is images. Images are one of the important aspects of a website since they can convey information related to the content and attract the attention of audiences who like visual components.
That's why many people are starting to figure out how to add images in HTML to add website aesthetics.
So, how to add images in HTML? This guide will lead you to learn about inserting images in HTML to make your website more attractive. Check out the article below.
How to Add Image in HTML
To make your website more attractive, inserting images in HTML can help you. Here is how to add images in HTML that you need to note.
1. Prepare the Image According to the Format
The first step to insert photos in HTML is to prepare the image according to the format first. This is because images with inappropriate formats will not be displayed on the website.
Regarding image formats, here are the recommended formats for HTML documents.
- SVG (.svg).
- APNG (.apng).
- PNG (.png).
- GIF (.gif).
- JPEG (.jpeg, .jpg, .pjpeg, .pjp, .jfif).
- WebP (.webp).
- ICO (.ico, .cur.)
2. Inserting the Image Source Attribute in the HTML Images Tag
The next way to insert photos in HTML is to include the image source attribute in the HTML images tag.
In this step, the tag used is <img>. This step is important because HTML cannot automatically display images. HTML must get images from a repository, so attributes are essential for images to appear on your website.
The attribute in question is Src, containing the image file name link. You can insert the tag below early to use Src:
<img src="imagename.png">
Then, you can insert the syntax below:
<!DOCTYPE html>
<html>
<head>
<title>How to Add Images in HTML</title>
</head>
<body>
<p> sample picture </p>
<img src="imagename.png">
</body>
</html>
3. Inserting Alt Text in HTML Images Tags
Including alt text in HTML image tags is the next way to add photos in HTML. Alt Text provides alternative information to the image so that if the image cannot be displayed, text appears related to the image.
Also, alt text can contribute to website ranking as search engines can understand the context of a given image and index the website page. The alt text attributes that you can enter are as follows:
<!DOCTYPE html>
<html>
<head>
<title>How to Add Images in HTML</title>
</head>
<body>
<p> sample picture </p>
<img src="imagename.png" alt="a_image">
</body>
</html>
4. Inserting Image Caption
After entering the alt text, you can add an image caption that can be seen when the cursor is hovered over the image. You can insert an image caption via the following syntax:
<!DOCTYPE html>
<html>
<head>
<title>How to Add Images in HTML</title>
</head>
<body>
<p> sample picture </p>
<img src="imagename.png" alt="a_image" title="This is an example
image">
</body>
</html>
5. Setting Image Dimensions
In addition to image captions, you need to set the image dimensions to learn how to add photos in HTML.
To set the dimensions of the image, you can include the width attribute to set the width of the image and height for the height of the image in the <img> tag.
In setting the image dimensions, be sure to check the image ratio to match the format. An example of using the width and height attributes is as follows:
<img src="imagename.png" width="300" height="150" alt="a_image"/>
How to Combine Images with Links
Besides knowing how to insert photos in HTML, understanding how to add links to images will benefit your website.
This is a unique feature where you can include a link on the image so that when visitors click on the image, they will be directed to another web page or a specific link. The way to add a link to an image is as follows:
1. Adding the <a> Tag
The first thing to do is to add an <a> tag in order to use images as links. The <a> tag is a hyperlink tag, where you need to insert a <img> tag inside the <a> tag.
2. Installing the Destination URL
After that, you can specify the destination URL, just like any other page on the website. The destination URL is commonly known as the href of the <a> tag.
3. Inserting the <img> Tag
The next step is to add the <img> tag along with other attributes, such as Src, Alt, Height, and Width.
Tips for Adding Images in HTML
Now that you know how to add images in HTML, let's see what strategies you can use to make your images appear appropriately and effectively. Here are the tips on how to add images in HTML:
- Make sure the photo is following the image format for the web.
- Ensure that the photo is sized appropriately as the size of the image has an impact
- on how long the website can load the photo.
- Insert alt text on the image.
- Use appropriate photo dimensions.
- Use CSS and HTML text for easy reading by search engines.
- Create images responsively so that they display well on all device screen sizes.
- Use copyrighted images.
- Test the image display in different browsers to see how it looks.
At last, that is all for the discussion about adding images in HTML which you can apply to your website. As explained earlier, adding images in HTML can make your website more attractive.
Also, adding the right image components can improve your website's ranking on search engines.
When it comes to improving your ranking in search engines, you can't just achieve this by putting photos on your website.
You can use Search Engine Optimization (SEO) strategies by creating SEO-friendly content inserted with relevant keywords.
To do so, you can rely on SEO Services by cmlabs. cmlabs has a reliable team with various expertise that can improve website rankings with a comprehensive strategy.
Discuss your business needs now with our marketing team and get ready to compete in search engines.
cmlabs
WDYT, you like my article?
