Use an Image element to add, edit, and style images in Webflow.
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:
There are 4 ways you can add an image to your Webflow project:
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.
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:
Drag an image from your computer onto your canvas and drop it where you want it.
If you get an “upload failed” alert when trying to upload an image, check the following:
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.
With the image element selected, you can access the image settings 4 ways:
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.
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.
After you’ve added an image onto your canvas, you can replace it anytime you want.
You can style images as you would any other element using the Style panel.
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.
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 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:
Something went wrong while submitting the form. Please contact firstname.lastname@example.org