└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # [Magento 2 WebP Images](https://magefan.com/magento-2-webp-optimized-images) by Magefan 2 | 3 | 4 | 5 | [Magento 2 WebP Images](https://magefan.com/magento-2-webp-optimized-images) is the extension that allows you to convert your website images from png, jpg, jpeg, and gif to the webp format. It also improves the default Magento functionality and lets you upload WebP images to the admin panel. 6 | 7 | Reduce the size of your images by up to 50%, switch between the conversion modes, and monitor the process thanks to the handy stats. Optimize your images and improve website speed like never before! 8 | 9 | Compatibility: Magento 2.3.0 - 2.4.x (CE, EE, ECE, B2B) 10 | 11 | 12 | 13 | 14 | 15 | ## Useful Links 16 | * [User Guide](https://magefan.com/magento-2-webp-optimized-images/documentation) 17 | * [Change Log](https://magefan.com/magento-2-webp-optimized-images/change-log) 18 | * [FAQs](https://magefan.com/magento-2-webp-optimized-images#pattr-faq) 19 | 20 | ## 🇺🇦 Stand with Ukraine! [How can you help?](https://magefan.com/blog/join-our-donations) 21 | 22 | ## Editions & Pricing 23 | 24 | 25 | Plans and Pricing for Magento 2 WebP Images Extension 28 | 29 | 30 | ## Benefits 31 | 32 | * [Improve Website Speed and Performance](https://github.com/magefan/magento-2-webp-images#improve-website-speed-and-performance) 33 | * [Enhance Your SEO Ranking](https://github.com/magefan/magento-2-webp-images#enhance-your-seo-ranking) 34 | * [Reduce File Size Without Losing Quality](https://github.com/magefan/magento-2-webp-images#reduce-file-size-without-losing-quality) 35 | * [Convert Images Automatically or Manually](https://github.com/magefan/magento-2-webp-images#convert-images-automatically-or-manually) 36 | * [Adjust Conversion Settings to Your Requirements](https://github.com/magefan/magento-2-webp-images#adjust-conversion-settings-to-your-requirements) 37 | * [Convert Images From External Websites](https://github.com/magefan/magento-2-webp-images#convert-images-from-external-websites) 38 | * [Upload WebP Images to Magento Admin Panel](https://github.com/magefan/magento-2-webp-images#upload-webp-images-to-magento-admin-panel) 39 | * [Monitor the Conversion Progress](https://github.com/magefan/magento-2-webp-images#monitor-the-conversion-progress) 40 | * [Provide Smooth Experience Across All Browsers](https://github.com/magefan/magento-2-webp-images#provide-smooth-experience-across-all-browsers) 41 | * [Convert Images to WebP via REST API Requests](https://github.com/magefan/magento-2-webp-images#convert-images-to-webp-via-rest-api-requests) 42 | 43 | 44 | ## What is WEBP? 45 | Those who have been looking for the best ways to optimize the website performance must have heard something about it. WEBP is a modern file format developed by Google and supported by multiple browsers. The reason of the popularity is its size. It is considerably smaller and correspondingly takes less time to load that is especially important for Magento 2 websites with a lot of images. 46 | 47 | ## Features 48 | ### Improve Website Speed and Performance 49 | Website performance is one of the key aspects of any eCommerce store. Different reasons could drag it down, and images are usually the top culprits. Especially, if you have thousands of them. 50 | 51 | The longer your website loads, the worse the general performance is. You can’t let that happen. So, the Magento 2 WebP Images extension is a must-have tool to improve your website speed and create a fast website. 52 | 53 |

54 | 55 |

56 | 57 | ### Enhance Your SEO Ranking 58 | There is a direct link between website performance and its position in SERP. High-quality content and fast loading speed are equally important for search engines. So, you need to take care of both. 59 | 60 | Converting images to the WebP format is a huge step forward. If you manage to optimize your website loading, you have more chances to enhance your general SEO score. 61 | 62 |

63 | 64 |

