Back to all lessons
Lesson library


Use an Image element to add, edit, and style images in Webflow.

This video features an old UI. Updated version coming soon!

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

Image icon thumbnail

In this lesson:

  1. Add image elements
  2. Edit image settings
  3. Replace images
  4. Style images
  5. Add alt attributes

Add images

There are 4 ways you can add an image to your Webflow project:

  1. From the Elements panel
  2. From the Assets panel 
  3. From your computer
  4. From a Quick find search
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. To choose or add an Image, click into the Asset Panel and click Choose image or Upload.

The four elements that are included in the Media section are Image (highlighted), video, YouTube and Lottie Animation.

From the Assets panel

Once you uploaded images to the Asset panel, drag the images onto the canvas.

The assets panel displays a folder dropdown menu, create new folder button, upload button, search assets bar and image thumbnail previews.

You can upload your images to the Assets panel in 2 ways:

  1. Click Upload in the Assets panel and choose the Images you want to upload
  2. Drag and drop the images from your computer into the Assets 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
The upload failed alert graphic displays a red circle with diagonal line icon, a file name and a the max size for png files of 4mb notice.

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

  • The image file: Make sure the image file isn't 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.

From a Quick find search

Quick find is a powerful search bar within the Webflow Designer. It's an assistant that will help you quicken your workflow and boost your efficiency as you create your projects — and it's just CMD+E / CTRL+E away.

Edit image settings

The image settings panel displays a choose image button, file name, dimensions and size along with a check box for "Image is HiDPI". It also displays two text input fields for width and height. There is a dropdown menu for alt Text and for Load and a show all settings button.

With the image element selected, you can access the image settings 4 ways:

  1. Double click on the image element
  2. Press enter
  3. Click the cog icon next to the image element label
  4. Press D or go to the Settings panel

Choose Image: You can replace the placeholder with any image from your Assets panel. Simply, double click the element and click Choose Image from the settings panel that appears.

Size: You can specify pixel values for width or height. This will set the image size for all breakpoints, but 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.

The checkbox for "Image is HiDPI" is highlighted on the Image settings panel.

Replace images

The replace image button is highlighted on the Image settings panel.

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.
Step one on the left click the replace button, step two on the right select an image from the assets panel.

Style 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.

The style panel displays the selector section with the class Feature Info Icon selected and the layout, spacing and size sections.

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.

An image duplicated four times with style properties. An example of a border radius, drop shadow, blur and sepia filter properties.

Add 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.

The Alt Text area is highlighted on the Image settings panel. A custom description has been selected from the drop down menu.

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 Get alt text from
  4. Select the field that contains the alt text for your images
The image settings panel displays a collection list selected to fill out the Alt Text from a Blog post list.
Try Webflow — it's free