Insights

How to format, optimize and switch out images on your Webflow site

How to Update Images on Your Webflow Site with WebP Format

Updating your Webflow site with images in WebP format can significantly enhance your website's performance and loading times. In this article, we’ll show you how to change your images to WebP format, a process that not only optimizes your website but also ensures it keeps up with best practices in web development.

What is WebP?

Developed by Google, WebP is a modern raster graphic file format intended to replace traditional formats like JPEG, PNG, and GIF. Opting for WebP images on your website means using smaller file sizes without compromising on quality, leading to quicker page loads and a better user experience.

Identifying and Converting Your Images

To start, you need to identify the format of the images on your site. Simply right-click an image, open it in a new tab, and check the URL for the file extension (.png, .jpeg, etc.). If you need to download the image, right-click and select "save image as" to save it to your machine.

For conversion to WebP, numerous online tools are available. We like to use https://convertio.co/. Upload your image to one of these platforms, choose WebP as your target format, and click convert. This process not only changes the format but also reduces the file size significantly. For example, a 2.1MB file might shrink to just over 1MB post-conversion.

To further optimize the file size, you can use services like tinyjpeg.com. Upload your newly converted WebP image, and it will compress it even more without losing visible quality.

Updating Images on Your Webflow Site

Once you have your optimized WebP images, it's time to update your site. You can go to the page you want to edit then access the Webflow editor by adding ?edit to the page’s url, or navigate through the editor to the page you wish to update. Look for the replaceable image icon, select your WebP image, and ensure its aspect ratio fits well with your site's design.

After replacing the image, don't forget to publish your changes to make the update live on your website.

Switching to WebP images on your Webflow site is a straightforward process that can drastically improve your site's load time and overall performance. By following these steps, you can ensure your website remains fast, efficient, and visually appealing.

Updated
March 25, 2024
Resources
Topics covered
Subscribe
Keep reading

Read more guides, tactics and insights

Google’s latest Core Update Aims to Eliminate Spammy Content
May 26, 2024
Sarah Littlefield
Access Granted: Unraveling the Mysteries of Website Accessibility in 2024
Jun 13, 2024
Sarah Littlefield
5 Website Mistakes That Are Costing You Money
Mar 1, 2024
Andrew Gaynor
PPC loves AI: How to set up and run a highly profitable Performance Max campaign
Jun 24, 2024
Reisto Belovich
Driving Results: How Analytics Can Transform Your Content Marketing Strategy
Mar 1, 2024
Reisto Belovich
"Alexa, bring me more customers!" The ultimate guide to voice search
Sep 14, 2024
Sarah Littlefield
Streamline your design handoffs and make developers happy with Figma's dev mode
Sep 14, 2024
Irakli Lolashvili
How local SEO can boost your revenue
Feb 9, 2024
Reisto Belovich
How to Get Your Conversion Metrics Right in Performance Max
Jun 24, 2024
Reisto Belovich
The Ultimate Guide to Creating and Mastering Website KPIs
Mar 18, 2024
Sarah Littlefield
Google's updates to Performance Max for January 2024
Jun 24, 2024
Sarah Littlefield
How Empathy Can Improve Your Design Process
Sep 14, 2024
Irakli Lolashvili
The future of human computer interface design
Mar 1, 2024
Gavin Hall
Mastering content marketing: communicate to influence and drive conversions
Jun 13, 2024
Sarah Littlefield
What is technical SEO?
Feb 9, 2024
Reisto Belovich
Fresh Webflow updates for 2024
Sep 14, 2024
Mike Heggie
Master keyword research in 3 simple steps
Feb 9, 2024
Reisto Belovich
Gestalt Principles: Shaping User Experience Like a Boss
Oct 8, 2024
Mike Heggie
Understanding semantic search: the future of web browsing
Jun 24, 2024
Reisto Belovich
Unlock Speed and Consistency with Webflow’s Page Templates
Sep 14, 2024
Mike Heggie
Choosing the best ecommerce platform
Feb 9, 2024
Sarah Littlefield
Unleashing Your Business's Potential with the Business Model Canvas
Mar 1, 2024
Gavin Hall