Image SEO: How to Optimize Images for Search Engines & Users

May 22, 2024 05:40 PM - 5 months ago 61655

What Is Image SEO?

Image SEO is nan process of optimizing images connected your website truthful that your pages and images whitethorn rank much prominently successful unpaid hunt motor results. And truthful thrust much postulation to your site.

Common image SEO strategies include:

  • Resizing and compressing images
  • Giving images descriptive record names
  • Adding replacement matter (alt text) to images

SEO image optimization useful because it makes it easier for hunt engines for illustration Google to find and understand your images. This intends they’re much apt to show your images (and nan pages they’re on) for applicable hunt queries.

Optimized images besides load faster. And thief get nan accusation they need. These are some things that Google values erstwhile ranking hunt results.

They’re things that your visitors will appreciate, too.

One of nan main benefits of image SEO is that it helps your images look successful search motor results pages (SERPs). And truthful pull valuable clicks from users.

Many users spell consecutive to Google Images. To get results for illustration these:

There are billions of searches connected Google Lens each month, too. This is an app that lets group execute visual searches—i.e., hunt utilizing their camera aliases an image. 

And it gives results for illustration this:

Plus, Google regularly displays images successful modular results.

For example: On April 29, 2024, nan Semrush Sensor showed that 55.62% of modular SERPs successful nan U.S. included an image pack.

Like this one:

Image results are awesome for drafting users’ attraction and clicks.

But retrieve that doing SEO for images tin thief pinch your different rankings, too. 

How to Optimize Images for SEO 

Apply these image SEO champion practices to make your website much hunt motor friendly. And heighten nan personification experience.

1. Find aliases Create Useful Images

The first measurement successful SEO image optimization is selecting aliases creating an image that supports your goals.

For example:

  • Photos tin showcase products and break up chunks of text
  • Graphic designs tin convey absurd ideas
  • Charts and graphs tin show analyzable data 
  • Icons tin amended website navigation and usability
  • Logos tin fortify your brand identity
  • Screenshots tin supply clear instructions and examples

Try to create your ain images alternatively than utilizing banal imagery. That way, you present unsocial worth to users and springiness Google much logic to rank you.

If you do usage images created by others, make judge you person nan basal permissions. Otherwise, you whitethorn beryllium breaking copyright law.

2. Choose nan Right Image Formats

You tin prevention aliases person image files into galore different formats. 

SVG is usually nan champion prime for icons and logos. Because SVGs tin beryllium resized without immoderate nonaccomplishment of quality. And manipulated pinch JavaScript aliases CSS (website coding languages).

WebP is 1 of nan champion formats for different kinds of images. Because:

  • It’s supported by awesome hunt engines, net browsers, and societal media sites (although it’s not supported by immoderate older browsers/systems) 
  • It mostly creates smaller (and truthful faster-loading) files than different formats
  • It supports transparency and animation
  • It uses lossy and lossless compression (which thief guarantee a bully equilibrium betwixt record size and image quality)

However, SVG and WebP images tin beryllium harder to create and manage.

The champion alternatives are:

  • JPEG for modular images
  • PNG for images pinch transparency, text, aliases tons of detail
  • GIF for elemental animations

3. Give Your Images Descriptive File Names

Google uses image record names to amended understand what images depict. So, it’s champion believe to springiness your images descriptive (yet concise) record names. 

For example:

✅ apple-iphone-15-pink-side-view.jpg

❌ apple-iphone-15-latest-model-vibrant-pink-color-side-angle-view-showcasing-camera-lens-and-buttons-2024-release.jpg

❌ IMG00353.jpg

If you usage nan aforesaid image successful translated versions of your content, make judge to update nan record sanction accordingly.

For example, you mightiness usage nan record sanction iphone-apple-15-rosa-vista-lateral.jpg connected your Spanish domain.

4. Add Descriptive Alt Text

Alt text is simply a written explanation of an image that’s stored successful a webpage’s code.

Specifically, it’s sorted successful nan alt property of nan image tag. Like this:

<img src="image-file-example.jpg" alt="Alt text goes here">

Alt matter is chiefly utilized for accessibility: text-to-speech devices tin publication this explanation aloud truthful that visually impaired users cognize what’s conveyed by nan image.

And it appears erstwhile a page doesn’t load decently aliases load slowly.

But, alt matter is besides useful for image hunt motor optimization. Because hunt engines usage alt matter to amended understand what an image depicts.

Here are immoderate alt matter champion practices:

  • Only constitute alt matter for functional images—not ornamental images. This ensures a little disruptive acquisition for group utilizing assistive technologies.
  • Describe aspects of nan image that are important successful context. For example, if you usage nan aforesaid floor plan to show different points, usage different alt matter for each lawsuit to intelligibly explicate your point.
  • Stick to a maximum magnitude of 125 characters. Some assistive technologies extremity reference alt matter astatine this point.
  • If there’s thing that each your readers request to know, put it successful nan assemblage contented aliases nan image caption—not nan alt text. So it’s accessible to everyone.
  • Avoid utilizing redundant phrases for illustration “image of” aliases “photo of.” It’s already evident that alt matter refers to an image.

You tin cheque whether your images are missing alt matter pinch Semrush’s Site Audit tool.

Open nan instrumentality and travel nan prompts to commencement your audit.

Then, spell to nan “Issues” study and hunt for “alt attribute” successful nan hunt bar. To find nan “# images don’t person alt attributes” warning.

Click “# images” to spot nan affected images.

If you don’t want to adhd alt matter to an image because it’s decorative, click nan oculus icon to hide nan result.

Otherwise, spell to your website and adhd nan image alt text. (The correct measurement to do this depends connected your website’s setup. Speak to a developer if you request help.)

You tin past rerun your tract audit to cheque everything’s moving properly.

5. Resize Images

Resizing images to smaller dimensions helps trim loading times. And it doesn’t person to impact image quality.

Generally, website images don’t request to beryllium immoderate wider than 2,500 pixels.

But nan maximum size required for a peculiar image depends on:

  • The container’s maximum width: If your image is placed successful a instrumentality (an constituent utilized to negociate layouts successful web design), it shouldn’t to beryllium immoderate larger than nan container’s maximum size
  • The image’s purpose: For example, you whitethorn request ample merchandise photos truthful that users tin zoom into nan specifications and spot them clearly—but thumbnails tin beryllium overmuch smaller
  • Your audience’s devices: Use Google Analytics 4 to spot what surface resolutions your visitors use—that way, you cognize what sizes you request to cater to 

Image editing and creation devices (like Photoshop) usually make it easy to resize images.

But you whitethorn beryllium capable to usage a website plugin that automatically adjusts nan images you upload (e.g., Resize Image After Upload for WordPress).

6. Compress Images

Various devices and plugins let you to compress images—i.e., trim image record sizes while maintaining nan desired level of image quality.

Like this:

Some of nan astir celebrated options see TinyPNG, Squoosh, and GIMP.

Whatever instrumentality you choose, you’ll request to configure various settings to execute nan desired result:

Setting

Description

Guideline setting

Lossy vs. lossless

Lossy compression reduces record size by removing “non-essential” image data. Lossless compression reduces record size without affecting value but mostly saves little space.

Lossy

Quality factor

For lossy compression, you tin usually take a value facet from 0 to 100. The higher nan number, nan higher nan value and nan larger nan record size.

75-85

Resolution

This is usually expressed successful pixels per inch (PPI) aliases dots per inch (DPI). The higher nan number, nan higher nan value and nan larger nan record size.

72dpi

7. Use Responsive Image Scaling

Responsive image scaling intends that website images automatically set based connected nan size of nan user’s viewport (the portion of nan surface that shows nan webpage).

It helps guarantee a awesome personification acquisition connected each benignant of device. Because it prevents images from being excessively difficult to spot (e.g., excessively large connected mobile aliases excessively mini connected desktop).

So, responsive image scaling minimizes loading times, because images aren’t immoderate larger than they request to be. And that’s nan main logic it’s bully for image SEO.

You tin spot responsive image scaling successful action here:

You make images responsive by utilizing CSS.

Some website builders (like Wix) usage responsive image scaling by default. If not, you’ll request to find a suitable plugin aliases get thief from a web developer.

