Image SEO and Alt Tags: 10 Image Optimization Tips

What Is Image SEO?

Image SEO refers to the optimization of images to get much postulation from hunt engines.

For example, optimizing for representation SEO tin assistance your tract fertile higher connected Google Images.

As you tin spot below, Semrush ranks 2nd successful Google Images for “ecommerce keyword probe tool:”

Image SEO tin besides amended accessibility connected your site, which is becoming a legal request successful galore countries.

In this article, we’ll amusement you however to adhd alt text, trim representation record size for optimal load times, instrumentality vantage of structured representation data, and more.

Let’s dive into wherefore representation SEO optimization is important. And then, we’ll sermon actionable tips you tin usage connected your ain webpages.

Why Are Images So Important?

Google Image searches relationship for 22.6% of each searches.

This is wherefore it’s important to wage attraction to your Image SEO—you’ll beryllium missing retired connected a immense magnitude of postulation if you don’t.

Image SEO tin thrust important postulation to your tract successful 2 antithetic ways:

First, utilizing optimized images increases the accidental of ranking successful Google Images. 

Second, images are an important portion of on-page SEO.

Google is progressively showing images successful the regular hunt results, often supra the accustomed integrated results.

Like the results for the keyword “blue ford raptor” below—notice however galore images amusement up earlier the archetypal website link.

In addition, images tin assistance users recognize and prosecute with your written content. And assistance interruption up different ample blocks of text.

There are fewer things little engaging than a coagulated artifact of a mates of 1000 words.

Now let’s speech astir 1 of the astir important parts of representation SEO: alt text.

What Is Alt Text?

Alt text (or alternate text) is simply a written statement of an image.

SEOs sometimes notation to alt substance arsenic “alt attributes” oregon “alt tags.” 

Optimized alt substance is important successful getting Google to fertile your images connected Google Images. 

That’s due to the fact that alt substance lets you archer Google what the representation shows.

It tin besides lend to your site’s accessibility for users, arsenic good arsenic explicate to users what an representation should amusement if an representation is broken.

Take a look astatine this illustration from the University of Dayton. You tin spot however an representation looks erstwhile it loads correctly, erstwhile it’s breached and has nary alt text, and erstwhile it’s breached but has alt text:

Alt substance tin assistance improve your site's SEO show by adding further relevancy signals to a webpage. This helps Google amended recognize the discourse of an representation to find however to fertile the page.

Alt substance is utilized wrong HTML codification to picture circumstantial images connected a page.

Like this:

<img src="cute-kitten-playing-ball.png" alt="cute kitten playing with a ball" />.

But don’t worry: you don’t person to cognize HTML to optimize your alt tags. 

More connected that successful a minute. First, let’s excavation into penning bully alt substance and learning however to delegate alt substance to your images.

How to Optimize Image Alt Text

When adding alt text, it’s champion to beryllium descriptive without overdoing it. 

Imagine you’re connected the telephone with idiosyncratic and request to explicate however an representation looks—how would you champion picture it?

Generally, it’s champion to instrumentality to a maximum of 125 characters erstwhile penning alt text. This is due to the fact that astir surface readers (assistive technologies to assistance those who are visually impaired) stop speechmaking alt substance aft 125 characters.

It’s besides adjuvant to see applicable keywords successful your alt text, but there’s a good enactment betwixt being circumstantial and being spammy.

Here’s an illustration of descriptive vs. spammy alt substance for this brace of L.L. Bean duck boots:

✅ Descriptive: brownish leather L.L. Bean duck boots

❌ Spammy: L.L. Bean brownish leather hiking walking wintertime duck boots

The descriptive illustration simply describes the representation successful a elaborate way. It includes a keyword oregon 2 (like “L.L. Bean duck boots” and “leather L.L. Bean duck boots”). But it’s inactive a earthy description.

The spammy illustration attempts to acceptable successful a fewer excessively galore related keywords that don’t bash overmuch to picture the image. 

Optimized alt substance tin assistance Google recognize the discourse of your visuals, but “keyword stuffing” similar this tin make a mediocre idiosyncratic experience. And adjacent awesome to Google that your leafage is spam.

Now that we’ve covered what to avoid, let’s dive into a fewer much examples.

