Image Attributes

Images play an important role in digital media. From clarifying a topic or explaining a process to supporting an idea or simply providing visual interest on the page, images are a critical asset to blog posts, articles, webpages, and more. Keep reading to understand what the most common attributes of an image are so you can make the best decisions when adding images online.

Attributes of an Image

ALT Text – Any time you link to an image, it is important to add “ALT text” or “alternative text.” ALT text is helpful for users with assistive devices, making it ADA (Americans with Disabilities Act) friendly. It’s also beneficial for search engine spiders, like Googlebot, and users if your image fails to display on their screen.
Height – The height of an image, how tall it is meant to be, should be specified as an image attribute to help browsers make space for the image upon load. Specifying image dimensions (height and width) can prevent layout shifts, which are often frustrating for users.
Loading – This one is used less frequently but can be used to specify if the browser should load the image right away (eager) or if it should be deferred (lazy) until other elements have loaded on the page. Where your image is placed on the page or what type of information it contains will likely determine if you need it to load immediately or if it can be shown once other page elements are loaded.
SRC – This tells the browser what the URL of the image is. You will typically see this specified as, <img src=”image URL”>.
Width – The width of an image, how wide it is meant to be, should be specified any time an image is used so the browser retains space for the image while loading to prevent unexpected layout shifts. Layout shifts are irritating to users and can also affect your SEO because unexpected movement on a page is what the Core Web Vital, Cumulative Layout Shift (CLS) looks for. Core Web Vitals are a known SEO ranking factor, so it is important that your site passes each of the three assessments that make up the report. Curious how your site stacks up? Test it here.

It is important to note that this is not an exhaustive list of image attributes; there are many more that could be used along with CSS to style an image (such as giving it a border, adding padding or margins, etc.)

Image Attributes Example

Below is an example of how the attributes above could be used together to link to an image on your site:

<img src="sleeping-kitten.jpg" alt="Cute kitten sleeping" width="450" height="300" loading="eager">

Now that you understand the parts of an image, you are ready to add images to your website! Be sure to optimize them first, though; resizing and compressing images prior to uploading can go a long way for page load times and user experience.

When working with ROI Revolution’s SEO team, you’ll have a group of SEO experts to guide you through making the best decisions when adding images online. To explore the difference that comes with having a guide you can trust, book a meeting with our team now!

Sources

W3scools.com

Attributes of an Image

Image Attributes Example

Sources

ICYMI: Recent SEO blog posts