65 | 66 | ### Reduce File Size Without Losing Quality 67 | Usually, reducing images in size causes them to lose quality. This is not an option for the eCommerce store where images directly influence purchase decisions. 68 | 69 | The Magento 2 WebP Images extension allows you to define the image quality level. Thus, you can not only reduce the size of images by up to 50%. You also get to keep their quality almost untouched. 70 | 71 |

72 | 73 |

74 | 75 | ### Convert Images Automatically or Manually 76 | Once you decide to use WebP images in your store, you need to find a way to convert them effectively. Thus, the Magento 2 WebP Images Extension offers four conversion modes: 77 | 78 | - Cron 79 | - Page Load 80 | - Page Load & Cron 81 | - Manually via CLI 82 | 83 | Depending on the mode you choose, the images will be converted automatically, or you’ll need to run a CLI command to convert them manually. 84 | 85 | In any case, the available conversion modes save you from the tedious work and ensure consistent conversion of your images. 86 | 87 | 88 |

89 | 90 |

91 | 92 | ### Adjust Conversion Settings to Your Requirements 93 | The advanced settings of the Magento 2 WebP Images Extension allow you to create the most fitting setup for your specific case. 94 | 95 | You can choose to skip some folders during the conversion, convert images in the CSS background, as well as convert the HTML tag images. This tool is extremely flexible working in various scenarios. 96 | 97 | Just choose the corresponding settings to make the most out of this module! 98 | 99 | ### Convert Images From External Websites 100 | Do you feature images from external websites and want to convert them to WebP as well? This Magento 2 WebP Images tool has you covered. 101 | 102 | You can specify what websites to convert images to WebP from, and the extension will add them to the queue as well. What is more, this module is compatible with remote storage. So, you can still convert your images even if you store them separately. 103 | 104 |

105 | 106 |

107 | 108 | ### Upload WebP Images to Magento Admin Panel 109 | Converting images to WebP is a great solution. At the same time, you may be wondering why not upload WebP images directly without having to convert them later. The answer is quite simple — Magento 2 doesn’t support this file format. 110 | 111 | This is why this Magento WebP Converter has another useful option. It allows you to upload images in the .webp format to the admin panel. So, you can both upload and convert images to WebP with this feature-rich tool. 112 | 113 |

114 | 115 |

116 | 117 | ### Monitor the Conversion Progress 118 | When converting your images to the WebP format, you would certainly want to keep an eye on the process. It will help you see the state of things and avoid any inconsistencies. 119 | 120 | This is why the Magento 2 WebP Images Extension offers you in-depth statistics on the image conversion process. Use vivid graphs to see how many images have been converted and how many are pending. Monitor the compression level and image sizes throughout the process. 121 | 122 | This section contains invaluable insights you shouldn’t miss! 123 | 124 |

125 | 126 |

127 | 128 | ### Provide Smooth Experience Across All Browsers 129 | The WebP file format is quite innovative and a great deal of browsers support it. Yet, there are still some browsers that don’t and simply show the empty space instead of the WebP image. Not very user-friendly, right? 130 | 131 | This is why, the Magento 2 WebP Images extension creates the WebP copies of the original images. Then, if a browser supports WebP, the converted images are loaded; if it doesn’t, the original images are shown instead. 132 | 133 | This approach ensures a seamless customer experience no matter what browser is used. 134 | 135 |

136 | 137 |