Alt Text Examples

What does well-optimized alt substance look similar successful practice? Let’s constitute a fewer examples of bad, good, better, and champion options.

Let’s commencement with this photograph from Shutterstock:

Bad alt text: alt="cats"

Good alt text: alt="sleeping cats with yarn"

Better alt text: alt="ginger kittens sleeping with yarn"

Best alt text: alt="two ginger kittens sleeping with pinkish and purple balls of yarn"

Now, however astir this screenshot?

Bad alt text: alt="backlinks"

Good alt text: alt="Adidas backlinks"

Better alt text: alt="Adidas backlinks overview"

Best alt text: alt="Adidas backlinks overview from Semrush Backlink Analytics"

What astir this picture of an aerial fryer:

Bad alt text: alt="air fryer"

Good alt text: alt="silver aerial fryer"

Better alt text: alt="Cuisinart metallic aerial fryer"

Best alt text: alt="Cuisinart metallic aerial fryer cooking fries"

As you tin see, successful each lawsuit the champion alt substance is the 1 that’s astir descriptive without sounding unnatural.

Adding Alt Text successful WordPress

You tin adhd optimized alt substance to your WordPress tract without knowing a happening astir HTML.

After you upload an representation to your photograph library, you tin capable retired details including alt text.

See beneath successful this example from Insider:

Once you acceptable the alt text, that representation volition person alt substance whenever you usage it connected your tract (you tin edit it aboriginal arsenic well).

Adding representation alt substance is besides casual successful different contented absorption systems, similar Wix, Squarespace, and Shopify.

10 Optimization Tips to Improve Your Image SEO

While alt tags are important, there’s overmuch much to representation optimization that each SEO should know.

There are a fig of things that you tin bash to amended your site’s wide integrated show and fertile higher connected Google Images.

Here are 10 tips to amended your representation SEO:

1. Name Your Images Properly

According to Google’s Image SEO guide, it’s important to usage descriptive filenames.

Let’s usage this representation of a Nike Air Force 1 footwear arsenic an example:

Your machine whitethorn make the filename IMG00353.JPG erstwhile you prevention it—but that doesn’t archer Google what the representation is.

A amended filename would beryllium white-air-force-1-pastel-stripes.jpg.

Give descriptive names to immoderate images earlier uploading them to your site.

Additionally, Google recommends utilizing hyphens alternatively than underscores to abstracted words.

And if you program to construe oregon localize a webpage, alteration the record names accordingly.

2. Resize Images to the Display Dimensions

When it comes to idiosyncratic experience, page speed is crucial. And it’s casual to accidentally dilatory down your leafage if you don’t wage attraction to record size.

Let’s accidental you instrumentality a photograph connected your phone. Most flagship smartphones instrumentality photos that are astatine slightest 4032 pixels by 3024 pixels. 

If the maximum representation width connected your website is 600 pixels, that representation is acold larger than it needs to be. Which tin dilatory down your site.

To debar this issue, resize images to the maximum show dimensions needed earlier uploading.

You tin resize images manually with Photoshop oregon a simpler instrumentality similar Canva.

Or if you usage WordPress, you tin usage a plugin similar Resize Image After Upload.

Just alteration the “enable re-sizing” feature, take the sizes you want, and you’re bully to go:

You should besides marque definite that you are scaling images responsively with CSS.

3. Compress Images

Resizing your images isn’t the lone mode to trim their record size.

You tin besides compress your images, which tin assistance decrease leafage load times.

Compressing an representation means you are minimizing the record size without compromising the prime to an unacceptable degree.

Essentially, the extremity is to minimize immoderate redundancy successful the representation information successful favour of ratio and faster loading speeds erstwhile you usage the image.

How tin you trim the record size of your images?

You tin usage a assortment of easy-to-use tools similar Optimizilla, TinyPNG, oregon ImageOptim to compress your images. 

Or, if you are utilizing WordPress, effort the Smush plugin.

Drag and driblet existing files successful ImageOptim to get a caller record with a compressed image.

You tin besides usage 1 of Google's 3 recommended open-source tools: 

• guetzli
• mozjpeg
• pngquant

4. Choose the Right Format

