前言介紹
- 這款 WordPress 外掛「Adaptive Images for WordPress」是 2015-04-17 上架。
- 目前有 4000 個安裝啟用數。
- 上一次更新是 2024-10-15，距離現在已有 199 天。
- 外掛最低要求 WordPress 5.0 以上版本才可以安裝。
- 有 56 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
mobile images | resize images | adaptive images | optimize images | responsive images |
內容簡介
Adaptive Images
透明地調整和優化傳輸到行動設備的圖像，大幅減少總下載時間。該插件作為 WordPress 網站和設備之間的過濾器，向設備提供較小的圖像。
請注意，這不是 CSS 或響應式圖像解決方案。它不會影響您的佈景主題佈局和樣式。它只是將較小的圖像發送到設備，設備根本察覺不到！
基本目標
大幅減少行動設備上網頁的總下載時間。
不受佈局與樣式的影響，透明地運作。
不受尚未標準化的 picture 元素或 HTML 的 img srcset 屬性影響。
附加好處
尊重搜索引擎並發送原始圖像版本。
如果無法識別設備大小，回退到原始圖像大小。
非常輕量，因為不需要每次伺服器圖像請求時載入整個 WordPress 環境。
支援格式
JPEG
PNG
GIF（非動畫）
不支援格式
WEBP
GIF（動畫）
CDN/Varnish/Nginx/外部快取服務
自 0.6.0 版本起，CDN / Varnish / 外部快取服務支援已作為選項添加，以實驗模式運作。這意味著：i）它還沒有完全測試 ii）但是，到目前為止，它在幾乎所有測試用例中都能運作良好 iii）它對您的安裝沒有危險 iv）它會將特殊的 URL 參數添加到圖像 URL，因此稍微有點隱形。
目前已測試與 MaxCDN、Varnish 和 Nginx。
無法在此模式下處理 CSS 背景圖像（尚未支援）。
無法與為圖像使用不同子域的 CDN 運作，因為這種設置完全忽略了 WordPress 並且跳過它，直接提供圖像。歡迎在支援論壇上詢問詳細資訊。
預設斷點
1024px 寬屏幕
640px 寬屏幕
480px 寬屏幕
自 0.5.0 版本起，可配置該插件是否會考慮每個設備的橫向或縱向方向。也支援 HiDPI（高像素密度或 retina）屏幕。
如何測試
最簡單的方法是使用瀏覽器的裝置仿真模式（響應式設計模式）進行測試。您可以查看這個影片 https://www.youtube.com/watch?v=hCAC1XUUOvw/ 做為範例。
使用像是 Webpagetest http://www.webpagetest.org/ 這樣的工具進行測試。請確定在「進階設定」>「Chrome」標籤中設定「模擬行動瀏覽器」。
使用實際的行動設備，智能手機或平板電腦進行測試。看您的網站如何快速載入。
檢查 /wp-contents/cache 目錄是否有 /adaptive-images 目錄及其內容。這是預設存放調整大小的圖像並進行快取的目錄。
從瀏覽器直接查看圖像，並在 URL 的末尾添加「?debug=true」，例如「http：//www.website.com/wp-content/uploads/2015/01/image.jpg?debug=true」。這可以驗證插件是否運作，並應該列印有用的除錯訊息。如果仍然看到您的圖像，那麼插件無法正常工作，原因可能是未能正確更新 .htaccess 文件。
對圖像的 URL 添加「?debug=original」並檢視其是否能夠正常載入。
原文外掛簡介
Adaptive Images
Resizes and optimizes images delivered to mobile devices, in a transparent way, so that the total download time is dramatically reduced. It works as a filter between your WordPress website and the devices and seves smaller images to them.
Note that this is not a CSS nor a responsive images solution. It does not affect your themes layout and style. It simply sends smaller images to the devices without them noticing it!
Fundamental goals
Reduce the total download time of a web page in mobile devices dramatically.
Work transparantly and unobtrusively by being independant of your theme layout and style.
Be agnostic of the yet not-standardised picture element or HTML the img srcset attribute.
Side benefits
Respects search engines and sends them the orginal version of each image.
If it does not recognise a device size it falls back to the original image size.
It is lightweight, because it does not need to load the whole WordPress environment every time it server an image request.
Supported formats
JPEG
PNG
GIF (not animated)
NOT Supported formats
WEBP
GIF (animated)
CDN/Varnish/Nginx/external caching services
Since version 0.6.0 CDN/Varnish/external caching service support has been added as an option, in an experimental mode. This means: i) it is not thorougly tested yet ii) however, it works in almost all test cases so far iii) it bears no dangers to your installation iv) it adds a special url parameter to your image urls, so it is slightly obtrusive.
Tested with MaxCDN, Varnish and Nginx up to now.
Cannot handle CSS background images in this mode (yet).
Cannot work, not even in experimental mode, with CDNs which use a different subdomain for images, because these setups completely bypass WordPress when delivering images. Feel free to ask for details on this in the support forum.
Default breakpoints
1024px wide screens
640px wide screens
480px wide screens
Since version 0.5.0 and upwards it is configurable whether the plugin should take into account the landscape or the portrait orientation of each device. HiDPI (high device pixel density or retina) screens are supported too.
How to test
The esiest way to test is with your browser's device emulation mode (Responsive Design Mode) in it' Developer Tools. You can check this out in this video https://www.youtube.com/watch?v=hCAC1XUUOvw/ as an example.
Test with a tool like Webpagetest http://www.webpagetest.org/. Make sure you set the “Emulate Mobile Browser” setting in the “Advanced Settings” > “Chrome” tab.
Test with an actual mobile device, a smartphone or tablet. Watch your website load in a snap.
Check the /wp-contents/cache directory to see the /adaptive-images directory and its contents. This is where the resized images are kept and cached by default.
View an image straight from a browser and add a "?debug=true" at the end of the url like this "http://www.website.com/wp-content/uploads/2015/01/image.jpg?debug=true". This verifies that the plugin is working and should print useful debug information. If you keep seeing your image, then the plugin is not working as expected and the cause is probably a failure to update the .htaccess file properly.
Add a "?debug=original" at the end of the url of an image and you will see the orginal version of the image even when a smaller version of it should have been shown.
Incompatibilities and issues
The plugin supports Nginx, if it is used as the main server, not as a caching server, but the server’s configuration file must be manually configured like this:
location / {
rewrite \.(?:jpe?g|gif|png)$ /wp-content/plugins/adaptive-images/adaptive-images-script.php;
}
Windows IIS is not supported, but could be manually configured. Any IIS experts are welcome to contribute.
Cannot work, not even in experimental mode, with CDNs which use a different subdomain for images.
When using HTTPS/SSL make sure that you update all your website urls and also the urls in your WordPress General
settings page, otherwise the plugin will not be able to locate your images.
WordPress Multisite (Mu) is not supported (some plans for future support are being discussed).
Stuff to keep in mind
The plugin needs to add a little bit of code to your .htaccess file in order to function properly. It removes this code once disabled. If you are not cool with that, then… tough luck!
The plugin does not care whether the device is actually mobile or not. It checks the device screen resolution. If you have set your breakpoints big enough then it should work just as good for desktop devices as well. However, it targets mostly the mobile ones.
The resized versions of the pictures are kept in a special directory in the /wp-content/cache directory. This causes some storage overhead. It is up to you to judge whether this overhead is a sustainable option in your hosting environment. Usually it is not even remotely compared to the size of your original images directories.
The plugin does not help with (nor hinder) art direction. Simple as that. Art direction https://usecases.responsiveimages.org/#art-direction in responsive images is an entirely different, yet important, problem. This plugin does not tackle with it. But it works in a supplementary way without interfering with other solutions that do. This means that you can combine it with any art direction solution.
Credits
The plugin was originally based on the WP-Resolutions plugin https://github.com/JorgenHookham/WP-Resolutions/, but since version 0.3.0 it is a complete rewrite!
Both plugins, WP-Resolutions and this one, have borrowed ideas from the Adaptive Images http://adaptive-images.com/ solution, specially adapted for WordPress.
Many special thanks to my good friend and colleague Antonis Zachopoulos for the countless times that he provided feedback, ideas and debugging hints.
Many thanks to @railgunner for the initial idea on the CDN/Varnish/external caching service feature in the plugin support forum. It showed the way that it was indeed possible!
Thank you AJ at WpFASTER.org for being keen to test the above feature in a real environment.
Thank you to the guys over at the Pressidium team for helping with debugging the CDN/Varnish/external caching service feature and providing test environments.
Thank you Andy Gray for helping debugging the weird filesystem path issues in managed hosting environments.
Thank you @milenoi2016 for helping sort out one of the many cases of WordPress directories setup.
Thank you @minorgod for the Windows path fix.
Thank you Mark Gruffer for the global request variable exposure hint.
Thank you @timholz for the SameSite cookie hint.
Thank you @blackcapdesign for spotting the regular expression issue in version 0.6.70 and helping debug it.
Lastly, a million thanks to all of you who provided useful feedback in the early versions of the plugin, where the inevitable glitches, due to server environment variations, were more than a few.
Please, do let us know how the plugin works (or doesn’t work) for you. We love comments and creative feedback!
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Adaptive Images for WordPress」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
0.3.5 | 0.5.0 | 0.5.2 | 0.6.0 | 0.6.1 | 0.6.2 | 0.6.3 | 0.6.4 | 0.6.5 | trunk | 0.2.08 | 0.3.04 | 0.6.41 | 0.6.51 | 0.6.60 | 0.6.61 | 0.6.62 | 0.6.63 | 0.6.64 | 0.6.65 | 0.6.68 | 0.6.69 | 0.6.70 | 0.6.71 | 0.6.72 | 0.6.73 |
延伸相關外掛（你可能也想知道）
WURFL Image Tailor (WIT) 》將圖片大小調整為適合行動裝置的尺寸, WURFL Image Tailor (WIT) http://web.wurfl.io/#wit 是一個自動圖片轉換並提供服務的外掛，, 使用 WURFL 設備偵測函式...。