138 | 139 | ### Convert Images to WebP via REST API Requests 140 | Do you implement PWA and wonder if you can use WebP images in that case? You certainly can with the Magento 2 WebP Images extension. 141 | 142 | It allows you to convert the images in REST API and GraphQL requests. Thus, you can display quality images across different storefronts and ensure the best experience for all your customers. 143 | 144 | This WebP Images tool leaves no aspect uncovered! 145 | 146 | ## Video Reference 147 | 148 | Check [this short video](https://www.youtube.com/watch?v=kBgy2grcPuQ) to learn more about how WebP images are loaded during the page scroll. 149 | 150 | ## Demo 151 | 152 | Try out our open demo and if you like our extension **please give us some star on Github ★** 153 | 154 | 155 | 156 | 159 | 162 | 163 | 164 | 173 | 182 | 183 | 184 | 189 | 194 | 195 | 196 |
157 | Storefront Demo 158 | 160 | Admin Panel Demo 161 |
165 | 166 | Magento 2 WebP Images Extension Storefront Demo 171 | 172 | 174 | 175 | Magento 2 WebP Images Extension Admin Panel Demo 180 | 181 |
185 | 186 | view 187 | 188 | 190 | 191 | view 192 | 193 |
197 | 198 | ## Support 199 | If you have any issues, please [contact us](mailto:support@magefan.com) 200 | then if you still need help, open a bug report in GitHub's 201 | [issue tracker](https://github.com/magefan/magento-2-webp-optimized-images/issues). 202 | 203 | ## Need More Features? 204 | Please contact us to get a quote 205 | https://magefan.com/contact 206 | 207 | ## License 208 | The code is licensed under [EULA](https://magefan.com/end-user-license-agreement). 209 | 210 | ## [Magento 2 Extensions](https://magefan.com/magento-2-extensions) by Magefan 211 | 212 | ### [Magento 2 Google Extensions](https://magefan.com/magento-2-extensions/google-extensions) 213 | 214 | * [Magento 2 Google Indexing](https://magefan.com/magento-2-google-indexing-api) 215 | * [Magento 2 Google Analytics 4](https://magefan.com/magento-2-google-analytics-4) 216 | * [Magento 2 Google Tag Manager](https://magefan.com/magento-2-google-tag-manager) 217 | * [Magento 2 Google Shopping Feed](https://magefan.com/magento-2-google-shopping-feed-extension) 218 | * [Magento 2 Google Customer Reviews](https://magefan.com/magento-2-google-customer-reviews) 219 | 220 | ### Magento 2 SEO Extensions 221 | 222 | * [Magento 2 SEO Extension](https://magefan.com/magento-2-seo-extension) 223 | * [Magento 2 Rich Snippets](https://magefan.com/magento-2-rich-snippets) 224 | * [Magento 2 HTML Sitemap](https://magefan.com/magento-2-html-sitemap-extension) 225 | * [Magento 2 XML Sitemap](https://magefan.com/magento-2-xml-sitemap-extension) 226 | * [Magento 2 Facebook Open Graph](https://magefan.com/magento-2-open-graph-extension-og-tags) 227 | * [Magento 2 Twitter Cards](https://magefan.com/magento-2-twitter-cards-extension) 228 | 229 | 230 | ### [Magento 2 Speed Optimization Extensions](https://magefan.com/magento-2-extensions/speed-optimization) 231 | 232 | * [Magento 2 Google Page Speed Optimizer](https://magefan.com/magento-2-google-page-speed-optimizer) 233 | * [Magento 2 Full Page Cache Warmer](https://magefan.com/magento-2-full-page-cache-warmer) 234 | * [Magento 2 Image Lazy Load](https://magefan.com/magento-2-image-lazy-load-extension) 235 | * [Magento 2 Rocket JavaScript](https://magefan.com/rocket-javascript-deferred-javascript) 236 | 237 | ### [Magento 2 Admin Panel Extensions](https://magefan.com/magento-2-extensions/admin-extensions) 238 | 239 | * [Magento 2 Size Chart Extension](https://magefan.com/magento-2-size-chart) 240 | * [Magento 2 Security Extension](https://magefan.com/magento-2-security-extension) 241 | * [Magento 2 Admin Action Log](https://magefan.com/magento-2-admin-action-log) 242 | * [Magento 2 Order Editor](https://magefan.com/magento-2-edit-order-extension) 243 | * [Magento 2 Better Order Grid](https://magefan.com/magento-2-better-order-grid-extension) 244 | * [Magento 2 Extended Product Grid](https://magefan.com/magento-2-product-grid-inline-editor) 245 | * [Magento 2 Product Tabs](https://magefan.com/magento-2/extensions/product-tabs) 246 | * [Magento 2 Facebook Pixel](https://magefan.com/magento-2-facebook-pixel-extension) 247 | * [Magento 2 Email Attachments](https://magefan.com/magento-2-email-attachments) 248 | * [Magento 2 Admin View](https://magefan.com/magento-2-admin-view-extension) 249 | * [Magento 2 Admin Email Notifications](https://magefan.com/magento-2-admin-email-notifications) 250 | * [Magento 2 Login As Customer](https://magefan.com/login-as-customer-magento-2-extension) 251 | 252 | ### Magento 2 Blog Extensions 253 | 254 | * [Magento 2 Blog](https://magefan.com/magento2-blog-extension) 255 | * [Magento 2 Multi Blog](https://magefan.com/magento-2-multi-blog-extension) 256 | * [Magento 2 Product Widget](https://magefan.com/magento-2-product-widget) 257 | 258 | ### [Magento 2 Marketing Automation Extensions](https://magefan.com/magento-2-extensions/marketing-automation) 259 | 260 | * [Magento 2 Cookie Consent](https://magefan.com/magento-2-cookie-consent) 261 | * [Magento 2 Product Labels](https://magefan.com/magento-2-product-labels) 262 | * [Magento 2 Base Price](https://magefan.com/magento-2-base-price) 263 | * [Magento 2 Dynamic Categories](https://magefan.com/magento-2-dynamic-categories) 264 | * [Magento 2 Dynamic Blocks and Pages Extension](https://magefan.com/magento-2-cms-display-rules-extension) 265 | * [Magento 2 Automatic Related Products](https://magefan.com/magento-2-automatic-related-products) 266 | * [Magento 2 Price History](https://magefan.com/magento-2-price-history) 267 | * [Magento 2 Mautic Integration](https://magefan.com/magento-2-mautic-extension) 268 | * [Magento 2 YouTube Video](https://magefan.com/magento2-youtube-extension) 269 | 270 | ### [Magento 2 Cart Extensions](https://magefan.com/magento-2-extensions/cart-extensions) 271 | 272 | * [Magento 2 Checkout Extension](https://magefan.com/better-magento-2-checkout-extension) 273 | * [Magento 2 Coupon Code](https://magefan.com/magento-2-coupon-code-link) 274 | * [Magento 2 Guest to Customer](https://magefan.com/magento2-convert-guest-to-customer) 275 | 276 | ### [Magento 2 Multi-Language Extensions](https://magefan.com/magento-2-extensions/multi-language-extensions) 277 | 278 | * [Magento 2 Hreflang Tags](https://magefan.com/magento2-alternate-hreflang-extension) 279 | * [Magento 2 Auto Currency Switcher](https://magefan.com/magento-2-currency-switcher-auto-currency-by-country) 280 | * [Magento 2 Auto Language Switcher](https://magefan.com/magento-2-auto-language-switcher) 281 | * [Magento 2 GeoIP Store Switcher](https://magefan.com/magento-2-geoip-switcher-extension) 282 | * [Magento 2 Translation](https://magefan.com/magento-2-translation-extension) 283 | 284 | ### [Developers Tools](https://magefan.com/magento-2-extensions/developer-tools) 285 | 286 | * [Magento 2 Zero Downtime Deployment](https://magefan.com/blog/magento-2-zero-downtime-deployment) 287 | * [Magento 2 Cron Schedule](https://magefan.com/magento-2-cron-schedule) 288 | * [Magento 2 CLI Extension](https://magefan.com/magento2-cli-extension) 289 | * [Magento 2 Conflict Detector](https://magefan.com/magento2-conflict-detector) 290 | 291 | ## [Shopify Apps](https://magefan.com/shopify/apps) by Magefan 292 | 293 | * [Shopify Login As Customer](https://apps.shopify.com/login-as-customer) 294 | * [Shopify Blog](https://apps.shopify.com/magefan-blog) 295 | * [Shopify Size Chart](https://magefan.com/shopify/apps/size-chart) 296 | * [Shopify Google Indexer](https://magefan.com/shopify/apps/google-indexing) 297 | * [Shopify Product Feeds](https://magefan.com/shopify/apps/product-feed) 298 | --------------------------------------------------------------------------------