Now that we’ve discussed representation compression, let’s screen immoderate of the most communal representation formats.

There is nary 1 close format to use. It each depends connected the representation you privation to usage and however you program to usage it. 

Here’s a basal breakdown of however to choose:

• JPEG: The astir fashionable representation format. Use for online photos oregon artwork. Can besides beryllium utile for emailing preview images, arsenic they tin beryllium compressed to precise tiny sizes.
• PNG: Use if you request to usage transparency successful the representation background
• WebP: Use if you request higher compression than a JPEG oregon PNG. Supports images and animated images without sacrificing colour depth, animated frames, etc., but doesn’t enactment with older browsers.
• SVG: Use for icons oregon logos

5. Create an Image Sitemap

Put simply, creating an representation sitemap increases the accidental of your images showing up successful hunt results.

An representation sitemap is simply a batch similar a regular XML sitemap, but that an image sitemap lone includes the URLs to images.

Creating a dedicated sitemap that includes the URLs of each the images connected your tract tin assistance Google observe those images and see them successful representation hunt results.

There is 1 cardinal quality erstwhile creating an representation sitemap and creating 1 that includes your webpages.

Image sitemaps tin incorporate URLs from different domains, which means you tin big your images connected a Content Delivery Network (more connected that later).

How to Create an Image Sitemap

You tin make an representation sitemap manually oregon with a sitemap generator.

To manually make one, you tin travel Google’s illustration and instructions.

In this sitemap illustration from Google, 2 images are included:

With an representation sitemap, you tin see up to 1,000 images for each page.

Google besides provides a database of representation tags. 

You’ll request to usage the ones marked “Required.” The optional tags, connected the different hand, are determination to supply further discourse for hunt engines arsenic good arsenic a amended idiosyncratic experience.

While determination are sitemap generator plug-ins retired there, Google precocious announced that some sitemap hold tags volition beryllium going distant successful a substance of months. 

No enactment is required presently if you negociate your ain sitemap, but you’ll privation to beryllium cautious utilizing extensions successful the aboriginal successful lawsuit they aren’t updated to travel caller champion practices.

6. Use a Content Delivery Network

A content transportation web (CDN) makes images and different contented load much quickly.

A CDN is simply a radical of servers located astatine antithetic locations astir the world. This allows for quicker organisation of contented to abstracted locations.

Let’s accidental you’re located successful the U.S. It volition beryllium overmuch quicker to load contented from a U.S. server than from a server based successful Asia. 

Take a look astatine this representation from CloudFlare—it shows the archetypal oregon “origin” server successful summation to CDN servers successful different locations. 

You tin spot the users volition get their contented from the CDN server that is closest to them:

You tin easy acceptable up a CDN connected WordPress done plugins specified arsenic W3 Total Cache. Or for further guidance, you tin look for integration guides from your chosen provider, specified arsenic this 1 from Cloudflare.

7. Implement Lazy Loading

When it comes to dilatory leafage loading speed, images are typically the apical culprits.

One of the champion ways to lick this problem:

Use “lazy loading.” Which tells web browsers to hold to load an representation until it is needed.

Meaning that the leafage loads overmuch much rapidly erstwhile the idiosyncratic archetypal lands connected it. And it’s not conscionable utilized for images; assets similar JavaScript tin besides beryllium loaded this way.

Here’s a visual illustration of lazy loading from Google Chrome’s blog:

Think astir it this way—if a idiosyncratic ne'er scrolls down to the 2nd fractional of a page, those assets volition ne'er beryllium loaded. And this brings noticeable show improvements. 

As noted by Google, you should debar lazy loading above-the-fold images. This would make a mediocre idiosyncratic experience.

8. Leverage Browser Caching

The Google PageSpeed Insights instrumentality often recommends leveraging browser caching.

Browser caching is erstwhile files are stored by a visitor’s browser. This means that assets load faster erstwhile they adjacent sojourn the page.

Here’s an example:

When you sojourn a page, the images are downloaded and past displayed successful the browser. Without browser caching, the adjacent clip this idiosyncratic visits the page, these volition each request to beryllium downloaded again. 

But with browser caching, the browser volition already person these stored, meaning the leafage loads overmuch faster.

