Visuals improve a user’s experience online. Nobody wants a “wall of text” with no pictures or formatting, but that does not mean any random set of images will improve a webpage. Images need to load quickly, have a high-quality resolution, and be relevant to the site. For these reasons, image optimization is immensely important for both SEO and user experience.
Images help capture attention. Hundreds of millions of searches each day start with Google Images, and many users will discover a page for the first time through its visual content. However, if too many images slow down a page, the strategy can backfire. A recent study found that 40% of people will leave a website that takes longer than 3 seconds to load.
Optimizing images ensures that page speeds are fast and search engine rankings are high. Better visuals for search engine optimization (SEO) starts with the correct use of HTML image tags.
The HTML Image Tag
So, what is an HTML image tag? First, it’s important to know that images are not directly included in a website’s code. HTML image tags are a type of HTML code that tells the website’s server where to find images, how to load them, and what to do with them after they’ve been loaded. In other words, images are separate files that are inserted into the webpage when viewed within an internet browser.
Image tags hold the space for the image that will be used on the webpage. They look like this:
<img>
Unlike other HTML tags, the HTML image tag is a self-closing tag—also known as an “empty tag”—meaning you never need to add </img>. The image tag not only tells the web browser where to find the image, but the tag also impacts the style of the image, including its size and placement. These factors contribute to the page’s load time and the user experience.
Attributes of HTML Image Tags
Source: Mozilla
HTML image tags require at least one defined attribute. Attributes are added to the tags to modify the images. Many of the attributes discussed below are optional, but they can affect the overall appearance of the page.
Src
The src attribute refers to the source of the image. It is a required attribute for image tags because it defines the image that will be displayed on a webpage. The src attribute can be a URL or a file name of an image stored on the server.
<img src=“image.jpg”>
Note that the src attribute in the example above is surrounded by quotation marks, which are required for image tags.
Alt
<img src=“imagename.jpg” alt=”this is the description of the image”>
The alt attribute refers to alternate text (alt text) for the image. This attribute is a textual description of the image used in the HTML image tag. While they aren’t mandatory attributes, alt attributes are highly beneficial.
Alt attributes make web pages accessible for visually impaired internet users. When an alt attribute is included in an image tag, accessibility tools such as screen readers can tell the user about the image displayed. This enables a better understanding of the contents of images. Alt attributes are also useful in instances in which the image on the webpage cannot be loaded or displayed due to a network error.
Importantly, alt text also improves SEO. Search engines use alt text to understand the content of images. When a user queries a keyword or phrase, search engines identify the relevance of the image and page for that query. If an image features the keyword or phrase, it will appear in the search results as well. 72% of search engine users search for images before purchasing from a company. It is important to improve alt text in HTML image tags because they provide the opportunity to increase SEO and reach more consumers.
Width and Height
<img src=“imagename.jpg” alt=”this is the description of the image” width=”420″ length=”100″>
The width and height attributes—unsurprisingly—dictate the width and height of the image in HTML image tags. These attributes are expressed in either pixels or percentages. While they are not required, both width and height should be specified so the page loads correctly.
Take note, these attributes should not be used for enlarging or reducing the size of images. They should only express the actual size of the image to prevent issues with the image loading and page display speeds.
Align
If you work on older websites, you may see the align attribute in HTML image tags, although coders no longer recommend it. The better way to align an image is with CSS—not HTML—so it’s best to remove this attribute to avoid compatibility issues in the future.
Crossorigin
The crossOrigin attribute is used to import images from third-party sites that allow for cross-origin access. This attribute specifies whether or not to use credentials. The crossorigin attribute can have two possible values: anonymous and use-credentials.
The anonymous value means that the request was sent with credentials omitted. The use-credentials value means that the request was sent with credentials such as cookies, certificates, and an authorization request header.
This process is known as cross-origin resource sharing (CORS), and it may be necessary to add this attribute to HTML image tags to access a font, style sheet, or script located on another server. Leaving this out can result in a so-called “tainted” image that won’t load in JavaScript web apps.
Referrer Policy
The referrerpolicy attribute specifies the information (or referrer) used by the web server when fetching the image. This is essentially a security setting; the default is to send the image’s full URL only through a same-origin request and to not send a header to a lower protocol security level. For example, the image page address would not go from an HTTPS origin to an HTTP destination.
This attribute can become stricter by specifying no-referrer, which means the image’s page address will not be sent with any request.
Loading
The loading attribute is an interesting way to use HTML image tags to affect page load time. This attribute tells a web browser whether it should defer the loading of images or load them immediately. Two string values are lazy and eager.
The lazy value in the loading attribute defers the loading of the image until some conditions are met—for example, an image at the bottom of a long page will not load unless the user scrolls down. This value is one way to effectively optimize a webpage because it reduces loading time.
Eager is the default value for the loading attribute. It tells the webpage that it should load the image immediately. This value is useful for ensuring that users will stay on the page as visual elements are critical for optimizing blog posts. For this reason, eager is likely the best choice for most images.
Why Use HTML Image Tags?
Source: University of Dayton
Although HTML image tags are often overlooked when it comes to optimization, their correct usage is essential to capturing a user’s attention and ensuring they stay on a page. Marketing materials containing images get 94% more views than those without, and a similar principle should apply to web design. Images create recognition value, generate brand awareness, and function as a call to action. In addition, images entice users to read text on the page. The right mix of text and images is what gives web marketers the most success.
Optimize Your SEO
Optimization of all content, from text to HTML image tags, is necessary for supporting the user experience, driving engagement, and increasing a website’s visibility.
BESTSEO presents the top-ranked SEO service companies who provide both technical coding fixes and create valuable content through multifaceted strategies. Find an expert team to conduct a full review of your site’s technical and visual aspects. When it comes to SEO, attention to detail yields higher traffic and increased conversions.