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.

Webflow Image Element

In this article, we cover the following: 

  1. Adding Image elements through the Elements Panel or through the Asset Manager.
  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 3 ways:

  • Drag a new image element from the Elements panel. Then replace the image placeholder.
  • Drag an image from the Asset Manager directly.
  • Drag an image from your computer.
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 Manager or click on “Upload” in the Asset manager to upload a new image.

 

From the Asset Manager

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

 

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

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

From your computer

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

Webflow creates responsive variants of your images as you upload them to the Asset Manager. 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.

Editing image settings

Webflow Image Settings - Choose Image

You can access the image settings in three ways:

  • Double click on the image element
  • Click the cog icon next to the image element label
  • Go to the Settings Panel (keyboard shortcut: D)

Choose Image - You can replace the placeholder with any image from your Asset Manager. 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 Manager.
  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