Title: AVIF, WebP, Image Optimization, CDN, Service Worker & Client Hints All in One Author: ImgHaste Published: 2020 年 6 月 5 日 Last modified: 2021 年 11 月 26 日 --- 搜尋外掛 ![](https://ps.w.org/imghaste/assets/banner-772x250.png?rev=2324240) 這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個 外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。 ![](https://ps.w.org/imghaste/assets/icon-256x256.gif?rev=2409926) # AVIF, WebP, Image Optimization, CDN, Service Worker & Client Hints All in One 由 [ImgHaste](https://profiles.wordpress.org/imghaste/) 開發 [下載](https://downloads.wordpress.org/plugin/imghaste.zip) * [詳細資料](https://tw.wordpress.org/plugins/imghaste/#description) * [使用者評論](https://tw.wordpress.org/plugins/imghaste/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/imghaste/#installation) * [開發資訊](https://tw.wordpress.org/plugins/imghaste/#developers) [技術支援](https://wordpress.org/support/plugin/imghaste/) ## 外掛說明 This WordPress plugin provides integration with our SaaS [Image Service](https://www.imghaste.com/) By leveraging the Power of [Client Hints](https://www.imghaste.com/blog/client-hints-explained). We’ve chosen to integrate to WordPress via a Service Worker in order to provide best possible compatibility against Caching plugins (e.g. W3TC, WPSuper Cache, Elementor…) as well as images coming from your CSS files. This way you won’t have to rewrite your URLS and lose your images SEO juice. Nor you will get overcharged in case of a BOT crawl your website. WHAT DOES THIS PLUGIN DO? This plugin registers a Service Worker, providing Progressive Web App functionalities to your website in order to intercept your Images in order to automatically detect the best possible Image required by your end user. Since we are speed monkeys, we need to say that the required javascript that will load on your page is 708 bytes gzipped. (without a k) FEATURES OUT OF THE BOX: * White Label. * Automatic Integration. * Removes EXIF information. * Compatible with Page Builders. * Effective Connection Type Detection. * Quality drop on slow 3g or Save Data on. * Backup your images for Disaster recovery. * Works with images coming from _CSS_ files. * Search Engines will grab the origin images. * Works with images coming from Ajax requests. * Compatible with Caching / Lazy Load plugins. * Backup your original image safely in the cloud. * Automatic AVIF Conversion based on browser support. * Automatic WebP Conversion based on browser support. * Progressive JPEGs & Interlaced PNGs as Net Gen fallback. FULLY WHITE-LABEL One of the reasons we decided to go with this approach is no other than SEO. Using Client Hints Combined with Service Worker will get you all the performance benefits for your end users without the SEO disadvantages that comes with the URL Rewrite. WHY ITS IMPORTANT NOT TO CHANGE IMAGE URLS In case you rewrite your image urls into something else all SEO juice from all image urls goes to the Vendor domain even if the urls contain a canonical name, they are still searchable using the vendor url. PREREQUISITES * Your website runs https only * Your website doesn’t have a Service Worker already. IMPORTANT This plugin is not compatible with other plugins that registers a Service Worker. You’ll need to disable other plugins that registers a service worker on your website or use our [Custom Integration Guide](https://www.imghaste.com/docs/) and lose the white label feature. ## 螢幕擷圖 * [[ * How can we Improve your website speed. You can check before installing * [[ * Verify Plugin works. * [[ * [[ * [[ * [[ ## 安裝方式 INSTALLATION 1. Add IMGHaste from the WordPress repository 2. Activate the plugin through the ‘Plugins’ menu in WordPress 3. Enter your CDN URL. If you don’t have one, register your account for free [here](https://app.imghaste.com/signup) and add your website to get your CDN URL. 4. Clear any page caching (e.g. W3TC, WPSuper Cache) 5. Navigate through your website (from desktop & mobile) to warm up CDN cache (optional) 6. Enjoy upgraded performance and user experience UNINSTALL 1. Delete WordPress plugin 2. Go to imghaste dashboard under settings 3. Turn Active status to false 4. Delete your origin ## 常見問題集 ### Does it work with the new WP editor? As long as your files are served from your own domain and https the integration is platform agnostic. ### What are the limits of free tier? The free has all features with paid plans, but comes 1.000 Image Optimization Credits through our Network. Which is enough to power any small sized WordPress site. ### What if I exceed the limits? In case you exceed this limit No hard limitations are applied to your website. We will contact you to set a more suitable plan for your needs. We will be happy to see you grow, knowing that we played our small part. ### How to verify the plugin works? We get that a lot. Since the integration is fully white-labeled its hard to spot and we are proud for it. You will have to go to open your developer tools and check on network tab you will see your images having type: “webp” or “avif” instead of jpeg/png. Check Screenshot#2 ### Pagespeed insights still reports “serve next gen images” why? Well, this is because all bot speed checkers do not register a service worker when scanning a website. But you can rest assure that your users are enjoying webp Images from over 300 Edge Servers worldwide. This is actually part of the WHITE LABEL solution since your urls won’t change. ### Why don’t you just rewrite the urls? The minute you sign up for url rewrites on your website (imghaste or any other similar service) you immediately lose a portion of SEO juice from your website towards the image service. So why waste it when you can benefit from both worlds? 100% SEO and enhanced user experience. Also what if you decide to change CDN 3 months later? Will you re-re-write the urls? In our humble opinion it’s better to have YOUR links in place even if its undetectable( remember.. 100% white label). Therefore, we have one option for those brave users who wishes to ditch their brand name in favor of ours, but we advice against it 🙂 ### Can I use it with other CDN? Yes, it works transparently. Our CDN will be the one serving your images, and we will get them from your CDN. As long as your images come from your own domain name, we will intercept them. This setup won’t provide any additional performance benefits. ### Does this plugin work with all browsers? You can check browser compatibility here as of today there is 95.12% compatibility and growing. As for the rest of the 5.5% this will work the same way it already used to. Any browser that supports Service Worker will support the image service. Take notice that you need to serve your website using https:// only to register your Service Worker ### I am using WP JSON API, does it work? Oh yes! ### Do you offer a cname for SEO? Yes, due to customer demand we do offer cname support However, We do offer much better than CNAME on our default setup We offer the service on your own domain. ### My theme does not provide info for client hints That can be even better in some cases. In that case, the resizing options will be limited to Device Contact support, to find out about a hybrid solution called Smart Hints by imghaste and we be glad to investigate on your behalf. ## 使用者評論 ![](https://secure.gravatar.com/avatar/333e786973ee37562c3e303421b24e110d6c1f92ef88ef95d3f148712b565d98? s=60&d=retro&r=g) ### 󠀁[Works but needs work](https://wordpress.org/support/topic/works-but-needs-work-2/)󠁿 [mwordy](https://profiles.wordpress.org/mwordy/) 2021 年 9 月 24 日 Would have givning it a 5-star if I didn’t have to put image-service.ih.js manually to root and add the code I get from adding a random custom non-wp site to app.imghaste. com. Hassle upon hassle, then figure out why it was still not working, which lead me to exclude: image-service.ih.js sdk.js from being deferred and not to mention had to 755 image-service.ih.js aswell. that’s about it, if anyone else can’t seem to make it work, this solved the issues and now works great. Have to say this, one of the best image conversion plugin out there and I’ve tested a few. ![](https://secure.gravatar.com/avatar/4d1781be03fce1108dc804dba72cf621f99d390f4833128248593122d0e15a73? s=60&d=retro&r=g) ### 󠀁[works like a charm](https://wordpress.org/support/topic/works-like-a-charm-1829/)󠁿 [traderex](https://profiles.wordpress.org/traderex/) 2020 年 12 月 2 日 their support is awesome.. plugin and their service is worth every penny! ![](https://secure.gravatar.com/avatar/02906765ed82665c428875f404039a7b2f1c1356ae3a344bde96f0e199a6191a? s=60&d=retro&r=g) ### 󠀁[Awesome support](https://wordpress.org/support/topic/awesome-support-526/)󠁿 [kinduweb](https://profiles.wordpress.org/kinduweb/) 2020 年 10 月 31 日 Really nice plugin and awesome support. ![](https://secure.gravatar.com/avatar/3ee92638fa5297d47659d6d3b1f35365c3a94897b83027cf812ad4534a792de4? s=60&d=retro&r=g) ### 󠀁[Fantastic Plugin!](https://wordpress.org/support/topic/fantastic-plugin-1456/)󠁿 [olivier83](https://profiles.wordpress.org/olivier83/) 2020 年 10 月 28 日 It’s a fantastic service, very easy to setup and to monitor. The support is excellent. ![](https://secure.gravatar.com/avatar/4f7e4298fc555150333f6fab312bbffb52a2cd6e799239943451ab3192e96ecc? s=60&d=retro&r=g) ### 󠀁[don’t work](https://wordpress.org/support/topic/dont-work-327/)󠁿 [websty](https://profiles.wordpress.org/promocot/) 2020 年 9 月 13 日 3 則留言 don’t work with cloudflare ![](https://secure.gravatar.com/avatar/f706f4ac03db1b8de4804bc1474a63fbefec73732eb576e5c90bf2bb42c744e9? s=60&d=retro&r=g) ### 󠀁[Great Plugin, great Service](https://wordpress.org/support/topic/great-plugin-great-service-68/)󠁿 [totheo](https://profiles.wordpress.org/totheo/) 2020 年 8 月 4 日 The imghaste plugin is easy to use and works great even if you don’t know have any clue what kind of magic is actually going on in the background. That’s exactly how it should be. However, if you have just a little technical know-how, you begin to understand how outstanding the service really is: a CDN without url rewrites? Amazing! Compatibility with most caching plugins? Great! Fast loading times? I take that anytime, even if PagespeedInsights, GT Metrix, Pingdom and so on are not yet able to display all improvements. After all, it is the UX that matters, not any highscores. You might want to check out the other features as well since there is more to it than image optimisation (backups for your pictures and so on). One more important aspect: the support-team is awesome. I had some additional questions, all of which were answered competently and quickly. The roadmap also shows what can be expected in the future. In addition the team is very transparent when it comes to planed features and integrations with other plugins (all very well thought out, by the way). Long story short: I highly reccomend imghaste. [ 閱讀全部 9 則使用者評論 ](https://wordpress.org/support/plugin/imghaste/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈AVIF, WebP, Image Optimization, CDN, Service Worker & Client Hints All in One〉的開發相關工作。 參與者 * [ ImgHaste ](https://profiles.wordpress.org/imghaste/) * [ Sociality ](https://profiles.wordpress.org/sociality/) 〈AVIF, WebP, Image Optimization, CDN, Service Worker & Client Hints All in One〉 外掛目前已有 2 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/imghaste/contributors) 為這個外掛做出的貢獻。 [將〈AVIF, WebP, Image Optimization, CDN, Service Worker & Client Hints All in One〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/imghaste) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/imghaste/)、查看 [SVN 存放庫](https://plugins.svn.wordpress.org/imghaste/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/imghaste/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/imghaste/)。 ## 變更記錄 #### 1.2.0 Added PWA Support Added CNAME Support Decommission of SlimCSS in favor of new product = 1.1.1 = Add AVIF Support Add html5 Doctype support for SlimCSS Fix a warning on error log #### 1.1.0 Added SlimCSS Feature. Added Feature Policy for Client hints #### 1.0.11 * Added a no cache header to resolve some false negative HealthChecks. * Customers with a CDN still needs to manually decache it. #### 1.0.10 * Added a fancy gif icon. * Our Great thanks to the fun of imghaste for his wonderful contribution. #### 1.0.9 * cache invalidation of service worker + SDK file every 10 minutes to support upcoming features. #### 1.0.8 * Added image-service.ih.js as a physical file as well #### 1.0.7 * Some better HealthCheck to avoid redirects * Linting Project using PSR-2 * Fixed some installation issues * Enable URL Rewrite for test Only. #### 1.0.6 * Some Undefined Warnings reported #### 1.0.5 * Add a Short Notice while CDN Url not configured * Suggest a 5* Rating & a Version Compatibility thumbs up * Add HealthCheck on plugin settings #### 1.0.4 * Fix Changelog outline * DomDocument errors. #### 1.0.3 * Remove CDN Rewrite on a specific case #### 1.0.2 * Clear all output buffers before & after Service Worker Route #### 1.0.1 * Content-type: application/javascript * Name of SW: image-service.sw.js renamed to /image-service #### 1.0 * Initial Release ## 中繼資料 * 版本 **1.2.0** * 最後更新 **5 年前** * 啟用安裝數 **200+** * WordPress 版本需求 ** 3.0.1 或更新版本 ** * 已測試相容的 WordPress 版本 **5.6.0** * PHP 版本需求 ** 5.4 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/imghaste/)、[Greek](https://el.wordpress.org/plugins/imghaste/)、 及 [Russian](https://ru.wordpress.org/plugins/imghaste/). * [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/imghaste) * 標籤: * [AVIF](https://tw.wordpress.org/plugins/tags/avif/)[cdn](https://tw.wordpress.org/plugins/tags/cdn/) [service worker](https://tw.wordpress.org/plugins/tags/service-worker/)[webp](https://tw.wordpress.org/plugins/tags/webp/) * [進階檢視](https://tw.wordpress.org/plugins/imghaste/advanced/) ## 評分 4.3 星，滿分為 5 星 * [ 7 個 5 星使用者評論 ](https://wordpress.org/support/plugin/imghaste/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/imghaste/reviews/?filter=4) * [ 1 個 3 星使用者評論 ](https://wordpress.org/support/plugin/imghaste/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/imghaste/reviews/?filter=2) * [ 1 個 1 星使用者評論 ](https://wordpress.org/support/plugin/imghaste/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/imghaste/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/imghaste/reviews/) ## 參與者 * [ ImgHaste ](https://profiles.wordpress.org/imghaste/) * [ Sociality ](https://profiles.wordpress.org/sociality/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/imghaste/) ## 贊助 想要支援這個外掛的發展嗎？ [ 贊助這個外掛 ](https://www.imghaste.com/)