Title: Just Responsive Images Author: Alex Prokopenko / JustCoded Published: 2017 年 3 月 6 日 Last modified: 2021 年 9 月 6 日 --- 搜尋外掛 ![](https://ps.w.org/just-responsive-images/assets/banner-772x250.jpg?rev=1830751) 這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個 外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。 ![](https://ps.w.org/just-responsive-images/assets/icon-256x256.jpg?rev=1830743) # Just Responsive Images 由 [Alex Prokopenko / JustCoded](https://profiles.wordpress.org/aprokopenko/) 開發 [下載](https://downloads.wordpress.org/plugin/just-responsive-images.zip) * [詳細資料](https://tw.wordpress.org/plugins/just-responsive-images/#description) * [使用者評論](https://tw.wordpress.org/plugins/just-responsive-images/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/just-responsive-images/#installation) * [開發資訊](https://tw.wordpress.org/plugins/just-responsive-images/#developers) [技術支援](https://wordpress.org/support/plugin/just-responsive-images/) ## 外掛說明 The Just Responsive Images plugin gives you control of responsive image properties, which WordPress 4.4+ inserts to all post thumbnails by default. The default solution is to insert all available image sizes as srcset attribute into img tag. This is not optimal, because the browser gets too much image resolutions, it can generate more requests to the server (to get the right image) and it takes longer to display the image itself. Not to mention, Google Page Speed inspector is not satisfied with such a method. If you have hand-coded a mobile-friendly HTML/CSS for your theme it usually has media queries for background images and tags instead of tags. A lot of images are used as block backgrounds very often, which should be editable from CMS. All these best practices are not supported in the WordPress core by default and you end up wasting your time re-writing standard functions. That’s why we’re here! We want to provide easy-to-use control for customizing srcset for each image size dimension you use inside your theme. Also we’re happy to provide you with a few helpers which will generate tags and generate required media queries for backgrounds. Full documentation and configuration options are available on our github page: [https://github.com/justcoded/just-responsive-images](https://github.com/justcoded/just-responsive-images). Feel free to post your suggestions or bugs under Issues section on github. #### Generating image sizes on request This plugin DOES NOT register image sizes with WordPress `add_image_size` function. So they are not resized on upload in admin panel. This is done because on big sites there are too much image sizes (especially with enabled retina option) and in this case WordPress wastes the disk space and database with useless files. Our plugin resize images ONLY when you open the page with an image, printed with rwd functions. Resize is performed through WordPress built in functions, so once resized – WordPress will have information about new sizes available for your image.** Unfortunately it’s impact the site speed, when you load the page with images by a first time.** Any good copywriter/administrator checks his content before publishing, so this delay will be seen by admin users in most cases. #### IMPORTANT In version 1.2 default RWD set background options updated to mobile-first strategy( from desktop-first). If you use nested rules from RWD set you should update your main size background option to have @media query with `min-width` rule. #### DEV Mode In DEV mode plugin does not resize any images and simply use placeholder images. This can be used to reduce disk space, while you develop and configure our plugin to match all required screen sizes. To enable it you need to define new constant in your wp-config.php file: ``` define( 'JRI_DUMMY_IMAGE', true ); ``` ## 螢幕擷圖 [⌊Responsive image sizes declaration/config.⌉⌊Responsive image sizes declaration/ config.⌉[ Responsive image sizes declaration/config. [⌊Template basic usage example.⌉⌊Template basic usage example.⌉[ Template basic usage example. [⌊Generated HTML.⌉⌊Generated HTML.⌉[ Generated HTML. ## 安裝方式 1. Download, unzip and upload to your WordPress plugins directory 2. Activate the plugin within you WordPress Administration Backend 3. Add hook `add_filter('rwd_image_sizes', 'my_rwd_image_sizes');` 4. Create new function `my_rwd_image_sizes` and set the configuration array. The example can be found inside the plugin folder in `/data/config-example.php`. ## 使用者評論 ![](https://secure.gravatar.com/avatar/6ee7a7bcd4d8df1416a55686be69320eb6ad5e2c6c995933a2767973abc974b1? s=60&d=retro&r=g) ### 󠀁[Doesn’t work and no respond](https://wordpress.org/support/topic/doesnt-work-and-no-respond/)󠁿 [rodricus](https://profiles.wordpress.org/rodricus/) 2022 年 11 月 4 日 This plugin does not do anything? I installed the plugin and I followed the instructions. At the front-end I don’t see any change, nor at the product page nor at the products archive page. The plugin author is also not responding. ![](https://secure.gravatar.com/avatar/0d60aa19032ffe86a40c8b5effa6e8bf9b2336c89e4019a7fed8f2090a6dffbd? s=60&d=retro&r=g) ### 󠀁[Awesome](https://wordpress.org/support/topic/awesome-7647/)󠁿 [Marko Hofmann](https://profiles.wordpress.org/wpxpert00/) 2020 年 4 月 27 日 1 則留言 This plugin should be in the core 😀 ![](https://secure.gravatar.com/avatar/ceff2bd01e05b04e37a8483763db02b2a53a2bb2415e48e086f537be7455c99d? s=60&d=retro&r=g) ### 󠀁[Amazing plugin](https://wordpress.org/support/topic/amazing-plugin-937/)󠁿 [btsybulnyk](https://profiles.wordpress.org/btsybulnyk/) 2018 年 3 月 20 日 This plugin is necessity if you want to make a good web site. I use this plugin almost every project. Thank you! ![](https://secure.gravatar.com/avatar/7c7e66ac6c3eb3ca4f6d636fa5ee2210904ca413fcc01d244b553891d73e8312? s=60&d=retro&r=g) ### 󠀁[Excellent plugin](https://wordpress.org/support/topic/excellent-plugin-3785/)󠁿 [rovniy](https://profiles.wordpress.org/rovniy/) 2018 年 3 月 20 日 Use this plugin in my projects ![](https://secure.gravatar.com/avatar/f104dabc69f136f17142103b67742549e3de14991d02f6c4385db1a0e730dece? s=60&d=retro&r=g) ### 󠀁[Review](https://wordpress.org/support/topic/review-174/)󠁿 [evkos](https://profiles.wordpress.org/evkos/) 2018 年 3 月 20 日 I use this awesome plugin for all my project ![](https://secure.gravatar.com/avatar/e0d69737edb1b1723ac7e72d63a2995f9525c60ccc13ce0ae49293c0a97ed33f? s=60&d=retro&r=g) ### 󠀁[Must have for professional web development](https://wordpress.org/support/topic/must-have-for-professional-web-development/)󠁿 [Raju Mandapati](https://profiles.wordpress.org/mvpspl619/) 2018 年 3 月 19 日 1 則留言 Just Responsive Images is a must-have plugin for building high-performance websites. It uses latest browser technologies like Picture tags and Srcsets to ensure page will not download unnecessarily huge images. Alex is very responsive in answering questions and is a pleasure to work with. [ 閱讀全部 6 則使用者評論 ](https://wordpress.org/support/plugin/just-responsive-images/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈Just Responsive Images〉的開發相關工作。 參與者 * [ Alex Prokopenko / JustCoded ](https://profiles.wordpress.org/aprokopenko/) [將〈Just Responsive Images〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/just-responsive-images) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/just-responsive-images/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/just-responsive-images/)，或 透過 [RSS](https://plugins.trac.wordpress.org/log/just-responsive-images/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/just-responsive-images/)。 ## 變更記錄 #### Version 1.6.7 – 6 September 2021 ``` * PHP 8 support ``` #### Version 1.6.6 – 16 November 2020 ``` * PHP 7.4 support ``` #### Version 1.6.5 – 5 March 2019 ``` * Fixed retina size, which match image original size. ``` #### Version 1.6.4 – 25 January 2019 ``` * Fixed always resize for retina if 2x is bigger than original image. * Add ability to set default tag for rwd_attachment_image() with a filter. ``` #### Version 1.6.3 – 9 August 2018 ``` * Fix background usage if no other options specified. ``` #### Version 1.6.2 – 3 July 2018 ``` * Fix dev mode dummy images with sizes set in DB but missing on file system. ``` #### Version 1.6.1 – 28 June 2018 ``` * Added attachment ID text to dev mode dummy images. ``` #### Version 1.6.0 – 27 June 2018 ``` * Dev mode with placeholder images instead of real images in case correct sizes are missing. ``` #### Version 1.5.1 – 3 April 2018 ``` * Added compatibility with Crop Images plugin * Fix main editor content responsive images (it was broken after some WP update) ``` #### Version 1.5 – 15 March 2018 ``` * Added compatibility with Just Image Optimizer plugin ``` #### Version 1.4.1 – 9 March 2018 ``` * Bug fix: Wrong image source taken when image crop enabled and original width/height is the same and required height/width are less than origin. ``` #### Version 1.4 – 7 March 2018 ``` * Upgrate: Changed image size generation to generate images on request from site frontend. This impact site speed on first page request! * Update: Add alt to svg and set default class ``` #### Version 1.3 – 16 January 2018 ``` * Update: If media is SVG - then we always print with hard-coded width/height attributes from configuration array ``` #### Version 1.2.1 – 12 September 2017 ``` * Bug fix: Small images generate warning in featured image box ``` #### Version 1.2 – 12 July 2017 ``` * New: True retina support * Bug fix: responsive image with "img" tag does not work in different IE/Edge versions ``` #### Version 1.1.4 – 4 May 2017 ``` * New: SVG images support (If user used SVG instead of usual image - it will be printed) ``` #### Version 1.1.3 – 25 April 2017 ``` * Bug fix: responsive image with "img" tag does not work in IE11 ``` #### Version 1.1.2 – 14 April 2017 ``` * Bug fix: responsive image with "img" tag does not work in IE ``` #### Version 1.1.1 – 31 March 2017 ``` * New: Print available image sizes on Media attachment edit screen. Useful for debugging. ``` #### Version 1.1 – 24 March 2017 ``` * New: Ability to clean up all resized images from disk. To use go to Tools > Uploads Cleanup. ``` #### Version 1.0.8 – 22 March 2017 ``` * Bug fix: Background main styles were printed after media queries. ``` #### Version 1.0.7 – 16 March 2017 ``` * Bug fix: Post can be passed instead of attachment (now can't fixed) * Bug fix: Wrong image is taken as default if main image is not a featured image and mobile image missing (now default is correct) ``` #### Version 1.0.6 ``` * Code refactoring (basically renaming files and class names) ``` #### Version 1.0.5 ``` * Critical fix: Non-inherit settings were ignored during html generation with "Missing image size" warning. ``` #### Version 1.0.4 ``` * Bug fix: Added "src" to tag (Google Chrome has a bug with max-width css property without "src" attribute). ``` #### Version 1.0.3 ``` * Bug fix: Fixed options which passed 'wp_get_attachment_image_attributes' filter. Some plugins use keys, which were missing in previous version. ``` #### Version 1.0.2 ``` * New: Added parameter to pass additional html attributes into `rwd_attachment_image()`. ``` #### Version 1.0.1 ``` * Bug fix: Single size option return empty result * Improvement: Smaller images now display lower resolution size even for big screens. ``` #### Version 1.0 ``` * First version of our plugin. ``` ## 中繼資料 * 版本 **1.6.7** * 最後更新 **5 年前** * 啟用安裝數 **500+** * WordPress 版本需求 ** 4.5 或更新版本 ** * 已測試相容的 WordPress 版本 **5.8.17** * 語言 * [English (US)](https://wordpress.org/plugins/just-responsive-images/) * [進階檢視](https://tw.wordpress.org/plugins/just-responsive-images/advanced/) ## 評分 4.4 星，滿分為 5 星 * [ 6 個 5 星使用者評論 ](https://wordpress.org/support/plugin/just-responsive-images/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/just-responsive-images/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/just-responsive-images/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/just-responsive-images/reviews/?filter=2) * [ 1 個 1 星使用者評論 ](https://wordpress.org/support/plugin/just-responsive-images/reviews/?filter=1) [撰寫評分](https://wordpress.org/support/plugin/just-responsive-images/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/just-responsive-images/reviews/) ## 參與者 * [ Alex Prokopenko / JustCoded ](https://profiles.wordpress.org/aprokopenko/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/just-responsive-images/)