Image

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

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

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.

 

From the Assets panel

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

 

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

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

Webflow Image Settings - Choose Image

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.

 

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

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.

 

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

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.

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 Get alt text from
  4. Select the field that contains the alt text for your images
Dynamic alt attribute
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback