How to edit & replace images
Step-by-step instructions for replacing images on your Webflow site using the Editor, including how to update alt text for accessibility.
Replacing an image on your Webflow site is quick once you know the steps. This guide covers swapping images, uploading new ones, and adding descriptive alt text.
Quick summary
Click on any image in the Editor to select it, then use the image settings panel to replace it with a new file or a URL. Always add descriptive alt text when you upload an image. Publish when you're done.
What you'll need
Beginner 5 minutes- The Webflow Editor open on your site
- Your replacement image ready as a file on your computer (JPG, PNG, or WebP recommended)
- The Editor open — see Editor mode vs Designer mode if needed
Replacing an image
Open the Editor and go to the correct page. Navigate to the page with the image you want to replace.
Click on the image. A small settings panel will appear, usually in the top-left corner or alongside the image.
Click the Replace image button. The exact label may say "Replace," "Edit image," or show an icon. Click it to open the image picker.
Upload a new image or choose from your assets. You can drag and drop a file from your computer, or click to browse your files. If you've uploaded the image before, it may already be in your asset library.
Update the alt text. In the same panel, you'll see a field for alt text. Update this to describe the new image accurately. (More on why this matters below.)
Click elsewhere to confirm. Once you're happy with the image and alt text, click elsewhere on the page to deselect.
Publish your changes. Click the Publish button in the Editor toolbar.
What is alt text and why does it matter?
Alt text (alternative text) is a short description of an image. It's used:
- By screen readers, so visually impaired visitors understand what the image shows
- By search engines, which read alt text to understand image content
- As a fallback if the image fails to load
Good alt text: "Two team members reviewing a brand strategy document at a desk"
Bad alt text: "image001.jpg" or just "photo"
When no alt text is needed: purely decorative images (like background shapes or dividers) should have an empty alt text field, not a description.
Don't skip alt text
Missing alt text is an accessibility issue. It also affects your SEO. Take 30 seconds to add a clear description every time you upload an image.
Image size and format recommendations
Uploading the right size image makes your site faster to load and better-looking.
| Use case | Recommended size | Format |
|---|---|---|
| Hero / full-width background | 1920–2560px wide | WebP or JPG |
| Content images (inline) | 800–1200px wide | WebP or JPG |
| Logos | 400–800px wide | SVG (preferred) or PNG |
| Thumbnails | 400–600px wide | WebP or JPG |
Avoid uploading images larger than 2 MB. If your image is very large, compress it first using a free tool like Squoosh or TinyPNG.
For more detail, see Image formats explained and Image sizes for the web.
Images that can't be clicked in the Editor
Some images are part of the design structure (set as CSS background images or inside locked sections) and can't be replaced through the Editor. If you click on an image and nothing happens, it's likely a design-level asset.
To replace those images, contact Chykalophia. We'll update them through the Designer.
Common questions
Related guides
Need a hand?