Adding Alt Text in WordPress and Integrating Cloudinary for Image Optimization

When you’re building a WordPress site — whether it’s a personal blog, documentation hub, or a business page — optimizing your images makes all the difference in a great user experience, site performance, and accessibility. One of the most critical components of image accessibility is the alt attribute (often called “alt text”), which describes an image so that screen readers and search engines can better understand your content. But descriptive alt text is only part of the equation: you also need optimized, fast-loading images.

That’s where Cloudinary steps in. By integrating Cloudinary into your WordPress project, you can transform, optimize, and deliver images at scale — all while retaining the alt text that ensures inclusivity and SEO benefits.

In this guide, we’ll walk through a step-by-step process of:

• Explaining what alt text is and why it matters.
• Demonstrating how to add alt text in WordPress (both manually and via theme templates).
• Setting up the official Cloudinary plugin to serve images from a robust CDN.
• Testing our integration to confirm that alt text remains intact while images are optimized.
• Sharing best practices for combining alt text, accessibility, and performance.

Before following along, you’ll want to have:

1. A WordPress site already running (Local by WP Engine is a free WP server you can use for this guide).
2. A free Cloudinary account.
3. Administrator access to your WordPress site (so you can install and configure plugins).
4. Basic knowledge of what alt text is, and a general sense of WordPress theme structures or how to insert images into posts.
5. Some images ready to be uploaded (or you can use stock images to test).

Below is a high-level view of the structure we’ll be working with. Your WordPress installation might look like this (in a typical folder scenario):

Our main tasks include ensuring alt text is properly set in the Media Library, installing and configuring the Cloudinary plugin, and verifying that WordPress retains alt text when serving images from Cloudinary. Let’s dive in.

Alt text is short for alternative text, an attribute used in HTML <img> tags to describe what an image represents. For example:

<img src="path-to-your-image.jpg" alt="Golden retriever puppy playing with a tennis ball" />Code language: HTML, XML (xml)

This text is important for:

• Accessibility. Screen readers rely on alt text to describe images to visually impaired users.
• SEO. Search engines interpret alt text to understand an image’s context, potentially boosting your visibility.
• Fallback. If an image can’t load (due to network issues or a broken link), the alt text appears in its place.

• Using alt text like alt="" (empty) for images with essential content. This hides important context from screen-reader users.
• Repeating irrelevant keywords or stuffing the alt text with SEO terms. This can be detrimental to user experience.
• Writing “image of…” or “picture of…” repeatedly. Screen readers already identify images, so simply describe what’s in the image.

There are two main ways to set alt text in WordPress: through the Media Library interface and through your theme templates or page builders.

1. In your WordPress dashboard, select Media > Library.
2. If you haven’t already, click Add New to upload.

3. Click an image. You’ll see a field labeled “Alt Text”.

For a puppy image, a good alt text might be: “A golden retriever puppy chasing a tennis ball in the backyard”.

4. WordPress will now associate this alt text with the image.

Whenever you add that image to a post or page, WordPress typically includes the specified alt text in the <img> tag, unless a theme overrides it.

If you need to manually ensure alt text is pulled in theme files, you can use this snippet in, say, a single.php or a custom template:

<?php 

  $attachment_id = get_post_thumbnail_id(get_the_ID());

  $alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);

  $image_src = wp_get_attachment_image_src($attachment_id, 'large');

?>

<img 

  src="<?php echo esc_url($image_src[0]); ?>"

  alt="<?php echo esc_attr($alt_text); ?>"

  loading="lazy"

/>Code language: HTML, XML (xml)

In many cases, your theme will automatically do something similar. But if you notice missing alt text, double-check that this logic is included.

When images are stored in your WordPress uploads folder and loaded without optimization, your site can suffer from slower load times — especially on pages with many large images. Cloudinary solves this by:

• Delivering images through a global CDN, reducing latency.
• Transforming images on the fly (such as resizing, cropping, format conversion to WebP or AVIF), making them lighter and faster.
• Automating responsive images, ensuring visitors on different devices get appropriately sized media.

1. Go to Plugins > Add New in your dashboard.
2. Search for “Cloudinary” and confirm it’s the official one.
3. Click Install and Activate once the plugin is downloaded.

1. Log in to Cloudinary to find your cloud name, API key, and API secret.
2. Once activated, the plugin starts a setup wizard. Enter your credentials here or follow the plugin’s instructions.
3. You can choose to have all existing images synced or only newly uploaded ones.

If everything goes smoothly, your images in WordPress will now start serving from a URL like https://res.cloudinary.com/<your-cloud-name>/... rather than the default /wp-content/uploads/....

Go to any post or page with images. Open the browser’s Developer Tools (Network tab) and look for the image requests:

• You should see requests going to res.cloudinary.com.
• If they’re still going to /wp-content/uploads/, check that your plugin’s settings are enabled.

Hover or inspect the <img> elements:

<img 

  src="https://res.cloudinary.com/your-cloud-name/.../puppy.jpg" 

  alt="A golden retriever puppy chasing a tennis ball in the backyard"

/>Code language: HTML, XML (xml)

If your alt text is not showing up as expected, revisit the WordPress Media Library or your template to ensure the alt text is properly set.

The Cloudinary plugin typically does not override your alt text. It only modifies the src and sometimes srcset attributes to deliver optimized images.

To test thoroughly:

1. Go to Posts > Add New.
2. Choose the Media block (if using Gutenberg).
3. Pick an image from the library. Ideally, one you set alt text for.
4. On the frontend, open your browser’s dev tools again to confirm everything is served from Cloudinary with the correct alt text.

• Use descriptive alt text. Instead of “image1” or “puppy,” describe the image in context: “Golden retriever puppy playing with a tennis ball on lush green grass”.
• Avoid keyword stuffing. Focus on clarity and accuracy. If your post is about pet training, referencing it naturally in the alt text can help SEO, but forcing keywords is counterproductive.
• Decorative images. If an image is purely decorative, use alt="" to let screen readers skip it.

• Relevant file names. Even though WordPress can rename or store them in various folders, naming your local file something like golden-retriever-puppy.jpg can provide minor SEO benefits.
• Caption and title. In addition to alt text, WordPress also has fields for captions and image titles. Captions appear in the post, while the title is mostly internal. Use them wisely to add more context.
• Structured data (optional). For advanced SEO, you could wrap images with schema markup. This is more involved, but some SEO plugins offer built-in ways to do it.

• Lazy loading. By default, modern versions of WordPress enable loading="lazy" on images. If not, you can manually add it.
• Next-gen formats. Cloudinary can deliver images in WebP or AVIF format automatically if the visitor’s browser supports it.
• Dimension specifications. Always set width and height or use WordPress’s srcset features to avoid layout shifts (which Google measures as part of Core Web Vitals).

One of the best ways to confirm that your alt text is providing a good experience is to run accessibility checks.

First, run your content through a screen reader test. You can use a free tool like NVDA (Windows) or VoiceOver (Mac) to listen to your site. Make sure the alt text is read aloud properly and is contextually relevant.

An online validator tool like WAVE or Lighthouse in Chrome DevTools can also alert you if any images are missing alt attributes. Then, disable your images temporarily with a browser extension or a text-only browser like Lynx so you can see how your site appears without images. This is exactly how visually impaired users might perceive it.

When you follow these steps, you’ll wind up with a WordPress site that balances performance, accessibility, and SEO best practices — without needing to juggle separate workflows for your images.

As always, I’m excited to see what you build! If you run into any issues, consider checking out Documentation. And if you’re ready to learn more about how Cloudinary’s optimization and delivery can help you enhance site performance and accessibility, contact Cloudinary today.