Tuesday, December 3, 2019

What Is WebP Plus How to Use WebP Images in WordPress

WebP is a web image format developed by Google that can offer smaller image file sizes at a similar level of quality to existing image formats. In this post, well dig further into the question of what is WebP? and share more about the format.We will also talk about the pros and cons of WebP images and how you can start using WebP images on your WordPress site. GIFs are excellent for animations, but not great for saving static images.WebP images are an image format from Google designed to let you display images on the web at a similar quality level to existing image formats, but with a smaller file size.To achieve this, WebP provides both ‘lossy’ and ‘lossless’ compression options. The latter preserves more data, while the former makes the resulting file sizes even smaller.According to Googles data, WebP images are on average:25-34% smaller in size than comparable JPEG images.26% smaller in size compared to PNGs.You can view a full side-by-side comparison at the WebP Gallery.The pros and cons of using WebP images on your siteNow that we’ve answered the question of â€Å"what is WebP?†, let’s talk about why it matters by discussing the pros and cons of WebP images.Pros of WebP imagesAs we’ve alluded to already, the primary goal of this image format is to provide a web-focused option that’s superior to both PNG and JPEG in most situations.Image files take up space – no matter how they’re saved. The more images and other media you add to your site, the greater the chance of laggy performance. Keeping your pages loading fast is incredibly important, since slow speeds drive visitors away before they’ve even seen what you have to offer.Compressing image files makes them smaller and more efficient, but usually comes at a loss of quality. In general, the more you compress an image, the worse it looks. However, the particular file type you’re using has an impact on how extreme the ef fect is.Images saved in a WebP format can be made significantly smaller than JPEGs and PNGs at the same quality. Again, lossless WebP images function as a replacement for PNGs, and the files are about 26% smaller. Lossy WebP images, on the other hand, are around 25-34% smaller than JPEGs.Also notable is that both types of WebP images support transparency. Transparent images are incredibly useful on the web – you can use them for logos and other branding, just as one example. JPEGs don’t offer transparency as a feature, but lossy WebP images do.Cons of WebP imagesIf WebP offers so many benefits, why isn’t it being used by more people? The primary drawback is that WebP images are  not currently supported by all browsers, though more and more browsers have been adding support.Heres a comparison of the current browser support as of July 2019, along with each browsers  desktop and mobile market share when available:Support WebP:Chrome 71% desktop / 59.6% mobileF irefox (desktop only) 9.52%Edge 4.6% desktopOpera 2.44% desktop / 2.85% mobileSamsung Internet 7.35% mobileBaidu BrowserNo WebP Support:Safari 5.41% desktop / 20% mobileInternet Explorer 5% desktopFirefox for Android 1% mobileUC Browser for Android 6.62% mobileSo while  most web browsers do now offer WebP support, there are still a non-trivial number that dont have support (most notably, Safari).Fortunately,  you’re not losing anything by using WebP on your site, since you can simply include backup PNG and/or JPEG images that display to visitors with browsers that dont support WebP images. This requires a bit more work, but can be worth it for the performance savings.How to use WebP images on your WordPress siteOf course, as a WordPress user, it’s not enough to ask â€Å"what is WebP?† You also need to know whether this type of image can be used alongside WordPress. Just like browsers, not every website builder and Content Management System (CMS) sup ports the WebP format.The bad news is that WordPress doesnt currently support WebP images by default. However, you can still use the WebP format on your site – it will just require one or more additional tools.OptimoleOptimole is our new image optimization solution that has a lot of cool featured under the hood. Apart from being able to have all your images optimized automatically and then get them served through a CDN, you also get to experience the benefits of WebP images.The way Optimole enables WebP images is pretty neat. The plugin converts your images to WebP automatically if the visitors browser supports them. If the browser doesnt support WebP, a normal version of the image will be served. Image optimization Lazy Load by Optimole Author(s): OptimoleCurrent Version: 2.1.2Last Updated: September 25, 2019optimole-wp.zip 96%Ratings 211,971Downloads WP 4.7+Requires There are also alternative tools that enable WebP images if youd like to experiment more with whats out there.Jetpack has an image CDN module that works with WebP images.You can also enable WebP by combining ShortPixel / EWWW Image Optimizer with Cache Enabler. Both of these image optimization plugins let you convert your JPEGs and PNGs into WebP images. Then, you can use the  Cache Enabler plugin to actually serve those files up to visitors with browsers that support WebP. Once you install Cache Enabler, go to Settings → Cache Enabler in your dashboard, and select Create an additional cached version for WebP Image support.Any of these methods will get the job done, so you’re free to use the plugins you prefer. The performance boost to your website can be significant, so it’s worth setting up one of these solutions if you have an image-heavy site.ConclusionWhat is WebP? It’s an image file type that has the potential to speed up your website, even more so than by using compressed PNGs or JPEGs. WebP comes in both lossy and lossless varieties and produc es smaller file sizes at a comparable quality.Though its popularity is growing, WebP isn’t yet supported on all browsers. However, it can still be worth using this image format on your site, especially if you upload a lot of images. As a WordPress user, you have several options for setting up  WebP support – one of the best being Optimole.Do you have any questions about the WebP format and how to set it up in WordPress? Ask away in the comments section below! Learn what WebP images are and how to use them to speed up your #WordPress site's images

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.