iBeam Marketing Blog

Digital Marketing Articles, Insights, Resources, Tips and Tools

B2B Marketing, SEO, B2B Website Visitor Tracking, Google Analytics, and Related Topics

Website Image SEO Tips — WordPress & Other Sites

Last updated Dec 22, 2023

How to Optimize Images for SEO and User Experience

It’s easy — and tempting — to add lots of images to website pages and blog posts. Good images and graphics are usually very helpful for a wide variety of content.

But first, consider the SEO implications of your image content, and take a handful of steps to make sure your website images are properly optimized for both SEO and user experience.

This post provides several important tips and guidelines regarding image optimization for SEO. I’ve included some tools and other helpful resources as well.

Most of these tips are based on my own experience and learning curve with image SEO on my WordPress websites (including this site).

Let’s dive in and see what it’s all about below.

Table of Contents (+/-)
    Image optimization is one of the many important aspects of a comprehensive SEO strategy and plan. Image SEO is sometimes overlooked, but the basics are actually pretty straightforward.

    This post contains a few referral links to vendor partners. We may receive compensation for future purchases made via these links, at no additional cost to buyers.

    Image Optimization for SEO — What Is It?

    The Need for Website Image Optimization

    Good visual content is important for most websites and blogs, so it’s totally understandable why content creators and webmasters want to include good images where possible.

    However, adding images and graphics incorrectly can result in SEO problems and user experience issues.

    What is Image Optimization for SEO?

    From an SEO standpoint, ‘image SEO’ is about optimizing image content for fast loading times (image file size and page speed factors), SEO target keyword(s) context, mobile friendliness, and related issues.

    Many of these areas contribute to improved website user satisfaction as well (‘user experience’ or UX for short). This is also an important SEO consideration.

    Why is Image SEO Important?

    The short answer is this:

    When your website/blog image content is better optimized for search, you can rank higher for your target keywords and user search queries, leading to more traffic from organic search.

    Like all SEO efforts, image SEO is about improving search rankings for more organic visibility, traffic, and conversions.

    As it turns out, image optimization is also an area where you can score some quicker SEO wins. It’s definitely worth investigating early on for faster SEO gains, starting with an image SEO audit to find problem areas.

    What follows are many of the image optimization steps I’ve learned and incorporated while building my websites and blogs. (I use these tips on SEO client websites as well.)

    Related: See this post for a summary table of image SEO best practices and tips. It captures the basics of many of the points below.

    Image SEO Process & Workflow

    Image SEO Tips — From Basic to More Advanced

    The image SEO steps I’ve included below will take you a long way toward having well-optimized images on your website. After incorporating these steps into an image SEO workflow that suits your site, you should start seeing gains in your search performance.

    The sections and tips below range from ‘image SEO essentials’ to things (such as using image CDNs) that are a bit more advanced.

    The good news is that the basics of website image optimization are not super complicated, and several free and paid SEO tools help make the tasks easier to incorporate.

    Let’s get started…

    Use High-Quality Images

    This almost goes without saying, but I’ll include it here as a reminder:

    Always strive to use ‘high-quality’ images in your website and blog content.

    What does ‘high-quality’ mean here? It means that your image content meets most or all of the following criteria:

    • Your images are visually appealing and contribute positively to the content of the page or post. They are well-composed, properly cropped, etc.
    • Images have few if any, obvious image defects like jpeg compression artifacts, aspect ratio distortion, exposure issues (much too dark or light), focus or blur problems, excessive ‘digital noise’, etc.
    • They help tell the story of your content, are complementary to your text, etc. They have explanatory value that helps the user
    • They contribute positively to user experience and engagement with your overall content
    • Images are original where possible, or high-quality stock images where necessary (usually for time and budget reasons)

    Don’t Overstuff Image Content

    Unless you have a product-centric page (like e-commerce shops) or a visual arts site (e.g., a pro photographer with image galleries or portfolio pages), you should not ‘over-stuff’ content pages with images, embedded videos, etc.

    Why? Because even when perfectly optimized, images and embedded videos still contribute a lot to the overall ‘weight’ (KB or MB size) of a web page. This can result in slow page loading times that can hurt both SEO and user experience.

    So, just don’t go too crazy when adding images or other multimedia content. Include what you need to fulfill the purpose of the page, but not much more.

    SEO for Product or Photo Galleries

    For pages that are highly image-centric by design (e.g., photo galleries, visual arts pages, e-commerce product pages, etc.), there may be things like image gallery widgets or plugins, sliders, lightbox overlays, and other image display elements involved.

    In addition to single image-specific SEO tips (my focus for this post), elements like image galleries may have other image SEO considerations and optimization settings to understand.

    These are outside the scope of this post, but I would definitely recommend mastering any special SEO settings that these elements may offer. They could make a huge positive difference in page load times and user satisfaction with image-heavy pages.

    Tip: You may also find that adding more descriptive text to your gallery pages provides a nice SEO boost. Intro paragraphs, summary text, and individual image captions are usually worth the extra SEO effort for image-centric or gallery pages.

    Name Image Files for SEO Boost

    When images come out of a camera or a stock image repository, they won’t have filenames that are helpful for your SEO purposes.

    For example, the files from my DSLR are named something like this: IMGP1954.dng (a large RAW file format).

    Images from my smartphone camera look like: 20221001_173521.jpg (the common jpeg file format).

    And images straight from Deposit Photos (a stock image resource I use) are something like Depositphotos_12345678_XL.jpg.

    Since the image filename can help Google and other search engines understand the subject and context of the image, it makes good sense to copy and rename the original image files to something with targeted SEO value.

    For example, instead of ‘20221001_123456.jpg’ for your blue dog collar product photo, copy and then rename it to something like ‘dog-collar-blue-fabric.jpg’ for an SEO boost.

    Also, use dashes, not underscores, as word separators in your image filenames.

    WordPress tip: Make image filename changes like this before you upload the image to your WP media library.

    Add Image ‘Alt Text’ and Captions for Users and SEO

    Adding Image Alt Text

    Image ‘alt text’ is used by screen readers for visually-impaired users, and also as a replacement descriptor if the actual image can’t be loaded for some reason.

    Google crawlers see your image alt text as well, so it’s also a good place to consider adding a few target keywords for SEO purposes, as long as you don’t overstuff the alt text with keywords.

    For example, an image of a blue stretchy fabric dog collar might have alt text something like ‘blue-dog-collar-with-stretch-fabric’, using hyphens as word separators.

    For each image, I try to add alt text that complements my image file name. I think it’s probably helpful to have some variation here, while still supporting the target keyphrase/topic of the page.

    Adding Image Captions

    Image captions are the small portions of text immediately below the image (see examples in this post). The caption text typically briefly describes what the image is about, or adds some other important context or explanation.

    Since Google and other search engines look at image captions to help understand the image content and context, it makes sense to take advantage of these text elements for potential SEO benefits.

    I typically try to incorporate a few target keywords and close variants in a natural way in image captions. I want readers to benefit from the caption content, but I also want to leverage image captions for SEO.

    Size and Resize Images Correctly

    Original images from modern digital cameras or stock photo agencies are generally way too big for immediate use on a web page or blog.

    For example, my 36 megapixel DSLR produces images that have a native resolution of 7360 * 4912 pixels.

    My 12 MP smartphone camera has a native output of 4032 * 3024 pixels.

    And the ‘XL’ images from Deposit Photos can easily be over 4000 pixels per side (height or width).

    However, the maximum image width I use on this blog is only 600 pixels!

    So, I always need to resize original or stock images before I use them on this or other websites.

    There are countless tools available for resizing photos. I typically use the resizing option built into the Windows photos app. This works great for JPEG photos, PNG format screenshots, etc.

    Generally, you’ll want to keep the image aspect ratio the same when resizing photos. Also, be sure to keep any jpeg compression quality settings reasonably high — usually, 85 or 90 is fine for maintaining good visual quality.

    Compress Images Properly

    Just as original images are generally way too big in terms of pixel dimensions, they are also way too large in terms of kilobyte or megabyte sizes.

    This is where good image compression comes into play for SEO purposes.

    image optimization compression process
    Good image compression takes ‘heavy’ image files and reduces their file size while preserving visual quality. The result is faster page load speeds (and therefore better SEO) without negative user impact.

    Properly compressed images retain high visual quality at greatly reduced file sizes. That keeps users happy and also makes your web pages smaller and faster to load.

    I try to both resize and compress my website images before uploading them to my site (the WordPress media library in my case).

    For image compression duties, I use ShortPixel and sometimes the open-source Squoosh app from Google Chrome Labs.

    shortpixel logo image compression and optimization
    ShortPixel is my go-to tool for image compression.

    ShortPixel can be used by itself for single or bulk image optimization, or as a WordPress plugin for compressing images already in the Media Library. I use both options.

    I get great compression ratios from ShortPixel — often 70% or more — with almost no discernible loss of image quality. They also support converting images to next-gen formats like AVIF and WebP. See more on image formats below.

    I also really like their ‘glossy’ compression option, which aims for higher image quality when you really need it, while still getting good file size reduction. ShortPixel’s glossy mode is also helpful for images with embedded text (like screenshots), where you want the screen text to be more legible.

    WordPress users have many other good image compression options as well.

    Smush, TinyPNG, EWWW Image Optimizer, and Imagify are other popular options for WordPress image optimization.

    Use Efficient Image Formats

    Image compression algorithms keep getting better, leading to new file types with better compression ratios and excellent visual quality.

    Here’s a quick rundown on common image formats and their typical uses:

    Most Common Image Formats

    GIF — A compact image format that only supports 256 colors. Widely used for simple web graphics. Can be animated (e.g., the ‘animated gifs’ or simple motion images you see on various websites and social media). Supports transparent pixels for things like transparent backgrounds.

    JPEG — A very common image format based on ‘lossy’ compression. Good for photographs (color or grayscale) and other images where some loss of image quality is acceptable in exchange for good file compression. By far the most common image format for digital photos. Note: May use either .jpg or .jpeg file extensions.

    jpeg image format acronym
    JPEG images are very common on websites but can present SEO issues (and opportunities) when under-optimized.

    PNG — A lossless image format that supports up to 16 million colors. Good for taking screenshots and for other web-based images. Can still be compressed with tools like ShortPixel. Also supports pixel transparency.

    Newer, Next-Gen Image Formats

    AVIF — A newer royalty-free image format that takes advantage of modern compression algorithms. AVIF files can be up to 50% smaller than JPEG, while still retaining good image quality.

    JPEG XL — More advanced than standard JPEG, JPEG XL supports both lossless and lossy compression, reversible recompression of existing JPEG files, and high-precision HDR.

    SVG — A vector format (vs raster) that supports resizing without loss of quality. Also supports scripting for things like interactive web pages and web apps.

    WebP — Designed by Google, WebP is intended to eventually replace JPEG, PNG, and GIF formats. The WebP format provides ~ 30% better compression than JPEG, at the same image quality. It supports lossless and lossy compression, transparency, and animation.

    webp images have seo benefits
    WebP is a popular next-gen image format that is supported by most modern browsers.

    JPEG, GIF, and PNG images are universally supported by web browsers. AVIF and WebP files have more capabilities and better performance but have legacy browser support limitations.

    For much more detail about various raster and vector image formats, see this Wikipedia page. The sheer number of image formats, and the technical details behind them, are impressive indeed!

    However, for website image optimization and SEO purposes, you’ll most likely only need to understand a few of the legacy and next-gen formats.

    Also, see these resources from the Google Developers site:

    SEO for Smartphone Images

    As I mentioned above, today’s smartphone cameras produce great images that can be easily incorporated into website content.

    smartphone photography
    Smartphone cameras are great for creating high-quality image content. Just be sure to follow a few smart image SEO techniques before adding them to your site.

    The problem is that images ‘straight out of the phone’ are too large in both pixel dimensions and file sizes, and the file naming conventions are clunky.

    So, just remember to be SEO-smart when dealing with smartphone images for website content.

    Before rushing to upload them as-is into a website CMS (such as the WordPress media library), take a few minutes to follow my guidance above regarding renaming image files to something SEO-useful, resizing the pixel dimensions (height * width), and compressing the images for smaller file sizes and faster page load times.

    Review Your CMS’ Media Library for Obvious Image-Related Problems

    This is something I learned after working with WordPress for a while and getting a feel for proper WordPress image optimization.

    You can get a good initial sense of your website’s degree of image optimization just by reviewing some of the image content in your media library (using WordPress as an example).

    Main image SEO problems in WordPress include:

    • Do your image filenames in WordPress look descriptive and keyword-optimized?
    • Are your images obviously way too large (pixel dimensions and/or file sizes)?
    • Are your images missing optimized metadata (such as alt text and titles)?

    See this example data from an unoptimized image in WordPress:

    wordpress image media details
    Typical post-import image details from the WordPress media library.

    Notice above that the image filename, file size, image dimensions (pixels), and alt text are all unoptimized for SEO purposes.

    In this case, WordPress automatically down-scaled my original smartphone photo upon import. Even so, the size is still too large for my needs. It’s much better to handle these SEO issues before uploading images to your CMS.

    By simply reviewing images in your media library and looking for these details, you’ll quickly get a sense of potential image SEO problems and optimization opportunities.

    Use Good Image SEO Plugins (WordPress, etc.)

    For WordPress and other popular website CMS platforms, there are countless free and paid plugins available for different aspects of image SEO.

    I mentioned several of the good image compression plugins for WordPress above.

    I use and recommend ShortPixel as a streamlined approach to image compression for my WordPress images. I use the plugin as well as their web interface for manual compression of images before uploading to WordPress.

    Many of the SEO-centric plugins, such as Yoast, All in One SEO (AIOSEO), and RankMath have modules or features that help identify and correct image SEO problems.

    For example, in its on-page SEO analysis in WordPress, Yoast will tell you if your image alt text is missing target keywords (‘image keyphrase’ analysis), or if you’re missing images altogether in your content.

    Other plugins, such as those for the Lazy Loading of images (see below), are also great for image SEO.

    Use Lazy Loading for Images (and Video)

    For page speed improvements, it’s good practice to defer loading images and embedded video content until the user has scrolled to those points on the page.

    To do this, make sure that your site uses ‘lazy loading’ for image and video content.

    Lazy loading is now the default behavior for WordPress (with some conditions).

    You can also set up lazy loading in various caching/optimization plugins (e.g., the SiteGround Optimizer or WP Rocket), or as a CDN option such as Cloudflare.

    Related: Speaking of SiteGround, see my post here about using SiteGround for WordPress hosting. They have many features that help boost image SEO.

    Use a CDN and/or Image CDN

    CDN = Content Delivery Network

    It’s great for SEO to have your images optimized on the ‘origin server’ at your website hosting firm, as I covered in some sections above.

    It’s even better to have a content delivery network (CDN) for faster delivery of your site’s pages and posts to viewers around the world.

    If your content has a geographically dispersed target audience (e.g., multi-national or even global), and especially if you have lots of static image content, then a CDN will make good sense for you.

    You can go with Cloudflare (free or paid), or one of the other popular paid CDN options out there.

    For websites (like mine) hosted on SiteGround, we also now have the highly integrated SiteGround CDN option at both free and paid levels.

    Image CDNs

    A subset of the overall CDN category, ‘image CDNs’ are designed to deliver optimized images ‘on-the-fly’ to your website visitors.

    They can deliver faster/smaller WebP or AVIF format images to supported browsers, and size the images properly for the browser’s viewport (desktop, smartphone, etc.).

    Examples of image-specific CDNs include Optimole and ShortPixel Adaptive Images (SPAI) via a WordPress plugin.

    Use Pagespeed Testers to Spot Image SEO Issues

    Page-level speed testing tools are great for detecting image optimization problems.

    There are several good speed testing tools available. Two that I use frequently are GTmetrix and Google’s own PageSpeed Insights (PSI) tool. They are both very useful.

    GTmetrix and Image Content

    For image SEO considerations, GTmetrix provides image-specific tips within its overall page analysis, a summary of the overall image content load on the page, a waterfall timing view, and the ability to review only image-specific data.

    gtmetrix image content size
    Example page-level breakdown and load time from GTmetrix.

    The GTmetrix example test result above is from an image gallery page on my travel photography website.

    I see that I can further reduce the image sizes on this page, which in turn should bring the load time below 4 seconds. Adding a CDN and optimizing Javascript are other good moves for boosting the page speed here.

    With some optimization work, I can probably boost the GTmetrix grade from a ‘B’ (below) into the ‘A’ range, mostly via improvements in the ‘performance’ category.

    gtmetrix grade web vitals
    The GTmetrix summary includes an overall grade as well as web vitals metrics. These are impacted by image optimization factors.

    PageSpeed Insights Image Analysis Areas

    Google’s PSI tool is great for viewing mobile vs desktop pagespeed performance, plus Google’s core web vitals’ metrics such as largest contentful paint (LCP) and cumulative layout shift (CLS), which can be greatly impacted by image content.

    Specific to image content, PageSpeed Insights includes the following analysis areas:

    • Largest Contentful Paint (LCP) element — often a large image like a header or ‘hero’ image. Preload LCP images if possible to reduce LCP timing. Also, do not lazy-load LCP images that are ‘above the fold’.
    • Properly sized images — e.g., proper sizes pulled directly from the WordPress media library
    • Defer offscreen images (use lazy loading)
    • Efficient image encoding and using next-gen image formats where appropriate
    • Images have explicit width and height settings (for reducing layout shifts and CLS)
    • Image elements have [alt] attributes (‘alt text’)
    • Displays images with correct aspect ratios and appropriate resolution
    • Use video formats for animated image content (avoid large GIFs)

    Audit Older Content for Image SEO Issues

    If you’re new to the topic and workflow of image optimization for SEO, or if you’re working with an SEO client who is new to this area, you’ll definitely want to review older existing content for all of the problem areas I discussed above.

    For WordPress users or other CMS platforms with ‘media library’ or image library areas, simply reviewing the content contained in these libraries will tell you a lot.

    Doing some targeted speed testing of several important pages or posts will also provide clues about possible site-wide image optimization issues.

    Also, doing page-level or site-wide technical SEO audits should help surface image SEO problem areas such as overly large image file sizes, missing alt text, etc.

    I use SEO PowerSuite’s WebSite Auditor application for this purpose. It does a thorough job of site-wide SEO audits as well as page-specific audits and analysis.

    See these posts for more about good SEO audit tools and affordable SEO tools that cover a wide range of SEO tasks.

    seo powersuite website auditor
    SEO PowerSuite’s WebSite Auditor application handles site-wide and page-specific content audits, including image-related SEO issues.
    seo powersuite free software trial
    SEO PowerSuite handles all major aspects of SEO. A free version is available and is not a time-limited trial. It’s good for getting to know all the tools included.

    Your Image SEO Workflow — Refine and Practice

    Find an Image SEO Process That Works for You

    As you can see from the discussion above, improving your website’s image SEO requires understanding and applying some of the basics of image optimization.

    It’s good to develop a straightforward image SEO process or workflow that you can really internalize and easily replicate. It should become ‘second nature’ to take these steps as you develop new content, or audit and fix older pages and posts.

    The exact process I follow may or may not be exactly right for you. I recommend developing and refining your own image SEO workflow to find something that’s both effective and easily repeatable.

    Like most things in life, the more you practice a good image SEO workflow, the easier it gets!

    Image SEO Tips & Tools — Closing Thoughts

    Optimizing Website Images Is Getting Easier

    The good news is this: optimizing your website image content for both users and search engines keeps getting better and easier.

    Next-gen image formats like WebP and AVIF deliver much smaller file sizes and capabilities while retaining great visual quality.

    New and better online services for image compression, various CMS plugins for SEO, image CDNs, page speed testers, and other tools are all available in both free and paid versions to help us get the most SEO value from image content while keeping users happy as well.

    The basics of good image SEO are not that hard to master. The real trick is to build an effective image optimization workflow and environment that works for your website(s) and budget, and then practice and refine it consistently.

    Questions or Comments?

    I hope these insights and tips about image SEO have been useful to you. Here are a few related questions to consider:

    • How do you optimize your website images today? Do you have a good repeatable process in place, or is it a bit random and inconsistent?
    • Have you audited your older website content for image SEO issues?
    • What other image SEO tools have you found to be particularly helpful?

    Feel free to add more in the comments below with any thoughts, feedback, or related questions. Thanks also for any social shares on this post via the buttons below!

    Leave a Comment

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Share
    Tweet
    Share
    Pin