How do I add photos to a blog post without breaking the layout?
Resizing before upload
Large camera files slow pages and can push text around in unexpected ways. Resize images to a width that suits your layout, then compress them so pages load quickly. Use descriptive file names and add alt text for accessibility. Keep original files in a separate folder so you can re-export them later.
Consistent image sizes keep the post tidy. If your theme has a featured image size, match your cover images to it.
Placing images in the editor
Use the image block rather than pasting pictures in as raw HTML. Choose full width, wide, or inline options depending on the design. Avoid stacking empty spacer blocks, since they often break on other screens.
- Use the built-in image block
- Set alignment in the block settings
- Add alt text for every image
- Preview the post on a phone
Checking the layout after publishing
Open the post on desktop and mobile, then check the spacing around each image. Look for stretched or cropped pictures that the theme may have changed. Fix problems through the block settings rather than one-off styling. A quick scroll on both devices catches most issues in under a minute.
Common mistakes
- Uploading full-resolution camera files that slow the page and push text out of place.
- Adding custom code to fix spacing on one post, which can break other pages later.
