By |

How to Add Images in WordPress: The Complete Block Editor Guide

You'll do this every day, and ten seconds per insertion adds up. The block editor offers three entry points — upload, Media Library, URL — and which one you pick changes what happens later.

The fastest method up front: type /image on an empty line and press Enter. That beats opening the block inserter every time. If the file is on your computer, drag it straight into the editor body — upload and insertion happen together.

The three entry points of the image block

Drop an image block and you get three choices.

1. Upload

Pick a file from your computer or phone. It also lands in the Media Library, so you can reuse it in other posts. This is the default path for most people.

2. Media Library

Choose from what's already on the site. If you use the same image across several posts, selecting from the library avoids accumulating duplicate copies.

3. Insert from URL

Point directly at an external image URL. It's quick, but nothing is stored on your site — if the source disappears, so does your image. It also consumes someone else's bandwidth, so don't do this to other people's sites. Reserve it for images on a domain or CDN you control.

Blocks other than the image block

Block Purpose Use when
Image One image in the flow of text Default. Start here
Gallery Multiple images in a grid Showing a set of photos together
Cover Image as background with text over it Section headers, hero areas
Media & Text Image and text side by side Product descriptions, bios
Columns + Image Arbitrary number of images in a row Side-by-side with independent sizing

Side-by-side layouts have several viable approaches, compared in how to put images side by side in WordPress.

What to set after inserting

Alt text

In the right sidebar, describe what the image shows in a short sentence. This is the only description a screen reader can announce, the fallback text if the image fails to load, and a signal search engines use to understand the image.

"photo1" or "IMG_2938" isn't alt text. Describe the content. Purely decorative images can be left empty deliberately.

Alignment

None, left, center, right, wide, or full. Wide and Full only work correctly on themes that declare wide alignment support — on themes without it you get overflow. If the layout breaks, set alignment back to None first to isolate the cause.

Size

Thumbnail, medium, large, full size, or a custom pixel value. WordPress generates several sizes at upload time, so picking one that matches the display slot cuts transfer weight. Loading a 1600px file into a 400px slot is a genuinely common mistake.

Link destination

None, media file, attachment page, or custom URL. For click-to-enlarge, choose Media File and pair it with your theme's or a plugin's lightbox. The default is None, so if clicking does nothing, this is the setting to check.

The classic editor

  1. Click "Add Media" above the editor
  2. Choose the "Upload Files" or "Media Library" tab
  3. Set alignment, link destination, and size under "Attachment Display Settings" on the right
  4. Click "Insert into post"

In the classic editor, the alignment and size you choose are written directly into the HTML. Changing them later means editing markup in the Text tab, so it pays to decide before inserting.

When it doesn't work

  • The upload itself fails — HEIC format, file size limits, PHP memory, permissions. The diagnostic path is in Cannot Upload Images to WordPress? 8 Causes and How to Fix Each One
  • Upload succeeds but the image doesn't display — file permissions, mixed http/https URLs, or caching are the usual suspects
  • You can't change the image size — theme CSS is likely overriding it. See why you can't change image size in WordPress
  • It's painful on mobile — the block editor runs in a mobile browser but the tap targets are small. Push photos to the Media Library first and just select them while writing

Handling posts with many images

For a post with ten or twenty images, uploading one at a time is the slow path. Split the work:

  1. Push every image into the Media Library first
  2. While writing, only select from the library

On desktop that first step is a folder drag. On a phone it's the hard part — sending multiple images through the standard admin screen is tedious. SnapPress sends up to 20 photos from an iPhone straight into the Media Library, which collapses that step into seconds. It makes a "write on desktop, shoot and upload on phone" split practical.

For organizing the library afterwards, see the WordPress Media Library guide. For making those images lighter, see WordPress image optimization.

Get the photos into your Media Library first

SnapPress sends up to 20 photos from your iPhone directly to the WordPress Media Library — about 10 seconds for 20 images, with HEIC conversion and resizing handled automatically. Then all you do while writing is pick them from the library. Free to start (10 photos/month).

Two steps to start: install the free "SnapPress Connect" plugin on WordPress, then install the iPhone app and pair them with a QR code.

About the author

Ken Furuta

Founder & CEO, 37Design

Founder & CEO of 37Design, a web and AI consultancy based in Tokyo, Japan. Built SnapPress to eliminate the pain of uploading dozens of iPhone photos to WordPress — one by one.

37design.co.jp