How do I add an image in Webflow?

Add the image element

An image element is a placeholder you place on the canvas, separate from other elements. It is not a background image on a section or a div. Use the element when the photo is content: a portrait, a product, or a diagram the visitor should see as an image. Use a background when the picture sits behind text. The background guide is that other setup. Background styles do not apply to the image element. Webflow says to use a background image when you need an overlay.

Open the Add panel and drag Image onto the canvas. You can also drag an image file from your computer onto the canvas, or upload it to the Assets panel and drag it from there. Quick find opens with Command + E on Mac or Control + E on Windows, and you can search images already in the Assets panel by name.

The Assets panel accepts a file in three ways. Click the cloud icon and choose files. Drag files from your computer into the panel. Or drag them onto the canvas. Webflow creates responsive variants when you upload to the Assets panel. Optimize the file before you upload. The maximum file size is 4MB.

Example: the about page needs a photo of the studio under the intro, not behind the headline. Drag Image under that intro. The placeholder is on the page. The studio photo is the next step.

Choose the file

Select the image element. Open image settings in any of four ways. Double-click the image. Press Enter. Click the cog beside the element label. Or press D to open the Element settings panel. Click Choose image, then pick a file already in the Assets panel or use the cloud icon to upload one.

If the upload fails, check the file first. Webflow says to make sure it is not corrupted, that the extension is supported, and that it is not larger than 4MB. Also check the connection, and try a private browsing window if an extension is interfering.

You can set a pixel width or height in image settings. Those values apply on every breakpoint until you override them for one breakpoint. You can also drag a corner to resize. The image will not grow larger than its parent. HiDPI, when checked, displays the image at half its pixel width. A file that is 600px wide is shown at 300px, which keeps it sharp on most phones with HiDPI screens. Use that when you exported the file at double the size you want on the page.

Loading is the other control in those settings. Lazy loads images above the fold when the page loads, and loads images below the fold once a visitor scrolls to them. Eager loads every image on the page as soon as the page loads. Auto follows the browser. Leave Lazy on a photo far down the page if you do not need it in the first view.

Set alt text before you publish

Alt text is the written description used when the image cannot be seen. Select the image, open Element settings, Image settings, and under Alt text choose Custom description. Write the description in the field under that dropdown. If the image offers no information, choose Decorative instead.

You can set that text on the asset in the Assets panel so every later use starts with the same description. On a Collection list or a Collection template, check Get alt text from and choose the field that holds the description, such as the item name.

The alt text guide is how to write that sentence and how compression fits. This page is how the image element gets onto the canvas. A studio photo needs a custom description. A purely decorative corner shape can be Decorative. Do not leave the control untouched if the photo is the thing the section is about.

Size it in a class

Style the image from the Style panel, and put the size on a class when more than one photo should match. Portrait is a clear name. Width and height set in the Style panel on that class are easier to reuse than a one-off pixel value on a single element. The image article notes that some style options do not apply. Background styles are one of those.

Radius rounds corners: Style panel, Borders, Radius. A drop shadow is Style panel, Effects, Box shadows. Filters such as blur, grayscale, or sepia are Style panel, Effects, Filters. The fit guide is the next step when the photo must sit inside a fixed frame. The border guide covers radius in more detail, including a circle.

Publish and open the live page. A photo that looks right in the Designer can still be the placeholder, or a file you replaced only on the canvas draft, until that publish includes it.

Replace the file without rebuilding the element

After the image is on the canvas, you can swap the file. Select it, open Element settings, Image settings, and click Replace image. Pick an existing asset or upload a new one. The element stays where it is. The alt text and the class stay with the element, so read the description again if the new photo shows something else.

Example: the studio photo is replaced with a photo of the new office. Replace image, then change the custom description so it no longer says the old room. If this image is also used on the homepage, decide whether that instance should change too. Replace image on one element does not rewrite a different image element that still points at the old asset.

Adding an image on a page you already have is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.