WordPress Basics: Adding Images to Posts and Pages

You’ve got some pages. You’ve got some posts. Now you need pictures.

Adding images in WordPress is pretty straightforward, whether your site uses the standard WordPress Block Editor, a theme builder or another editing system. The buttons may look a little different, but the basic process is the same.

Before You Upload an Image

Do yourself and your website a favor: don’t upload a gigantic image straight from your phone or camera.

Your website usually doesn’t need a 6,000-pixel-wide photograph weighing several megabytes. Oversized images waste storage, take longer to download and can make an otherwise perfectly good website feel sluggish.

Use an image that’s appropriately sized for where it’s going to appear. WordPress can generate different image sizes after upload, but starting with a reasonably sized, optimized image is still a good habit.

Wordpress and Images

Adding an Image in WordPress

If you’re using the standard WordPress editor, the basic process looks like this:

  1. Open the post or page you want to edit.
  2. Place the image where you want it to appear.
  3. Add an Image block, or use the media controls provided by your editor or page builder.
  4. Choose an existing image from the Media Library or upload a new one from your computer.
  5. Choose the appropriate image size and alignment.
  6. Add alternative text when appropriate.
  7. Save or update the page.

That’s basically it. But there are a few settings worth understanding.

Image Settings That Actually Matter

Alternative Text

Alt text describes the content or purpose of an image for people who can’t see it. It’s primarily an accessibility feature.

If the image contains useful information, describe that information clearly and concisely. If the image is purely decorative and contributes nothing to understanding the page, it may not need descriptive alt text.

Don’t cram keywords into it. Don’t write “image of” unless that information is actually useful. Describe what matters about the image in the context of the page.

For example:

Better: Blue Dozen Design website displayed on a laptop

Not better: Asheville web design WordPress website designer Asheville NC best website design

Humans first. Search engines are perfectly capable of surviving without the keyword soup.

Title

The WordPress Media Library also gives images a title. That’s useful for identifying the file inside WordPress, but the image title is not a substitute for good alt text and doesn’t need to be stuffed with search terms.

Give files sensible, descriptive names so you can find them again later.

Caption

A caption is visible text associated with an image.

Use one when it helps explain the image, identify a person or place, provide attribution or add information the reader actually needs. Otherwise, you don’t need one.

Image Size

WordPress commonly creates several versions of uploaded images, such as Thumbnail, Medium, Large and Full Size. Your theme may create additional sizes.

Choose a size that’s large enough for where the image appears without loading something dramatically larger than necessary.

For example, there’s usually no reason to load a 2,500-pixel-wide image into a little 300-pixel-wide sidebar.

Alignment

Depending on your theme or editor, you may be able to align images left, right or center, make them full width, or position them alongside other content.

Use whatever works with the page layout. Just remember to check the page on a phone afterward. An arrangement that looks lovely on a desktop can occasionally turn into interpretive dance on a small screen.

Links

An image can also be linked somewhere.

You might link it to another page, an external website or the original media file. But an image doesn’t automatically need to be clickable.

If clicking it doesn’t accomplish anything useful, leave it alone.

Editing an Image You’ve Already Added

If an image is already on the page, select it in your editor.

Depending on how your site is built, you’ll usually be able to change things such as:

  • Alt text
  • Caption
  • Alignment
  • Display size
  • Link behavior
  • Image style or presentation

You can also replace the image entirely if you’ve uploaded the wrong one.

Don’t Forget Mobile

After adding or changing an image, look at the actual page on the front end of your website.

Then make the browser narrower or check it on your phone.

Make sure the image isn’t enormous, blurry, awkwardly cropped, covering text or doing something else ridiculous.

The WordPress editor shows you how you’re building the page. The actual website shows you whether it worked.

A Few Good Image Habits

  • Use appropriately sized images.
  • Compress large photographs before uploading them.
  • Use descriptive file names instead of things like IMG_8472.jpg.
  • Write useful alt text when the image needs it.
  • Don’t use images just to cram additional keywords onto a page.
  • Don’t upload the same image five times because you forgot it was already in the Media Library.
  • Check important pages on both desktop and mobile after making changes.

Do those things and you’re already ahead of a remarkable percentage of the internet.

Need More WordPress Help?

We’ve put together a larger collection of practical WordPress instructions for people who have websites to run and other things to do with their lives.

Visit WordPress Help →

And if maintaining WordPress yourself has lost whatever charm it once possessed:

Website Maintenance →

Ready to Get Started?

Name(Required)

Please allow up to 24 hours for a response – and if you need something on the weekend… I don’t know, man. We REALLY like having weekends and may not respond until Monday.