Chykalophia Docs

Step-by-step instructions for replacing images on your Webflow site, 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

Open your site in Webflow and click the image you want to change. Use the image icon above it to swap in a new file, and the gear icon to set its alt text. Always add descriptive alt text when you add an image. Publish when you're done.

What you'll need

Your site open in Webflow, with a role that can edit content. See Edit mode vs design mode if needed
Your replacement image ready as a file on your computer (JPG, PNG, or WebP recommended)

Replacing an image

Open your site in Webflow and go to the correct page. From the Webflow Dashboard, hover over your site and click Open in Webflow, then choose the page in the Pages panel. Or open the page on your live site and add ?update to the end of its address.

Click on the image. When you hover over an image you can edit, a blue outline appears. Click the image and small icons appear above it.

Click the image icon. Webflow shows a small landscape picture icon for swapping the image. (The gear icon next to it opens the image settings.)

Upload a new image or choose from your assets. If you've uploaded the image before, it may already be in your site's assets. Otherwise, upload the new file from your computer.

Update the alt text. Click the gear icon to open the image settings. In the Alt text dropdown, choose Custom description and describe the new image accurately. Unless you set a custom description (or mark it decorative) on the image itself, it uses whatever alt text is set for that file in the Assets panel. (More on why this matters below.)

Check the result. Webflow saves your changes automatically. Click elsewhere on the page when you're happy with the image and alt text.

Publish your changes. Click Publish in the top bar, tick where you want to publish, then click Publish to selected domains. If your role isn't allowed to publish, ask us to publish for you.

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) shouldn't get a description. In Webflow, choose Decorative in the image's Alt text dropdown instead, and screen readers will skip the image.

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. These are our recommendations, not Webflow rules:

Use case	Recommended size	Format
Hero / full-width background	About 1920px 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

Webflow flags images that are over 2,000px on either side as worth resizing, and it won't upload an image file larger than 4MB.

We recommend keeping images under 2 MB. If your image is very large, compress it first using a free tool like Squoosh or TinyPNG. Webflow's Assets panel can also compress JPG and PNG images into WebP or AVIF, but don't compress an image used for social sharing previews: those can't be WebP or AVIF.

For more detail, see Image formats explained and Image sizes for the web.

Images you can't click to edit

Some images are part of the design structure. For example, a background image is set as a style, and the content editor role can't change styles. Your designer can also lock specific elements so they can't be edited. If you hover over an image and no blue outline appears, it's likely one of these.

To replace those images, contact Chykalophia. We'll update them through the Designer.

Common questions

My new image looks stretched or cropped oddly.

Your site's design may show images in a space with a fixed shape. If your new image has a very different shape than the original, it may not fit perfectly. For best results, upload an image with a similar proportion to the original. Ask Chykalophia if you need the container resized.

Where are my uploaded images stored?

Webflow stores uploaded images in your site's Assets panel. You can use an asset on any page, so you don't need to re-upload the same image twice. Images added to CMS items (like a blog post's featured image) are stored with those items instead.

I uploaded an image but it looks blurry.

The image may have been uploaded at a small size or low resolution. Replace it with a larger version. For background or hero images, aim for about 1920px wide.

Can I delete old images I no longer use?

Unused images can be deleted from the Assets panel. First remove the image everywhere it's used: if you delete an image that's still on your site, it comes back the next time the site is published. If your role doesn't let you delete assets, or you'd rather we tidy up for you, ask Chykalophia.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.

How to edit & replace images