Hello Sunil
Image-Optimization-Web-Performance

Image Optimization for Best Web Performance in 2022

While no ideal number of words exists for alt attribute, aim for 10 to 15 to convey something about the image.

Here are some simple rules for alt attributes:

  • Describe your images in plain language.
  • If you sell products that have model numbers or serial numbers, use them in your alt attributes.
  • Don’t stuff your alt attributes full of keywords (e.g. alt=”ford mustang muscle car buy now cheap best price on sale”).
  • Don’t use alt attributes for decorative images. Search engines may penalize you for over optimization.

❓ Decorative Images?

You don’t need to add an alternative text on decorative images. You can let them blank of add a null alt tag: <img alt=””/>.

How to add alt text to an image in WordPress

If you are using WordPress, you will be able to input an image’s alt text once you have uploaded it.

Image Optimization for Best Web Performance - add alt text in WordPress - img - 1

If you have a lot of empty alternative texts, it can take hours to properly fill out alt texts with SEO friendly content in WordPress.

Hopefully there is a plugin named Auto Image Attributes From Filename With Bulk Updater that can do it for you.

8. Think about the image file structure

According to updated Google’s Image Guidelines. One of the major updates they revealed was that they use the file path and file name to rank images.

Repeat: The file path and file name is an actual ranking factor.

For example, if you are an ecommerce brand with multiple products, instead of placing all your product images into a generic /media/ folder, we would recommend structuring your subfolders to more category related topics like /shorts/ or /denim/.

9. Include descriptive titles and captions for images 

The image caption is the text that accompanies the image on the page. Why are captions important for image SEO?

Because people use them when scanning an article. People tend to scan headings, images and captions as they scan a web page.

“Elements that enhance scanning include headings, large type, bold text, highlighted text, bulleted lists, graphics, captions, topic sentences, and tables of contents.”

nngroup

But do you need to add captions to every image? No, because sometimes images serve other purposes. Decide whether you want to use yours for SEO as well or not.

Bearing in mind the need to avoid over-optimization, we would say you should only add captions where it would make sense to the visitor for one to be there.

Think about the visitor first, and don’t add a caption just for image SEO purposes.

How to write a caption under an image?

<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

The title text attribute is less important than the filename and the alt text attribute when it comes to SEO.

<img title="image title" />

Title texts are displayed when the user mouse over a picture or a photo. It can be nice for the user experience.

We recommend you not to spend much time on title text optimization. They are not important for SEO. Why is that? Here’s Mozilla’s take:

“title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won’t show it unless you are hovering with a mouse (so e.g. no access to keyboard users).”

Hence, it is better to include such supporting information in the main article text, rather than attached to the image.

❗ Important

Image names have to be short; alternative texts (alt) have to be descriptive, title texts can be left blank but figcaption have to be catchy.

10. Use hyphens, not underscores

There is no reason behind this, but Google simply prefers that you use hyphens to separates words in image file names. It’s simply how their algorithm was originally written. Of course, you don’t have to separate words with anything, but it’s a still a best practice for SEO.

✔️ Correct: /images/boston-home-remodeling.jpg

Incorrect: /images/boston_home_remodeling.jpg

11. Re-use image sources

We see this mistake a little too often. Why are you uploading the same image twice? Upload it once and use the same image source.

Don’t upload it again and again. If you do, users will have to load that image each time you uploaded it, instead of just once; which will dramatically slow down your page’s load time.

12. Hide images on mobile devices

Think very carefully about whether or not your mobile users need to see certain images or not. Pages that are optimized for mobile devices will show up higher in mobile search results.

If your mobile users don’t really need to see an image, then don’t display it on the mobile version of your page.

13. Consider lazy loading for images

Since images are often the bulkiest part of a web page, hence it take the longest time to load. For greater efficiency, make use of Lazy Loading. This concept forces your web page to load elements that visitors see first when they come to your website.

Lazy loading in action

Here’s what Google says about lazy-loading:

Lazy loading can significantly speed up loading on long pages that include many images below the fold by loading them either as needed or when the primary content has finished loading and rendering.

There’s been a lot of debate in the past as to whether lazy-loaded images are good or bad for SEO. However, here is a recommendation from Google’s very own PageSpeed Insights tool.

Image Optimization for Best Web Performance - lazy loading for images - img - 2

If you are using WordPress then try A3 Lazy Load plugin. Also, Google explains how to implement lazy-loading here.

Sunil Pradhan

Hi there 👋 My name is Sunil and I'm a front-end developer who loves to help others by simplifying web-dev related topics.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there 👋 My name is Sunil and I'm a front-end developer who loves to help others by simplifying web-dev related topics.