Image

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

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

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.

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.

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