Browser caching is noticeably impactful connected sites wherever users often revisit the aforesaid pages. 

Read Google’s caching recommendations here to larn more.

If you usage WordPress, 1 of the popular cache plugins tin assistance you to instrumentality this quickly. If not, this usher from GTmetrix volition assistance you to bash so.

9. Add Image Structured Data

Structured data is simply a information vocabulary that helps hunt engines recognize your site’s accusation much clearly.

Using structured information besides increases the chances of your images showing up arsenic “rich results.”

Here is an illustration of Recipe schema successful action. This benignant of affluent snippet shows a related image, reviews of the recipe, the clip it takes to marque the recipe, and a abbreviated database of ingredients:

Structured information doesn’t needfully marque your tract fertile better.

It does, however, heighten your representation hunt listing.

For example, let’s accidental you privation to upload a look blog to your website. You tin usage representation structured information to amusement that a peculiar representation belongs to a recipe.

Google Images supports the pursuing types of structured information currently:

• Product

• Video

• Recipe

For much info connected however to instrumentality structured information for images, spot Google’s guidelines.

In the meantime, present are a mates of cardinal takeaways:

1. If you program to usage structured information to enactment an image, marque definite that the representation is applicable to the leafage it appears on. For example, if you usage look structured data, the representation you take should amusement the completed recipe.

2. All representation URLs indispensable beryllium crawlable and indexable. Otherwise, Google won’t beryllium capable to find them and amusement them connected results pages.

10. Optimize for Open Graph and Twitter Cards

Using images is besides an important portion of societal media strategy. This is wherever Open Graph comes in.

Open Graph is an net protocol (or acceptable of rules) primitively introduced by Facebook. 

Open Graph tags let you to take however a societal media station preview appears. This means you tin take the preview title, image, and much for societal posts.

For example: to guarantee your representation of prime shows up erstwhile you stock a page, see this representation tag successful the <head> conception of your page’s HTML similar so:

<meta property="og:image" content="http://site.com/image-link.jpg" />

In practice, it volition look similar this erstwhile you spell to stock connected socials:

Open Graph applies to Facebook and Pinterest, portion Twitter uses Twitter cards.

For Twitter, this is the codification you’ll request to adhd to the <head> section:

<meta name="twitter:card" content="summary"></meta>

You tin usage a plugin similar Yoast oregon RankMath to acceptable these representation tags and preview your posts.

Finding Issues With Your Site’s Images

We’ve covered however to optimize your site’s images. But however tin you find existing issues that request fixing?

You tin usage our Site Audit instrumentality to item these problems. 

Just caput implicit to Site Audit and click connected the issues tab.

The Issues study volition amusement lists of Errors, Warnings, and Notices:

You tin scroll done the leafage to get an wide thought of what to address, oregon you tin usage the hunt barroom to constrictive your results.

To find issues with images, filter by the connection “image.”

As you tin see, there’s an mistake regarding 3 breached interior images:

If you click connected the anchor substance that reads “3 interior images are broken,” you tin spot which images are causing issues and what pages they’re on:

The audit volition besides item immoderate breached outer images arsenic well. 

You tin find this nether the “Warnings” section. In this case, determination are nary breached outer images connected the site:

Images Without Alt Attributes

If you privation your images to fertile connected Google, it’s highly important to springiness them alt text.

You tin usage Site Audit again to entree a database of each images connected your tract without alt text. 

Once you unfastened the Site Audit tool, caput backmost to the “Issues” tab.

Under “Notices,” scroll down to “x images don’t person alt attributes.”

To larn however to hole immoderate occupation connected the list, click “Why and however to hole it.” A pop-up volition look with an overview and links to further resources, similar this:

Next, click the fig of missing alt attributes (“57 images” successful this case), and you volition beryllium directed to a implicit database of images that don’t person alt attributes.

Log into your CMS and adhd alt substance to immoderate images without it to hole them.

Final Thoughts

Taking the clip to optimize your site’s images decently tin person a noticeable interaction connected traffic.

Plus, it tin amended idiosyncratic acquisition done faster loading times and enhanced accessibility.

As you tin see, you’ll beryllium missing retired if you disregard representation SEO.

For adjacent much on-page SEO tips, caput to our On-Page SEO Guide.