How to Put Images on a WordPress Website

Direct answer: In the WordPress block editor, open a page or post, add an Image block, then choose Upload, Media Library, or Insert from URL. Set useful alt text, choose an appropriate size, and use Set featured image in the post settings when the image should represent the page or post.

1. Add an image to a page or post

1. Sign in to WordPress and open Pages or Posts.
2. Create a new item or edit an existing one.
3. Click the plus button to open the block inserter, search for Image, and select it. You can also type /image in an empty paragraph.
4. Choose how to provide the file:

Choice	Use it when	Important detail
Upload	The file is on your computer or phone.	WordPress uploads it and adds it to the Media Library.
Media Library	The image is already stored in WordPress.	Best for reusing an existing asset.
Insert from URL	You have permission to use an image hosted elsewhere.	The image can disappear if the original file is moved, deleted, or no longer shared. Use the toolbar option to upload a permitted copy to your Media Library.

After insertion, use the block toolbar and settings sidebar to choose alignment, dimensions, a resolution, and an optional caption. Available resolutions depend on the original upload and your theme.

2. Upload directly through the Media Library

Open Media > Library in the WordPress dashboard. Select Add New Media File (the label can vary by version) and upload one or multiple files. Images inserted into posts and pages are stored here, where you can search and reuse them.

Select an item to inspect its file name, MIME type, file size, dimensions, title, and alt text. The Edit Media screen can also set a caption and description, rotate, scale, or crop an image. Saving an edit from the Image block editor keeps the original available.

3. Write useful alt text

Alt text describes an informative image’s purpose for people who cannot see it and for situations where the image does not load. Describe the important subject or action in a short, specific phrase. Do not start with “image of” because assistive technology already identifies the element as an image.

<!-- The editor generates the equivalent of an image with meaningful alt text -->
<img src="team-dashboard.webp" alt="Support team reviewing the weekly ticket dashboard">

• Informative image: describe the information a reader needs.
• Decorative image: leave alt text empty or mark the image decorative when it adds no information.
• Text in an image: include that text in nearby page content or alt text when it is essential.

Alt text entered in an Image block applies to that page or post. Alt text saved in the Media Library supplies a default when the asset is inserted elsewhere, so review it in context every time.

4. Set a featured image

1. Open the post or page settings sidebar.
2. Find Featured image and choose Set featured image.
3. Select an existing Media Library item or upload a new file.
4. Confirm the selection, then save or publish the page.

The active theme controls where and how the Featured Image appears: it may be shown above the content, on archive cards, in social previews, or nowhere visible. A featured image is separate from an Image block in the article body, so add both when you need both placements.

5. Choose the right size and format

Upload a source large enough for its intended display, but do not insert the original full-resolution file by default. In the block settings, choose Medium or Large when those dimensions cover the rendered width. Keep width and height information so browsers can reserve space while the image loads.

Situation	Recommended choice
Small inline image	An intermediate size close to its displayed width.
Wide hero or featured image	A source wide enough for the largest layout and a theme-approved crop.
Screenshot containing fine text	Use enough resolution to keep text readable; test on a phone.
Transparent graphic	Use a format that preserves transparency and verify the theme background.

WordPress supports WebP and states in its Theme Handbook that WebP images are around 30% smaller on average than comparable JPEG or PNG files. Convert only when the result remains visually clear and your workflow preserves the original when needed.

6. How WordPress serves responsive images

WordPress generates intermediate sizes when images are uploaded. Since WordPress 4.4, eligible image markup includes srcset and sizes, allowing the browser to request a suitable file instead of always downloading the original.

<img
  src="photo-1024x683.webp"
  srcset="photo-320x213.webp 320w, photo-768x512.webp 768w, photo-1536x1024.webp 1536w"
  sizes="(max-width: 768px) 100vw, 768px"
  width="768"
  height="512"
  loading="lazy"
  alt="A cyclist riding beside a lake"
>

The exact markup is controlled by WordPress, the theme, and plugins. Avoid replacing responsive attributes with a hard-coded original URL unless you have a specific reason.

