Image SEO for Blogs: File Names, Alt Text and Performance

Image SEO for blogs is the process of making visual content useful, accessible, discoverable, and efficient. It includes choosing the right image, using a descriptive filename, writing appropriate alternative text, placing the image near relevant content, serving responsive sizes, compressing the file, and preventing images from slowing or destabilizing the page.

Image optimization is not limited to Google Images. Blog images can appear in ordinary search results, Discover, visual search experiences, social previews, and page snippets. They also affect how quickly readers understand an article and how much data a mobile visitor must download.

This supporting guide explains file naming, alt text, captions, formats, dimensions, compression, responsive delivery, lazy loading, Largest Contentful Paint, image sitemaps, copyright, and a practical WordPress workflow. It supports the planned On-Page SEO for Blog Posts sub-pillar without replacing the wider content-optimization checklist.

Last reviewed: July 2026. Image formats, browser features, WordPress behavior, and Google Search documentation can change, so review current official guidance before major technical changes.

Quick Answer

Use images that directly support the article, save them with short descriptive filenames, and write alt text based on the image’s purpose in the surrounding content. Upload an appropriately sized compressed file, use WordPress responsive-image output, include width and height, keep important images accessible through standard HTML, and lazy-load only images that begin outside the initial viewport. Do not lazy-load the likely LCP or hero image. Test the final page on mobile, inspect the rendered HTML, and use PageSpeed Insights and Search Console to monitor performance and discovery.

Key Takeaways

• Choose images for reader value, not merely to fill space.
• Use short filenames that describe the visual subject.
• Alt text should communicate the image’s purpose and content to people who cannot see it.
• Decorative images normally need an empty alt attribute.
• Use standard <img> markup with a valid src fallback.
• WordPress generates several image sizes and commonly adds srcset and sizes.
• Serve a suitable image size rather than shrinking a huge file with CSS.
• Do not lazy-load the primary above-the-fold or LCP image.
• Set dimensions to reduce layout movement.
• Use only images you own or have permission to publish.

What Is Image SEO?

Direct answer: Image SEO is the work required to help readers, browsers, assistive technology, and search systems understand and efficiently load a website’s visual content.

Google’s current image guidance recommends using standard HTML image elements, providing useful context, using descriptive filenames and alt text, supporting responsive images, and balancing image quality with page speed. Google Search currently supports images referenced through the src attribute in BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF formats.

Review the official Google Images SEO best practices.

1. Choose an Image That Serves the Article

A useful visual should explain, demonstrate, compare, prove, or summarize something in the article.

Good blog-image uses

• A screenshot showing where to find a setting
• A diagram explaining a workflow
• A chart showing original data
• A comparison image showing visible differences
• A photograph documenting a real place, object, or process
• An infographic summarizing a long checklist
• A featured image representing the article topic clearly
• An annotated image pointing to important interface elements

Weak image uses

• Generic stock photos unrelated to the explanation
• Decorative images inserted after every few paragraphs
• Low-resolution screenshots with unreadable text
• Images containing unsupported statistics
• Misleading before-and-after visuals
• Copied images without permission or attribution
• AI-generated screenshots presented as real interfaces
• Text-heavy images used instead of accessible HTML text

When information can be presented clearly as real HTML text or a table, do not hide the only copy inside an image. Search systems and assistive technology can process surrounding HTML more reliably, and readers can resize, translate, copy, and search the text.

2. Write a Descriptive Image Filename

A filename gives search systems and media-library users a small amount of context. It should identify the visual subject without becoming a keyword list.

• Rename the file before uploading when practical.
• Use lowercase words.
• Separate words with hyphens.
• Describe the real subject.
• Keep the name reasonably short.
• Use the extension that matches the actual format.
• Avoid dates unless they help distinguish time-sensitive material.
• Avoid repeating the article keyword several times.

Changing the filename after an image is already used across the site can break URLs or require redirects and database updates. For established images, weigh the maintenance risk before renaming.

3. Write Useful Alt Text

Alternative text describes the image when it cannot be seen or loaded. Its first purpose is accessibility. The correct wording depends on why the image appears in that exact context.

Informative image

Describe the useful information communicated by the image.

Image: A WordPress panel showing the Alternative Text field.

Alt text: WordPress Media Library alternative text field

Functional linked image

Describe the action or destination when the image itself functions as a link.

Alt text: Open the complete image SEO checklist

Decorative image

Use an empty alt attribute when the image adds no information and would create noise for screen-reader users.

<img src="decorative-divider.svg" alt="">

Complex chart or diagram

Use concise alt text to identify the chart and provide the detailed explanation in nearby HTML text, a caption, a data table, or a longer accessible description.

Alt text: Monthly image-byte reduction after responsive-image optimization

