Adding Pictures to a WordPress Blog Post
Uploading an image takes five seconds; uploading one that does not slow the post down takes about a minute more. The work that matters happens before the file reaches the media library.
Getting the picture into the post is trivial. Getting it in at the right dimensions, with the right format and with alt text, is what separates a post that loads instantly from one that does not. Images are usually the heaviest thing on a blog page, and WordPress will happily serve whatever you give it.
So the sequence is: prepare the file, then upload it, then check what the page actually loads.
Prepare the file first
- Resize before uploading. Crop and scale to about the widest the image will ever be shown. A full-width blog image rarely needs more than around 2000 pixels; an inline illustration needs far less.
- Choose the format by content. Photographs compress well as JPEG or WebP. Screenshots, diagrams and anything with flat colour and text stay sharp as PNG or WebP. Avoid uploading a screenshot as a JPEG — the text edges go fuzzy.
- Name the file properly.
harbour-at-dawn.jpgrather thanIMG_4471.jpg. The filename becomes part of the media URL permanently. - Strip what you do not need. Camera files carry location and device metadata. Decide deliberately whether that should be public.
Doing this once at the source is far more effective than any plugin applied afterwards. The full treatment is in optimising images in WordPress.
Add the image in the block editor
- Place the cursor where the image should go and open the block inserter.
- Choose the Image block.
- Upload a new file, pick one from the media library, or insert from a URL.
- With the image selected, open the block settings sidebar and write the alt text.
- Add a caption underneath if the image needs explaining.
- Set alignment and size using the toolbar and the sidebar's size controls.
A faster route: drag an image file from your desktop straight onto the spot in the editor where you want it. WordPress creates the Image block and uploads in one action. You can also paste an image from the clipboard, though pasted screenshots get machine-generated filenames, so rename them in the media library afterwards.
Blocks store their attributes as markup, so avoid editing image HTML by hand unless you know what the block expects — what a block is in WordPress covers why that matters.
Featured images and galleries
The featured image is set in the post sidebar, not in the content. It is what themes use in archive listings, related-post modules and social previews, and it is a separate image from anything in the body. Choose it at the aspect ratio your theme crops to; a portrait photo set as a featured image on a theme expecting landscape gets cropped through the middle.
For several images together, use the Gallery block rather than a stack of Image blocks. It handles the grid, keeps the images grouped for later editing, and gives visitors a consistent lightbox behaviour if your theme provides one.
Size, links and layout
Two settings quietly cause most image problems.
The first is the size dropdown in the Image block. WordPress generates several sizes on upload and this control picks which one is used. Choosing thumbnail for a wide slot produces exactly the fuzziness described in fixing blurry images in WordPress.
The second is what the image links to. By default it links to nothing. Linking every image to its own media file creates a set of near-empty attachment pages that offer visitors nothing and search engines less. Leave images unlinked unless the link does something useful.
Also make sure the image has explicit dimensions in the markup, which WordPress does automatically for uploaded files. This is what stops the text from jumping as pictures load, and it is the single most common cause of layout shift on a blog.
Check the result, not the editor
Publish, then open the post in a private browser window on a phone-sized screen. Look for three things: the image is sharp, the text does not jump while the page loads, and images below the fold are not being downloaded before you scroll to them. WordPress lazy-loads offscreen images by default; a plugin or theme can undo that.
If the image is not there at all, the causes are usually permissions, a stale cache or an image URL pointing at the wrong domain after a migration — WordPress images not showing works through them in order.
The habit worth forming
Resize before uploading, write alt text at the moment you insert the image, and never link an image to its attachment page. Those three habits, applied every time, do more for a blog's speed and accessibility than any optimisation plugin you can install later.
Frequently asked
- Resize to roughly the widest size the image will ever display at, which for a full-width blog image is usually somewhere around 1200 to 2000 pixels wide. Uploading a 6000-pixel camera file forces WordPress to generate every intermediate size from it and leaves an enormous original sitting in your uploads folder.
- Every image that carries meaning needs it. Purely decorative images should have an empty alt attribute so screen readers skip them rather than announcing a filename. Describe what the image shows and why it is there, not what the post is about.
- Usually because the uploaded file is narrower than the space the theme displays it in, so the browser scales it up. It can also be an over-aggressive optimisation plugin or a theme requesting a small generated size for a large slot.