7. Improve loading on mobile

• Resize or crop the source before uploading when it is far larger than the layout.
• Select an intermediate editor size instead of Full Size when possible.
• Use WebP where it fits your browser and editing workflow.
• Keep width and height attributes so the layout does not jump.
• Let WordPress native lazy loading handle eligible below-the-fold images. WordPress 5.5 added loading="lazy" when the required dimensions are present.
• Do not lazy-load the primary above-the-fold image when your theme or performance tool provides explicit control. WordPress 6.3 added fetchpriority="high" to the image it identifies as likely to be the Largest Contentful Paint image; the core note reports typical LCP improvement of 5–10%.
• Check the page on a real mobile connection after changing image settings.

8. Add captions, links, and alignment

Use a caption when the source, context, copyright notice, or explanation helps readers. Use the block toolbar to align the image or link it to another page or the media file. A caption is visible content; it does not replace alt text.

9. Capture a WordPress page as an image

If you need a screenshot of a published WordPress page for documentation, QA, a social card, or a visual regression check, a browser automation script can load the page and save an image. A minimal Playwright example is:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'wordpress-page.png', fullPage: true });
await browser.close();

For production captures, wait for the content that matters, handle cookie consent, authenticate when required, and set a timeout. Full-page screenshots can be tall and memory intensive; capture a selector when you need one article card or image instead.

10. Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. Before capture it accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.

See the ScreenshotNeo API documentation for all options. Basic calls:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const body = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', body);

Options include full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, custom CSS and JavaScript, clicks, selector or network-idle waits, blocked ads and resources, headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, selectable cache TTLs, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, usage reporting, and PDF output.

An MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients. Plans include 1,000 free shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

11. Troubleshooting

Problem	Likely cause	Fix
The image is missing after inserting a URL.	The remote file moved, was deleted, or is no longer shared.	Upload a permitted copy to the Media Library.
Alt text is not visible in the editor.	You are viewing the image rather than its block settings.	Select the Image block and open its settings sidebar.
The featured image does not appear.	The active theme does not render featured images in that location.	Check theme settings or template behavior; keep the image set for archives and metadata where supported.
The image looks blurry.	An intermediate size is too small or the theme is enlarging it.	Choose a larger generated size or upload a suitable source.
The page shifts while images load.	Width and height information is missing.	Use WordPress-generated image markup and avoid removing dimensions.
Images are slow on phones.	Original files are oversized or an above-the-fold image is delayed.	Use an appropriate size, WebP where suitable, responsive markup, and correct lazy-loading priority.
A screenshot contains a cookie banner or popup.	The capture happened before consent handling or dismissal.	Automate the interaction and wait for the page state, or use ScreenshotNeo’s pre-capture cleanup.

12. Practical checklist

• ☐ Inserted the image with an Image block or Media Library.
• ☐ Confirmed you have permission to use the file.
• ☐ Added meaningful alt text, or marked it decorative.
• ☐ Chosen a displayed size close to the layout width.
• ☐ Set a Featured Image when the theme needs one.
• ☐ Checked mobile loading and visual quality.
• ☐ Kept captions separate from alt text.

FAQ

Where is the WordPress Media Library?

In the dashboard, open Media > Library. You can upload files there or reuse images already attached to posts and pages.

Can I add an image without uploading it?

Yes. The Image block supports Insert from URL, but the external owner can remove or move the file. Upload a permitted copy when you need dependable ownership.

Should every image have alt text?

Informative images need meaningful alt text. Purely decorative images should have empty alt text or be marked decorative.

Is a Featured Image the same as an image in the article?

No. A Featured Image is post or page metadata controlled by the theme. An Image block appears at the position where you insert it.

What is the safest way to screenshot a page for a build pipeline?

Use browser automation when you need custom interactions and control. Use ScreenshotNeo when you want an API response, cleanup of common consent and popup elements, billing only for clean captures, or MCP tools for an AI agent.