July 4 2019

Decrease the weight of a website with the use of WebP images

What image format to use for a website? Here is the best choice.

Webp WordPress Banners

It is said that a picture is worth a thousand words, but online, a picture can be worth a thousand kilobytes or more!

The HTTP archive shows that images represent on average 64% of the total size of a web page. With this in mind, image optimization is crucial, especially when you consider that up to 40% of users abandon a request if it is not loaded within 3 seconds. The problem of image optimization arises when designers want to keep image file sizes small without sacrificing image quality. Past attempts to create new image file types that are better optimized than the standard JPEG, PNG, and GIF formats have not been successful.

WebP is an image file type that was created in 2010 and is currently under development by Google. This image format provides lossless and lossless compression to images on the Internet. Several big names are campaigning for the use of WebP, most notably Google, Facebook and Ebay.

In Managedserver.it, we are always experimenting with techniques that improve website performance for our customers, so we did A / B testing to understand the impact of WebP on image quality and how to best implement it in our customers' projects.

One of the main reasons we considered using WebP is the small size of the files.

According to Google in fact:

  • WebP's lossless image files are 26% smaller than PNGs.
  • WebP lossy image files are 25-34% smaller than JPEG images with an equivalent SSIM index.
  • WebP supports lossless transparency (also known as alpha channel) with just 22% more bytes.

In short, currently the best performing solution for images on the Web as shown by this graph.

 

Browser support

Current browser support for WebP still has a way to go. Caniuse.com shows support for Chrome and Opera with Firefox announcing that they will be working on WebP support in the future, but this is a discussion that has been going on for some time.

Strictly speaking, providing the right format correctly requires hosting expertise as it must be able to determine the visitor's browser browsing the site and conditionally provide the right image format.

In fact, if this step is not performed correctly, the browser would not be able to load the images correctly, producing an image loading result and not showing the image to the final visitor.

Using WebP images in WordPress

To work well with WebP images in WordPress the best and easiest solution is to work using the plugin WebP Express.

WebP Express is a free plugin which produces images less than half the size of JPEGs. Direct JPEG and PNG to an image converter to convert or to the already converted image. It works regardless of how the images got to the server. It works with the media library, galleries and for thematic images referenced by CSS.

It does not work with Microsoft IIS server, and has not been tested with multi-site installation but it works very well with WebServers such as Apache, LiteSpeed, NGINX by adding the necessary rewrite rules or at the .htaccess level for Apache and LiteSpeed ​​or in the configuration file of NGINX.

It requires some settings for conversion methods, but you have several to choose from. The images will use the conversion method on top first, and if that fails, it will move through the list until it finds a method that works with the image. You can drag and drop them in the order you want them to be used.

The plugin uses the WebP Convert library to convert images to webp.

WebP Convert is capable of converting images using multiple methods. There are the "local" conversion methods: cwebp, gd, imagick. If none of these methods work on your host, there are cloud alternatives: ewwww (paid) or connecting to a WordPress site where you have installed WebP Express and enabled the "web service" feature.

The plugin supports several ways of delivering webps to browsers that support it:

  • By routing jpeg / png images to the corresponding webp - or image converter if the image has not been converted yet.
  • By modifying the HTML, replacing the image tags with image tags. Missing web pages are automatically generated on visit.
  • By modifying the HTML, replacing the URLs of the images so that all points to webp. Substitutions are made only for browsers that support webp. Again, missing webps are automatically generated on visit.
  • In combination with the Cache Enabler, the same result as above can be achieved, but with the page cache.
  • It can also provide webp to all browsers and add webpjs javascript, which provides webp support for browsers that do not support webp natively.

Some limitations of WebP Express

 

Mass Bulk of images

One of the "limitations" of WebP Express is that it is difficult to use when dealing with blogs that have been running for many years and contain hundreds of thousands or millions of images. The Batch image generation process is in fact not efficient and being managed on the browser side, it often does not allow efficient management of the recompression of all resources without a continuous manual restart of the recompression operation.

This process is typically called mass bulk and although currently present on the roadmap, it is currently not present natively.

Lazy Load not working with some plugins

The most common way of lazy-loading is to set a data-src attribute on the image and let javascript use that value to set the src attribute. This method works, since the image request, viewed from the server side, is indistinguishable from any other image request. However, it could be that some obscure lazy load implementation loads the image with an XHR request. In this case, the Accept header will not contain 'image / webp', but '/', and a jpeg will be served, even if the browser supports webp.

The following lazy loading plugins and frameworks have been tested and work with WebP Express:

A real case of a photography agency website

