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">. To improve crawl efficiency, ensure that the same image URL is used consistently across your website. When Google encounters identical images with different URLs, it treats them as separate resources, wasting valuable crawl budget. By standardizing image URLs, you help search engines recognize duplicates, allowing them to focus on indexing the content that truly matters to your site’s visibility.
- 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. Additionally, make sure you are uploading each image to the site and not “streaming images” (aka embedding images from a third-party location), which John Mueller has said will result in your images not being found through search engines.
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!
