Have you ever heard that people retrieve only 20% of what they read, just eighty% of what they see? While the exact percentages are debated, the bones idea isn't: Information technology'south like shooting fish in a barrel for people to learn and process data visually.

That'due south why near websites use images, and why information technology's important to include images on your own site. Images aid make your content more informative, engaging, and memorable. In addition to improving the company feel, they tin can also help boost your organic search traffic.

If you use a website edifice platform similarCMS HuborWordPress, merely click the epitome icon in your toolbar, select an paradigm from your file manager, and insert it. If you don't utilize a architect, you can all the same easily add images to your website. Y'all just need to know someHTML. Let's walk through the process below.

Download Now: Free HTML & CSS Hacks

How to Insert an Prototype in HTML

To insert an image in HTML, use the epitome tag and include a source and alt aspect. Like any other HTML element, yous'll add images to the body section of your HTML file.

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 deviation betwixt 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 pigsty in space">

Find the 2 attributes in the image element above, src and alt. Let's discuss both of these important attributes next.

The img src Attribute

An image chemical element must always have a src (source) attribute, which contains the prototype URL or file path. Otherwise, the browser volition not know what to return. Permitted paradigm file types will depend on the browser that loads the page, but all browsers allow you to place common formats like .jpeg, .png, and .gif, equally well as .svg.

In the code example higher up, the source is a full hyperlink — this is considering the epitome is being fetched from some other website. If you want to place an image stored on your server, yous can use the image file path without the website name or protocol. For example, if the epitome is located in a subfolder stored in the same identify as your HTML file, your image element can wait more like this:

                                          
<p>This is a paragraph.</p>
                      
<img src="/csz/news/800/2017/theoreticala.jpg" alt="an artist'southward rendition of a black pigsty in space">

... in this case,"csz" would be a folder located in the same directory as your HTML file.

The img alt Attribute

While a browser tin return an image without the alt attribute, it'south considered a best exercise to include this attribute. That's because this attribute contains epitome alt text.

Image alt text is important for a few reasons. First, it volition announced in place of an image if the image fails to load on a user's screen. Second, it helps screen-reading tools describe images to readers with visual impairments who might have trouble understanding the prototype without it.

Third, paradigm alt text allows search engines to better clamber and rank your website. Google Images — not Google Search, Google Image Search — is a major search engine on its own, and another way people can find your website. Providing images with descriptive alt text can aid you lot rank for your target keywords and bulldoze traffic to your site. In 2019, HubSpot did exactly that, leading to a 25% year-over-twelvemonth growth in organic traffic that came from web and prototype search.

The img style Attribute

You lot might besides encounter a style attribute inside an <img> tag containing the width and height of the image. Specifying the width and pinnacle can help prevent the spider web folio from flickering while the image loads. Hither'due south how the code might expect with these boosted attributes:

                                          
<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;elevation:200px;">

Image inserted below heading and paragraph in HTML file

It'south of import to annotation that you lot can besides specify the size of an image using internal or external CSS, over inline CSS. To learn the difference betwixt these iii types of CSS, see our guide on how to add together CSS to HTML.

The img width and height Attributes

The width and height of an image can also exist specified in pixels with separate width and height attributes, like so:

                                          
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt="an artist'due south rendition of a blackness pigsty in space" width="400" peak="200">

This will produce the same outcome equally the prototype to a higher place, where the mode aspect was used. The primary difference between these methods is that using divide width and style attributes will tell the browser how much infinite to save for the image, which may issue in smoother loading (though this will depend on your folio layout, ultimately).

How to Insert a Groundwork Epitome in HTML

If y'all'd like to fix an paradigm as the background of a spider web page or an HTML chemical element, rather than simply inserting the image onto the page, you'll demand to use the CSS groundwork-image property. This CSS property replaced the background-image attribute in previous versions of HTML. It'due south much more flexible and anticipated than the HTML attribute — and still easy to use.

To fix the value of background-paradigm, you lot have to utilize the following syntax: url(' ');

Between the unmarried quotation marks, yous'll put the image URL or file path.

How to Insert a Background Prototype on a Folio

To start, let'due south say you want to set an prototype equally the background of the entire page. In this instance, you would apply CSS to the body element. Using a CSS selector, you can define the groundwork-image property in the head department of your HTML file or in an external stylesheet. For this demo, we'll use the same image as above and change the text colour to white and so nosotros can meet information technology.

Here'southward 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>

Hither'due south the event:

Setting background image of the entire web page in HTML

Looks great! But what happens if the prototype is smaller than the browser? In that case, it will tile itself by default as shown beneath.

Setting background image of the body element in HTML means it will repeat by default

To prevent this from happening, y'all tin can utilise the background-repeat property and set up it to no-repeat.

Here'due south 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 stays the same. Here's how it would look on the front end-terminate now:

Setting background image of body element in HTML to not repeat

You've solved the repeating problem, but at present you take a lot of extra whitespace beneath and to the right of the image. To ensure the background image covers the entire body element — or, in other words, takes up the unabridged browser window — you can use the background-size property and set it to embrace. Then, to prevent the image from warping its dimensions, use the background-attachment property and gear up information technology to fixed. That way, the paradigm will keep its original proportions.

Here's the CSS:

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

The HTML stays the same.  Here'due south how it would expect on the front end-stop at present:

a background image in html expanding to take up the entire browser window

How to Insert a Groundwork Epitome on an HTML Element

Yous can too set an image as the background of an HTML chemical element rather than the entire spider web folio.

For example, y'all could place HTML elements inside a div, then target the div with the CSS properties we used to a higher place. 1 departure is that instead of setting the background-size property to encompass, nosotros're going to fix it to 100% 100%. That means the image volition stretch horizontally and vertically as needed to fit the entire div element, without retaining its original dimensions.

Here'south the CSS:

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

Here's the HTML:

                                          
<div>
    <h2>Groundwork Image</h2>
    <p>In this example, the background image is specified for the div element.</p>
    <p>Just you tin can specify the background image for whatsoever HTML element.</p>
    <p>Try it for a paragraph, heading, and more.</p>
</div>
<p>This paragraph is non contained in the div. Therefore it does not take an epitome groundwork.</p>

Hither'due south the upshot:

Setting background image of a div element in HTML

How to Make an Epitome Link in HTML

Images are too effective links — y'all can make a link from an icon or a high-res image. Either mode, the process is the same: Enclose your <img> element in an <a> (ballast) tag, similar so:

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

Here's an interactive example — click the the HubSpot logo to exist taken to the HubSpot homepage.

Run across the Pen Create an Image Link by Christina Perricone (@hubspot) on CodePen.

Making Your Website Visual

Adding images on your website is important to both your visitor experience and to search engines. It'southward easy whether you're building your website with a content management system or from scratch. You lot just need to know some HTML and CSS.

Editor'southward note: This post was originally published in September 2020 and has been updated for comprehensiveness.

New Call-to-action

css introduction

Originally published May 19, 2021 7:00:00 AM, updated Apr xx 2022