Is there a way to set up Webflow so that an alternative image is used for browsers that don't support Webp?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Yes, there is a way to set up Webflow so that an alternative image is used for browsers that don't support WebP.

WebP is a modern image format that provides superior compression and image quality compared to older formats like JPEG and PNG. However, not all browsers support WebP, so it's important to provide a fallback option for those browsers.

To set up an alternative image for browsers that don't support WebP in Webflow, follow these steps:

Add the WebP image to your project: Upload your WebP image to the Assets panel in your Webflow project.
Add the alternative image: Create or select the image you want to use as an alternative for browsers that don't support WebP. It should be in a format that is universally supported, such as JPEG or PNG.
Set up the WebP image in Webflow: Select the target image element on your page and navigate to the "Settings" panel. Under the "Background Image" or "Image" section, click on the "Add Image" button. Choose the WebP image from the Assets panel.
Add the alternative image for unsupported browsers: Under the "Image Settings" section, click on the "plus" button to add a new background image style. In the new background image style, choose the alternative image from the Assets panel.
Set up browser support conditions: In the "Background Image" or "Image" section, you will see a small arrow next to the image thumbnail. Click on the arrow to access the image settings. Scroll down to the "Browser Support" section and click on the "Add New Condition" button. Choose the condition "None of these browsers", and select the browsers that do not support WebP.
Preview and publish your site: Preview your site in different browsers to ensure that the alternative image is correctly displayed for browsers that don't support WebP. Once you are satisfied, publish your site to make the changes live.

By following these steps, you can ensure that your website provides an alternative image for browsers that don't support the WebP format, allowing for a seamless user experience across different browser types.

Additional questions:

How can I optimize images in Webflow for better performance?
Can I create custom animations in Webflow?
How can I embed a video in Webflow?

How can Webflow be used to create a link that jumps to a specific page on a Google Drive link?

Can I transfer my CMS plan from one website to another on Webflow?

How can I sync my website directly with my Google Calendar to automatically update events without manually making changes in a CMS and uploading?

What is the easiest way to include the page where a form was submitted in the form submission data on a Webflow site?

How can I connect the filtering of markers on Google Maps with the filtering of flats/apartments on my Webflow CMS-based real estate website?

Can someone assist me in adding an upload file section to a form in Webflow that will add the files to Salesforce CRM, assigning them to existing users or creating new users if necessary?

In Webflow, why isn't the video loading on Android devices even though it works on other sites using the same method?

Is there a way to integrate a Dribbble account with a Webflow portfolio in order to display recent uploads?

How can I easily create a member dashboard in Webflow using Nocodelytics?

Do you know any apps/platforms that allow product reviews to be displayed on a Webflow website, even if it requires integrating with other platforms?