Grunt Responsive Images

Steps to install and to use Grunt plugin (by Andi Smith) for create automatic responsive images.

  1. First of all: Grunt & co. installed (need help?);
  2. Secondly: install GraphicsMagick (recommended directly by Andi).  I am Windows XP user, then I will explain how to install it: downloaGraphicsMagick logod via FTP the last version .exe file from this directory, I recommend the Q8 type (GraphicsMagick-1.3.20-Q8-win32-dll.exe), right for web images. Then launch the .exe file, following the wizard instructions. At the end you should type some lines on Command Prompt to test if everything is ok: if so you will see a “nice” GraphicsMagick logo image.
  3. then: type this line of JavaScript inside your project’s Gruntfile.js, to load plugin task
    grunt.loadNpmTasks('grunt-responsive-images');
  4. So on: I tried this task configuration, with default options:
    responsive_images: {
      myTask: {
       options: { },
       files: {
        'dest/test-img.jpg': 'test/assets/test-img.jpg'
       }
      } ...
    

    Using the default options will produce 3 responsive images – one at 320px wide, one at 640px wide and one at 1024px wide.

  5. type grunt in your cmd and…it works.

Other info and utilities on Github plugin page.

This entry was posted in Articoli, Responsive and tagged , . Bookmark the permalink.

Leave a reply