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.
Img src HTML
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 <img> tag but does not have a closing tag. However, as you can see in the code above, the img tag is not actually empty.
Let’s break the img syntax down into its two major components: the source attribute and the alt attribute.
<img src="">
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.
<img alt="">
The alt attribute provides descriptive information about the image. Although not required like the source attribute, the alt attribute is strongly recommended because of its importance to both browsers and readers.
Browsers that cannot display inline images will ignore the <img> element unless it contains the alt attribute. This attribute is also important to readers with visual impairments who use screen readers, as well as all readers if the image doesn’t load. In either case, readers will still be able to glean what the image was meant to convey thanks to the alt attribute.
In addition to improving the accessibility and the overall user experience on your site, adding image alt text can improve your site’s SEO.
You can learn more about the importance of image alt text by reading Image Alt Text: What It Is, How to Write It, and Why It Matters to SEO.
Change Img src
If you’d like to replace an image on your website, then you can simply change the image file path or URL in its source attribute. You can change this attribute at any time.
It’s important to note that the new image inherits the height and width attributes of the original image. So if you’d like the new image to be a different size, you’ll need to specify new height and width properties.
Img src Not Working
When using the image element and source attribute, you might run into some issues. Let’s say you add an image into your HTML file and see the broken link icon and alt text (shown below) instead of 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.
Topics: HTML
