{"id":1075,"date":"2021-04-29T12:54:10","date_gmt":"2021-04-29T12:54:10","guid":{"rendered":"http:\/\/shortpixel.com/blog\/?p=1075"},"modified":"2024-11-17T09:37:22","modified_gmt":"2024-11-17T07:37:22","slug":"how-webp-images-can-speed-up-your-site","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/how-webp-images-can-speed-up-your-site\/","title":{"rendered":"How Can WebP Images Speed Up Your WordPress Site"},"content":{"rendered":"\n

You have done an excellent job in optimizing your WordPress website by minifying and compacting your JavaScript and CSS, as well a serving properly sized images<\/a> and optimizing them<\/a> to make them lightweight. <\/p>\n\n\n\n

Using plugins such as Autoptimize or ShortPixel Image Optimizer have made this process more manageable. However, there is still more that can be done to improve the performance of your website. <\/p>\n\n\n\n

Introducing WebP – a next-gen image format developed by Google that offers superior compression than traditional formats such as JPG, PNG, and GIF.<\/p>\n\n\n\n\n\n\n\n

Why WebP images instead of other formats?<\/h2>\n\n\n\n

Google’s study<\/a> indicates that WebP images offer significant size reduction compared to traditional formats. Lossless WebP images are 26% smaller<\/strong> in size compared to PNGs. Lossy WebP images are 25-34% smaller<\/span><\/strong> than comparable JPEG images at equivalent SSIM quality index. <\/p>\n\n\n\n

\"webp<\/a><\/figure>\n\n\n\n

Lossless WebP supports transparency<\/strong> (also known as alpha channel) at a cost of just 22% additional bytes<\/strong>. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency<\/strong>, typically providing 3 times smaller file sizes compared to PNG.<\/p>\n\n\n\n

That’s a huge improvement. The reduced file size WebP images offer without having to reduce image quality leads to a faster page speed<\/strong>.<\/p>\n\n\n\n

Which browser supports WebP images?<\/h2>\n\n\n\n

In order for WebP images to be displayed, the web browser used by the visitor must have the capability to support the format. Although browser support for WebP has increased recently, it is not yet a universally accepted format among all browsers.<\/p>\n\n\n\n

At the time of writing, WebP images are supported by popular browsers such as Chrome, Firefox, Edge, Safari (full support for macOS 11 Big Sur and later), Safari for iOS, Android Browser, Opera, and so on.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

More than 94% of users<\/a> operate a web browser that supports WebP images.<\/p>\n\n\n\n

In the tutorial that follows, we will demonstrate a simple method for creating and delivering WebP images on WordPress, which can enhance the speed of your website and improve the user experience.<\/p>\n\n\n\n

How to create WebP images in WordPress?<\/h2>\n\n\n\n

If you have a WordPress website, you are lucky, because there is a simple solution to create WebP images.<\/p>\n\n\n\n

Using ShortPixel Image Optimizer<\/a>, you can create WebP images <\/strong>alongside the existing formats when optimizing your images. After installing the plugin, navigate to Settings <\/strong>> ShortPixel <\/strong>> Advanced <\/strong>and enable the option.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

WebP versions of images are only generated during the optimization process. To create WebP images after the images have been optimized with the plugin, the simplest solution would be to run the bulk optimization by navigating to Media > Bulk ShortPixel, and turning on the toggle to create WebP before following the process.<\/p>\n\n\n\n

How can I serve WebP images on WordPress?<\/h2>\n\n\n\n

Using bult-in solutions of a plugin<\/strong><\/h3>\n\n\n\n

You are able to serve WebP versions of the images on your WordPress website using a plugin such as ShortPixel Image Optimizer, which comes with two delivery methods:<\/p>\n\n\n\n

Without altering the page code (via .htaccess)<\/strong><\/h4>\n\n\n\n

This delivery method will add a new code block to the .htaccess file, which will ensure that the browser supports WebP images. If both the JPG\/PNG\/GIF and WebP versions of an image are available, the server will deliver the WebP version. This approach has the advantage of serving WebP image files directly without making any changes to the page code.<\/p>\n\n\n\n

Altering the page code<\/strong><\/h4>\n\n\n\n

Now you can use the WebP image format by simply checking the corresponding “Using the <PICTURE> tag synta<\/em>x” option in the advanced settings tab of ShortPixel and all your <img> tags will be replaced with <picture> tags that include the WebP images, letting the browser chose the best version according to its capabilities. <\/p>\n\n\n\n

The <picture> tag contains also a Generate WebP markup tag for fallback reasons, allowing the styles to remain in place. In some rare cases – when the styling of your images relies on positional queries ( :first, :nth-child selectors or “>” direct child reference ) you might encounter styling problems when activating this option and you will need to use the cache plugin solution below. <\/p>\n\n\n\n

The second option can be implemented either by hooking onto WordPress’s own functions (a more limited, but a bit safer method) or by simply analyzing all the code in a page and doing the required changes before serving the page to the browser (this ensures more independence from any third-party tools that might not operate through the official WordPress channels and methods).<\/p>\n\n\n\n

Cache plugin solution<\/strong><\/h3>\n\n\n\n

Using Cache Enabler<\/a><\/h4>\n\n\n\n

You can also use a cache plugin that is WebP aware. We’ve tested the Cache Enabler plugin and it works out of the box with ShortPixel in delivering the WebP images. You just need to install and activate it, then go to Settings > Cache Enabler<\/strong> and check the option to “Create an additional cached version for WebP image support”<\/strong>.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Using LiteSpeed Cache<\/a><\/strong><\/h4>\n\n\n\n

You can also use LiteSpeed Cache plugin to serve WebP. After creating your WebP files, you can serve them by following the instructions below.<\/p>\n\n\n\n

    \n
  1. Add this constant in wp-config.php:<\/li>\n<\/ol>\n\n\n\n
    define('SHORTPIXEL_USE_DOUBLE_WEBP_EXTENSION', true);<\/pre><\/blockquote>\n\n\n\n
      \n
    1. Activate the LiteSpeed’s Advanced settings:<\/li>\n<\/ol>\n\n\n\n
      \"\"<\/a><\/figure>\n\n\n\n
        \n
      1. Activate the WebP delivery options:<\/li>\n<\/ol>\n\n\n\n
        \"\"<\/a><\/figure>\n\n\n\n
          \n
        1. Do not activate LiteSpeed’s option to generate the WebP images files – ShortPixel Image Optimizer will generate them when optimizing the images (if you already have optimized images and didn’t generate WebP, you will need to run the bulk optimization again by navigating to Media > Bulk ShortPixel.).<\/li>\n<\/ol>\n\n\n\n
          Using WP Rocket<\/h4>\n\n\n\n
          If you are using WP Rocket, you can simply create WebP files using ShortPixel Image Optimizer, as previously explained, and deliver them to compatible browsers using WP Rocket.<\/p>\n\n\n\n
          In order to achieve that, navigate to WP Rocket plugin settings > Add-ons, and turn on the WebP Compatibility<\/a> feature.<\/p>\n\n\n\n
          Conclusion<\/h2>\n\n\n\n
          Now that you know what WebP images are and how can they speed up the performance of your website, why don’t you give ShortPixel Image Optimizer<\/a> a try and start creating and serving them? <\/p>\n\n\n\n
          You can sign up for a free account here<\/a> that includes 100 credits per month, which you can spend on compressing your images, as well as generating WebP.<\/p>\n\n\n\n
          We’d love to hear your thoughts! Drop us a line below and let us know if you have any questions or recommendations about WebP images.<\/p>\n","protected":false},"excerpt":{"rendered":"
          You have done an excellent job in optimizing your WordPress website by minifying and compacting your JavaScript and CSS, as well a serving properly sized images and optimizing them to make them lightweight. Using plugins such as Autoptimize or ShortPixel Image Optimizer have made this process more manageable. However, there is still more that can […]<\/p>\n","protected":false},"author":1,"featured_media":6562,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1075","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-world-of-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/1075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=1075"}],"version-history":[{"count":32,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/1075\/revisions"}],"predecessor-version":[{"id":11786,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/1075\/revisions\/11786"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media\/6562"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=1075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=1075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=1075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}