{"id":9202,"date":"2026-06-01T02:56:22","date_gmt":"2026-06-01T00:56:22","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=9202"},"modified":"2026-06-01T02:56:23","modified_gmt":"2026-06-01T00:56:23","slug":"how-to-serve-webp-images-in-wordpress","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-serve-webp-images-in-wordpress\/","title":{"rendered":"How to serve WebP images in WordPress"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">WebP is a modern image format that provides better compression and smaller file sizes compared to traditional formats like JPEG and PNG. Serving WebP images on a WordPress website can improve performance and loading speed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are several ways to enable WebP support in WordPress depending on your setup and server configuration.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-serve-webp-images-in-wordpress\/#1_Using_a_WordPress_plugin\" >1. Using a WordPress plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-serve-webp-images-in-wordpress\/#2_Using_server-side_configuration\" >2. Using server-side configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-serve-webp-images-in-wordpress\/#3_Using_JavaScript_detection\" >3. Using JavaScript detection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-serve-webp-images-in-wordpress\/#Browser_compatibility\" >Browser compatibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-serve-webp-images-in-wordpress\/#Practical_considerations\" >Practical considerations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-serve-webp-images-in-wordpress\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Using_a_WordPress_plugin\"><\/span>1. Using a WordPress plugin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<\/div>\n\n<div id=\"mybox-548736153\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">The simplest method is to use a plugin that automatically converts and serves WebP images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Popular options include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WebP Express<\/li>\n\n\n\n<li>EWWW Image Optimizer<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These plugins typically:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>convert uploaded images to WebP format<\/li>\n\n\n\n<li>serve WebP versions to compatible browsers<\/li>\n\n\n\n<li>keep original images as fallback for older browsers<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This method requires minimal technical configuration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Using_server-side_configuration\"><\/span>2. Using server-side configuration<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If your hosting uses Apache or NGINX, WebP delivery can be configured at the server level.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For Apache, this is usually done via <code>.htaccess<\/code> rules. For NGINX, configuration is done in the server block settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this setup, the server:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>detects browser WebP support<\/li>\n\n\n\n<li>serves <code>.webp<\/code> files when available<\/li>\n\n\n\n<li>falls back to JPEG or PNG if needed<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This method is efficient but requires server access and technical knowledge.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Using_JavaScript_detection\"><\/span>3. Using JavaScript detection<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Another approach is to use JavaScript to detect browser support for WebP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The script:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>checks whether the browser supports WebP<\/li>\n\n\n\n<li>loads WebP images if supported<\/li>\n\n\n\n<li>falls back to standard formats if not supported<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This method can be added via:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>theme files (such as <code>functions.php<\/code>)<\/li>\n\n\n\n<li>header scripts (<code>header.php<\/code>)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">However, it is less efficient than server-side solutions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Browser_compatibility\"><\/span>Browser compatibility<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Most modern browsers support WebP, but older browsers may not.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this reason, it is important to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>keep original JPEG or PNG files as fallback<\/li>\n\n\n\n<li>ensure proper conditional delivery of images<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Practical_considerations\"><\/span>Practical considerations<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When implementing WebP in WordPress, consider:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>plugin-based solutions are easiest for beginners<\/li>\n\n\n\n<li>server-level configuration offers better performance<\/li>\n\n\n\n<li>backups of original images should always be preserved<\/li>\n\n\n\n<li>testing is important to ensure compatibility<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WebP images can be served in WordPress using plugins, server configuration, or JavaScript-based detection. Plugins are the simplest option, while server-level solutions provide the best performance. In all cases, fallback support for older browsers should be maintained.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[125],"manual_kb_tag":[5820,190,369,419,1153,4668,5816,5817,5818,5819],"class_list":["post-9202","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-websites","manual_kb_tag-browser-compatibility","manual_kb_tag-wordpress","manual_kb_tag-image-optimization","manual_kb_tag-wordpress-plugin","manual_kb_tag-web-performance","manual_kb_tag-image-compression","manual_kb_tag-webp","manual_kb_tag-webp-images","manual_kb_tag-serve-webp","manual_kb_tag-convert-to-webp"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9202\/revisions"}],"predecessor-version":[{"id":9203,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9202\/revisions\/9203"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=9202"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=9202"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=9202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}