Text inside an image

When the text is essential, include the meaningful wording in the alt text or nearby HTML. Do not force a screen reader to miss the only copy of an instruction, warning, or result.

Alt-text checklist

• Describe the image’s purpose in context.
• Be specific enough to distinguish the image.
• Keep it concise when a short description is sufficient.
• Include relevant wording naturally.
• Do not begin every description with “image of.”
• Do not copy the caption word for word when it adds no value.
• Do not stuff keywords.
• Do not leave informative images without alt text.
• Use empty alt text for genuinely decorative images.

WordPress allows editors to add alternative text through the Media Library and Image block settings. WordPress documentation describes alt text as information used for accessibility, including screen-reader support.

Review the official WordPress Image block documentation and Edit Media documentation.

4. Understand Alt Text, Caption, Title, and Description

These fields are not interchangeable. A caption can explain a statistic or identify the source. Alt text should communicate what a reader misses when the visual is unavailable. The WordPress media title does not replace alt text.

5. Place Images Near Relevant Text

Google uses surrounding text, captions, filenames, page titles, and other context to understand images. Place a screenshot beside the step it demonstrates and a chart beside the interpretation it supports.

• Introduce the visual before or immediately after it.
• Explain the important finding in HTML text.
• Use a caption when readers need a source, date, or clarification.
• Avoid placing an important image inside an unrelated section.
• Use descriptive headings around image groups.
• Do not rely on the filename and alt text to fix an irrelevant page context.

The landing page must also be accessible and useful. A perfectly named image on a thin, blocked, or irrelevant page is not a strong search result.

6. Choose an Appropriate Image Format

• Use JPEG, WebP, or AVIF for photographic content according to quality and compatibility needs.
• Use PNG when lossless detail or transparency is necessary.
• Use SVG for trusted vector graphics.
• Use video for long or complex animation instead of a very large GIF.
• Confirm the filename extension matches the actual file type.
• Test the image in the real WordPress and CDN pipeline.

Google’s web.dev guidance notes that efficiently encoding an image is particularly important when it may be the Largest Contentful Paint element. Review Choose the right image format.

7. Upload Suitable Dimensions

Do not upload a 6000-pixel photograph when the content column displays it at 800 pixels. The browser may download much more data than the layout can use.

• Find the maximum displayed width in the theme.
• Allow enough resolution for high-density screens when needed.
• Crop the image to the intended aspect ratio.
• Avoid enlarging a small image until it becomes blurry.
• Use a consistent featured-image ratio.
• Regenerate image sizes after changing theme dimensions when appropriate.

A practical featured-image recommendation for this BlogerHub content plan is 1600 × 900 pixels in WebP, provided the file is compressed and the theme serves smaller responsive variants where appropriate. This is an editorial convention, not a Google ranking requirement.

8. Use WordPress Responsive Images

WordPress normally creates several image sizes after upload and can add srcset and sizes attributes so the browser can select an appropriate resource for the layout and device.

<img
  src="guide-800.webp"
  srcset="guide-400.webp 400w,
          guide-800.webp 800w,
          guide-1600.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  width="800"
  height="450"
  alt="Blog image SEO workflow">

WordPress has supported native responsive-image markup since version 4.4. The browser uses the available candidates and the sizes information to choose a suitable file. Themes and plugins can add extra sizes or modify the generated markup.

Review the official WordPress responsive-images documentation.

Responsive-image checks

• Confirm the rendered img contains a normal src.
• Review srcset candidates.
• Check that the sizes value matches the real layout.
• Confirm mobile devices do not download an unnecessarily huge file.
• Check image-CDN rewrites.
• Test galleries, featured images, and page-builder output separately.
• Use the picture element when art direction or format fallback is necessary.

Google recommends retaining an img fallback with a src attribute when using picture or responsive sources. Google can find images in normal img src markup but does not index CSS background images in the same way.

9. Compress Images Without Destroying Quality

In an image SEO for blogs workflow, compression reduces transferred bytes. The appropriate setting depends on the image’s subject, dimensions, format, and expected display size.

• Resize before compression.
• Compare output visually at the intended display size.
• Remove unnecessary metadata when legally and editorially appropriate.
• Use stronger compression for photos than for text-heavy screenshots.
• Check gradients, faces, small text, and sharp edges for artifacts.
• Keep an original source file outside WordPress.
• Avoid repeatedly recompressing an already compressed file.

Do not chase the smallest possible byte count if the image becomes unreadable or misleading. Google’s image guidance emphasizes both speed and quality because clear images can be more useful in visual result thumbnails.

10. Include Width and Height

Width and height attributes allow the browser to calculate the image’s aspect ratio and reserve space before the file finishes loading. This helps reduce unexpected layout shifts.

