Best Practices for Adding Images to Your WordPress Website

(Updated for WordPress 6.8+, Gutenberg, and Kadence Blocks)

Images do so much more than make your website pretty — they capture attention, communicate your message visually, and help readers feel something before they ever read a word.

At MRM, we often remind our clients that great imagery is both a design choice and a strategy. With WordPress 6.8+ and the modern Gutenberg Block Editor (plus the flexibility of Kadence Blocks), it’s easier than ever to make your visuals shine. But how you upload, place, and optimize those images can make all the difference in your site’s performance, accessibility, and polish.

Whether you’re updating your blog, editing a landing page, or refreshing your home page layout, here’s our quick guide to image best practices in WordPress.

1. Resize and Optimize Before You Upload

Large image files are one of the most common culprits behind slow websites. During our monthly and quarterly site care, we often find ourselves spending valuable time optimizing images already stored in our clients’ databases—a process that’s less than ideal and doesn’t always reduce site bloat as effectively as we’d like.

Before adding an image, take a quick minute to:

• Resize it to the actual space it will fill (for example, 800 px wide for a blog content area).
• Compress it using a free tool like TinyPNG, ImageOptim, or a plugin such as ShortPixel or Imagify.
• Rename it with a descriptive, keyword-friendly filename. Example: MRM_Best_Practices_for_Images.jpg is so much better than IMG_1234.jpg or Canva’s default 1.png.
• Add alt text in the Media Library to give the image a title and caption, as well as a description for what’s happening in the image for accessibility and SEO purposes.

Think of this step as “decluttering” your website before guests arrive — clean, quick, and worth it every time.

2. Add Images the Smart (Best) Way, Using Gutenberg + Kadence Blocks

In WordPress 6.8+, the Block Editor is your default page and post editor, and the “Classic Editor” is mostly legacy. In addition to the default block options, if you’re using Kadence Blocks, you have even greater flexibility for layout, spacing and style.

To add an image:

1. Click the “+” icon in the top left of your editor.
2. Select the Image block.
3. Upload a new file or choose one from your Media Library.
4. Adjust alignment, link settings, and dimensions in the right-hand sidebar.

For more design control, Kadence Blocks offers an Advanced Image block that allows you to further fine-tune spacing, add overlays or hover effects, and create responsive layouts without touching code.

Pro Tip: Preview your page on mobile before publishing. What looks balanced on desktop can shift dramatically on smaller screens.

3. Link Intentionally

Uploading an image is one thing—linking it strategically is another. Not every image needs a link, but when done well, image links can improve navigation, engagement, and even SEO.

• Link related graphics to your post or product page instead of the media file itself.
• Use shortlinks or branded URLs where possible.
• Keep visitors on your site and stay more accessibility compliant by avoiding unnecessary “open in new tab” settings.
• For shareable graphics, ensure your alt text and captions read well when pulled into social previews.

A little link strategy goes a long way toward keeping readers engaged.

4. Maintain Visual Consistency

Consistency builds trust and helps your brand feel cohesive across every page, and consistency matters just as much as quality.

• Stick to your brand color palette when choosing or editing images. This ensures your images align with your brand and website design.
• Use a consistent filter or tone for all your photos.
• Maintain similar aspect ratios (e.g., all horizontal or all square) for uniformity, as much as possible.
• Choose authenticity over perfection. Original team or workspace photos often outperform polished or generic stock images.

Work smarter, not harder here too. Whether you collaborate with a team or not, create a brand kit, style and usage guide, and/or folder of curated images from sources like Unsplash, Pexels, Lightstock, or Canva.

5. Use Captions, Titles, and Alt Text Thoughtfully

These small details improve accessibility and SEO. These fields also impact how Google understands your content, and how the site is translated to any visitors who might live with a visual impairment.

• Alt text: Describe what the image communicates (e.g., “author leading workshop on creative strategy”) or where it belongs in your content.
• Title: Keep it short and keyword-aligned.
• Caption: Use when context or credit is needed, for images opening in a gallery or lightbox, or for shareable graphics for social media.

Tip: Write alt text as if describing the image to a friend over the phone or via text. Keep alt text under 125 characters and make it read naturally.

6. Choose the Right File Format

WordPress now supports more image formats, and choosing the right one helps your site stay fast and crisp. Different formats serve different purposes:

• JPEG: Best for photographs and detailed images.
• PNG: Ideal for transparent backgrounds or images needing sharp lines (like logos).
• WebP: Modern, smaller file size, and supported by all modern browsers. Several of the image optimization plugins will allow you to convert images to WebP files inside your media library.
• SVG (carefully!): Great for icons and logos, but only upload if you trust the source. SVGs can carry code.

Kadence Blocks handles all of these file types perfectly, so choose the format that fits your content or use case. Also, if you use Kadence’s image or icon blocks, you can often upload SVGs safely for vector-quality graphics.

7. Improve Performance with a CDN

A Content Delivery Network (CDN) stores your images on multiple servers worldwide, ensuring faster delivery to visitors everywhere. Most WordPress hosts now offer CDN options as part of their services, as do site care providers. We personally recommend a Cloudflare integration as a built-in solution for our hosting and site care plans.

Many CDNs now auto-convert images to WebP or AVIF formats for even greater performance.

8. Keep Accessibility in Mind

Beautiful websites and content should also be usable by everyone. Just like our mention above for alt text that helps all visitors navigate your site, intentionally choosing imagery that works for everyone ensures an accessibility-friendly site.

• Ensure strong contrast between images with text overlays, so the text is easily readable.
• Don’t rely on images alone to convey important information. Infographics are great downloadable or printable resources, but you should also include that critical information within your page or post text.
• Check your page with accessibility tools or browser extensions occasionally, especially for image-heavy layouts.

Kadence’s built-in accessibility features can help, but your best safeguard is always intentional design.

9. Use Featured Images Strategically

Your featured image sets the tone for every blog post and is typically used on your master blog page or your website home page, if you include post excerpts there. The featured image is also typically the thumbnail that appears in social shares, search results, and RSS feeds.

• Size it appropriately for social media platforms (at least 1200 × 630px).
• Add your logo or subtle overlay for brand recognition and consistency when your content is shared.
• Check your SEO plugin’s Open Graph and Twitter Card previews so each post’s featured image displays correctly when shared.

Create a Canva template for featured images that matches your blog style. This makes it super simple to maintain the same layout, typography, and logo placement every time, which also helps your content stand out in crowded social feeds.

10. Audit and Clean Up Your Media Library Regularly

Over time, websites can accumulate unused, duplicate, or outdated images. This can bog down your backups and use unnecessary storage or the host server.

• Use a plugin like Media Cleaner or WP-Optimize to identify old, unused files.
• Create a cloud or server backup before deleting anything!
• Remove large or irrelevant images at least once every year or so to keep your media library clean.

Treat your Media Library like a digital filing cabinet, or like your desk! If you can’t find what you need, it’s time to tidy up!

Here’s your quick image optimization checklist:

Before publishing a post or page, make sure every image:

Every image you upload is part of your message. By following these best practices, you’ll create a site that’s not only visually stunning but also fast, accessible, and search-friendly.

Let us know if you have any questions about these steps, or if you have others you recommend!