Add scalable animations to your WordPress sites via WebP, WebM and Streaming

In today’s digital world, web developers are constantly seeking ways to enhance user experience, whether it be through website speed or image quality. As we know, images are an essential component of any website, and they can significantly impact the overall performance of a website. For this reason, web developers are always searching for ways to optimize images without sacrificing quality.

One solution that has recently gained popularity is scalable animations with WebP for animated GIFs. WebP is an image format that was developed by Google in 2010 with the goal of creating a more efficient image format for the web. Since its inception, WebP has become the go-to image format for web developers looking to optimize images and improve website performance. Now that all modern browsers support WebP and WebM it makes more sense to swap out to these formats. Using CDNs like Cloudflare you can automatically serve WebP images on demand by signing up to their Pro plans.

The use of animated GIFs has been a popular trend on the web for years. However, the downside of using GIFs is that they tend to be large files, which can significantly slow down a website’s load time. Here is an example of an older animated Gif which still weighs in at 277Kb, is only a 6 seconds long and is not easily scalable.

This is where WebP comes in, as it provides a solution to this problem by reducing the file size of animated GIFs. WebP achieves this by using a more efficient compression algorithm than GIFs. This means that animated GIFs that are converted to WebP files can be up to 80% smaller in size while retaining the same level of quality. This reduction in file size can significantly improve website performance, leading to faster load times and a better user experience. The image below is now 112kb

Another advantage of using WebP for animated GIFs is that it allows for scalable animation. This means that the animation can be scaled up or down without losing too much quality, which is not possible with traditional GIFs. This is a significant benefit for web developers who want to use animated GIFs as WordPress featured images or thumbnails, as these images are often resized to fit different screen sizes. WordPress now offers full support for scalable animations with WebP, so it is possible to upload WebP images directly to your WordPress website and use them just as you would JPEG and PNG images in the past. For websites using the Imagify WordPress plugin to convert images to WebP format, you have the option to serve WebP images using <picture> tags instead of <img> tags. Progressive enhancement via <picture> lets the browser choose the first supported format in the order of preference. This implementation is considerably simplified when using image CDN’s where the Accept Header and content negotiation (e.g. auto-format and quality) can serve the best image.

Having said this, the use of animated images should be minimised on all webpages. If you need to have video like animations that are more like a movie in content, then use a movie format like WebM or stream using Vimeo or youtube . Streaming video not only reduces the page loading speeds but also leverages the great delivery networks of the big streaming platforms. Visitors will see an optimised view of your video, based on their device and connection (see the whole, full size video below). We have recently added in quite a few of these features to client sites like Studio Foundation and Digital Gravity.

As a web development company, it’s important to stay up-to-date with the latest trends and technologies in the industry. As part of our service to Design Agencies we strongly suggest incorporating Video, WebM & WebP into your web development process, you can provide your clients with websites that are not only visually appealing but also fast-loading and optimized for the web. So, if you’re looking to take your digital output to the next level, consider using the new video formats and see the difference it can make for your clients and their users.