Back to all lessons
Lesson library

Image

Use the 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 placeholder you can add to your canvas, independent of other elements. Keep in mind the image element is distinct from a background image that's set on an element like a section or a div block.

Image icon thumbnail

In this lesson, you’ll learn:

  1. How to add images
  2. How to edit image settings
  3. How to replace images
  4. How to style images
  5. How to add alt text

How to add images

You can add an image to your Webflow site from:

Important: The maximum file size for images is 4MB.
Good to know: Webflow creates responsive variants of your images when you upload them to the Assets panel. However, it’s best to optimize your images before uploading to Webflow. Learn more about image resolution.

Learn more about the most common image file types used on the web.

The Add panel

To add an image element from the Add panel:

  1. Go to the Add panel
  2. Click and drag an image element onto the Webflow canvas

To replace the placeholder with one of your own image files:

  1. Select the image element on the canvas
  2. Go to Element settings panel
  3. Click Choose image
  4. Choose a previously-uploaded image or click the “cloud” icon to upload a new image in the Assets panel
The Image element in the Media section of the Add panel.

The Assets panel

Once you upload your images to the Assets panel, you can 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 3 ways:

  1. Click the “cloud” icon in the Assets panel and choose the images you want to upload from your computer
  2. Drag and drop the images from your computer into the Assets panel
  3. Drag and drop images directly onto your canvas

Learn more about how to add images to the Assets panel.

Quick find

Quick find is a powerful search bar built into the Webflow Designer. You can launch quick find with Command + E (on Mac) or Control + E (on Windows) and search for any images you’ve uploaded to the Assets panel by name.

Your computer

You can drag an image directly from your computer to the canvas.

How to troubleshoot image uploading

The 'Upload failed' alert graphic displays a red circle with diagonal line icon, a file name, and the max size for png files of 4mb.

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 your internet connection: You should be able to upload images with even slow internet connections (minimum 5 mbps). To be sure internet speed isn’t an issue, double check your internet connection and verify your signal strength. Learn how to troubleshoot your internet connection.
  • Check your browser extensions: Some browser extensions may cause issues when uploading images to the Webflow Designer. Try uploading images from an Incognito or private browsing window, or learn how to troubleshoot your browser extensions.

How to edit image settings

The Image settings section 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, for Load, and a "Show all settings" button.

There are 4 ways to access image settings. First, select the image element on the canvas and then:

  1. Double-click on the image element
  2. Press Enter/Return on your keyboard
  3. Click the “cog” icon next to the image element label
  4. Press D or go to the Element settings panel

In Image settings, you can:

  • Choose an image: You can replace the placeholder with any image from your Assets panel. Double-click the image element and click Choose image from the Image settings modal.
  • Change the image size: You can specify pixel values for image 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 settings panel for each breakpoint. 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.
  • Make an image HiDPI: When you check this box, this setting will set your image at half its 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.

How to 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 at any time. To replace an image:

  1. Select the image on the canvas
  2. Go to Element settings panel > Image settings
  3. Click Replace image to open the Asset panel
  4. 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.

How to style images

You can style images using the Style panel. Note some styling options don’t apply to images, like background styles. To use overlays with images, you can use background images instead.

You can use classes to style images, which is a huge time saver because you can apply a class to multiple images. Then, styling the class will affect all images with that class. This is especially helpful when specifying size through the Style panel versus the Element settings panel. With classes, you can avoid having to manually size each image.

The Style panel shows an example “Feature info icon” class. Margin has also been added on the left and bottom sides of the image.

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

  • Radius: You can set up rounding on one or more corners. To set a radius, go to Style panel > Borders > Radius.
  • Drop shadow: You can make your images look like they have popped out of the page. To set a drop shadow, go to Style panel > Effects > Box shadows.
  • Filters: You can use different filters such as blur, grayscale, or sepia. To set a filter, go to Style panel > Effects > Filters.
An image duplicated four times with style properties. An example of a border radius, drop shadow, blur and sepia filter properties.

How to add alt text

Alt text is a brief description of the image which is hidden “within” the image (i.e., it isn’t visible on the site page, like a caption), which makes sense of that image when it can’t be displayed or viewed. This helps your image content be understood by people who are blind or have vision disabilities, or be displayed in place of the image if the image file hasn’t loaded or when a user has chosen not to view images. Search engines use alt text to determine what the image shows.

To add alt text to an image:

  1. Select the image on the canvas
  2. Go to Element settings panel > Image settings
  3. Go to Alt text and select Custom description
  4. Write the alt text in the field below the dropdown

If an image is decorative (i.e., the image offers no meaningful information), you can also choose Decorative from the alt text dropdown. 

You can also set alt text in the Assets panel so that the image has alt text whenever you add it to your site from the Assets panel.

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

How to add dynamic alt text

You can use an image element in dynamic Collection lists and on Collection template pages. Learn more about the image field.

To add dynamic alt text to these images:

  1. Select the image
  2. Go to the Element settings panel > Image settings
  3. Check Get alt text from
  4. Select the field that contains the alt text for your images (e.g., “Name”)
The Name field from a 'Blog posts' Collection is selected in Image settings to fill out the alt text for an image.
Try Webflow — it's free