5 Methods for Implementing WebP Images on Your Website

5 Methods for Implementing WebP Images on Your Website

Optimizing your images is the first step in decreasing page load speeds and improving customers’ website experiences.


Implementing WebP images can impact overall website performance by improving load times, Core Web Vital scores, and search engine rankings, ultimately increasing your bottom line.    


Ready to implement WebP on your website? Here are 5 implementation methods from basic to advanced, and a JPG fallback for legacy browsers.


Want to learn more about WebP before getting started? Read our blog post, "How Using WebP Images Can Improve Your Bottom Line."


Before You Begin

Current releases of modern browsers, including Google Chrome, Firefox, Edge, and Opera, natively support WebP. If your website needs to support legacy versions of these browsers or dated browsers like Microsoft Internet Explorer, WebP implementation methods offer fallback solutions. 


Learn more about current WebP browser support statistics.


1. Basic Implementation

In its most basic implementation you can add WebP images to your site with the traditional <img/> tag or as a background image in your CSS (without fallback):


<!-- HTML -->

<img src="modern-image.webp" alt="My Image" />


// CSS

.my-image {

  background-image: url('modern-image.webp');

}


2. Advanced Implementation with Legacy Fallback

If you need to offer a graceful solution that supports both modern and legacy browsers, you can use the HTML <picture> and <img> tags together to provide modern WebP images to browsers that support them and JPEG fallback images for ones that don’t:


<!-- WebP Images with Legacy Fallback -->

<picture>

  <source srcset="modern-image.webp" type="image/webp" />

  <img src="fallback-image.jpg" alt="My Image" />

</picture>


3. Inline Background Images with Fallback using Modernizr

What if you need to have inline background images? Don’t worry. Using the Javascript utility Modernizr, we can take advantage of a technique called “feature detection” that tells us if the current browser supports WebP and provides the correct image to use based on those results:


<!-- HTML -->

<div class="inline-bg" 

  data-bg="fallback-image.jpg"

  data-bg-webp="modern-image.webp">

</div>


// Javascript (Don't forget to import Modernizr with WebP detection!)

const elms = document.querySelectorAll('*[data-bg]');


elms.forEach(function(item){

    let background;

    if (Modernizr.webp && item.getAttribute('data-bg-webp')) {

        background = item.getAttribute('data-bg-webp');

    } else {

        background = item.getAttribute('data-bg');

    }

    item.style.backgroundImage = "url(" + background + ")";

});


In the above example, we use Modernizr to look for elements on the page that contain the data-bg attribute, then assigning the value of that attribute for legacy browsers. For modern browsers that support WebP, we set the background image to the value of the data-bg-webp attribute.


4. Stylesheet Background Images with Fallback using Modernizr

Similarly, if your background images are defined in your stylesheets and not inline in your templates, you can still use Modernizr for a graceful implementation:


<!-- HTML -->

<div class="stylesheet-bg"></div>


// CSS

.stylesheet-bg {

  background-image: url('fallback-image.jpg');

}

html.webp .stylesheet-bg {

    background-image: url('modern-image.webp');

}


In the above example, the <html> tag will have a class of ‘webp’ applied to it if Modernizr is initiated on the page with WebP feature detection configured in the build. This simplifies cascading the background-image property in your stylesheet from legacy to modern images where supported.


5. Dynamic Conversion and Caching

Most websites that include a content management system offer image uploads. Under the hood, these applications typically use a command-line resource (the most popular being GD or ImageMagick) to save cached versions of specifically sized images that will eventually be served on the website. This is a good practice because it eliminates serving the original, large image that the administrator uploaded. Now we can take this a step further and convert uploaded images to WebP. Fortunately both GD and ImageMagick support WebP conversion, so producing WebP conversions as opposed to JPEG or PNG is typically just a configuration change. Combined with the HTML, CSS, and Modernizr upgrades to your front end, your site can be upgraded for WebP.

Conclusion

Upgrading your site to use WebP images has myriad positive effects on your site, including improved load times, bottom-line impact, Core Web Vital scores, and search engine ranking.


If you’d like to know more about upgrading your website to use modern WebP images, please contact Gray Loon today.



About the Author

Robert Wade is a Senior Full Stack Developer and Designer at Gray Loon Marketing Group, Inc. with over 20 years experience designing and programming websites and applications.



Robert Wade

Ready to see what Gray Loon can do for your business?

Contact Us Today