8. Implement Lazy Loading

Lazy loading ensures contented isn’t loaded until it’s shown successful nan user’s viewport.

This intends that nan first load clip is only affected by contented above nan fold (in nan portion of nan page that nan personification sees earlier scrolling). And is truthful faster.

The easiest measurement to instrumentality lazy loading is to adhd nan loading="lazy" property to image tags. 

Like this:

<img src="image-file-example.jpg" loading="lazy" alt="Alt text goes here">

Only do this to images that look beneath nan fold connected each instrumentality type. Otherwise, you’ll make your page slower alternatively than faster.

9. Create an Image Sitemap

An image sitemap is an XML sitemap made particularly for images. 

In different words, it’s a specially formatted record that lists images you want hunt engines to crawl and index (i.e., find and adhd to nan database of imaginable hunt results).

Creating an image sitemap helps guarantee that search motor bots don’t miss immoderate important images erstwhile they’re crawling your site.

Google recommends that you building your image sitemap for illustration this:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
    <url>
        <loc>[URL for a webpage on your website]</loc>
        <image:image>
            <image:loc>[URL for an image on this webpage]</image:loc>
        </image:image>
       <image:image>
            <image:loc>[URL for another image on this webpage]</image:loc>
        </image:image>
    </url>
    <url>
        <loc>[URL for another webpage on your website]</loc>
        <image:image>
            <image:loc>[URL for an image on this webpage]</image:loc>
        </image:image>
    </url>
</urlset>

There are galore sitemap generator tools disposable to thief you.

After creating your image sitemap, usage Semrush’s Site Audit instrumentality to cheque for immoderate issues.

Just caput to nan “Issues” study and hunt “sitemap.”

You’ll instantly spot whether you person errors, warnings, aliases notices to address.

Click “Why and really to hole it” for much accusation astir immoderate issue.

And click nan bluish nexus to spot a elaborate report.

10. Use a Content Delivery Network

A content transportation web (CDN) allows you to big your images connected aggregate servers astir nan world.

This improves load speeds because information travels from each user’s “closest” server. Rather than walking from your root server each time.

Closeness is wished not needfully by beingness geography, but by whichever server tin transportation information much quickly and reliably. 

As this image illustrates:

To instrumentality a CDN for your images, you request to:

  • Choose a CDN supplier (e.g., Cloudflare aliases Amazon CloudFront)
  • Integrate nan CDN pinch your website (e.g., via plugin)
  • Upload your images to nan CDN
  • Update your DNS grounds truthful that image requests spell done nan CDN
  • Modify your website HTML (and your image sitemap) to reference nan caller image URLs

You will request nan thief of a web developer.

11. Enable Browser Caching

Browser caching is erstwhile a visitor’s browser stores definite files (such arsenic images) for a specified magnitude of time. So that they tin load much quickly if they’re requested again.

Let’s opportunity a caller personification visits your homepage:

  • If your tract logo is cached for 365 days, it’ll load much quickly erstwhile nan personification clicks done to different page connected your site. And/or revisits your website successful nan pursuing year.
  • If your tract logo isn’t cached, nan browser will request to redownload nan image connected each occasion. This consumes much bandwidth and increases nan number of requests nan server must handle.

Generally, images tin beryllium cached for a agelong clip because they’re seldom updated.

You tin usage Google Lighthouse to spot whether images connected your tract are cached for a suitable duration.

After installing nan Chrome extension, take nan Lighthouse Viewer action to analyse a peculiar webpage.

12. Apply On-page SEO Best Practices

On-page SEO is nan process of optimizing a page to rank higher successful hunt results. And it tin thief nan images connected your page execute better, too.

First, constitute a descriptive title tag.

Google looks astatine this title to amended understand what your page is about. And it influences nan title links that look alongside your hunt results.

For example, David Austin Roses uses nan title tag “Apricot & Orange Roses” for 1 of its pages.

And this title appears alongside 1 of nan corresponding image results:

Write an effective meta description, too.

This is nan page summary that tin look successful hunt results. Like this:

