The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

An image element is an image or an image placeholder that you can drop onto your page. You can move it anywhere you want independent of other elements. The image element is distinct from a background image that is set on another element like a section or a div block.

In this lesson
  1. Adding Image elements through the Elements Panel or through the Asset Panel
  2. Editing image settings like width and HiDPI
  3. Replacing an image by double clicking on the image and clicking Replace Image
  4. Styling images and creating classes that can be applied to other image elements
  5. Adding helpful alt attributes for accessibility and search

Adding images

You can add an image onto your page in any of the following ways:

  • Drag a new image element from the Elements panel. Then replace the image placeholder.
  • Drag an image from the Asset Panel directly
  • Drag an image from your computer
  • Add using Quick find by searching for the name of the image
Learn more about the most common image file types used on the web.

From the Elements panel

To add a new image to your page, just drag and drop an Image element from the Elements panel. Click on “Choose image” in the image settings to choose an image from the Asset Panel or click on “Upload” in the Asset Panel to upload a new image.


From the Asset Panel

Once you have uploaded images to the Asset Panel, you can simply drag the images onto the canvas.


If you haven’t uploaded your images to the Asset Panel, you can do that in 2 ways:

  • Click the Upload button in the Asset Panel and choose the images you want to upload.
  • Drag and drop the images from your computer onto the Asset Panel.
Learn more about how to add images to the Asset Panel.

From your computer

Drag an image from your computer onto your canvas and drop it where you want it.

Good to know
Webflow creates responsive variants of your images as you upload them to the Asset Panel. However, it’s best to optimize your images before uploading to Webflow. Read more about Image Resolutions.
The maximum file size for images is 4MB.
Troubleshooting — Upload failed

If you get an “upload failed” alert when trying to upload an image, check the following:

  • The image file — Check that the image file is not corrupted, has the correct and supported file extension, and isn't larger than 4MB.
  • Check Internet Connection — You should be able to upload images with even slow internet connections (minimum 5mbps). To be sure internet speed isn’t an issue, double check your internet connection and verify your signal strength. Troubleshoot your internet connection.
  • Check Browser Extensions — Some browser extensions may cause issues when uploading images to the Webflow Designer. Troubleshoot my browser extensions.

Editing image settings

Webflow Image Settings - Choose Image

With the image element selected, you can access the image settings in one of the following ways:

  • Double click on the image element
  • Press enter
  • Click the cog icon next to the image element label
  • Press D or go to the Settings panel

Choose Image - You can replace the placeholder with any image from your Asset Panel. Simply, double click the element and choose “Choose Image” on the settings panel that appears.

Size - You can specify pixel values for width or height. This will set the image size for all breakpoints. However, these values can be overridden by setting width and height in the Element Style Panel.

Setting a width/height in image settings will apply the values to that image on all device breakpoints. However, you can set different width/height settings for an image when setting them through the Style Panel.

You can also grab the corner of your image and drag to resize it.


Note that as you resize the image, it won't get bigger than its parent element.

HiDPI - When checked, this setting will set your image at half it’s pixel width. So an image that’s 600px wide, will be displayed at 300px. This pixel density will ensure the image looks great on most mobile devices that have HiDPI displays.


Replacing images

Webflow Image Settings - Replace Image

After you’ve added an image onto your canvas, you can replace it anytime you want.

  1. Open Image settings.
  2. Click the Replace Image button. This will open the Asset Panel.
  3. Choose an existing image or upload a new one.

Styling images

You can style images as you would any other element using the Style Panel.

Some styling options don’t apply to images like background styles. To use overlays with images, you can use background images instead.

Using classes to style images is a huge time saver. It allows you to apply a class to multiple images. Editing the class will affect all images with that class. This is especially helpful when specifying size through the Style Panel versus the Settings Panel. With classes, you can avoid having to manually set sizing for each image as you add them to the project.


Here are a few style properties that you can use to give character to your images: 

Border Radius - You can set up rounding on one or more corners. 

Drop shadow - You can make your images look like they have popped out of the page.

Filters - You can use different filters such as blur, grayscale, or sepia.

Webflow Image stylings - Border Radius - Shadow - Filters

Alt attributes

An Alt attribute is for the alternative text that appears when, for some reason, an image isn’t loaded on your page. It can be a brief description of the image. This is not only helpful for accessibility but also for search engines to determine what the image is about.

You can specify an Alt attribute for each of your images from the Settings Panel.

Alt text settings in Webflow

Dynamic alt attribute

The image element can be used in dynamic lists and on dynamic template pages. Learn more about the CMS Image field.

To set a dynamic alt text to these images:

  1. Select the image
  2. Go to the Settings tab
  3. Under Image properties, check the "Get Alt Text from:" checkbox
  4. Select the field that contains the Alt text for your images.
Dynamic alt attribute

Browser support

Can I Use ? Data on support for the feature across the major browsers from

Was this helpful?

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form