Images can not only make your digital content more engaging and memorable — they can also make it more shareable. In an analysis of over one million articles, BuzzSumo found that articles with an image once every 75-100 words received double the social media shares as articles with fewer images.
That’s why it’s important to understand how the image element and source attribute work in HTML. It can come in handy when you’re building a site from scratch, customizing a pre-designed template, or tinkering around in the source code of a web page in your CMS.
Let’s take a closer look at this pair below.
While the HTML image element is used to embed an image in an HTML doc, it doesn’t technically insert the image into the web page. In fact, the image element doesn’t technically do anything on its own. It really just creates a space for the reference to an image.
That reference is found in the source attribute. The source attribute contains the path to the image file or its URL. That explains why images are technically linked to — not embedded — in web pages.
Take a look at the example below.
See the Pen Image elements with and without src attribute by Christina Perricone [@hubspot] on CodePen.
In this example, you can see in the HTML that the first image element has a source attribute that contains a link to Pixabay. The second image element has no source attribute.
The width and height properties are specified in CSS. This is considered a best practice because, if the width and height are not specified, the page might flicker while the image loads.
In the result tab, the first image appears and is 300px by 200px. The second image, however, renders as an empty box with a 300px by 200px outline. That’s because the browser didn’t know what image to render without the source attribute.
Let’s take a closer look at the syntax of the image element and source attribute below.
HTML Img Syntax
The syntax of the image element is:
The img element is known as an “empty element” because it starts with an
The source attribute is required since it contains the path to the image file or its URL. This will be placed between the apostrophes. Without the source attribute defined, the browser won’t be able to find and render the image.
Remember that images are not actually embedded into web pages. That means, when a web page loads, the browser has to retrieve the image from a web server and display it on the page. The broken link icon means that the browser could not find the image.
If you’ve just added the image, then check that you included the correct image URL in the source attribute. Any misspelling or missing letters or punctuation could result in the broken link icon. In the example below, I left off the closing apostrophe of the src attribute, which results in the broken link icon on the front end.
See the Pen Img src by Christina Perricone [@hubspot] on CodePen.
If you previously added the image to your site and recently noticed it’s displaying the broken link icon, then that means the URL specified in the source attribute is no longer correct. Maybe the image has been removed from the web page you cited, or was moved into a different folder on your site so the file path is no longer correct. You'll have to track down the new image URL, or replace it, to resolve the issue.
The Required Attribute of the HTML Img Element
The img src attribute is a fundamental concept of coding. Every image element requires a valid source attribute so that the browser can locate and display the correct image. Now that you understand this concept, you’re already on the path to learning HTML and CSS.