How to add an image on HTML

How to add an image on HTML

by

Contents

HTML – Have you ever heard that individuals only retain 20% of the information they read, but retain 80% of the information they see? The percentages may be disputed, but the fundamental premise is undisputed: Visual learning and processing are simple for most people. Because of this, photographs are a common feature of websites, and include images on your own website is crucial. Your material will be more informative, interesting, and memorable with the aid of images. They can aid in increasing both your organic search traffic and the visitor experience.

Simply select a picture from your file management by clicking the image icon in your toolbar if you use a website creation platform like CMS Hub or WordPress, and then insert it. You may still quickly upload photographs to your website even if you don’t use a builder. All you need to know is a little HTML. Let’s go over the procedure in detail below.

How to use HTML to insert an image

Each user can complete this phase in a different way, so don’t be shocked if your path is different from others’.

  • Put your photo online. An image hosting service, an FTP service, or a blog hosting service can all be used for this. Pick the option that best suits your needs.
Put your photo online. An image hosting service, an FTP service, or a blog hosting service can all be used for this
Put your photo online. An image hosting service, an FTP service, or a blog hosting service can all be used for this
  • Write your HTML file. It goes without saying that you should double-check that the HTML document is the one for the location where you wish to insert the image.
  • Your image URL should be copied and pasted into an IMG tag along with an SRC. Before inserting the image tag, decide where in the HTML you want to position your image. Next, add the URL for your uploaded image, followed by a src, within your img parameters. This step should result in the following: <img src=”(your image URL here)”>
  • Finishing touches and alt attribute are required. This makes it easier to understand what the image shows. If the image is of an umbrella on a beach, for instance, include information on beach umbrellas in the alt tag. Be as thorough in your description as though you were explaining it to someone who was unable to see it.
If the image is of an umbrella on a beach, for instance, include information on beach umbrellas in the alt tag
If the image is of an umbrella on a beach, for instance, include information on beach umbrellas in the alt tag

How to add a picture to an HTML directory

The procedure is rather simple if you have a website and are attempting to insert an image into a directory. Here’s how to do it in just three simple steps:

  • Take note of the image’s URL and copy it.
  • Open your index.html file and add the image to the img code after that. Example: <img src=”(your image URL here)”>
  • The HTML file is saved. When you open it again, the webpage with your newest image will be there.
The HTML file is saved. When you open it again, the webpage with your newest image will be there
The HTML file is saved. When you open it again, the webpage with your newest image will be there

How to HTML link a picture

There are a few extra steps involved in linking an image with HTML, especially if you wish to modify specific properties and information. Here is a comprehensive how-to that includes everything you need. The link tag, which is a>, will be where you begin. You should insert the URL in the href. Next, you’ll require the img> image tag. As previously said, you will add the picture file in the src.

You’ll need to be aware of the following in order to update the attributes. The title attribute’s first value is title=”(your title)”. Set your alt attribute, which thoroughly describes the image, next. Set your image’s height and width before proceeding. Use the code <img src=”(your title)” alt=”Image” height=”(your image height)” width=”(your image width)”>.

Although HTML is a rather simple language, it’s okay if you don’t want to master it thoroughly. Just be sure you understand the fundamentals so you can function when producing digital creations.

How to Add a Picture to HTML

Use the image tag in HTML and add the source and alt attributes to insert an image. You will include photos in the body part of your HTML file, just like any other HTML element.

The syntax looks like this: <img src=”URL” alt=”descriptive text”>

The HTML image element is an “empty element,” meaning it does not have a closing tag. Unlike elements like paragraph that consist of an opening and a closing tag with content in between, an image specifies its content with attributes in the opening tag.

Compare the following lines of code to see the difference between a paragraph and an image:

<p>This is a paragraph.</p>

<img src=“https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg” alt=”an artist‘s rendition of a black hole in space”>

Take note of the src and alt elements in the image element above. Next, let’s talk about these two crucial qualities. But first, this video takes a closer look at the procedures we just described.

The img src Attribute

The URL or file path for the picture must always be contained in the src (source) attribute of an image element. If not, the browser will be unable to render anything. The supported image file types will vary depending on the browser used to load the page, however all browsers support.svg and common formats like.jpeg,.png, and.gif.

Since the image is being retrieved from another website, the source in the code example above is a complete hyperlink. You don’t need to include the website name or protocol when referring to an image that is stored on your server by its image file path. Your image element might appear more like this, for instance, if the picture is stored in the same location as your HTML file:

<p>This is a paragraph.</p>
<img src=”/csz/news/800/2017/theoreticala.jpg” alt=”an artist’s rendition of a black hole in space”>

The img alt Attribute

Although a browser can display an image without the alt tag, it is recommended that you do so. That’s as a result of the image alt text in this attribute.

For a number of reasons, image alt text is significant. First, if an image fails to load on a user’s screen, it will substitute for the image. Second, it aids in the description of visuals by screen-reading software for readers with visual impairments who might otherwise have problems understanding the image.

