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

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

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:

Then, you can insert the syntax below: 

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:

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:
 

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:

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.