內容簡介
WordPress已經將srcset功能加入核心，這是好事，但這個外掛程式更進一步幫助主題開發人員使用picture元素，並回退到標準的圖像標籤和srcset。
此外，該外掛還支持即時圖像生成外掛。實際上，將其與即時圖像生成外掛一起使用是極其鼓勵的，否則該外掛會使圖像上傳速度變慢。
它還支援視網膜屏幕的2x和3x圖像，因此您可以為訪問者提供最佳的圖像。
定義圖像大小
首先，您需要像add_image_size一樣定義圖像大小。這個特定函數是可選的，但建議使用它，因為它還為視網膜創建了2x和3x圖像。
例如： add_image_size_for_picture('mobile_images', 320, 0, true);
在模板中使用圖像
一旦定義了您的大小，您可以像這樣在模板中調用它們：
generate_picture($some_attachment_id, [
'mobile_images' => '(max-width: 320px)'
], [
'class' => 'some-class-name',
'data-item' => 1
]);
第二個參數陣列是格式為image size name : media query，因此您可以指定所需的多個響應式尺寸。
第三個參數允許您向source / img標籤添加屬性。
與即時圖像生成外掛整合
將上傳大小添加到WordPress並使圖像上傳顯著變慢，因為我們會為每個大小生成三倍的圖像。如果您使用CPU核心較少的服務器，這可能會導致上傳超時。
要解決這個問題，建議使用一個插件來獨立創建這些圖像，而不會影響用戶。為此，我們為您提供了三個過濾器，讓您可以更改底層調用的函數。
responsive_retina_images_add_size_function是添加新大小時的調用函數，默認情況下它會調用`add_image_size`
'responsive_retina_images_source_function是從數據庫中拉取圖像時的調用函數，默認情況下它會調用`wp_get_attachment_image_src`
responsive_retina_images_source_function_index是訪問從`responsive_retina_images_source_function`返回的URL的索引，默認情況下為0
例如，如果您要與Fly Dynamic Image Resizer整合，可以在functions.php中添加以下內容。
add_filter('responsive_retina_images_add_size_function', function() { return 'fly_add_image_size'; });
add_filter('responsive_retina_images_source_function', function() { return 'fly_get_attachment_image_src'; });
add_filter('responsive_retina_images_source_function_index', function() { return 'src'; });
外掛標籤
開發者團隊
② 後台搜尋「Picture Element Responsive and Retina Images」→ 直接安裝（推薦）
原文外掛簡介
WordPress has introduced the srcset feature into core which is great but this plugin goes a step further to help theme developers use the picture element with a fallback to a standard image tag and srcset.
This plugin also offers support for on the fly image generation plugins. In fact it’s hugely encouraged to use one as this plugin can cause image uploads to slow down otherwise.
It also offers support for 2x and 3x images for retina screens so you can serve the best image possible for your visitors.
Define image sizes
First you need to define your image sizes, similar to add_image_size. This particular function is optional but recommended because it also creates 2x and 3x images for retina.
E.G. add_image_size_for_picture('mobile_images', 320, 0, true);
Using images in your template
Once your sizes are defined you can call them in your template like so:
generate_picture($some_attachment_id, [
'mobile_images' => '(max-width: 320px)'
], [
'class' => 'some-class-name',
'data-item' => 1
]);
The second argument array is in the format of image size name : media query that way you can specify as many different responsive sizes as you need to.
The third argument allows you to add attributes to the source/img tag.
Integrating with on the fly image generation plugins
Adding upload sizes to wordpress and slow down the image upload significantly as we generate three times as many images that you add a size for. This can cause the upload to time out if you are using a server with a low amount of cpu cores.
To solve this we recommend using a plugin that will create these images independent of the upload and not affect users. For this purpose we have three filters available for you to change the functions we call underneath the hood.
responsive_retina_images_add_size_function is the function to call when adding a new size, by default this calls `add_image_size`
'responsive_retina_images_source_function is the function to call when pulling the image from the database, by default this calls `wp_get_attachment_image_src`
responsive_retina_images_source_function_index is the index at which to access the url returned from `responsive_retina_images_source_function`, by default this is `0`
For example if you were to integrate with Fly Dynamic Image Resizer you could add the following to your functions.php.
add_filter('responsive_retina_images_add_size_function', function() { return 'fly_add_image_size'; });
add_filter('responsive_retina_images_source_function', function() { return 'fly_get_attachment_image_src'; });
add_filter('responsive_retina_images_source_function_index', function() { return 'src'; });