To trim nan consequence of your matter being trim off, it’s a bully thought to constitute 50-60 characters for titles and astir 105 characters for meta descriptions.

For much optimization ideas, usage Semrush’s On Page SEO Checker.

It provides bespoke recommendations based connected champion practices and study of competing content.

13. Add Structured Data

Adding system information (also known arsenic schema markup) to your tract increases nan chance of securing rich snippets—search results pinch attention-grabbing other elements, specified arsenic images.

For example, Cooking Classy uses schema markup to thief Google place nan main image, reviews, prep time, and ingredients for its funfetti barroom recipe.

And this helps it unafraid rich | results for illustration this one:

You tin usage schema to specify images for articles, events, organizations, and more. 

There’s besides an ImageObject schema that allows you to supply other specifications astir an image (e.g., nan sanction of nan creator and a nexus to nan image license). 

These specifications whitethorn show successful Google Image results. Like this:

Visit Google’s guide for specifications astir each schema type.

After implementing nan schema, usage Semrush’s Site Audit instrumentality to cheque it’s moving correctly.

If you find nan “# system information items are invalid” error, click done to nan report.

You tin past spot affected URLs and fields. And return corrective action.

14. Optimize Your Open Graph Meta Tags

You tin usage Open Graph meta tags to guarantee your pages are previewed optimally erstwhile shared connected various platforms, specified arsenic societal media sites.

There are 4 required properties for each page:

  • og:title specifies nan title that should look successful nan preview
  • og: type specifies nan type of entity (e.g., “article”)
  • og:image specifies nan URL of nan image for nan preview
  • og:url specifies nan URL of nan page

You tin besides adhd many different kinds of tags.

For example, Semrush’s homepage uses these Open Graph tags:

<meta property="og:url" content="https://semrush.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="Semrush - Online Marketing Can Be Easy">
<meta property="og:description" content="Turn the algorithm into a friend. Make your business visible online with 55+ tools for SEO, PPC, content, social media, competitive research, and more.">
<meta property="og:image" content="https://static.semrush.com/wt-static/semrush-com.png">
<meta property="og:image:width"" content="1366">
<meta property="og:image:height"" content="768">

And here’s what it looks for illustration erstwhile you stock nan nexus connected Facebook:

If your website builder doesn’t let you to customize unfastened chart meta tags, you whitethorn beryllium capable to usage a plugin for illustration Yoast SEO instead.

Speak to a developer if you request help.

How to Check Your Site’s Images

You tin cheque images and SEO issues connected your tract pinch Semrush’s Site Audit tool.

After mounting up your project, spell to nan “Issues” tab. And hunt for “image.”

You’ll spot nan results of 7 checks:

  • # soul images are broken: Images linked connected your tract and hosted connected your domain that aren’t working—perhaps because nan record was deleted
  • # pages person slow load speed: Slow-loading pages, wherever poorly optimized images could beryllium a contributing factor
  • # outer images are broken: Images linked connected your tract and hosted by an outer domain (e.g., a CDN) that aren’t working—perhaps because of a URL typo 
  • # images don’t person alt attributes: Instances wherever image tags don’t incorporate immoderate alt text
  • # issues pinch blocked soul resources successful robots.txt: Resources (such arsenic images) connected your domain that are blocked via your robots.txt record and truthful inaccessible to hunt engines
  • # resources are formatted arsenic page link: Instances wherever a href links incorporate URLs of resources (e.g., images) alternatively than webpages—generally, different tag should beryllium used
  • # issues pinch blocked outer resources successful robots.txt: Resources (such arsenic images) connected different domain that are blocked via nan site’s robots.txt record and truthful inaccessible to hunt engines

If you person immoderate “Errors,” click nan bluish nexus to study more.

For example, beneath is simply a study astir surgery soul images.

Use nan oculus icon to hide immoderate issues that don’t request fixing. 

Then, usage nan cheque boxes and “Send to…” fastener to create tasks successful nan Semrush CRM, Trello, aliases Zapier.

After addressing immoderate image SEO “Errors,” move onto “Warnings” and past “Notices.”

Check retired immoderate different issues that nan instrumentality has flagged, too. They’re each things that could negatively effect your SEO performance.

More