By |

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

Inserting images is something you do every day, which makes ten seconds per insertion worth caring about. Here is how the block editor handles it, organized by entry point.

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. Which one you pick changes what happens later.

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 is already on the site. If you use the same image across several posts, selecting from the library avoids accumulating duplicate copies of the same file.

3. Insert from URL

Point directly at an external image URL. It is quick, but nothing is stored on your site — if the source disappears, so does your image. It also consumes someone else's bandwidth, so do not 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" is not 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 does not 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 does not display — file permissions, mixed http/https URLs, or caching are the usual suspects
  • You cannot change the image size — theme CSS is likely overriding it. See why you cannot change image size in WordPress
  • It is 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 is 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 uploads/month).

See SnapPress

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