Third, image alt text enables improved website crawling and ranking by search engines. Another option for people to reach your website is through Google Images, which is a huge search engine unto itself. You can increase your site’s traffic and rank for your desired keywords by using descriptive alt text in your picture files. In 2019, HubSpot accomplished just that, resulting in a 25% increase in organic traffic from site and picture searches year over year.

The img style Attribute

The width and height of the image may also be included in a style attribute within an img> tag. The web page won’t flicker when the image loads if the width and height are specified. Here is how the code may seem if these more properties were added: <img src=”https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg” alt=”an artist’s rendition of a black hole in space” style=”width:400px;height:200px;”>

It's vital to remember that, in addition to inline CSS, you can also set an image's size using internal or external CSS. See our article on how to apply CSS to HTML to learn how these three forms of CSS differ from one another.
It’s vital to remember that, in addition to inline CSS, you can also set an image’s size using internal or external CSS. See our article on how to apply CSS to HTML to learn how these three forms of CSS differ from one another.

The img attributes for width and height

An image’s width and height can alternatively be defined in pixels using separate width and height attributes, as in the following example: <img src=”https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg” alt=”an artist’s rendition of a black hole in space” width=”400″ height=”200″>

The outcome will be the same as that shown in the image shown above where the style attribute was applied. The primary distinction between these two approaches is the use of distinct width and style characteristics, which will inform the browser how much room to reserve for the image and maybe lead to a smoother loading process (though this will depend on your page layout, ultimately).

HTML Background Image Insertion Instructions

Instead of just adding the image to the page, you must utilize the CSS background-image property to make an image the backdrop of a web page or an HTML element. In earlier HTML versions, the background-image attribute was replaced with this CSS property. Compared to the HTML property, it is far more predictable and adaptable while still being simple to use.

Use the following syntax to set the value of background-image: url(‘ ‘); You should place the picture URL or file location in between the single quote marks.

How to Include an Image as a Background on a Page

Let’s start by assuming that you wish to make an image the full page’s background. In this scenario, the body element would receive CSS. You can specify the background-image property in the head section of your HTML page or in a separate stylesheet by using a CSS selector. We’ll use the same image as before for this demonstration, but we’ll modify the text’s color to white so that we can see it.

Here’s the CSS:


body {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    color: #FFFFFF;
}

Here’s the HTML:

<h2>Background Image</h2>
<p>The background image is specified in the body element.</p>

Here’s the result:

Looks fantastic! If the image is smaller than the browser, what happens? In that case, it will automatically tile itself as displayed below.
Looks fantastic! If the image is smaller than the browser, what happens? In that case, it will automatically tile itself as displayed below
You can utilize the background-repeat property and set it to no-repeat to stop this from occuring.
You can utilize the background-repeat property and set it to no-repeat to stop this from occuring

Here’s the CSS:


body {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    color: #FFFFFF;
}

The HTML remains unchanged. Now, this is how it would appear on the front end:

The HTML remains unchanged
The HTML remains unchanged

Now that the repeated issue has been resolved, there is a significant amount of extra whitespace to the right and below the image. You can utilize the background-size property and set it to cover to make sure the background picture covers the entire body element, or, to put it another way, takes up the full browser window. The background-attachment attribute can then be used to set the image’s dimensions so that they do not warp. The picture will maintain its original proportions in this way.

Here’s the CSS:


body {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: #FFFFFF;
}

The HTML remains unchanged. Now, this is how it would appear on the front end:

The HTML remains unchanged
The HTML remains unchanged

How to Put an Image in the Background of an HTML Element

Instead of using the full web page as the backdrop, you can set an image as the background of an HTML element. You could, for instance, put HTML components within a div and then use the CSS properties we discussed earlier to target the div. One difference is that we’re going to set the background-size attribute to 100 percent 100 percent rather than covering it. This indicates that the picture will not retain its original size and will instead stretch horizontally and vertically as necessary to fit the whole div element.

Here’s the CSS:


div {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    color: #FFFFFF;
}

Here’s the HTML:


<div>
    <h2>Background Image</h2>
    <p>In this example, the background image is specified for the div element.</p>
    <p>But you can specify the background image for any HTML element.</p>
    <p>Try it for a paragraph, heading, and more.</p>
</div>

<p>This paragraph is not contained in the div. Therefore it does not have an image background.</p>

Here’s the result:

Here’s the result
Here’s the result

How to Create an HTML Image Link

Links created from high-resolution images or icons are also effective. In both cases, the procedure is the same: Your “image” element should be included in a “a” (anchor) tag, like in:

<a href=“URL”>
<img src=“URL” alt=“descriptive text”/>
</a>

Final Words

Including photos on your website is crucial for both user experience and search engine optimization. Building a website from scratch or using a content management system is simple. You only need to be familiar with HTML and CSS.

>> Read more:

Leave a Comment