<img
  src="image-seo-checklist.webp"
  width="1600"
  height="900"
  alt="Image SEO checklist for blogs">

• Preserve the correct aspect ratio.
• Do not use false dimensions to stretch the image.
• Check ads, embeds, captions, and responsive containers for movement.
• Test real pages through Core Web Vitals tools.

Cumulative Layout Shift is one of the current Core Web Vitals. Google recommends a CLS value below 0.1 for a good experience at the 75th percentile of page visits. Core Web Vitals support overall experience but do not guarantee rankings.

Review Google’s current Core Web Vitals documentation.

11. Use Lazy Loading Carefully

Lazy loading delays non-critical images until they approach the visible viewport. It can reduce initial data transfer and allow critical resources to load first.

<img
  src="below-the-fold-diagram.webp"
  loading="lazy"
  width="1200"
  height="675"
  alt="Responsive image loading diagram">

Good lazy-loading candidates

• Images far below the opening content
• Later gallery items
• Related-post thumbnails below the article
• Footer graphics
• Embedded media not visible during the initial load

Do not lazy-load the likely LCP image

The featured or hero image visible at page load may become the Largest Contentful Paint element. Lazy loading that image delays discovery and can harm LCP. Keep it discoverable in the initial HTML and consider fetchpriority="high" only when testing confirms it is a critical image.

<img
  src="hero-image-seo.webp"
  fetchpriority="high"
  width="1600"
  height="900"
  alt="Image SEO for blogs workflow">

Do not assign high priority to many images. Priority hints are contextual and must be tested rather than added site-wide without measurement.

Google’s lazy-loading guidance says relevant content must load when it becomes visible and should not require a user action such as clicking or manually scrolling for Google to access it. web.dev explicitly warns against lazy-loading the LCP image.

Review Google’s lazy-loaded content guidance and web.dev’s LCP optimization guide.

12. Optimize the LCP Image

The largest visible image near the top of an article can become the LCP element. A good LCP experience currently means 2.5 seconds or less for at least 75% of page visits.

• Keep the image discoverable in the initial HTML.
• Do not hide its URL in a JavaScript-only attribute.
• Do not lazy-load it.
• Serve an efficiently encoded file.
• Use an appropriate responsive size.
• Use the same origin when practical to avoid extra connection time.
• Preload CSS background LCP images only when testing supports it.
• Use fetchpriority="high" sparingly for a likely critical image.
• Check field data and page templates rather than one laboratory test alone.

Use PageSpeed Insights, Lighthouse, browser developer tools, and the Search Console Core Web Vitals report to identify whether images are part of a real template-level problem.

13. Help Search Engines Discover Images

• Use standard HTML img elements.
• Provide a valid src fallback.
• Keep landing pages accessible without login.
• Allow crawlers to access the image and required page resources.
• Avoid putting important content only in CSS background images.
• Keep image URLs stable.
• Use internal links to the page containing the image.
• Verify CDN domains in Search Console when practical.
• Use an image sitemap when images are otherwise difficult to discover.

An image sitemap can include image URLs that are not easy to discover through normal crawling. Google also allows image sitemap locations from a CDN or another domain, but verifying the CDN domain can make crawl problems easier to diagnose.

14. Prepare Images for Google Discover

Large, compelling, relevant images can support Discover presentation, but no image guarantees Discover traffic. The image should match the article honestly and remain useful outside a promotional context.

• Use a clear, high-quality featured image.
• Avoid logos as the primary article image.
• Avoid excessive text overlays.
• Do not use misleading or sensational imagery.
• Keep the image relevant to the article.
• Confirm mobile cropping retains the important subject.
• Use appropriate preview controls according to the site’s policy.
• Maintain strong page quality and transparent authorship.

BlogerHub already has a live Google Discover for New Blogs in Bangladesh guide covering broader Discover eligibility, headline, image, and monitoring considerations.

15. Review Copyright, Licensing, and Credits

• Use your own photographs, screenshots, charts, or illustrations when possible.
• Confirm the license before using stock or Creative Commons material.
• Follow attribution requirements exactly.
• Keep purchase receipts and license records.
• Do not assume an image is free because it appears in Google Images.
• Remove private information from screenshots.
• Get permission before publishing identifiable private individuals when required.
• Disclose material AI-generated or edited visuals when transparency requires it.

Google supports image license metadata that can provide creator, credit, and usage information in Google Images when implemented correctly. This metadata does not grant rights by itself; the publisher still needs a valid license.

Review Google’s image license metadata documentation.

WordPress Image SEO Workflow

Use this image SEO for blogs process for every important article image.

