{"id":25520,"date":"2023-10-09T21:01:04","date_gmt":"2023-10-09T13:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25520"},"modified":"2023-10-22T15:53:48","modified_gmt":"2023-10-22T07:53:48","slug":"webp-guide","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/","title":{"rendered":"How to Use .webp Images on Websites (Complete Guide)"},"content":{"rendered":"<p>WebP is an image format developed by Google around 5 years ago. Commonly referred to as <em>weppy<\/em>, this format is a boon for web designers and developers who aim to minimize and optimize image sizes.<\/p>\n<p>In this guide, I will shed light on why WebP might just be the solution you\u2019ve been looking for.<\/p>\n<div class=\"su-box su-box-style-default su-box-v7\" id=\"\" style=\"border-color:#000000;border-radius:3px\">\n<div class=\"su-box-title\" style=\"background-color:#333333;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">Table of Content<\/div>\n<div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\">\n<ol>\n<li><a href=\"#features\">Key Features of WebP Images<\/a><\/li>\n<li><a href=\"#experiment\">Is WebP Smaller? An Experiment with Images\n<ul>\n<li><a href=\"#jpeg\">JPEG vs. WebP<\/a><\/li>\n<li><a href=\"#png\">PNG vs. WebP<\/a><\/li>\n<li><a href=\"#gif\">GIF vs. WebP<\/a><\/li>\n<\/ul>\n<p>  <\/p><\/a><\/li>\n<li><a href=\"#tools\">Tools to Convert Images to WebP <\/a><\/li>\n<li><a href=\"#cml\">Converting Using Command Lines<\/a><\/li>\n<li><a href=\"#onlinetools\">Converting Using Online Tools<\/a><\/li>\n<li><a href=\"#photoshop\">Converting Using a Photoshop Plugin<\/a><\/li>\n<li><a href=\"#browsersupport\">WebP Image Browser Support<\/a><\/li>\n<li><a href=\"#fallback\">Fallback Options to Other Formats<\/a><\/li>\n<li><a href=\"#preview\">How to Preview WebP Images<\/a><\/li>\n<\/ol>\n<\/div>\n<\/div>\n<hr>\n<h2 id=\"features\">Key Features of WebP Images<\/h2>\n<p>But first, let\u2019s quickly touch on some key features of WebP:<\/p>\n<ul>\n<li>It has the file extension of <span class=\"format\">.webp<\/span>.<\/li>\n<li>It supports both lossy and lossless compression techniques.<\/li>\n<li>Images in WebP with lossy compression are typically <strong>25-34% smaller than their JPEG counterparts<\/strong>.<\/li>\n<li>For lossless compression, WebP images can be <strong>25% smaller than PNG images<\/strong>.<\/li>\n<li>It fully supports lossless transparency, similar to PNG with an alpha channel.<\/li>\n<li>WebP even supports animation, making it a potential replacement for animated GIFs.<\/li>\n<\/ul>\n<p>To sum it up, WebP offers a robust solution for reducing the sizes of JPEG, GIF, and PNG images. Now, let\u2019s dive deeper into how to make the most of this format.<\/p>\n<hr>\n<h2 id=\"experiment\">Is WebP Smaller? An Experiment with Images<\/h2>\n<p>One of the best aspects of claims on the web is their verifiability. We can always run experiments to assess their truthfulness and authenticity. I conducted several tests to determine <strong>how much an image\u2019s size could be reduced<\/strong> when converted from various formats (JPEG, PNG, and GIF) to WebP.<\/p>\n<h3 id=\"jpeg\">JPEG vs. WebP<\/h3>\n<p>Here\u2019s a JPEG image taken from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pexels.com\/photo\/metro-station-people-woman-21410\/\">Pexels<\/a>.<\/p>\n<p>Filesize: 165kb.<\/p>\n<figure><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/lossy-original.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-jpeg-original.jpg\" width=\"600\" height=\"399\" alt=\"Original JPEG Image\"><\/a><\/figure>\n<p>This is the same image after being optimized using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.jpegmini.com\/\">JpegMini<\/a>.<\/p>\n<p>Filesize: 101kb.<\/p>\n<figure><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/lossy-jpegmini.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-jpeg-optimized.jpg\" width=\"600\" height=\"400\" alt=\"Optimized JPEG Image\"><\/a><\/figure>\n<p>And here\u2019s the same image, optimized and then converted to the WebP format.<\/p>\n<p>Filesize: 70kb.<\/p>\n<figure><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/lossy-original.webp\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-webp.jpg\" width=\"600\" height=\"400\" alt=\"JPEG to WebP Converted Image\"><\/a><\/figure>\n<p>For reference, here are the file sizes of the same image when converted to other formats:<\/p>\n<ul>\n<li>GIF: 285kb<\/li>\n<li>PNG 8: 241.2kb<\/li>\n<li>PNG 24: 657.6kb<\/li>\n<\/ul>\n<h3 id=\"png\">PNG vs. WebP<\/h3>\n<p>Here\u2019s a PNG image with transparency. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com\/press\/files\/2012\/04\/firefox-os_phone-splash-watch_RGB1.png\">Source<\/a>.<\/p>\n<p>Filesize: 587kb.<\/p>\n<figure>\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/lossless-original.png\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-lossless-png-original.jpg\" width=\"600\" height=\"399\" alt=\"Original PNG Image\">\n  <\/a>\n<\/figure>\n<p>Here\u2019s the same PNG image after being optimized with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tinypng.com\/\">tinypng<\/a>.<\/p>\n<p>Filesize: 278kb.<\/p>\n<figure>\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/lossless-tinypng.png\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-lossless-png-optimized.jpg\" width=\"600\" height=\"399\" alt=\"Optimized PNG with TinyPNG\">\n  <\/a>\n<\/figure>\n<p>And here\u2019s the same image after being converted to the WebP format.<\/p>\n<p>Filesize: 112kb.<\/p>\n<figure>\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/lossless-original.webp\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-lossless-webp.jpg\" width=\"600\" height=\"399\" alt=\"Converted Image in WebP Format\">\n  <\/a>\n<\/figure>\n<h3 id=\"gif\">GIF vs. WebP<\/h3>\n<p>Upon converting to WebP format, a JPEG image reduced from 165kb to 70kb, and a PNG image dropped from 587kb to 112kb. To further test the efficiency of WebP on animated GIFs, consider the following results:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/2218864-Dribbblemelon\">Original filesize before conversion<\/a>: 6.8mb<\/li>\n<li><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/animatedgif-original.webp\">Filesize after converting to WebP<\/a>: 6.3mb<\/li>\n<\/ul>\n<h3>Summary<\/h3>\n<p>Below is a table summarizing the results of the experiment:<\/p>\n<table>\n<thead>\n<tr>\n<th>\u00a0<\/th>\n<th>JPEG<\/th>\n<th>PNG<\/th>\n<th> GIF (Animated)<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Original<\/td>\n<td>165kb<\/td>\n<td>587kb<\/td>\n<td>6.8mb<\/td>\n<\/tr>\n<tr>\n<td>Optimized Using Tools<\/td>\n<td>101kb<\/td>\n<td>278kb<\/td>\n<td>\u2013<\/td>\n<\/tr>\n<tr>\n<td>Converted to WebP<\/td>\n<td><strong>70kb<\/strong><\/td>\n<td><strong>112kb<\/strong><\/td>\n<td><strong>6.3mb<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Without diving deep into calculations, the results show a significant reduction in file sizes.<\/p>\n<p>Furthermore, there\u2019s hardly any noticeable difference in image clarity and resolution. Given the smaller file sizes without sacrificing quality, it\u2019s evident that WebP is a format worth considering.<\/p>\n<hr>\n<h2 id=\"tools\">Tools to Convert Images to WebP<\/h2>\n<p>If you\u2019re convinced about the benefits of WebP and are eager to adopt this format, let\u2019s explore various tools to convert your images. The methods discussed vary in terms of controls, ease of use, and convenience. Choose the one that fits your needs best.<\/p>\n<h3>WebPonize for Mac<\/h3>\n<p>WebPonize is arguably the simplest and quickest method to convert images to WebP format on a Mac. Simply drag and drop your images into WebPonize, and it handles the conversion for you. The application provides details like the original size, converted size, and the percentage reduction.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/webponize.jpg\" width=\"800\" height=\"500\" alt=\"WebPonize tool for Mac\"><\/figure>\n<p><a href=\"https:\/\/webponize.org\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download WebPonize <\/span><\/a><\/p>\n<h3>Webpconv for Windows<\/h3>\n<p>For Windows users, Webpconv is a must-have tool. It even comes in a portable version, allowing you to run it directly from a flash drive.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/webpconv.jpg\" width=\"800\" height=\"474\" alt=\"Webpconv tool for Windows\"><\/figure>\n<p><a href=\"https:\/\/download.cnet.com\/webpconv\/3000-12511_4-76209705.html\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download Webpconv <\/span><\/a><\/p>\n<hr>\n<h2 id=\"cml\">Converting with Command Lines<\/h2>\n<p>If you have a penchant for command lines and want a more hands-on approach, the tools <strong>cwebp<\/strong> and <strong>dwebp<\/strong> might be for you. While <strong>cwebp<\/strong> converts your JPEG, PNG, or TIFF images into WebP format, <strong>dwebp<\/strong> reverts them back to PNG. Let\u2019s delve into this process.<\/p>\n<p>The following guide is for Mac users. For those on Windows and Linux, please <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/compiling#unix\">click here<\/a>.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/save-webp-images-as-jpg-or-png\/\">How to Save .WEBP Images as JPG and PNG<\/a>\n\t\t\t\t<\/p>\n<h3>Step 1: Setting Up MacPorts<\/h3>\n<p>Begin by ensuring Xcode is installed on your machine. Once confirmed, follow the steps below:<\/p>\n<ol>\n<li>First, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/distfiles.macports.org\/MacPorts\/\">download and install MacPorts<\/a>. If MacPorts is already set up on your Mac, skip to the next step.<\/li>\n<li>Open <strong>Terminal<\/strong>.<\/li>\n<li>Input <code>sudo port selfupdate<\/code> and hit <span class=\"key\">Enter<\/span>. This action will update MacPorts to its most recent version.<\/li>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/port-selfupdate.jpg\" width=\"800\" height=\"189\" alt=\"Updating MacPorts\"><\/figure>\n<li>Then, enter the command <code>sudo port install webp<\/code> and hit <span class=\"key\">Enter<\/span>. This step installs the <strong>libwebp<\/strong>, which is the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/storage.googleapis.com\/downloads.webmproject.org\/releases\/webp\/index.html\">WebP Library<\/a>.<\/li>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/install-webp.jpg\" width=\"800\" height=\"366\" alt=\"Installing WebP Library\"><\/figure>\n<\/ol>\n<p>With these steps completed, you\u2019re now prepared to convert images to WebP using command line instructions.<\/p>\n<h3>Step 2: Converting and Reverting with Command Lines<\/h3>\n<p>To convert your images using command lines, follow the commands below:<\/p>\n<p><strong>Format<\/strong>:<\/p>\n<p><code>cwebp -q [image_quality] [JPEG\/PNG_filename] -o [WebP_filename]<\/code><\/p>\n<p><strong>Example<\/strong>:<\/p>\n<pre>cwebp -q 80 example.png -o example.webp<\/pre>\n<p>To revert images from WebP back to their original format, use the following command:<\/p>\n<p><strong>Format<\/strong>:<\/p>\n<p><code>dwebp [WebP_filename] -o [PNG_filename]<\/code><\/p>\n<p><strong>Example<\/strong>:<\/p>\n<pre>dwebp image.webp -o image.png<\/pre>\n<p><strong>Additional Information:<\/strong> If you\u2019d like alternative methods of conversion, here are instructions for utilizing <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/1000ch\/grunt-cwebp\">Grunt<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/1000ch\/gulp-cwebp\">Gulp<\/a> tasks to convert JPG\/PNG files into WebP format.<\/p>\n<hr>\n<h2 id=\"onlinetools\">Converting with Online Tools<\/h2>\n<p>If you prefer not to install any software on your computer, there are online tools available for converting images to WebP. Here are some popular options:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/image.online-convert.com\/convert-to-webp\">Online-converter.com<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webp-converter.com\/\">Webp-converter.com<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.zamzar.com\/convert\/webp-to-jpg\/\">Zamzar<\/a><\/li>\n<\/ul>\n<p><strong>Note:<\/strong> A quick search for \u201cconvert to WebP online\u201d on Google will yield even more tools.<\/p>\n<hr>\n<h2 id=\"photoshop\">Convert Using a Photoshop Plugin<\/h2>\n<p>For those who use Photoshop, there\u2019s a handy plugin that facilitates saving images directly in WebP format. The plugin is compatible with Mac  and both 32-bit and 64-bit versions of Windows.<\/p>\n<p><a href=\"http:\/\/telegraphics.com.au\/sw\/product\/WebPFormat\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download Plugin <\/span><\/a><\/p>\n<figure>\n  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/webp-photoshop-plugin.jpg\" width=\"800\" height=\"401\" alt=\"Photoshop plugin for WebP\">\n<\/figure>\n<hr>\n<h2 id=\"browsersupport\">WebP Image Browser Support<\/h2>\n<p>When discussing compatibility, it\u2019s noteworthy to mention that WebP format images can be viewed on a few browsers. Here\u2019s the current list of browsers supporting WebP (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/webp\">source<\/a>):<\/p>\n<ul>\n<li>Chrome and Chrome for iOS<\/li>\n<li>Opera and Opera Mini<\/li>\n<\/ul>\n<figure>\n  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/webp-browser-support.jpg\" width=\"1000\" height=\"455\" alt=\"Browsers that support WebP images\">\n<\/figure>\n<p>Unfortunately, browsers like <strong>FireFox<\/strong> and <strong>Safari<\/strong> do not fully support the WebP format natively. However, a workaround is available through the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/obartra\/webpjs\">WebPJS<\/a> JavaScript library. This allows you to <a href=\"https:\/\/www.hongkiat.com\/blog\/save-webp-images-as-jpg-or-png\/\">convert WebP images<\/a> into dataURI strings on the client side.<\/p>\n<hr>\n<h2 id=\"fallback\">Fallback to Other Formats (If WebP Is Not Supported)<\/h2>\n<p>When serving images to a diverse range of users, it\u2019s crucial to provide fallback options for browsers that might not support the WebP format. The best approach is to revert to traditional formats like JPG or PNG.<\/p>\n<p>Here\u2019s a method to implement this:<\/p>\n<pre>\r\n&lt;picture&gt;\r\n  &lt;source srcset=\"example.webp 1x\" type=\"image\/webp\"&gt;\r\n  &lt;img src=\"example.jpg\" alt=\"Description of the image\"&gt;\r\n&lt;\/picture&gt;\r\n<\/pre>\n<p><strong>Explanation:<\/strong><\/p>\n<p>In the above code, browsers like Firefox or Safari, which don\u2019t support WebP, will display the <em>example.jpg<\/em> image instead.<\/p>\n<hr>\n<h2 id=\"preview\">How to Preview WebP Images<\/h2>\n<p>While WebP images are readily viewable on Chrome and Opera browsers, local previews may require specialized tools depending on your operating system.<\/p>\n<p>For Mac users, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/emin\/WebPQuickLook\">WebPQuickLook<\/a> offers the capability to preview WebP images using the Quick Look feature. Simply select or highlight the image and press the spacebar.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/webp-quicklook-mac.jpg\" width=\"800\" height=\"510\" alt=\"WebPQuickLook for Mac\"><\/figure>\n<p>Windows users can turn to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codecpack.co\/download\/WebP-Codec-for-Windows.html\">WebPCodec<\/a>, which provides thumbnail previews of WebP images within the File Explorer. The tool displays both the WebP and its JPEG counterpart.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/webp-windows-tool.jpg\" width=\"800\" height=\"534\" alt=\"WebPCodec for Windows\"><\/figure>\n<h2>Recommended Readings<\/h2>\n<p>For those keen on exploring more about WebP and its associated technologies, here\u2019s a collection of comprehensive resources:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/gif2webp\">Transitioning from Animated GIF to WebP<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/speed\/webp\/#how_webp_works_stylefont-weight_bold\">The Mechanics Behind WebP<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.igvita.com\/2013\/05\/01\/deploying-webp-via-accept-content-negotiation\/\">Strategies for Deploying WebP with Accept Content Negotiation<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.igvita.com\/2013\/03\/07\/faster-smaller-and-more-beautiful-web-with-webp\/\">Optimizing Web Performance with WebP<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.igvita.com\/2012\/12\/18\/deploying-new-image-formats-on-the-web\/\">Introducing New Image Formats to the Web<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/api\">Official WebP API Documentation<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>WebP images have a smaller file size for faster loads. See its comparison with other formats and how to use it on your site.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[37,2305,1250,2753],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use .webp Images on Websites (Complete Guide) - Hongkiat<\/title>\n<meta name=\"description\" content=\"WebP images have a smaller file size for faster loads. See its comparison with other formats and how to use it on your site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/webp-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use .webp Images on Websites (Complete Guide)\" \/>\n<meta property=\"og:description\" content=\"WebP images have a smaller file size for faster loads. See its comparison with other formats and how to use it on your site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/webp-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-09T13:01:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-22T07:53:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-jpeg-original.jpg\" \/>\n<meta name=\"author\" content=\"Hongkiat Lim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hongkiat Lim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/\"},\"author\":{\"name\":\"Hongkiat Lim\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e3613a3bf757e4f67770f0b7a339edd0\"},\"headline\":\"How to Use .webp Images on Websites (Complete Guide)\",\"datePublished\":\"2023-10-09T13:01:04+00:00\",\"dateModified\":\"2023-10-22T07:53:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/\"},\"wordCount\":1321,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webp-guide\\\/thumb-jpeg-original.jpg\",\"keywords\":[\"Google\",\"Image Optimization\",\"optimization\",\"webp\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/\",\"name\":\"How to Use .webp Images on Websites (Complete Guide) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webp-guide\\\/thumb-jpeg-original.jpg\",\"datePublished\":\"2023-10-09T13:01:04+00:00\",\"dateModified\":\"2023-10-22T07:53:48+00:00\",\"description\":\"WebP images have a smaller file size for faster loads. See its comparison with other formats and how to use it on your site.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webp-guide\\\/thumb-jpeg-original.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webp-guide\\\/thumb-jpeg-original.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webp-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use .webp Images on Websites (Complete Guide)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e3613a3bf757e4f67770f0b7a339edd0\",\"name\":\"Hongkiat Lim\",\"description\":\"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.\",\"sameAs\":[\"http:\\\/\\\/www.hongkiat.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/hongkiat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use .webp Images on Websites (Complete Guide) - Hongkiat","description":"WebP images have a smaller file size for faster loads. See its comparison with other formats and how to use it on your site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/","og_locale":"en_US","og_type":"article","og_title":"How to Use .webp Images on Websites (Complete Guide)","og_description":"WebP images have a smaller file size for faster loads. See its comparison with other formats and how to use it on your site.","og_url":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2023-10-09T13:01:04+00:00","article_modified_time":"2023-10-22T07:53:48+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-jpeg-original.jpg","type":"","width":"","height":""}],"author":"Hongkiat Lim","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Hongkiat Lim","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/"},"author":{"name":"Hongkiat Lim","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e3613a3bf757e4f67770f0b7a339edd0"},"headline":"How to Use .webp Images on Websites (Complete Guide)","datePublished":"2023-10-09T13:01:04+00:00","dateModified":"2023-10-22T07:53:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/"},"wordCount":1321,"commentCount":15,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-jpeg-original.jpg","keywords":["Google","Image Optimization","optimization","webp"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/webp-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/","url":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/","name":"How to Use .webp Images on Websites (Complete Guide) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-jpeg-original.jpg","datePublished":"2023-10-09T13:01:04+00:00","dateModified":"2023-10-22T07:53:48+00:00","description":"WebP images have a smaller file size for faster loads. See its comparison with other formats and how to use it on your site.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/webp-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-jpeg-original.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/webp-guide\/thumb-jpeg-original.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/webp-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use .webp Images on Websites (Complete Guide)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e3613a3bf757e4f67770f0b7a339edd0","name":"Hongkiat Lim","description":"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.","sameAs":["http:\/\/www.hongkiat.com\/blog"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/hongkiat\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6DC","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25520"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25520\/revisions"}],"predecessor-version":[{"id":69959,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25520\/revisions\/69959"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25520"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}