To add an image to a WordPress post, open the post in your editor, click the + button where you want the image to sit, choose the Image block, then upload from your computer or pick from your media library. That covers the basic mechanics.
The Two Types of Images in WordPress
Every WordPress post uses two image roles, and they behave differently.
Content images are the ones embedded inside the body of your post. They illustrate a point, break up text, or show a screenshot. You can add as many as you need.
The featured image is a single image attached to the whole post. It appears as the thumbnail in blog listings, often shows at the top of the published post, and is the image pulled in when someone shares your post on Facebook, LinkedIn or X.
How to Add a Content Image in Gutenberg
Gutenberg is the default WordPress block editor. If your site is on a recent version of WordPress and you’re not running Elementor or Classic Editor, this is what you’re using.
- Open the post. Log into your WordPress dashboard. Go to Posts in the left menu. Either click Add New to start a fresh post or click the title of an existing post to edit it.
- Insert the image block. Place your cursor where you want the image to sit. Click the + button (the block inserter). Search for or select Image.
- Choose your image source. You have three options. Upload a new file from your computer, pick something already in your Media Library, or insert from URL if the image is hosted elsewhere. Most of the time, you’ll be uploading or selecting from the library.
- Add alt text. In the right-hand sidebar with the image selected, you’ll see an Alt text field. Write a short, accurate description of what’s in the image, in one clear sentence. This is the step most people skip.
- Set size and alignment. Use the block toolbar above the image or the right-hand sidebar to choose alignment (left, centre, right, wide, full) and a display size. Wide and full-width images look striking but cost performance if the file is heavy.
- Save or publish. Hit Save draft if you’re not done. Hit Update or Publish when you are.
How to Add a Content Image in Elementor
Elementor is a popular page builder that replaces the standard editor with a drag-and-drop interface. The steps differ but the principles are the same.
- Open the post in Elementor. From your WordPress dashboard, go to Posts and select the one you want to edit. Click Edit with Elementor.
- Drag in an image widget. In the left panel, find the Image widget. Drag it into the section of the page where you want the image. Drop it.
- Choose the image. With the widget selected, click the image placeholder in the Content tab. Upload a new file, choose one from your Media Library, or insert by URL.
- Configure size, alignment and caption. In the widget settings, pick an image size (thumbnail, medium, large, full) or set custom dimensions. Set alignment, add a caption if needed, and apply any hover effects in the Style tab.
- Add alt text. Elementor pulls alt text from the underlying media file, not the widget. Click the image on the page to open the widget’s settings in the left panel, then click the image thumbnail in that panel to open the Insert Media dialogue. With your image selected, edit the Alt Text field on the right of the dialogue. You can also edit it any time from Media → Library.
- Update the page. Click the green Update button at the bottom of the Elementor panel.
How to Set a Featured Image
The featured image is the one that represents the whole post. It’s separate from anything you embed in the body.
In Gutenberg. With your post open, look at the right-hand sidebar. Under the Post tab, find Featured image. Click Set featured image, then upload or choose from your library. Click Set featured image to confirm. Publish or update the post.
In Elementor. You can set the featured image from inside Elementor without leaving the editor. With the post open in Elementor, look for the Post Settings icon on the left panel. Click it. The Settings panel opens. Find the Featured Image section, click the image area, and upload or choose from your media library. Click Update to save. You can also just exit the Elementor Editor to the Editor Screen and follow the same steps for Gutenberg.
Once set, the featured image will appear in your blog listings, on category and tag pages, and as the preview image when someone shares your post.
Image SEO: What Actually Matters
A WordPress image isn’t just a visual. Search engines read it. Slow images drag your page speed down. Missing alt text hurts both accessibility and ranking. Here’s what to get right.
Write Useful Alt Text
Alt text is a short description of the image, stored in the HTML, read by screen readers and crawled by search engines. It works by giving non-visual context to anyone (or anything) that can’t see the image directly.
Good alt text is specific and natural. “Woman holding a laptop on a beach” is fine. “Best laptop for travel 2026 buy now” is keyword stuffing, and Google ignores it. If the image is purely decorative, like a divider or a background flourish, leave the alt text empty rather than padding it with junk.
Compress Before You Upload
Large image files are the single biggest cause of slow WordPress pages. A 4MB photo straight off a phone has no business sitting in a blog post. Compress before uploading. Tools like TinyPNG, Squoosh, or ShortPixel can shrink a file by 60 to 80 per cent with no visible quality loss.
A reasonable target is under 200KB per image for most blog content. Hero images can go higher if needed, but rarely above 500KB.
Pick the Right Format
Three formats cover almost every case.
Use JPEG for photographs and anything with rich colour gradients, since the files are smaller but won’t hold transparency.
For screenshots, logos, and anything that needs a transparent background, use PNG. The files will be larger in exchange for sharper detail on flat graphics.
Use WebP for almost everything else. According to Google’s web.dev documentation, WebP files are typically 25 to 35 per cent smaller than equivalent JPEGs at the same quality, and every major browser supports it.
If your WordPress site supports WebP (most modern hosts do, and plugins like ShortPixel or Imagify can auto-convert on upload), use it as the default.
Size the Image to Its Display
Uploading a 4000px-wide image to display at 600px is wasteful. The browser downloads the whole file, then shrinks it. Resize before upload to roughly the dimensions it will display at, plus a buffer for retina screens (so a 600px display image is fine at 1200px wide).
Use Descriptive File Names
photo-1234.jpg tells Google nothing. red-leather-armchair-living-room.jpg does. Rename your files before upload. Hyphens between words, lowercase, no spaces.
Why Does Image Optimisation Affect SEO?
Image optimisation affects SEO because page speed is a ranking factor, and images are usually the heaviest thing on a page. Google’s Core Web Vitals, specifically Largest Contentful Paint (LCP), measure how quickly the main content of a page loads. According to Google’s Core Web Vitals documentation, a good LCP score is under 2.5 seconds. Heavy, uncompressed images are the most common reason sites fail this threshold.
Alt text adds a second layer. It helps Google understand what an image shows, which can earn you traffic from Google Images and improve the topical relevance of the page. It also makes your site usable for screen-reader users, which is both an accessibility requirement and a signal of site quality.
The combined effect is simple. Optimised images load faster, rank better, and reach a wider audience.
Your images do more work than you think. They illustrate your point, shape what people share, and affect your page loads. Get the upload right, write the alt text, compress the file. The rest follows.
Talk to us about your website.