1. Define the image’s purpose in the content brief.
2. Create, capture, or license the visual.
3. Crop it to the intended aspect ratio.
4. Resize it near the largest required display size.
5. Choose a suitable format.
6. Compress and visually inspect the result.
7. Rename the file descriptively.
8. Upload it to the WordPress Media Library.
9. Add context-specific alt text.
10. Add a caption or credit when needed.
11. Select an appropriate WordPress image resolution.
12. Insert the image near relevant text.
13. Confirm width, height, srcset, and sizes.
14. Keep the likely LCP image eager and prioritize it only when justified.
15. Lazy-load images below the fold.
16. Test the live page on mobile and desktop.
17. Run a performance review.
18. Check the image after theme, plugin, or CDN changes.

Image Performance Audit

Useful Image SEO Tools

• WordPress Media Library: filenames, dimensions, alt text, captions, and file URLs
• Browser developer tools: rendered dimensions, selected source, network transfer, priority, and layout shifts
• PageSpeed Insights: field and laboratory performance diagnostics
• Lighthouse: image sizing, formats, and page-performance opportunities
• Search Console: Core Web Vitals, Page indexing, URL Inspection, and image-related performance queries where available
• Compression tools: format conversion and visual quality comparison
• Image editor: crop, resize, annotation, and metadata review
• Site crawler: missing alt text, large images, broken image URLs, and template patterns

Tools identify symptoms. They do not decide whether an image is useful, correctly licensed, accessible, or contextually appropriate.

Common Image SEO Mistakes

Complete Image SEO Checklist

• □ Image has a clear purpose
• □ Image is original or properly licensed
• □ Private information removed
• □ Appropriate aspect ratio selected
• □ File resized before upload
• □ Suitable format selected
• □ Image compressed and visually checked
• □ Filename is descriptive
• □ Filename uses lowercase and hyphens
• □ File extension matches the real format
• □ Context-specific alt text added
• □ Decorative image uses empty alt text
• □ Caption added when explanation or credit is needed
• □ Image placed near relevant text
• □ Important information repeated in accessible HTML
• □ Standard img markup used
• □ Valid src fallback exists
• □ Responsive srcset reviewed
• □ sizes matches the layout
• □ Width and height attributes present
• □ Mobile file size reviewed
• □ Below-the-fold image lazy-loaded
• □ Likely LCP image is not lazy-loaded
• □ Critical-image priority tested before use
• □ Image and page are crawlable
• □ CDN or cache output checked
• □ PageSpeed Insights reviewed
• □ Layout shifts checked
• □ Featured-image crop tested on mobile
• □ Image reviewed after theme or plugin changes

Frequently Asked Questions

What is image SEO for a blog?

It is the process of making blog images useful, accessible, discoverable, and fast through relevant visuals, filenames, alt text, context, formats, responsive sizes, compression, and performance testing.

Does the image filename affect SEO?

A descriptive filename provides limited context and improves media organization. It is useful but cannot compensate for an irrelevant image, weak page, or missing accessibility information.

Should every image contain the focus keyword in alt text?

No. Describe each image according to its actual purpose. Use the topic phrase only when it accurately belongs in the description.

How long should alt text be?

There is no universal length for every image. Use the shortest description that communicates the necessary content or function, and place complex explanations in nearby HTML.

Should decorative images have alt text?

They should normally use an empty alt attribute so assistive technology can skip them.

Is WebP always better than JPEG or PNG?

Not in every workflow. WebP often provides efficient compression, but the best choice depends on the image, transparency, quality needs, compatibility, editing process, and delivery system. Compare real output.

Should I use AVIF for blog images?

AVIF can provide strong compression, but test image quality, encoding workflow, theme support, CDN behavior, and fallbacks before adopting it site-wide.

Should the featured image be lazy-loaded?

Usually not when it is visible during the initial load and may become the LCP element. Below-the-fold images are better lazy-loading candidates.

Does WordPress create responsive images automatically?

WordPress commonly creates several image sizes and adds srcset and sizes markup. Themes, plugins, page builders, and custom code can change the final output, so inspect the live page.

Do optimized images guarantee Google Images traffic?

No. Optimization improves accessibility, discovery, context, and performance, but search visibility also depends on page usefulness, relevance, competition, technical access, and Google’s systems.

Conclusion

A dependable image SEO for blogs strategy begins with a visual that genuinely helps the reader. Give the file a descriptive name, write alt text according to its context, place it beside relevant content, and provide captions or credits when needed.

Then resize, compress, and serve the image through responsive markup with stable dimensions. Lazy-load non-critical images, but keep the likely LCP image discoverable and avoid delaying it. Test the actual WordPress output rather than assuming an optimization plugin handled every case.

Use the planned On-Page SEO for Blog Posts guide as the parent workflow. For wider site-building steps, visit the live Blogging Guide, and use the Google Discover guide when preparing large featured images for Discover.