Adding Images in WordPress
This tutorial shows how to upload an image to a self-hosted WordPress site, add the required details, and place that image in a post, page, featured-image area, or widget. When you finish, the file should appear in the Media Library and display on the front end at a usable size, with alternative text and a caption if those fields are needed.
Use this guide when you want to insert a specific picture into content. Use the separate WordPress Media Library tutorial when you need to search, crop, replace, bulk-manage, or delete files that are already stored on the site.
This page covers the WordPress.org software that you manage from /wp-admin. WordPress.com dashboards can add extra media sources and plan limits that are not part of a typical self-hosted install.
The screenshot shows the Classic Editor Add Media button. In the block editor, add an Image block instead. Flagged for replacement with a current block-editor screenshot; the original image path is unchanged.
What you need before you start
- A login with permission to upload files. Administrators, Editors, and Authors can upload media by default. Contributors can write posts but cannot upload images unless an Administrator changes that role. Review roles in the WordPress users tutorial.
- Access to the WordPress login screen and the WordPress Dashboard.
- An image file you have the right to publish. JPEG, PNG, GIF, and WebP are accepted on most current WordPress installs. AVIF works when the server image library supports it. SVG is not allowed by default.
- A draft or published post or page if you plan to insert the image into content.
Why Images Matter in WordPress
Images help visitors understand a page faster than text alone. On a WordPress site they also carry file names, alternative text, captions, and size data that assistive tools and search engines can read. Used next to the paragraph they support, they make posts and pages easier to scan without turning the page into a gallery of decoration.
- Visual context: A screenshot, product photo, or diagram can show a step that would take several sentences to describe.
- Readable pages: A relevant image between headings gives readers a pause and marks a new idea.
- Accessibility: Accurate alt text describes the image when it cannot be seen. Decorative images can be marked decorative so screen readers skip them.
- Search and sharing: Descriptive file names and alt text help search engines understand the file. Featured images often appear in social previews when a post is shared.
- Brand consistency: Repeated photo style, size, and placement make the site easier to recognize.
Images only help when they load quickly and match the surrounding topic. An oversized stock photo that does not explain the page adds weight without helping the reader. For a wider list of related WordPress tasks, start from the WordPress tutorial index.
Types of Images You Can Use in WordPress
Choose the format that matches the picture. WordPress then creates extra sizes from most raster uploads so themes can serve a smaller file on phones and a larger file on wide screens.
- JPEG / JPG: Best for photographs and images with many colors or gradients. It keeps file size lower than an uncompressed photo.
- PNG: Useful for graphics that need a transparent background or very sharp text. Files are often larger than JPEG or WebP.
- GIF: Suitable for short, simple animations. Color range is limited, so it is a poor choice for photographs.
- WebP: A common web format that can keep good quality at a smaller size than JPEG or PNG. WordPress has accepted WebP uploads since version 5.8 when the server image library supports it.
- AVIF: Another efficient format. WordPress can accept AVIF when the server’s GD or Imagick library includes AVIF support. Confirm a test upload before converting a whole library.
- SVG: Ideal for logos and simple icons because it stays sharp at any size. Self-hosted WordPress does not allow SVG uploads by default because an SVG file can contain script.
Rename the file before you upload it. blue-widget-product.webp is more useful than IMG_1048.jpg. Licensed stock, original photos, and screenshots are all fine when you have permission to publish them. The free image resources guide lists sources and licensing checks.
How to Add Images in WordPress
There are two reliable paths. Upload first through Media > Library when you want to fill in title, alt text, and caption before the file appears in a post. Upload from the editor when you are already writing and need the image in place immediately. Both methods store the file in the same Media Library.
Determine where the image should appear, then follow the official flow for inserting images into posts and pages. Current WordPress splits that help into block-editor and Classic Editor articles.
Upload a file through the Media Library
- Open your browser and sign in at
yourwebsite.com/wp-admin. Use the WordPress login guide if the admin URL or password reset is unclear. - In the left menu, go to Media > Library. This list is the store for images, documents, audio, and video already on the site.
- Select Add New Media File (some installs still label this Add New).
- Drag files into the upload area or choose Select Files and pick images from your computer.
- Wait until the progress bar finishes. The new file appears in the library grid or list view.
You can also drop an image onto an empty block while editing a post. WordPress still saves that file in the Media Library, so you can reuse it later instead of uploading a duplicate.
Editing Image Details
After the upload finishes, open the file and complete the attachment fields. In grid view, click the thumbnail. In list view, click the file title. WordPress saves most of these fields as you leave them.
- Title: The name shown inside the Media Library and on some attachment pages. It does not have to match the public heading on your post.
- Caption: Optional text displayed under the image for readers. Use it for attribution, a short explanation, or a label that is not obvious from the picture.
- Alt text: The description read by screen readers and used when the file cannot load. Describe the purpose of the image in plain language. Leave alt text empty or mark the image decorative when it adds no information.
- Description: Longer internal notes. Themes rarely show this field on the front end.
- File URL: The public address of the uploaded file. Copy it only when you need the direct file path.
From the same panel you can open Edit Image to crop, rotate, flip, or scale that file. Scaling down is safer than scaling up. A crop or scale creates edited versions; keep the original if you may need the uncropped photo later. Full library management, including unattached files and bulk edits, is covered in the Media Library tutorial.
Inserting Images into Posts or Pages
WordPress currently ships with the block editor. Some sites still use the Classic Editor plugin. Follow the section that matches the editor on your screen. If you are unsure which editor you have, open a post and look for blocks and a + inserter. That is the block editor. A single toolbar with an Add Media button is the Classic Editor. The post formatting tutorial covers block basics.
Insert an image in the block editor
- Open the post or page and place the cursor where the image should appear.
- Select the + block inserter, search for Image, and insert the Image block. You can also type
/imageon a new line and press Enter. - Choose Upload to send a file from your computer, Media Library to reuse an existing file, or Insert from URL to point at an image hosted elsewhere.
- Select the image. In the block sidebar, add alternative text or mark the image decorative.
- Use the block toolbar to set alignment (left, center, right, wide, or full when the theme allows it), add a caption, crop, or add a link.
- Open the block settings and choose a resolution such as Thumbnail, Medium, Large, or Full Size. Pick the smallest size that still looks sharp in the content column.
- Update or publish the post, then use Preview to confirm the image on the front end.
To make the image clickable, select it, choose the link icon in the toolbar, and enter a URL or search for a page on your site. The adding links tutorial shows the same control in more detail. You can also transform an Image block into Media & Text, Cover, or Gallery when the layout needs text beside the picture or several pictures in one group.
Insert an image in the Classic Editor
- Open the post or page and click in the content area where the image should appear.
- Select Add Media above the editor toolbar.
- Upload a new file or select one from the Media Library.
- In Attachment Display Settings, choose alignment (left, center, right, or none), link destination (none, media file, attachment page, or custom URL), and size.
- Select Insert into post.
- Update the post and preview it on the front end.
Posts and pages use the same insertion steps. Choose the content type first with the posts versus pages guide if you are still deciding where the image belongs.
How to confirm it worked
- Open Media > Library and confirm the file is listed with a visible thumbnail.
- Preview the post or page in the editor and check alignment, size, alt text, and caption.
- View the public page in a private browser window after you update or publish.
Optimizing Images for WordPress
Upload a file that is already close to the width your theme uses. A 4000-pixel photo forced into a 720-pixel column wastes storage and bandwidth. WordPress creates additional sizes after upload, but it still has to store and process the original.
- Resize first: Crop and resize in an editor such as GIMP, Photoshop, or a trusted compression service so the longest side matches the largest display you actually need.
- Use a descriptive file name: Lowercase words separated by hyphens are easier to read in URLs and logs.
- Write specific alt text: One short sentence is enough. Repeat keywords only when they describe what is in the picture.
- Compress the file: Reduce file weight before upload when you can. Plugins such as Smush, Imagify, ShortPixel, or EWWW Image Optimizer can compress new uploads and existing library files. Compare current options in the WordPress image optimization plugins article.
- Pick the inserted size: After WordPress generates thumbnail, medium, large, and full-size versions, insert the version that fits the layout. Default generation sizes live under Settings > Media, which the WordPress settings tutorial explains. Changing those numbers does not rebuild every older file.
- Rely on lazy loading where it already exists: WordPress has included native lazy loading for images since version 5.5. Extra lazy-load plugins are optional and can conflict if two tools delay the same files.
Default image sizes affect future uploads. If older thumbnails look wrong after a theme change, regenerate those sizes with a maintained thumbnail plugin or replace the individual files. Do not delete the original until you confirm no post, page, or template still uses it.
Adding Featured Images
A featured image represents the post or page in archives, widgets, and many social previews. It is not the same as an Image block inside the content. The featured-image box appears only when the active theme supports post thumbnails, which most current themes do. If the box is missing, the theme or Site Editor template is not exposing that control.
- Open the post or page editor.
- Find the Featured image panel in the sidebar. In the block editor it is usually under the Post or Page tab. In Classic Editor it is a meta box on the right.
- Select Set featured image.
- Upload a file or choose one from the Media Library.
- Add alt text to the attachment if it is still empty. Some themes output the featured image without a caption.
- Confirm with Set featured image.
- Preview an archive view and the single post to see where the theme displays the image.
On a block theme, the Site Editor template decides whether that featured image appears, at what size, and whether it links to the post. Changing the featured image does not delete the file from the Media Library. Removing it only detaches the image from that post.
Using Images in Widgets
Widget screens depend on the theme. Classic themes still use Appearance > Widgets with widget blocks or older widget forms. Many block themes hide that screen and place footer or sidebar images in Appearance > Editor. Confirm the path on your site before you look for an Image widget. The WordPress widgets tutorial explains those two interfaces.
Classic or block widget screen
- Go to Appearance > Widgets if that menu item exists.
- Open the sidebar, footer, or other widget area where the image should appear.
- Add an Image block or the Image widget.
- Upload a file or select one from the Media Library.
- Add a title, alt text, optional caption, and a link if the image should send visitors to another page.
- Save or update the widget area and view the front end.
Block theme Site Editor
- Go to Appearance > Editor.
- Open the template part that contains the sidebar or footer.
- Insert an Image block, Media & Text block, or a featured-image block if you want the current post’s thumbnail.
- Save the template and preview a page that uses it.
Widget images are easy to forget when you later delete a file from the Media Library. Search the site and the widget areas before you remove a logo or badge.
Embedding Images from External Sources
You can point an Image block at a file that lives on another website. That is convenient for a short test and risky for lasting content. If the remote host changes the URL, blocks hotlinking, or removes the file, your page shows a broken image. You also give up control over compression, alt text stored in your library, and backups.
- On the source site, copy the direct image address, not the page URL that contains the image.
- In the block editor, add an Image block and choose Insert from URL.
- Paste the address and press Enter.
- Add alt text in the block settings. Remote files do not inherit attachment fields from your Media Library.
- If the image should stay on your site, use the block toolbar option to upload a copy into the Media Library when that control is available.
For important product photos, screenshots, and logos, upload the file to your own Media Library. The image hosting comparison explains the tradeoffs between self-hosted files and third-party hosts.
Troubleshooting Common Image Issues
If an image does not appear after you insert it, work through the file, the URL, and the page cache before changing plugins.
- Open Media > Library and confirm the file is listed and the thumbnail is not empty.
- Open the attachment and copy the file URL. Paste that URL in a new browser tab. If the file itself fails to load, the problem is storage, permissions, or a missing file, not the post editor.
- Confirm you selected a generated size that exists. A theme asking for a large image will look broken if only a tiny original was uploaded.
- Clear any page cache or CDN cache and refresh with a private browser window.
- Check that the current user role can upload files. A Contributor account cannot complete the upload step.
WordPress may reject an upload when the file is larger than the server limit, uses a blocked MIME type, or has an unusual name. Resize the file, use a simple lowercase name, and try the Media Library upload screen again. Hosting support can raise the PHP upload limit when the file is already a reasonable web size.
Slow Page Load Times
Large originals are the most common cause of slow image pages. Compress and resize before upload, insert Medium or Large instead of Full Size when the layout is narrow, and avoid embedding several full-width remote images on one page. Native lazy loading helps images below the first screen, but it does not shrink an oversized file.
- Compress images before upload and with a maintained optimization plugin if the library is already large.
- Resize images to the largest width the theme uses.
- Keep decorative extras off landing pages that already contain several content images.
Broken Links
Link-checking plugins can list leftover image URLs, but they cannot recreate the deleted file.
Best Practices for Using Images in WordPress
These habits keep images useful after the first upload. They apply to posts, pages, featured images, and widgets.
- Use a sharp source file: Start with a clear original, then resize down. Enlarging a small image makes it look soft.
- Keep a consistent style: Similar crops, backgrounds, and aspect ratios make archives and product grids look intentional.
- Balance text and images: Place each image next to the paragraph it supports. Skip decorative pictures that only add weight.
- Check phones and desktops: Preview the page at mobile and desktop widths. The image should not overflow the column or shrink into an unreadable strip.
- Publish only files you may use: Use original work, licensed stock, or files with written permission. Add attribution in the caption when the license requires it. The free image resources article is a starting point for licensed options.
- Write accurate alternative text: Describe what the visitor needs to know. Do not copy the same sentence into title, caption, and alt text unless each field truly needs that wording.
- Compress before publishing: Smaller files load faster. Review compression and conversion tools in the image plugin comparison.
- Select the correct inserted size: WordPress keeps several versions of most uploads. Choose thumbnail, medium, large, or full size to match the content area.
- Add a caption only when it helps: Captions are for names, sources, or details the picture does not make obvious.
- Reuse Media Library files: Do not upload the same logo five times. Duplicates waste storage and make later updates harder.
- Manage details in the Media Library: Titles, alt text, captions, and attachment pages are easier to maintain from one place.
- Review older pages: Replace huge originals, add missing alt text, and remove files that no template uses. Broader quality checks are listed in these website ranking and credibility tips.
WordPress Image Plugins
WordPress already resizes uploads, writes srcset data for responsive images, and lazy-loads many images. A plugin is useful when you need automatic compression, WebP or AVIF copies, bulk processing, galleries, or hotspots. Install only what you will configure. Two optimization plugins that rewrite the same files can conflict. Use the installing plugins tutorial for the dashboard steps, and compare features in the image plugins article before you enable bulk compression.
Imagify
Compresses and resizes images from the WordPress dashboard. It can create next-generation copies and restore originals when that option is enabled.
Smush Image Optimization
Optimizes, resizes, and compresses images and can create WebP versions. Published by the WPMU DEV team.
WP-Optimize
Combines caching and cleanup tools. Image compression is one part of the plugin, not the only feature.
EWWW Image Optimizer
Can optimize existing library files and new uploads. Review local versus cloud settings before you run a bulk job.
Converter for Media
Converts new Media Library images to additional formats while leaving the original files in place.
Modula Image Gallery
Builds lightbox galleries and grid layouts from the WordPress Dashboard.
Perfect Images
Manages image sizes and thumbnails, regenerates existing sizes, and can create higher-resolution versions for dense displays. The current plugin directory listing uses the Perfect Images name on the wp-retina-2x slug.
Image Optimization by Optimole
A cloud service that can compress, resize, and convert images, with optional lazy loading and CDN delivery. Compare the free and paid limits before you point a production library at it.
Image Hotspot
Adds clickable hotspots and tooltips on top of an image.
ShortPixel Image Optimizer
Optimizes images and PDFs and can create WebP and AVIF versions. By ShortPixel.
Default featured image
Sets a fallback featured image for posts and pages that do not have their own. By Jan Willem Oostendorp.
Auto Image Attributes
Can fill title, caption, description, and alt text from the file name and includes a bulk updater. Review the generated text before you publish; file names are not always good alt text. By Arun Basil Lal.
WordPress Resources and Links
Developers WordPress.org
Explore WordPress development with our comprehensive guides and resources. Learn to create themes, plugins, and optimize your site
Security WordPress.org
Discover WordPress Security best practices to protect your site. Learn about updates, secure hosting, and essential plugins to keep your content safe from threats
Themes WordPress.org
Browse thousands of free WordPress themes to customize your site’s look. Find the perfect design for your blog, business, or portfolio, and enhance your site’s functionality
Plugins WordPress.org
Unlock your site's potential with thousands of free WordPress plugins! Enhance functionality, improve performance, and add features easily. Explore, install, and elevate your website
Widgets WordPress.org
Discover WordPress widgets to customize your site’s layout easily! Add functionality and content in sidebars and footers without coding
Codex WordPress.org
Explore the WordPress Codex for comprehensive documentation and tutorials. Find guides on themes, plugins, and customization to help you master WordPress
Online Courses WordPress.org
Explore free WordPress courses designed for all skill levels! Learn about themes, plugins, and site management through structured lessons to boost your skills and create stunning websites
Community WordPress.org
Join the WordPress community! Collaborate with passionate contributors, share ideas, and help shape the future of WordPress. Get involved in events, discussions, and projects today
WordPress Resources RSHWeb.com
RSH Web Services complete WordPress resources. Our blog helps you find WordPress Resources like optimize your site, improve performance, and master all things WordPress
Frequently Asked Questions
Why does WordPress reject an image when I try to upload it?
WordPress may reject an image because the file exceeds the server upload limit, uses an unsupported format, has an unusual filename, or triggers a permissions or memory error. Resize and compress the file, rename it with simple lowercase characters, and upload it through the WordPress Media Library. Your hosting provider can help increase server limits when the image is already an appropriate web size.
What is the difference between image alt text, a caption, and a title in WordPress?
Alt text describes an image for screen readers and when the file cannot be displayed. A caption is visible beneath the image and provides context, attribution, or an explanation for readers. The image title mainly helps identify the file inside WordPress. Each field has a different purpose, so the same wording should not automatically be copied into all three.
Should I use JPEG, PNG, WebP, or AVIF images in WordPress?
JPEG works well for photographs, while PNG is useful for graphics that require transparency or especially sharp text. WebP and AVIF can provide smaller file sizes while maintaining good visual quality, although compatibility should be checked with your theme, plugins, and server image library. Choose the format based on the image type rather than converting every file to the same format.
Why do images look blurry after I add them to a WordPress page?
Blurry images usually appear when WordPress displays a small generated size in a larger content area, or when the original file has insufficient dimensions. Select a larger image size in the block settings and avoid enlarging images beyond their original resolution. Also check whether your theme or an image-compression plugin is applying aggressive resizing or quality reductions.
Is it better to upload images to WordPress or embed them from another website?
Uploading images to WordPress gives you greater control over availability, filenames, dimensions, accessibility details, and future editing. Externally hosted images may disappear, change, load slowly, or prevent you from controlling performance. For important website content, storing the image in your own Media Library is usually more dependable, especially when paired with suitable WordPress hosting.
Can I delete an image from the Media Library after adding it to a post?
Deleting an image from the Media Library normally removes the underlying file, which can leave a broken image in every post, page, widget, or template using it. Before deleting media, locate all places where the file appears and replace it when needed. Creating regular WordPress backups also makes accidental media deletion easier to recover from.
Do I need a paid plugin to compress and manage WordPress images?
No. WordPress includes basic image resizing, cropping, editing, responsive image generation, and native lazy loading. Free image plugins may add automatic compression, WebP or AVIF conversion, thumbnail regeneration, or bulk processing. Paid plans can be useful for large media libraries or cloud-based delivery, but many smaller websites can begin with built-in tools and carefully selected WordPress plugins.
Who can upload images in WordPress?
Administrators, Editors, and Authors can upload files by default. Contributors can create posts but cannot upload media unless an Administrator changes that capability. Subscribers have no upload access. If the Media menu or Image block upload button is missing, check the account role in the WordPress users tutorial before troubleshooting the file itself.
Can I upload SVG files to the WordPress Media Library?
Not by default on self-hosted WordPress. SVG files can contain script, so core WordPress blocks the type. If you need logos as SVG, use a maintained sanitizing plugin or another reviewed process rather than allowing raw SVG uploads for every user role. JPEG, PNG, GIF, and WebP remain the routine choices for post and page images.
How do I confirm that an image was added correctly?
Check three places: the file appears in Media > Library, the post or page preview shows the image at the intended size, and a private browser window on the front end loads the same file. If the editor preview works but the public page does not, clear cache and confirm you updated or published the post after inserting the image.
Summary
Adding an image in WordPress is a short sequence: prepare a reasonably sized file, upload it to the Media Library or an Image block, complete alt text and other attachment fields, insert the correct generated size, then preview the front end. Featured images and widget images use the same library files with different placement controls.
Optimization is part of the same task. A descriptive file name, accurate alt text, compression, and the smallest sharp size keep pages readable and faster to load. Start from the WordPress tutorial index if you next need help with posts, the Media Library, widgets, or plugins.
Also see: Using WordPress To Build A Website
Installation with cPanel and Softaculous. WordPress Themes. Changing Themes. Plugins, Creating New Pages. Appearance, Step by step guide, more
Overwhelmed With WordPress?
If WordPress is a bit much try our new AI Website builder and Website Importer
Author Bio: Mira Calden
A WordPress wizard with over eighteen years of experience designing, optimizing, and troubleshooting sites on the world’s favorite CMS WordPress....
Related WordPress Tutorials and How To Guides
Tweet Share Pin Email