We use cookies

This site uses cookies from cmlabs to deliver and enhance the quality of its services and to analyze traffic..

Where might you have seen our work?
Small places create combinations, but crosses that occur cannot provide many combinations. So be careful in making justifications, especially SEO.

How to Add Photos in HTML: Easy and Effective Tips!

Last updated: May 02, 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.

A 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

Illustration of an employee selecting photos for a website.
Figure 1: Illustration of an employee selecting photos for a website. 

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.

Our valued partner
These strategic alliances allow us to offer our clients a wider range of SEO innovative solutions and exceptional service. Learn More
cmlabs

cmlabs

WDYT, you like my article?

Streamline your analysis with the SEO Tools installed directly in your browser. It's time to become a true SEO expert.

Free on all Chromium-based web browsers

Install it on your browser now? Explore Now cmlabs chrome extension pattern cmlabs chrome extension pattern

Streamline your analysis with the SEO Tools installed directly in your browser. It's time to become a true SEO expert.

Free on all Chromium-based web browsers

Install it on your browser now? Explore Now cmlabs chrome extension pattern cmlabs chrome extension pattern

Need help?

Tell us your SEO needs, our marketing team will help you find the best solution

Here is the officially recognized list of our team members. Please caution against scam activities and irresponsible individuals who falsely claim affiliation with PT cmlabs Indonesia Digital (cmlabs). Read more
Marketing Teams

Agita

Marketing

Ask Me
Marketing Teams

Irsa

Marketing

Ask Me
Marketing Teams

Yuliana

Business & Partnership

Ask Me
Marketing Teams

Thalia

Business Development Global

Ask Me
Marketing Teams

Robby

Business Development ID

Ask Me
Marketing Teams

Dwiyan

Partnership

Ask Me
Marketing Teams

Rochman

Product & Dev

Ask Me
Marketing Teams

Said

Career & Internship

Ask Me

We regret to inform you that the Mobile Friendly Test is currently unavailable due to system maintenance until further notice.

Check

Stay informed with our new tool, cmlabs Surge. Discover popular trends and events!

Check

Your Opinion Matters! Share your feedback in our Plagiarism Checker Survey?

Check

Discover your business trends effortlessly! The traffic projection calculator is the perfect tool to help you understand demand in your industry sector. Choose your sector and see its traffic projections now!

Check

There is no current notification..