To better understand the possibilities and importance of the webp graphic format, we wanted to demonstrate it in the field with the optimization of a website of a photo agency specializing in weddings with a portfolio of over 70 Gigabytes of photos and jpeg images.

As their photographic work is exceptional, the homepage alone had a weight of 90 MEGABYTE, and through the use of webp we arrived at "only" 25 MB with a data saving of more than 3/4 of the original weight and a loading speed of about three times.

Feel free to put the video below to full screen to understand how you can save 75% of the weight of the images without compromising the quality of the same.

Conclusion

There seems therefore no reason not to use WebP nowadays, aware that having a considerably reduced weight of a web page and its multimedia resources can only be beneficial on slow connections and mobile devices.

 

Do you have doubts? Don't know where to start? Contact us!

We have all the answers to your questions to help you make the right choice.

Chat with us

Chat directly with our presales support.

0256569681

Contact us by phone during office hours 9:30 - 19:30

Contact us online

Open a request directly in the contact area.

INFORMATION

Managed Server Srl is a leading Italian player in providing advanced GNU/Linux system solutions oriented towards high performance. With a low-cost and predictable subscription model, we ensure that our customers have access to advanced technologies in hosting, dedicated servers and cloud services. In addition to this, we offer systems consultancy on Linux systems and specialized maintenance in DBMS, IT Security, Cloud and much more. We stand out for our expertise in hosting leading Open Source CMS such as WordPress, WooCommerce, Drupal, Prestashop, Joomla, OpenCart and Magento, supported by a high-level support and consultancy service suitable for Public Administration, SMEs and any size.

Red Hat, Inc. owns the rights to Red Hat®, RHEL®, RedHat Linux®, and CentOS®; AlmaLinux™ is a trademark of AlmaLinux OS Foundation; Rocky Linux® is a registered trademark of the Rocky Linux Foundation; SUSE® is a registered trademark of SUSE LLC; Canonical Ltd. owns the rights to Ubuntu®; Software in the Public Interest, Inc. holds the rights to Debian®; Linus Torvalds holds the rights to Linux®; FreeBSD® is a registered trademark of The FreeBSD Foundation; NetBSD® is a registered trademark of The NetBSD Foundation; OpenBSD® is a registered trademark of Theo de Raadt. Oracle Corporation owns the rights to Oracle®, MySQL®, and MyRocks®; Percona® is a registered trademark of Percona LLC; MariaDB® is a registered trademark of MariaDB Corporation Ab; REDIS® is a registered trademark of Redis Labs Ltd. F5 Networks, Inc. owns the rights to NGINX® and NGINX Plus®; Varnish® is a registered trademark of Varnish Software AB. Adobe Inc. holds the rights to Magento®; PrestaShop® is a registered trademark of PrestaShop SA; OpenCart® is a registered trademark of OpenCart Limited. Automattic Inc. owns the rights to WordPress®, WooCommerce®, and JetPack®; Open Source Matters, Inc. owns the rights to Joomla®; Dries Buytaert holds the rights to Drupal®. Amazon Web Services, Inc. holds the rights to AWS®; Google LLC holds the rights to Google Cloud™ and Chrome™; Microsoft Corporation holds the rights to Microsoft®, Azure®, and Internet Explorer®; Mozilla Foundation owns the rights to Firefox®. Apache® is a registered trademark of The Apache Software Foundation; PHP® is a registered trademark of the PHP Group. CloudFlare® is a registered trademark of Cloudflare, Inc.; NETSCOUT® is a registered trademark of NETSCOUT Systems Inc.; ElasticSearch®, LogStash®, and Kibana® are registered trademarks of Elastic NV Hetzner Online GmbH owns the rights to Hetzner®; OVHcloud is a registered trademark of OVH Groupe SAS; cPanel®, LLC owns the rights to cPanel®; Plesk® is a registered trademark of Plesk International GmbH; Facebook, Inc. owns the rights to Facebook®. This site is not affiliated, sponsored or otherwise associated with any of the entities mentioned above and does not represent any of these entities in any way. All rights to the brands and product names mentioned are the property of their respective copyright holders. Any other trademarks mentioned belong to their registrants. MANAGED SERVER® is a trademark registered at European level by MANAGED SERVER SRL, Via Enzo Ferrari, 9, 62012 Civitanova Marche (MC), Italy.

JUST A MOMENT !

Would you like to see how your WooCommerce runs on our systems without having to migrate anything? 

Enter the address of your WooCommerce site and you will get a navigable demonstration, without having to do absolutely anything and completely free.

No thanks, my customers prefer the slow site.
Back to top