{"id":72317,"date":"2019-10-30T04:19:52","date_gmt":"2019-10-30T11:19:52","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/"},"modified":"2019-10-30T04:19:52","modified_gmt":"2019-10-30T11:19:52","slug":"speed-up-your-website-with-webp","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/","title":{"rendered":"Speed Up Your Website With WebP"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/10\/speed-up-your-website-webp\/\"><title>Speed Up Your Website With WebP<\/title><\/p>\n<article>\n<header>\n<h1>Speed Up Your Website With WebP<\/h1>\n<address>Suzanne Scacca<\/address>\n<p>                  <time datetime=\"2019-10-29T12:30:59+02:00\">2019-10-29T12:30:59+02:00<\/time><time datetime=\"2019-10-30T11:06:36+00:00\">2019-10-30T11:06:36+00:00<\/time><\/header>\n<p>(This is a sponsored post.) Spend enough time running websites through <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">PageSpeed Insights<\/a> and you\u2019ll notice that Google has a major beef with traditional image formats like JPG, PNG and even GIF. As well it should.<\/p>\n<p>Even if you resize your images to the exact specifications of your website and run them through a compressor, they can still put a strain on performance and run up bandwidth usage. Worse, all of that image manipulation can compromise the resulting quality.<\/p>\n<p>Considering how important images are to web design, this isn\u2019t an element we can dispose of so easily nor can we afford to cut corners when it comes to optimizing them. So, what\u2019s the solution?<\/p>\n<p>Here\u2019s what Google suggests:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b71f7305-80f7-4e27-887c-2867879f1447\/image1-speed-up-your-website-webp.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image1-speed-up-your-website-webp.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b71f7305-80f7-4e27-887c-2867879f1447\/image1-speed-up-your-website-webp.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b71f7305-80f7-4e27-887c-2867879f1447\/image1-speed-up-your-website-webp.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b71f7305-80f7-4e27-887c-2867879f1447\/image1-speed-up-your-website-webp.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b71f7305-80f7-4e27-887c-2867879f1447\/image1-speed-up-your-website-webp.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image1-speed-up-your-website-webp.png?w=900\" sizes=\"100vw\" alt=\"PageSpeed Insights WebP tips\"><\/a><figcaption>\n      PageSpeed Insights demonstrates how much storage and bandwidth websites stand to save with WebP. (Source: <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">PageSpeed Insights<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b71f7305-80f7-4e27-887c-2867879f1447\/image1-speed-up-your-website-webp.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Years ago, Google aimed to put a stop to this problem by creating a next-gen image format called WebP. You can see in this screenshot from PageSpeed Insights that Google recommends using WebP and other next-gen formats to significantly reduce the size of your images while preserving their quality.<\/p>\n<p>And if .75 seconds doesn\u2019t seem like much to you (at least in this example), it could make a big difference in the lives of your visitors, the people who sit there wondering how long is too long to wait. <strong>Just one less second of loading could make a world of difference to your conversion rate.<\/strong><\/p>\n<p>But is WebP the best solution for this problem? Today, we\u2019re going to examine:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/articles\/#meaning-of-webp\">What WebP is<\/a>,<\/li>\n<li>What are the <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#webp-advantages\">advantages<\/a> of using it,<\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/articles\/#how-webp-works\">How it works<\/a> with browsers and devices,<\/li>\n<li>What are the <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#webp-challenges\">challenges<\/a> of converting and delivering WebP, and<\/li>\n<li>How to <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#simplify-webp-keycdn\">simplify conversion<\/a> and delivery with KeyCDN.<\/li>\n<\/ul>\n<h3>What is WebP?<\/h3>\n<p>Google developed WebP back in 2010 after <a href=\"https:\/\/en.wikipedia.org\/wiki\/WebP\">acquiring a company called On2 Technologies<\/a>. On2 had worked on a number of video compression technologies, which ended up serving as the basis for Google\u2019s new audiovisual format WebM and next-gen image format WebP.<\/p>\n<p>Originally, WebP used lossy compression in an attempt to create smaller yet still high-quality images for the web.<\/p>\n<blockquote>\n<p>\n    <a aria-label=\"Share on Twitter\" href=\"http:\/\/twitter.com\/share?text=If%20.75%20seconds%20doesn%E2%80%99t%20seem%20like%20much%20to%20you,%20it%20could%20make%20a%20big%20difference%20in%20the%20lives%20of%20your%20visitors,%20the%20people%20who%20sit%20there%20wondering%20how%20long%20is%20too%20long%20to%20wait.%0A&#038;url=https:\/\/smashingmagazine.com%2F2019%2F10%2Fspeed-up-your-website-webp%2F\"><br \/>\n      If .75 seconds doesn\u2019t seem like much to you, it could make a big difference in the lives of your visitors, the people who sit there wondering how long is too long to wait.<\/p>\n<p>    <\/a>\n  <\/p>\n<div>\n<div>\n      <span>\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<h4>Lossy Compression For WebP<\/h4>\n<p>Lossy compression is a form of compression used to greatly reduce the file sizes of JPGs and GIFs. In order to make that happen, though, some of the data (pixels) from the file needs to be dropped out or \u201clost\u201d. This, in turn, leads to some degradation of the quality of the image, though it\u2019s not always noticeable.<\/p>\n<p>WebP entered the picture with a much more efficient use of lossy compression (which I\u2019ll explain below) and became the much-needed successor to JPG.<\/p>\n<p>You can see a great demonstration of this difference as KeyCDN <a href=\"https:\/\/www.keycdn.com\/blog\/convert-to-webp-the-successor-of-jpeg\">compares the difference in file sizes of a compressed JPG vs. WebP<\/a>:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/42497b1c-4b3b-49fa-ba0e-16dcfb4020cd\/image3-speed-up-your-website-webp.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image3-speed-up-your-website-webp.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/42497b1c-4b3b-49fa-ba0e-16dcfb4020cd\/image3-speed-up-your-website-webp.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/42497b1c-4b3b-49fa-ba0e-16dcfb4020cd\/image3-speed-up-your-website-webp.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/42497b1c-4b3b-49fa-ba0e-16dcfb4020cd\/image3-speed-up-your-website-webp.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/42497b1c-4b3b-49fa-ba0e-16dcfb4020cd\/image3-speed-up-your-website-webp.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image3-speed-up-your-website-webp.png?w=900\" sizes=\"100vw\" alt=\"KeyCDN compares original file size against compressed JPG and WebP\"><\/a><figcaption>\n      KeyCDN shows how five images differ in size between the original, a compressed JPG and a WebP. (Source: <a href=\"https:\/\/www.keycdn.com\/blog\/convert-to-webp-the-successor-of-jpeg\">KeyCDN<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/42497b1c-4b3b-49fa-ba0e-16dcfb4020cd\/image3-speed-up-your-website-webp.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Notice how significant a difference this is in terms of file size, even after the JPG has been compressed to a comparable quality. <a href=\"https:\/\/www.smashingmagazine.com\/2015\/10\/webp-images-and-performance\/\">As Adrian James explains here<\/a>, though, you have to be careful with WebP compression.<\/p>\n<blockquote><p>\u201cCompression settings don\u2019t match up one-to-one with JPEG. Don\u2019t expect a 50%-quality JPEG to match a 50%-quality WebP. Quality drops pretty sharply on the WebP scale, so start at a high quality and work your way down.\u201d<\/p><\/blockquote>\n<p>Considering how much more file sizes shrink with WebP compared to JPG, though, that shouldn\u2019t be too much of a sticking point. It\u2019s just something to think about if you\u2019re considering pushing the limits of what WebP can do even further.<\/p>\n<p>Now, as time passed, Google continued to develop WebP technology, eventually getting it to a point where it would support not just true-color web graphics, but also XMP metadata, color profiles, tiling, animation, and transparency.<\/p>\n<p>Eventually, Google brought lossless compression to WebP, <strong>turning it into a viable contender for PNG<\/strong>, too.<\/p>\n<h4>Lossless Compression For WebP<\/h4>\n<p>Lossless compression does not degrade image quality the way lossy does. Instead, it achieves smaller file sizes by removing excess metadata from the backend of the file. This way, the quality of the image remains intact while reducing its size. That said, lossless compression can\u2019t achieve the kinds of file sizes lossy compression can.<\/p>\n<p>That was until WebP\u2019s lossless compression came along.<\/p>\n<p>You can see some beautiful examples of how WebP\u2019s lossy and lossless compression stands up against PNG in <a href=\"https:\/\/developers.google.com\/speed\/webp\/gallery\">Google\u2019s WebP galleries<\/a>:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3d84205-58e9-4190-9268-b57b8a89be02\/image2-speed-up-your-website-webp.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image2-speed-up-your-website-webp.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3d84205-58e9-4190-9268-b57b8a89be02\/image2-speed-up-your-website-webp.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3d84205-58e9-4190-9268-b57b8a89be02\/image2-speed-up-your-website-webp.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3d84205-58e9-4190-9268-b57b8a89be02\/image2-speed-up-your-website-webp.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3d84205-58e9-4190-9268-b57b8a89be02\/image2-speed-up-your-website-webp.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image2-speed-up-your-website-webp.png?w=900\" sizes=\"100vw\" alt=\"Google WebP Gallery comparison against PNG\"><\/a><figcaption>\n      The Google WebP Galleries show how PNG images compare in quality and size to compressed WebPs. (Source: <a href=\"https:\/\/developers.google.com\/speed\/webp\/gallery\">Google<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3d84205-58e9-4190-9268-b57b8a89be02\/image2-speed-up-your-website-webp.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>If there\u2019s any degradation in the quality of the WebP images, it\u2019s going to be barely noticeable to your visitors. The only thing they\u2019re really going to notice is how quickly your site loads.<\/p>\n<h3>What Are The Advantages Of Using WebP?<\/h3>\n<p>It\u2019s not enough to say that WebP is \u201cbetter\u201d than JPG and PNG. It\u2019s important to understand the mechanics of how WebP works and why it\u2019s so beneficial to use over other file formats as a result.<\/p>\n<p>With traditional image formats, compression always results in a tradeoff.<\/p>\n<p>JPG lossy compression leads to degradation of the clarity and fineness of an image. Once applied, it cannot be reversed.<\/p>\n<p>WebP lossy compression, on the other hand, uses what\u2019s known as prediction coding to more accurately adjust the pixels in an image. As Google explains, <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/compression\">there are other factors at work<\/a>, too:<\/p>\n<blockquote><p>\u201cBlock adaptive quantization makes a big difference, too. Filtering helps at mid\/low bitrates. Boolean arithmetic encoding provides 5%-10% compression gains compared to Huffman encoding.\u201d<\/p><\/blockquote>\n<p><strong>On average, Google estimates that WebP lossy compression results in files that are between 25% and 34% smaller than JPGs of the same quality.<\/strong><\/p>\n<p>As for PNG lossless compression, it does work well in maintaining the quality of an image, but it doesn\u2019t have as significant an impact on image size as its JPG counterpart. And certainly not when compared to WebP.<\/p>\n<p>WebP handles this type of compression more efficiently and effectively. This is due to the variety of compression techniques used as well as entropy encoding applied to images. Again, Google explains how it works:<\/p>\n<blockquote><p>\u201cThe transforms applied to the image include spatial prediction of pixels, color space transform, using locally emerging palettes, packing multiple pixels into one pixel and alpha replacement.\u201d<\/p><\/blockquote>\n<p><strong>On average, Google estimates that WebP lossless compression results in files that are roughly 26% smaller than PNGs of the same quality.<\/strong><\/p>\n<p>That\u2019s not all. WebP has the ability to do something that no other file formats can do. Designers can use WebP lossy encoding on RGB colors and lossless encoding on images with transparent backgrounds (alpha channel).<\/p>\n<p>Animated images, otherwise served in GIF format, also benefit from WebP compression systems. There are a number of reasons for this:<\/p>\n<table data-tablesaw-mode=\"swipe\" data-tablesaw-minimap>\n<thead>\n<tr>\n<th data-tablesaw-priority=\"persist\"><\/th>\n<th>GIF<\/th>\n<th>WebP<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Compression<\/td>\n<td>Lossless<\/td>\n<td>Lossless + lossy<\/td>\n<\/tr>\n<tr>\n<td>RBG Color Support<\/td>\n<td>8-bit<\/td>\n<td>24-bit<\/td>\n<\/tr>\n<tr>\n<td>Alpha Channel Support<\/td>\n<td>1-bit<\/td>\n<td>8-bit<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>As a result of this powerful combo of lossless and lossy compression, animated videos can get down to much smaller sizes than their GIF counterparts.<\/p>\n<p><strong>Google estimates the average reduction to be about 64% of the original size of a GIF when using lossy compression and 19% when using lossless.<\/strong><\/p>\n<blockquote>\n<p>\n    <a aria-label=\"Share on Twitter\" href=\"http:\/\/twitter.com\/share?text=Needless%20to%20say,%20there%E2%80%99s%20nothing%20that%20can%20beat%20WebP%20when%20it%20comes%20to%20speed%20while%20maintaining%20image%20integrity.%0A&#038;url=https:\/\/smashingmagazine.com%2F2019%2F10%2Fspeed-up-your-website-webp%2F\"><br \/>\n      Needless to say, there\u2019s nothing that can beat WebP when it comes to speed while maintaining image integrity.<\/p>\n<p>    <\/a>\n  <\/p>\n<div>\n<div>\n      <span>\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<h3>Acceptance Of WebP Among Browsers, Devices And CMS<\/h3>\n<p>As you can imagine, when WebP was first released, it was only supported by Google\u2019s browsers and devices. Over time, though, other platforms have begun to provide support for WebP images.<\/p>\n<p>That said, <a href=\"https:\/\/www.keycdn.com\/support\/webp-browser-support\">WebP still doesn\u2019t have universal support<\/a>, which can cause problems for web designers who use this image format by default.<\/p>\n<p>Let\u2019s take a look at where you can expect full acceptance of your WebP images, where you won\u2019t and then we\u2019ll discuss what you can do to get around this hiccup.<\/p>\n<p>As of writing this in 2019, <a href=\"https:\/\/caniuse.com\/#feat=webp\">Can I use\u2026<\/a> has accounted for the following platforms that support WebP:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ee3808d-0f2e-4838-b3ee-8d48470b9fec\/image4-speed-up-your-website-webp.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image4-speed-up-your-website-webp.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ee3808d-0f2e-4838-b3ee-8d48470b9fec\/image4-speed-up-your-website-webp.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ee3808d-0f2e-4838-b3ee-8d48470b9fec\/image4-speed-up-your-website-webp.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ee3808d-0f2e-4838-b3ee-8d48470b9fec\/image4-speed-up-your-website-webp.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ee3808d-0f2e-4838-b3ee-8d48470b9fec\/image4-speed-up-your-website-webp.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image4-speed-up-your-website-webp.png?w=900\" sizes=\"100vw\" alt=\"\u2018Can I Use\u2019 data on WebP support\"><\/a><figcaption>\n      \u2018Can I Use\u2019 breaks down which browsers and versions of those browsers provide support for WebP. (Source: <a href=\"https:\/\/caniuse.com\/#feat=webp\">Can I use&#8230;<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ee3808d-0f2e-4838-b3ee-8d48470b9fec\/image4-speed-up-your-website-webp.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The latest versions of the following platforms are supported:<\/p>\n<ul>\n<li>Edge<\/li>\n<li>Firefox<\/li>\n<li>Chrome<\/li>\n<li>Opera<\/li>\n<li>Opera Mini<\/li>\n<li>Android Browser<\/li>\n<li>Opera Mobile<\/li>\n<li>Chrome for Android<\/li>\n<li>Firefox for Android<\/li>\n<li>UC Browser for Android<\/li>\n<li>Samsung Internet<\/li>\n<li>QQ Browser<\/li>\n<li>Baidu Browser<\/li>\n<\/ul>\n<p>The platforms that continue to hold back support are:<\/p>\n<ul>\n<li>Internet Explorer<\/li>\n<li>Safari<\/li>\n<li>iOS Safari<\/li>\n<li>KaiOS Browser<\/li>\n<\/ul>\n<p>It\u2019s not just browsers that are on the fence about WebP. Image editing software and content management systems are, too.<\/p>\n<p><a href=\"https:\/\/imagemagick.org\/script\/webp.php\">ImageMagick<\/a>, <a href=\"https:\/\/www.pixelmator.com\/blog\/2010\/10\/06\/pixelmator-1-6-2-adds-webp-support\/\">Pixelmator<\/a> and <a href=\"https:\/\/www.gimp.org\/news\/2018\/04\/27\/gimp-2-10-0-released\/\">GIMP<\/a> all support WebP, for instance. <a href=\"https:\/\/www.sketch.com\/docs\/exporting\/file-formats\/\">Sketch<\/a> enables users to export files as WebP. And for software that doesn\u2019t natively support WebP, like Photoshop, users can usually <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webpshop\">install a plugin<\/a> which will allow them to open and save files as WebP.<\/p>\n<p>Content management systems are in a similar spot. Some have taken the lead in moving their users over to WebP, whether they uploaded their files in that format or not. <a href=\"https:\/\/changelog.shopify.com\/posts\/online-stores-automatically-serve-webp-images\">Shopify<\/a> and <a href=\"https:\/\/support.wix.com\/en\/article\/images-and-site-performance\">Wix<\/a> are two site builders that automatically convert and serve images in WebP format.<\/p>\n<p>Although there are other platforms that don\u2019t natively support WebP, there are usually extensions or plugins you can use to upload WebP images or convert uploaded ones into this next-gen format.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/\">WordPress<\/a> is one of those platforms. Drupal is another popular CMS that provides users with WebP <a href=\"https:\/\/www.drupal.org\/project\/webp\">modules<\/a> that add WebP support. <a href=\"https:\/\/www.yireo.com\/software\/magento-extensions\/webp\">Magento<\/a> is yet another.<\/p>\n<p>It\u2019s pretty rare not to find some sort of add-on support for WebP. The only example that I\u2019m aware of that doesn\u2019t accept it is <a href=\"https:\/\/support.squarespace.com\/hc\/en-us\/articles\/206542517-Formatting-your-images-for-display-on-the-web\">Squarespace<\/a>.<\/p>\n<h3>Challenges Of Converting And Delivering WebP<\/h3>\n<p>Okay, so WebP doesn\u2019t have 100% support on the web. Not yet anyway. That\u2019s okay. For the most part, we have some sort of workaround in terms of adding support to the tools we use to design and build websites.<\/p>\n<p>But what do we do about the browser piece? If our visitors show up on an iOS device, how do we make sure they\u2019re still served an image if our default image is WebP?<\/p>\n<p>First, you need to know how to convert images into WebP.<\/p>\n<p>Last year, front end developer Jeremy Wagner wrote up <a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/converting-images-to-webp\/\">a guide for Smashing Magazine<\/a> on this very topic. In it, he covers how to convert to WebP using:<\/p>\n<ul>\n<li>Sketch,<\/li>\n<li>Photoshop,<\/li>\n<li>The command line,<\/li>\n<li>Bash,<\/li>\n<li>Node.js,<\/li>\n<li>gulp,<\/li>\n<li>Grunt,<\/li>\n<li>webpack.<\/li>\n<\/ul>\n<p>Any of these options will help you convert your PNGs and JPGs into WebPs. Your image editing software will only get you halfway to your destination though.<\/p>\n<p>It\u2019ll handle the conversion, but it won\u2019t help you modify your origin server so that it knows when to deliver WebPs and when to deliver a traditional image format to visitors.<\/p>\n<p>Some of these methods let you dictate how your server delivers images based on the restraints of your visitors\u2019 browsers. Still, it takes a bit of work to modify the origin servers to make this happen. If you\u2019re not comfortable doing that or you don\u2019t want to deal with it, KeyCDN has a solution.<\/p>\n<h3>The Solution: Simplify WebP Delivery With KeyCDN<\/h3>\n<p><a href=\"https:\/\/www.keycdn.com\/\">KeyCDN<\/a> understands how important it is to have a website that loads at lightning-fast speeds. It\u2019s what KeyCDN is in the business to do. That\u2019s why it\u2019s no surprise that it\u2019s developed a built-in WebP caching and image processing solution that helps developers more easily deliver the right file formats to visitors.<\/p>\n<h4>What Is WebP Caching?<\/h4>\n<p>Caching is an integral part of keeping any website running fast. And WebP caching is only going to make it better. Essentially, it\u2019s a form of content negotiation that takes place in the HTTP header.<\/p>\n<p>It works like this:<\/p>\n<p>Someone visits a website that has KeyCDN\u2019s WebP caching enabled. The visitor\u2019s browser sends an <code>accept<\/code> HTTP header as part of the request to the server with a list of asset types it prefers. But rather than go to the origin server (at the web host), the request is processed by the edge server (at KeyCDN). The edge server reviews the list of acceptable file types and sends a <code>content-type<\/code> header in response.<\/p>\n<p>Here\u2019s an example of how that might look:<\/p>\n<div>\n<pre><code>curl -I 'https:\/\/ip.keycdn.com\/example.jpg' -H 'accept: image\/webp'\nHTTP\/2 200\nserver: keycdn-engine\ndate: Thu, 06 Jun 2019 08:29:50 GMT\ncontent-type: image\/webp\ncontent-length: 56734\nlast-modified: Tue, 14 May 2019 23:36:28 GMT\netag: \"5cdb50fc-1040a\"\nexpires: Thu, 13 Jun 2019 08:29:50 GMT\ncache-control: max-age=604800\nx-ip: 1\nx-ip-info: osz=56734 odim=700x467 ofmt=webp\nx-cache: HIT\nx-shield: active\nx-edge-location: chzh\naccess-control-allow-origin: *\naccept-ranges: bytes\n<\/code><\/pre>\n<\/div>\n<p><em>An example of a content-type request that KeyCDN sends to browsers that accept WebP. (Source: <a href=\"https:\/\/www.keycdn.com\/blog\/webp-caching\">KeyCDN<\/a>)<\/em><\/p>\n<p>So, for Google Chrome visitors, the <code>content-type: image\/webp<\/code> would automatically be accepted and the cached WebP assets would be delivered to the browser.<\/p>\n<p>For Safari users, on the other hand, the request would go unaccepted. But that\u2019s okay. Your CDN will know which file format to send instead. In the first line in the example above, you can see that the original image format is JPG, so that\u2019s the version of the file that would be delivered.<\/p>\n<p>As you can see, there\u2019s no need to modify the origin server or prepare multiple versions of your files in order to account for WebP compatibility. KeyCDN WebP caching handles all of it.<\/p>\n<h4>How Do You Use KeyCDN WebP Caching?<\/h4>\n<p>There are two ways in which KeyCDN users can take advantage of the WebP caching feature.<\/p>\n<h5>Image Processing Through KeyCDN<\/h5>\n<p>The first requires nothing more than flipping a switch and turning on <a href=\"https:\/\/www.keycdn.com\/support\/image-processing\">KeyCDN\u2019s image processing<\/a>. Once enabled, the <code>accept<\/code> request header will automatically load.<\/p>\n<p>You can, of course, use the image processing service for more than just WebP caching. You can use it to adjust the size, crop, rotation, blur, and other physical attributes of your delivered images. But if you\u2019re trying to simplify your image delivery system and simply want to speed things up with WebP, just enable the feature and let KeyCDN do the work.<\/p>\n<h5>WebP Caching Through Your Origin Server<\/h5>\n<p>Let\u2019s say that you generated your own WebP image assets. You can still reap the benefits of KeyCDN\u2019s WebP caching solution.<\/p>\n<p>To do this, you\u2019ll need to correctly generate your WebPs. Again, here\u2019s <a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/converting-images-to-webp\/\">a link to the guide<\/a> that shows you how to do that.<\/p>\n<p>It\u2019s then up to you to configure your origin server so that it only delivers WebPs when <code>accept: image\/webp<\/code> is present. KeyCDN provides some examples of how you\u2019ll do this with Nginx:<\/p>\n<pre><code># http config block\nmap $http_accept $webp_ext {\n    default \"\";\n    \"~*webp\" \".webp\";\n}\n\n# server config block\nlocation ~* ^(\/path\/to\/your\/images\/.+).(png|jpg)$ {\n    set $img_path $1;\n    add_header Vary Accept;\n    try_files $img_path$webp_ext $uri =404;\n}\n<\/code><\/pre>\n<p><em>KeyCDN demonstrates how you can modify the origin server with Nginx to deliver your own cached WebP assets. (Source: <a href=\"https:\/\/www.keycdn.com\/blog\/webp-caching\">KeyCDN<\/a>)<\/em><\/p>\n<p>And with Apache:<\/p>\n<div>\n<pre><code><IfModule mod_rewrite.c>\n    RewriteEngine On\n    RewriteCond %{HTTP_ACCEPT} image\/webp\n    RewriteCond %{DOCUMENT_ROOT}\/$1.webp -f\n    RewriteRule ^(path\/to\/your\/images.+).(jpe?g|png)$ $1.webp [T=image\/webp,E=accept:1]\n<\/IfModule>\n\n<IfModule mod_headers.c>\n    Header append Vary Accept env=REDIRECT_accept\n<\/IfModule>\n\nAddType image\/webp .webp\n<\/code><\/pre>\n<\/div>\n<p><em>KeyCDN demonstrates how you can modify the origin server with Apache to deliver your own cached WebP assets. (Source: <a href=\"https:\/\/www.keycdn.com\/blog\/webp-caching\">KeyCDN<\/a>)<\/em><\/p>\n<p>Obviously, this option gives you more control over managing your image formats and how they\u2019re served to visitors. That said, if you\u2019re new to using WebP, KeyCDN\u2019s automated WebP caching and image processing is probably your best bet.<\/p>\n<h5>An Alternative For WordPress And Magento Designers<\/h5>\n<p>If you design websites in WordPress or Magento, KeyCDN has plugins you can use to add WebP support and caching.<\/p>\n<p>For WordPress, you\u2019ll use KeyCDN\u2019s custom <a href=\"https:\/\/wordpress.org\/plugins\/cache-enabler\/\">Cache Enabler<\/a> along with <a href=\"https:\/\/optimus.io\/en\/\">Optimus<\/a>.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1d81b861-a6bf-4370-b393-6f5a49ba60e5\/image5-speed-up-your-website-webp.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image5-speed-up-your-website-webp.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1d81b861-a6bf-4370-b393-6f5a49ba60e5\/image5-speed-up-your-website-webp.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1d81b861-a6bf-4370-b393-6f5a49ba60e5\/image5-speed-up-your-website-webp.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1d81b861-a6bf-4370-b393-6f5a49ba60e5\/image5-speed-up-your-website-webp.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1d81b861-a6bf-4370-b393-6f5a49ba60e5\/image5-speed-up-your-website-webp.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image5-speed-up-your-website-webp.png?w=900\" sizes=\"100vw\" alt=\"Cache Enabler plugin from KeyCDN\"><\/a><figcaption>\n      The Cache Enabler plugin offers delivery support for WebPs in WordPress. (Source: <a href=\"https:\/\/wordpress.org\/plugins\/cache-enabler\/\">Cache Enabler<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1d81b861-a6bf-4370-b393-6f5a49ba60e5\/image5-speed-up-your-website-webp.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Cache Enabler checks to see if your images have a WebP version. If it exists and the visitor\u2019s browser supports it, that\u2019s what it will deliver in the cached file. If it doesn\u2019t exist, then it\u2019ll simply turn to the JPG, PNG or GIF that\u2019s there.<\/p>\n<p>Magento developers have a simplified workaround for converting and delivering WebP, too. First, you\u2019ll need to install the <a href=\"https:\/\/www.yireo.com\/software\/magento-extensions\/webp\">Webp extension<\/a>. Then, you\u2019ll have to configure the WebP binaries on your server.<\/p>\n<h3>Wrapping Up<\/h3>\n<p>There\u2019s a reason why Google went to the trouble of developing a new image format and why more and more browsers, design systems and content management systems are supporting it.<\/p>\n<p>Images can cause a lot of problems for websites that have otherwise been built to be lean and mean. If they\u2019re not uploaded at the right size, if they\u2019re not compressed and if caching isn\u2019t enabled, your images could be the reason that your website\u2019s speed is driving visitors away.<\/p>\n<p>But with WebP, your website is sure to load more quickly. What\u2019s more, there doesn\u2019t need to be a tradeoff between image quality (or quantity!) in order to gain that speed. WebP efficiently compresses files while preserving the integrity of the image content.<\/p>\n<p>If you\u2019re really struggling to increase the speed of your website then WebP should be the next tool you turn to for help.<\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-21.png?w=900\" alt=\"Smashing Editorial\"><span>(ms, ra, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Speed Up Your Website With WebP Speed Up Your Website With WebP Suzanne Scacca 2019-10-29T12:30:59+02:002019-10-30T11:06:36+00:00 (This is a sponsored post.) Spend enough time running websites through PageSpeed Insights and you\u2019ll notice that Google has a major beef with traditional image formats like JPG, PNG and even GIF. As well it should. Even if you resize&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":72318,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-72317","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Speed Up Your Website With WebPSpeed Up Your Website With WebP Suzanne Scacca 2019-10-29T12:30:59+02:002019-10-30T11:06:36+00:00(This is a sponsored post.) Spend enough time running websites through PageSpeed Insights and you\u2019ll notice that Google has a major beef with traditional image formats like JPG, PNG and even GIF. As well it should. Even if you resize your images\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Speed Up Your Website With WebP | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Speed Up Your Website With WebPSpeed Up Your Website With WebP Suzanne Scacca 2019-10-29T12:30:59+02:002019-10-30T11:06:36+00:00(This is a sponsored post.) Spend enough time running websites through PageSpeed Insights and you\u2019ll notice that Google has a major beef with traditional image formats like JPG, PNG and even GIF. As well it should. Even if you resize your images\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-30T11:19:52+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-30T11:19:52+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Speed Up Your Website With WebP | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Speed Up Your Website With WebPSpeed Up Your Website With WebP Suzanne Scacca 2019-10-29T12:30:59+02:002019-10-30T11:06:36+00:00(This is a sponsored post.) Spend enough time running websites through PageSpeed Insights and you\u2019ll notice that Google has a major beef with traditional image formats like JPG, PNG and even GIF. As well it should. Even if you resize your images\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#article\",\"name\":\"Speed Up Your Website With WebP | Design for Immersive Technologies\",\"headline\":\"Speed Up Your Website With WebP\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/image1-speed-up-your-website-webp.png?fit=400%2C208&ssl=1\",\"width\":400,\"height\":208},\"datePublished\":\"2019-10-30T04:19:52-07:00\",\"dateModified\":\"2019-10-30T04:19:52-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#listItem\",\"name\":\"Speed Up Your Website With WebP\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#listItem\",\"position\":3,\"name\":\"Speed Up Your Website With WebP\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/\",\"name\":\"Speed Up Your Website With WebP | Design for Immersive Technologies\",\"description\":\"Speed Up Your Website With WebPSpeed Up Your Website With WebP Suzanne Scacca 2019-10-29T12:30:59+02:002019-10-30T11:06:36+00:00(This is a sponsored post.) Spend enough time running websites through PageSpeed Insights and you\\u2019ll notice that Google has a major beef with traditional image formats like JPG, PNG and even GIF. As well it should. Even if you resize your images\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/image1-speed-up-your-website-webp.png?fit=400%2C208&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#mainImage\",\"width\":400,\"height\":208},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/speed-up-your-website-with-webp\\\/#mainImage\"},\"datePublished\":\"2019-10-30T04:19:52-07:00\",\"dateModified\":\"2019-10-30T04:19:52-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Speed Up Your Website With WebP | Design for Immersive Technologies","description":"Speed Up Your Website With WebPSpeed Up Your Website With WebP Suzanne Scacca 2019-10-29T12:30:59+02:002019-10-30T11:06:36+00:00(This is a sponsored post.) Spend enough time running websites through PageSpeed Insights and you\u2019ll notice that Google has a major beef with traditional image formats like JPG, PNG and even GIF. As well it should. Even if you resize your images","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#article","name":"Speed Up Your Website With WebP | Design for Immersive Technologies","headline":"Speed Up Your Website With WebP","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image1-speed-up-your-website-webp.png?fit=400%2C208&ssl=1","width":400,"height":208},"datePublished":"2019-10-30T04:19:52-07:00","dateModified":"2019-10-30T04:19:52-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#listItem","name":"Speed Up Your Website With WebP"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#listItem","position":3,"name":"Speed Up Your Website With WebP","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/","name":"Speed Up Your Website With WebP | Design for Immersive Technologies","description":"Speed Up Your Website With WebPSpeed Up Your Website With WebP Suzanne Scacca 2019-10-29T12:30:59+02:002019-10-30T11:06:36+00:00(This is a sponsored post.) Spend enough time running websites through PageSpeed Insights and you\u2019ll notice that Google has a major beef with traditional image formats like JPG, PNG and even GIF. As well it should. Even if you resize your images","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image1-speed-up-your-website-webp.png?fit=400%2C208&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#mainImage","width":400,"height":208},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/#mainImage"},"datePublished":"2019-10-30T04:19:52-07:00","dateModified":"2019-10-30T04:19:52-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Speed Up Your Website With WebP | Design for Immersive Technologies","og:description":"Speed Up Your Website With WebPSpeed Up Your Website With WebP Suzanne Scacca 2019-10-29T12:30:59+02:002019-10-30T11:06:36+00:00(This is a sponsored post.) Spend enough time running websites through PageSpeed Insights and you\u2019ll notice that Google has a major beef with traditional image formats like JPG, PNG and even GIF. As well it should. Even if you resize your images","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/","article:published_time":"2019-10-30T11:19:52+00:00","article:modified_time":"2019-10-30T11:19:52+00:00","twitter:card":"summary","twitter:title":"Speed Up Your Website With WebP | Design for Immersive Technologies","twitter:description":"Speed Up Your Website With WebPSpeed Up Your Website With WebP Suzanne Scacca 2019-10-29T12:30:59+02:002019-10-30T11:06:36+00:00(This is a sponsored post.) Spend enough time running websites through PageSpeed Insights and you\u2019ll notice that Google has a major beef with traditional image formats like JPG, PNG and even GIF. As well it should. Even if you resize your images"},"aioseo_meta_data":{"post_id":"72317","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 17:03:21","updated":"2026-09-02 09:34:03","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tSpeed Up Your Website With WebP\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Speed Up Your Website With WebP","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/speed-up-your-website-with-webp\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-iOp","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/image1-speed-up-your-website-webp.png?fit=400%2C208&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/72317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=72317"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/72317\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/72318"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=72317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=72317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=72317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}