Picture

A picture element is an image placeholder you can insert on your canvas, separate from other elements. Remember that the picture element is different from a background image applied to an element like a section or a div block.

In this tutorial, you’ll discover:

1. Ways to insert pictures
2. Techniques for adjusting picture settings
3. Steps to replace pictures
4. Methods to style pictures
5. Instructions to include alt text

How to insert pictures

You have the ability to insert a picture onto your Webflow site from:

• The Insert panel
• The Resources panel
• Fast search
• Your device

Note: The maximum file size for pictures is 4MB.

Valuable information: Webflow generates responsive variations of your pictures when you upload them to the Resources panel. Nevertheless, it’s advisable to optimize your pictures before uploading to Webflow. Learn more about picture resolution.

Read up on the most common picture file formats used on the internet.

The Insert panel

To insert a picture element from the Insert panel:

1. Navigate to the Insert panel
2. Click and drag a picture element onto the Webflow canvas

To replace the placeholder with one of your picture files:

1. Choose the picture element on the canvas
2. Visit the Element settings panel
3. Select Choose picture
4. Choose a previously-uploaded picture or click the “cloud” icon to upload a new picture in the Resources panel

The Resources panel

Once you upload your pictures to the Resources panel, you can drag the pictures onto the canvas.

You can upload your pictures to the Resources panel in 3 ways:

1. Click the “cloud” icon in the Resources panel and select the pictures you want to upload from your device
2. Drag and drop the pictures from your device into the Resources panel
3. Drag and drop pictures directly onto your canvas

Learn more about how to insert pictures to the Resources panel.

Fast search

Fast search is a potent search bar incorporated into the Webflow Designer. You can launch fast search with Command + E (on Mac) or Control + E (on Windows) and search for any pictures you’ve uploaded to the Resources panel by name.

Your device

You can drag a picture directly from your device to the canvas.

How to resolve picture uploading issues

If you receive an “upload failed” alert while attempting to upload a picture, check the following:

• The picture file: Ensure that the picture file is not corrupted, has the correct and supported file extension, and is not larger than 4MB
• Check your internet connection: You should be able to upload pictures even with slow internet connections (minimum 5 mbps). To ensure that internet speed isn’t a problem, double-check your internet connection and confirm your signal strength. Learn how to troubleshoot your internet connection.
• Examine your browser extensions: Certain browser extensions may cause problems when uploading pictures to the Webflow Designer. Attempt to upload pictures from an Incognito or private browsing window, or learn how to troubleshoot your browser extensions.

How to adjust picture settings

To access image settings, there are four methods available. Initially, choose the image component on the canvas, then:

1. Perform a double-click on the image component
2. Hit the Enter/Return key on your keyboard
3. Click the icon resembling a “gear” located next to the image component label
4. Press D or navigate to the Element settings panel

Within Image settings, you have the capacity to:

• Select an image — Replace the default placeholder with any image from the Assets panel. Simply double-click on the image component and choose Select image from the Image settings window
• Adjust the image dimensions — Specify specific pixel values for the image’s width or height. These dimensions will apply to all breakpoints, but individual settings for width and height can override these values in the Element settings panel for each breakpoint. You also have the option to resize the image by dragging its corners. Note that adjusting the image size will not exceed the dimensions of its parent element
• Enable HiDPI mode for images — Upon checking this box, the image’s pixel width will be halved. For example, an image of 600px width will be displayed at 300px. This pixel density ensures optimal image quality on most HiDPI mobile displays
• Specify loading behavior— Modify the image loading preferences. “Lazy” loading loads images above the visible fold upon page load and loads images below the fold as users scroll to them, “Eager” loading immediately loads all images on the page during site load, and “Auto” loading adjusts based on the browser’s setup

Substitute Image Content

After inserting an image onto the canvas, you have the flexibility to substitute it whenever necessary. To swap out the image:

1. Highlight the image on the canvas
2. Navigate to the Element settings panel > Image settings
3. Select Replace image to open the Asset panel
4. Pick an existing image or upload a new one

Enhancing Image Aesthetics

Leverage the Style panel to enhance the visual appeal of images. Do note that some styling attributes do not apply to images, such as background styles. For overlay effects with images, consider utilizing background images instead.

Utilize classes to stylize images, which optimizes time efficiency as you can apply a class to multiple images. Any styling applied to the class will affect all images associated with it. This method proves particularly advantageous when establishing size specifications via the Style panel instead of the Element settings panel. By utilizing classes, you can eliminate the need to manually adjust the size of each image.

Here are a few examples of styling properties you can utilize to add flair to your images: 

• Corner Radius: Implement rounded corners on one or more sides. To define a radius, access the Style panel > Borders > Radius.
• Drop Shadow: Create a shadow effect to enhance the image’s appearance. To set a drop shadow, access the Style panel > Effects > Box shadows.
• Filters: Apply various filters like blur, grayscale, or sepia tones. To add a filter, navigate to the Style panel > Effects > Filters.

Adding alternative text

Descriptive text is a concise depiction of the image concealed “within” the image (meaning it’s not visible on the site page, unlike a caption), interpreting that image when it’s incapable of being shown or viewed. This aids in comprehending your image content by individuals with visual impairments or blindness, or being presented instead of the image if the image file hasn’t loaded or when a user has opted not to view images. Search engines utilize alternative text to identify the content of the image.

To introduce alternative text to an image:

1. Opt for the picture on the canvas
2. Access the Element settings panel > Image settings
3. Proceed to Alternative text and choose Custom description
4. Construct the alternative text in the space beneath the dropdown menu

If an image is merely decorative (i.e., it provides no valuable information), you can also opt for Decorative from the alternative text dropdown.

You can also specify alternative text in the Assets panel so that the image is equipped with alternative text each time you append it to your site from the Assets panel.

Implementing dynamic alternative text

You can employ an image element in dynamic Collection lists and on Collection template pages. Discover further details about the image field.

For configuring dynamic alternative text for these images:

1. Choose the image
2. Navigate to the Element settings panel > Image settings
3. Verify Fetch alt text from
4. Select the section containing the alternative text for your images (e.g., “Name”)