This plugin requires Grunt
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-responsive-images-converter --save-dev
The "responsive_images_converter" task
In your project's Gruntfile, add a section named
responsive_images_converter to the data object passed into
The directory of your responsive images, it will be the same with the original img tag in markdown file if ignored.
Default value: see below
The breakpoints configuration of your responsive policy, with following properties:
- name: One part of the responsive images' name.
- media: Value of the media attribute with source tag in picture element.
- dprs: Device pixel ratios that will support.
- suffix: Anoher part of the responsive images' name.
The default value of
var DEFAULT_OPTIONS =queries:name: 'phone'media: '(max-width:500px)'//device pixel ratio( 1 is default )dprs: 2suffix: '@'name: 'tablet'media: '(max-width:800px)'//device pixel ratio( 1 is default )dprs: 2suffix: '@'name: 'desktop'media: '(min-width:800px)'//device pixel ratio( 1 is default )dprs: 2suffix: '@';
![Webp compare tool](/img/raw/webp-tool.png)
After running the task above, it will creat a new file named
When your responsive images locat in the different directory from the orignal img tag. For the example above, the directory of you img tag in markdown file is
/img/raw/, if your responsive images' directory is
img/resp/, then you should use the
And the result will be:
When you don't want to create a new file and just need to replace the original markdown file, then use the
The result after running task will be written to
At present, browsers don't support the responsive image tech well, you may need use the picturefill to polyfill.
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.