andismith/grunt-responsive-images

Produce images at different sizes for responsive websites.

I'm Andi. 👋

💬 Want to work together? Let's talk!

---

grunt-responsive-images's Issues

Warning if no images are found

If there are no images in the src specified, I get this error from grunt.
Warning: Unable to compile; no valid source files were found. Use --force to continue.

This breaks my grunt workflow. Am I doing something wrong? Is there a way to ignore this task if no images are in my project yet?

shasum failure on npm install

I'm seeing shasum failures when trying to npm install.

npm http GET https://registry.npmjs.org/grunt-responsive-images
npm http 304 https://registry.npmjs.org/grunt-responsive-images
npm http GET https://registry.npmjs.org/grunt-responsive-images/-/grunt-responsive-images-0.0.6.tgz
npm http 200 https://registry.npmjs.org/grunt-responsive-images/-/grunt-responsive-images-0.0.6.tgz
npm ERR! Error: shasum check failed for /var/folders/3q/bmxmmxrd4w961pksb3yv9fbm0000gn/T/npm-99596/1385865783823-0.2726634875871241/tmp.tgz
npm ERR! Expected: 313e82e3ef9dc07d15409eea1b12b25448d2cce0
npm ERR! Actual:   e74135ce47e851b3be11716fad1e068b06593be7

When manually downloading that file and running shasum on it, I sure do get 'e741..' instead of the '313e...' specced in the registry.

bash-3.2$ wget  https://registry.npmjs.org/grunt-responsive-images/-/grunt-responsive-images-0.0.6.tgz --no-check-certificate
--2013-11-30 18:48:55--  https://registry.npmjs.org/grunt-responsive-images/-/grunt-responsive-images-0.0.6.tgz
Resolving registry.npmjs.org... 67.228.31.147, 67.228.31.146
Connecting to registry.npmjs.org|67.228.31.147|:443... connected.
WARNING: cannot verify registry.npmjs.org's certificate, issued by ‘/C=US/ST=CA/L=Oakland/O=npm/OU=npm Certificate Authority/CN=npmCA/[email protected]’:
  Unable to locally verify the issuer's authority.
HTTP request sent, awaiting response... 200 OK
Length: 10516177 (10M) [application/octet-stream]
Saving to: ‘grunt-responsive-images-0.0.6.tgz’

100%[==================================================================================================================================================================>] 10,516,177   170KB/s   in 65s

2013-11-30 18:50:01 (159 KB/s) - ‘grunt-responsive-images-0.0.6.tgz’ saved [10516177/10516177]

bash-3.2$ shasum grunt-responsive-images-0.0.6.tgz
e74135ce47e851b3be11716fad1e068b06593be7  grunt-responsive-images-0.0.6.tgz

Breaks on animated GIF

The tasks stops. I wonder how it should treated.

Error running task: `no method 'indexOf'`

Hi,

My directory structure is...

• SourceImages/
  • A.jpg
  • B.jpg
  • C.jpg
• Gruntfile.js

Here is my example task...

responsive_images: {
    files: [{
        expand: true,
        cwd: 'SourceImages/',
        src: ['*.jpg'],
        dest: 'Generated/'
    }]
}

When I run grunt responsive_images I get the following error...

Running "responsive_images:files" (responsive_images) task
Verifying property responsive_images.files exists in config...OK
{ expand: true,
  cwd: 'SourceImages/',
  src: [ '*.jpg' ],
  dest: 'Generated/' }
Warning: Object #<Object> has no method 'indexOf' Use --force to continue.
TypeError: Object #<Object> has no method 'indexOf'
    at /Users/markmcdonnell/Code/Imager/node_modules/grunt/lib/grunt/file.js:56:29
    at Array.forEach (native)
    at processPatterns (/Users/markmcdonnell/Code/Imager/node_modules/grunt/lib/grunt/file.js:53:34)
    at Object.file.expand (/Users/markmcdonnell/Code/Imager/node_modules/grunt/lib/grunt/file.js:111:17)
    at Object.fn [as src] (/Users/markmcdonnell/Code/Imager/node_modules/grunt/lib/grunt/task.js:176:36)
    at /Users/markmcdonnell/Code/Imager/node_modules/grunt/lib/grunt/task.js:195:24
    at Array.forEach (native)
    at Task.task.normalizeMultiTaskFiles (/Users/markmcdonnell/Code/Imager/node_modules/grunt/lib/grunt/task.js:192:11)
    at Object.<anonymous> (/Users/markmcdonnell/Code/Imager/node_modules/grunt/lib/grunt/task.js:244:23)
    at Object.thisTask.fn (/Users/markmcdonnell/Code/Imager/node_modules/grunt/lib/grunt/task.js:78:16)

I checked the module code and found that it would indeed error like this as the indexOf is being called on an Object...

// Process specified wildcard glob patterns or filenames against a
// callback, excluding and uniquing files in the result set.
var processPatterns = function(patterns, fn) {
  // Filepaths to return.
  var result = [];
  // Iterate over flattened patterns array.
  grunt.util._.flatten(patterns).forEach(function(pattern) {
    console.log(pattern); // OBJECT PASSED THROUGH TO FILE PROPERTY
    // If the first character is ! it should be omitted
    var exclusion = pattern.indexOf('!') === 0;
};

Before that I had tried a different investigation by simplifying my example...

responsive_images: {
    options: {},
    files: {
        'SourceImages/Generated/A.jpg': 'SourceImages/A.jpg'
    }
}

...but that just passed straight through with no errors and not doing anything because it couldn't find any files...

Running "responsive_images:files" (responsive_images) task
Verifying property responsive_images.files exists in config...OK
File: [no files]

Done, without errors.

Any ideas on this? @addyosmani wrote a post about using this grunt task so I assume he hasn't had these types of problems using it. Seems odd that I couldn't get any variation to work?

Maybe I'm just missing something very simple.

If you could take a look and let me know please.

Thanks.

dont' detect duplicate names

if you run responsive_images task and later run the some taks for copy the new images....

generate moar images

my task:

responsive_images:
  options:
    engine: "gm"
    separator: ""
    sizes: [
      name: "@2x"
      width: '200%'
    ]
  files:
    expand: true
    cwd: "<%=conf.dest_assets%>/img/"
    src: ["**/*.{jpg,gif,png}"]
    dest: "<%=conf.dest_assets%>/img/"

I don't use suffix becase is broken

Auto-generating the <picture> syntax?

Once we have multiple image sources, we need a tool for generating the <picture> syntax. Ideally, these two tasks should both be automated and combined into one task. Maybe the optimal approach would be to have a task that parses content files (be it HTML or Markdown), detects “wild” <img> elements (not contained in <picture>) and then (1) generates the various image sources (based on a given configuration) and then (2) generates and injects the <picture> syntax, replacing the original <img>s.

Notes:

1. Instead of replacing all <img>s, we could use a flag: <img data-picture src="…">
2. The config could contain different named configurations, e.g. for images inside blog posts, for images in the side column, etc. and this config would be set on the images, e.g. <img data-picture="post">, <img data-picture="aside">. etc.

Cannot call method 'toUpperCase' of undefined

If I add the following in my gruntfile:

grunt.initConfig({
  responsive_images: {
    myTask: {
      options: {
        sizes: [{
          width: 320,
        },{
          width: 640,
        },{
          width: 1024,
        }]
      },
      files: [{
        expand: true,
        src: ['**.{jpg,gif,png}'],
        cwd: 'images/',
        custom_dest: 'dest/{%= width %}/'
      }]
    }
  },
})

I get the error Cannot call method 'toUpperCase' of undefined

This is the output:

Running "responsive_images:myTask" (responsive_images) task
Fatal error: Cannot call method 'toUpperCase' of undefined
TypeError: Cannot call method 'toUpperCase' of undefined
at isAnimatedGif (C:\Dev\picture\node_modules\grunt-responsive-images\tasks
responsive_images.js:279:37)
at gm. (C:\Dev\picture\node_modules\grunt-responsive-images\tasks
\responsive_images.js:314:12)
at gm.EventEmitter.emit (events.js:106:17)
at gm. (C:\Dev\picture\node_modules\grunt-responsive-images\node
modules\gm\lib\getters.js:129:14)
at ChildProcess.cb (C:\Dev\picture\node_modules\grunt-responsive-images\node
_modules\gm\lib\command.js:264:16)
at ChildProcess.EventEmitter.emit (events.js:95:17)
at Process.ChildProcess.handle.onexit (child_process.js:787:12)

sizes options doesn't work

Hi,andi,i work in window, i follow the steps and it successfully output the images.while when i config the sizes options, it can't work that it still output the default images?
i don't what's the problem. Any help is apperiated.Thanks.

Process newer / changed images only

I notice across the issues that a number of guys would like to see this and @andismith has pointed out the Grunt Newer plugin however it's unfortunate that using newer doesn't work, as it's not always a one fit-solution. For instance, response-images uses a non-standard way of specifying the src and dest as in this example (which newer quite heavily relies on)

grunt.initConfig({
  responsive_images: {
    myTask: {
      options: {},
      files: {
        'dest/mario-yoshi.jpg': 'test/assets/mario-yoshi.jpg'
      }
    }
  }
})

Also in the instance of using custom options newer can only handle basic string matching in a specific format. You can currently specify a number of wildcards and special {%= =%} parameters which newer knows nothing about.

Even with a pull request to the newer plugin (possibly to support the most basic first example), it still wouldn't support the full range of parameters this plugin offers. Therefore a custom inbuilt solution is likely needed and would be an incredible feature to have in the core.

Unit tests fail when multiple contributors.

Issue to look in to why these fail on different computers.

See issue #18 for context.

Option to conditionally create output if source file modified date is younger than existing outputted file.

Hi,

I'm close to finishing a site which has 200 images with 18 different sized variations. Running grunt-responsive-images takes over 15 minutes on my 2011 macbook pro.

It would have been quicker if it only processed the images it had to. I thought it could do that by comparing the modified date of the source file with any existing outputted sized files' creation date.

What do you think? Good idea? Have you done this yet? Is it worth me taking a stab at it?

Thanks,
/t

Feature request / Output format select

Now

I can't select output format. I use PNGs for lossless image storage. But I want them to get converted to JPSs, since I can set quality lower (specially for 2x and 3x sizes) to get better sizes.

Should be

output format in options

Feature : max_height and max_width sizes options (or detect portrait / landscape)

Hi guys, and thx for this plugin !

I have a suggestion, when you have portrait and landscape pictures, it's not really optimized because, for example, if i have set width: 1440, my landscape picture size is 1440x720, and my portrait picture is 1440x2880 instead of 720x1440...
And if i set a width & height in options, pictures are cropped...

So is it possible to set a max_width & max_height option ?

sizes: [{
          max_width: 1440,
          max_height: 1440
        }]

Or simply set a max_side_size and detect if it's a landscape or a portrait.

sizes: [{
          max_side_size: 1440
        }]

Thanks!

Images are more kb after resize

Ok, what am I doing wrong here?

I have a 1280px JPEG that's 92kb after saving for web & devices at quality 60

After running that thru grunt-responsive-images (w/ ImageMagick) the 1000px version is 396kb. Kind of defeats the purpose...

Tried setting the responsive_images options quality to 60, but images are the same kb after resizing.

responsive_images: {
  home_slideshow: {
    options: {
      quality: 60,
      sizes: [
        {
          width: 400,
          height: 193
        },
        {
          width: 600,
          height: 290
        },
        {
          width: 800,
          height: 386
        },
        {
          width: 1000,
          height: 483
        },
        {
          width: 1280,
          height: 618
        }
      ]
    },
    files: [{
      expand: true,
      src: ['dev/img/home/slideshow/originals/*.jpg'],
      custom_dest: 'dev/img/home/slideshow/renditions/{%= width %}/'
    }]
  }
}

retain original name

It would be desirable to preserve the original file name, for example, to use in conjunction with retinajs

Crash at isAnimatedGif

Hi there! I'm having a strange problem with grunt crashing when it tries to run my responsive_images task. It seems to be missing some data that identifies the type of file being processed. I've never had a problem with this before, but I'm new to grunt, so this may very well be due to poor configuration of my tasks.

Below is my stack trace after running grunt --stack. If you have any insight or need additional info, let me know.

Thanks!

Running "responsive_images:myTask" (responsive_images) task
Fatal error: Cannot call method 'toUpperCase' of undefined
TypeError: Cannot call method 'toUpperCase' of undefined
at isAnimatedGif (/Users/admin/Desktop/3dproof/node_modules/grunt-responsive-images/tasks/responsive_images.js:279:37)
at gm. (/Users/admin/Desktop/3dproof/node_modules/grunt-responsive-images/tasks/responsive_images.js:314:12)
at gm.EventEmitter.emit (events.js:106:17)
at gm. (/Users/admin/Desktop/3dproof/node_modules/grunt-responsive-images/node_modules/gm/lib/getters.js:129:14)
at ChildProcess.cb (/Users/admin/Desktop/3dproof/node_modules/grunt-responsive-images/node_modules/gm/lib/command.js:264:16)
at ChildProcess.EventEmitter.emit (events.js:95:17)
at Process.ChildProcess._handle.onexit (child_process.js:805:12)
Tim:3dproof admin$ grunt

Warning: Command failed: gm identify: No decode delegate for this image format...

I'm setting this up for the first time but when I run grunt responsive_images I get the following error:

Warning: Command failed: gm identify: No decode delegate for this image format (images/2014-01-01.jpg).
gm identify: Request did not return an image.
Use --force to continue.

I've installed ImageMagick and confirmed it is working correctly by converting a jpg to a png with it. I've set the engine to use as 'im' and below is my configuration:

options:
            {
                engine: 'im',
                sizes: [
                {
                    name: 'small',
                    width: 320,
                    quality: 80,
                    aspectRatio: true
                },
                {
                    name: 'medium',
                    width: 640,
                    quality: 80,
                    aspectRatio: true
                }]
            },
            files: [{
                expand: true,
                src: ['**/*.{jpg,gif,png}'],
                cwd: 'images/',
                dest: '_site/images/'
            }]

Any idea what the issue is? I'm not sure if the gm in the error message is a reference to GraphicsMagick, but I thought setting the engine to 'im' would have prevented any issue with using ImageMagick. I appreciate any help.

Examples should be using `sizes` and `srcset`

Awesome grunt task! :)
One nit though...
Seems like the example on http://www.andismith.com/grunt-responsive-images/ (as well as the copy) is using the full <picture> syntax, where they actually shouldn't.

Since AFAICT this grunt task does not involve art-direction (e.g. no cropping, proportion change, etc), the examples would be significantly better off showing the <img sizes srcset> syntax, which is the best fit for the use-case tackled by this task.

So the example syntax should be:
<img sizes="(min-width: 820px) 800px, (min-width: 640px) 640px, 320px" srcset="wedding-small.jpg 320w, wedding-medium.jpg 640w, wedding-large.jpg 800w">

Custom name renamed to the final size image (width and height)

Hi guys, is possible do something like...

example: my photo have 800x600 resolution, if i do this:

{
width: 500,
},

the result is photo-500.jpg but i want photo-500x375.jpg
It is renamed to the final size image

Default sizes suggestion

Hello, this is not an issue,

in my opinion the user expects the default behaviour to only resize images by width. I think that resized images with a different ratio than 320/240 (almost all images) aren't probably what the user expected (the resizing process cuts off things and its not ok most of the times).

It should be easy to implement removing the height property from the default sizes array.

Congratulations for the great module! It was really useful for me.

Keep aspect ratio

Could there be an option to keep the aspect ratio in tact?

Files are not renamed when using custom_dest

I use grunt-responsive-images to resize 2x icons to 1x icons. When I use custom_dest, the files are not renamed. When I use the regular dest the files are renamed correctly. This is my config:

responsive_images: {
    icons: {
        options: {
            sizes: [{
                name: '1x',
                width: '50%',
                height: '50%',
                suffix: '-1x'
            }, {
                name: '2x',
                width: '100%',
                height: '100%',
                suffix: '-2x'
            }]
        },
        files: [{
            expand: true,
            src: ['*.{jpg,gif,png}'],
            cwd: 'src/images/sprite/icons-original/',
            custom_dest: 'src/images/sprite/icons-{%= name %}/'
        }]
    },
}

Is there a way to use the file rename option in combination with the custom_dest option?

GFX Engines objects wrong values?

Looks like the code and name values are inverted. IE they're incorrectly referencing the OTHER library.

https://github.com/andismith/grunt-responsive-images/blob/master/tasks/responsive_images.js#L59

Not able to resize more than one image even when using Files Array format

I'm running a task which generates different sized backgrounds. All was working OK when there was only one file to resize. Adding at least one more file gives an error from grunt-responsive-images:

Warning: Unable to resize more than one image in compact or files object format.
For multiple files please use the files array format.

Seems to me that my config is in File Array format:

{
  responsive_images: {
    backgrounds: {
      options: {
        sizes: [
          {
            name: 'small',
            width: 640,
            height: 800,
            aspectRatio: false,
            quality: 80
          },
          {
            name: "medium",
            width: 1024,
            height: 800,
            aspectRatio: false,
            quality: 86
          },
          {
            name: "large",
            width: 1920,
            quality: 86
          }
        ]
      },
      files: [{
        src: ['images/home-bg/*.jpg'],
        custom_dest: '../assets/images/g/home-bg/{%= name %}/'
      }]
    }
  }
}

Btw, the files object does indeed include multiple files in "src". It seems grunt has expanded them for convenience. Yet this task does not seem to support it.

{
  "src": ["images/home-bg/bg1.jpg","images/home-bg/bg2.jpg"],
  "custom_dest":"../assets/images/g/home-bg/{%= name %}/",
  "orig":{"src":["images/home-bg/*.jpg"],
  "custom_dest":"../assets/images/g/home-bg/{%= name %}/"}
}

OS: Win7 64bit
Grunt: 0.4.5
grunt-responsive-images: 0.1.3

Images are scaled up when using with imagemagick 6 (Ubuntu 14.04)

When I have defined this size

{
    name:   '1000',
    width:  3000,
    suffix: '-3x',
    upscale:false
}

an 800x600 image is upscaled to 3000x2250. My other options are:

options: {
    engine: 'im',
     quality: 70
}

Duplicate images

Is it possible to not duplicate images if upscale is set to false? That is to say, if the image is already small, it only outputs additional images if the image is large enough to be sized down? Hope this makes sense... thanks.

Core Changes to Task - Feedback Requested

When I originally built Grunt Responsive Images it was to see how it would be possible to resize images from a Grunt task. The first version of the plugin was put together quickly using whatever resources I could get hold of to prove it was possible to resize images by pixel by pixel values. It was a single requirement for what was a single use case.

Since then the task has become widely used by a large number of people, with over 3000 downloads, and the requirements have gone beyond the simple pixel by pixel resizing. Some of the requirements have been attainable with the current setup (such as path modifications), while others are not as easy to implement mainly due to the library being used (such as percentage resizing, upscaling and cropping gravity).

Grunt Responsive Images currently uses the node module node-imagemagick, but the module is no longer maintained and has not been updated for over a year. It currently has 78 issues and 39 pull requests pending.

Trying to fulfil the requirements in the Issue Tracker whilst using the current node module has become too difficult, I don't particularly want to re-write what it should be doing. So I've moved the task over to use the gm module, which is being actively maintained. This module allows users to use either ImageMagick or GraphicsMagick, so I've included the option to choose within Grunt Responsive Images too.

Whilst switching it over, it's begun to feel like some of the default options are incorrect. The following options are bothering me:

• At the moment the plugin will ignore aspect ratio and crop images (to the center point); whereas it feels like the default should actually be to maintain aspect ratio. Cropped images can still be achieved by changing aspectRatio to false, and gravity can now be specified.
• Upscaling on/off is now an option, the default being false. (Previously it would always upscale)
• I'd like to change the default sizes to no longer force both dimensions, as per #28.
• Looking around the web, it also seems like GraphicsMagick is the superior library, with speed improvements and regular updates. I'd like to change the default renderer from ImageMagick to GraphicsMagick, and ensure there is clear messaging so users are not confused.

So how do you feel about a number of the default options changing? My thoughts are that since running npm install targets a version number, it should only affect new projects anyway. But do you think this is too disruptive? I'm planning to make this version v0.1.0, so is this the right time to do it? Would love to know your thoughts?

If you think it's a good idea, I just have some final refactoring to do before checking in; then it would be good to get some testing feedback before releasing v0.1.0 to npm.

Please tell me if I'm crazy.

Thanks
Andy

(Looping in @maslen, @oncletom and @addyosmani as they've been active in either the code, or using the task - but feedback welcome from all)

Is there a way to apply tasks based on filenames?

Is it possible to assign tasks by filename?

My options look like this:

options: {
    sizes: [{
            name: 'article',
            width: 640,
        },
        {
            name: 'header',
            width: 1200
        },
        {
            name: 'preview',
            width: 200
        }]
    }

Now I want to apply the three tasks based on the filenames article_foo.jpg, header_bar.jpg, preview_awesome.jpg etc.

Sub directory structure

Hi Andi,

For images that reside within a sub directory structure...

assets/elephants/elephant_1.jpg
assets/elephants/elephant_2.jpg
assets/elephants/elephant_2.jpg
assets/rabbits/rabbit_1.jpg
assets/rabbits/rabbit_2.jpg
assets/rabbits/rabbit_3.jpg

They get outputted into a flattened output...

img/96/elephant_1.jpg
img/96/elephant_2.jpg
img/96/elephant_3.jpg
img/96/rabbit_1.jpg
img/96/rabbit_2.jpg
img/96/rabbit_3.jpg

I'd like to retain the directory sub structure so the output would be...

img/96/elephants/elephant_1.jpg
img/96/elephants/elephant_2.jpg
img/96/elephants/elephant_3.jpg
img/96/rabbits/rabbit_1.jpg
img/96/rabbits/rabbit_2.jpg
img/96/rabbits/rabbit_3.jpg

I'm working on a PR to do this, I have a few questions:

1. Are you already working on this?
2. Would it cause an issue I've not noticed?
3. How would this behaviour be initiated?

Right now I've got a flag "maintain_directory_structure" that is false by default, which you set in the gruntfile...

  grunt.initConfig({
    responsive_images: {
      maintain_sub_directory_structure: {
        options: {
          sizes: [{
              width: 320,
            },{
              width: 640,
            },{
              width: 1024,
            }],
          maintain_directory_structure: true
        },
        files: [{
          expand: true,
          src: ['**.*.{jpg,gif,png}'],
          cwd: 'test/assets/maintain_sub_directory_structure/',
          custom_dest: 'tmp/maintain_sub_directory_structure/{%= width %}/'
        }]
      }
    }
  });

@oncletom @Integralist you guys got an opinion about this?

Thanks,
/t

SVG source

As far as I can tell, there's no way to use an SVG as a source file and have the grunt task generate a bunch of PNGs at various sizes as fallbacks. Is that true? If so, this would be an awesome feature to add.

Command failed: gm convert: Pixel cache allocation failed

Working this into my responsive workflow and suddenly this error occurs. Not sure if it's related to GraphicsMagik or not.

Command failed: gm convert: Pixel cache allocation failed.
It sounds like I ran out of RAM but I have 5GB still available.

Running Mac OSX 10.9.4
Grunt version 0.4.5
Responsive Images 0.1.3
Image dimensions are 1648x2048

Here is the grunt task:

// Resize images for SRCSET
    responsive_images: {
      options: {
        upscale: false,
        sizes: [{
          width: 320
        },{
          name: '320',
          width: 640,
          suffix: '@2x' // Fallback
        },{
          width: 480
        },{
          width: 640
        },{
          width: 960,
        },{
          width: 1280,
        }]
      },
      dist: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>/',
          src: ['images/{,*/}*.{gif,jpeg,jpg,png}'],
          dest: '.tmp/'
        }]
      },
    },

Which quality should i choose for the image resize?

The too huge image output got fixed like discussed in #41

But i have still troubles getting smaller output sizes, since i use the default quality value so far.

if i have a source image of 5mb with 4442px x 2961px and i use convert -quality '100' -resize '2000' directly inside the terminal the resulting file size is 2,8mb and 2000px x 1333px. if i use convert -resize '2000'the resulting file size is 1,2mb with 2000px x 1333px. With the following grunt settings

'user strict';
module.exports = function(grunt) {
 grunt.initConfig({
    responsive_images: {
     projects: {
        options: {
          engine: ['im'],
          sizes: [{
            name: "2000pro",
            width: 2000
          }],
          separator: ['_']
        },
        files: [{
          expand: true,
          src: ['projects/*.{jpg,gif,png}'],
          cwd: 'originals/',
          dest: 'img/'
        }]
      }
    }
  });
  grunt.loadNpmTasks('grunt-responsive-images');
  grunt.registerTask('default', ['responsive_images']);
};

the resulting image is 2,8mb with 2000px x 1333px. So is it possible that, per default, ImageMagick is using a quality of 100 for the grunt responsive images resize? Cuz shouldn't the output sizes for convert and grunt responsive image be identical if no quality is set and the default is used (the grunt output in the example above would also be 1,2mb instead of 2,8mb then).

On a side note, if i examine the resulting images in pixelmator, the images created with the grunt responsive image plugin have jfif attributes with a x and y density of 72 while the images created with convert, directly inside the terminal, have a x and y density of 300.

Best regards Ralf

Add an option for Point filtering

Hello! I'm using your module for upscaling my pixel art (because Chrome doesn't accept image-rendering css values). I found your Gruntfile options (and your actual task) to not allow filter overrides (for non-blurry pixel art upscaling). I dove into the documentation for GM's Javascript documentation and added a simple line above your image.resize() line:
.filter('Point')

image
  .filter('Point')
  .resize(sizeOptions.width, sizeOptions.height, sizingMethod)
  .quality(sizeOptions.quality);

If you could add an option to your task, I would love you forever so I don't have to change your files! :D

Grunt Watch Folder

Might not even be possible.. but is it possible to grunt watch the folder where the images are being processed?

Question

Is possible not have the width in the name of the file ?

Example:

Image:
main-feature.jpg

Result l have (not good)
main-feature-50.jpg
[email protected]

Result ( what l want )
main-feature.jpg
[email protected]

Source:
grunt.initConfig({
responsive_images: {
myTask: {
options: {
units: { percentage: '', pixel: '', multiply: '' },
sizes: [{
name: '',
width: '50%',
aspectRatio: true,
quality: 100
},
{
name: '',
width: '100%',
aspectRatio: true,
quality: 100,
suffix: '@2x'
} ],
},
files: [{
expand: true,
cwd: 'retina/',
src: ['*/.{jpg,gif,png}'],
dest: 'tmp/'
}]
}
},
})

Quality Option

Heyo,

I am having issues with setting my own custom quality for the images. I have set the quality in the sizes option. But nothing is happening when i put in different quality for the different sizes.

Remove dependency on Imagemagick

Future enhancement to investigate and attempt to remove non-JS dependencies.

One for the roadmap, and to keep in mind as a long term goal.

Image size options not working

I've been trying this a number of ways and even copied your demo file exactly in trying to change the default image sizes but nothing seems to work. I've installed ImageMagick via Homebrew without any problems, I've installed the grunt-responsive-images plugin without any problems.

Here's my package.json file:

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
      responsive_images: {
        options: {
          sizes: [{
            width: 420,
            height: 240
          },{
            name: 'large',
            width: 840
          },{
            name: "large",
            width: 1224,
            suffix: "_x2",
            quality: 0.6
          }]
        },
        files: [{
          expand: true,
          src: ['public/assets/images/bg/**/*.{jpg,gif,png}'],
          cwd: '/',
          dest: 'tmp/'
        }]
      },
    })

    grunt.loadNpmTasks('grunt-responsive-images');
    grunt.registerTask('default', ['responsive_images']);

};

The task runs fine and I see it resizing the images but it produces them at the default sizes and not those that I've set. Any ideas what I'm missing or is this a bug?

Images are upscaled

When a source image is smaller than a defined size it will be upscaled.

There should be an option (maybe upscale) for this, set to false by default. This would then just ignore an image if it's smaller than the defined size being processed.

Custom Destination name prepending hyphen to folder name

When I create a custom_dest it prepends a hyphen (-) to the folder name e.g
'public/img/{%= name %}/' becomes '/public/img/-tablet/'

I had a look in the source but couldn't figure out where it was coming from sorry.

Suppress output

Instead of outputting a line for each image created, can it just show the number of images created, or some other shorter statistics, similar to grunt-contrib-copy?

Auto doubling / thirding / halfing?

Yo - great plugin / working great. Had a thought though about further automating and wanted to see what you thought.

Currently, this plugin uses a hard width / height attribute to define the size of the images it spits out. While this works great on a set of similar images, its not as useful for when you are batch processing your whole Images folder (several source images of different widths, etc). You can obviously work around this by manually editing the config of each batch, but there may be a better way.

What if there were an option in the config to dynamically double, third, or half the width of source image (relative to its own width)? Something like:

sizes: [{
name: 'small',
width: half,
quality: 1
},
name: "medium",
width: third,
quality: 1
}]

or

sizes: [{
name: 'small',
width: half,
quality: 1
},
name: "large",
width: double,
suffix: "_x2",
quality: 0.6
}]

Not even sure if that is possible, but this way a single run of the plugin can batch out all images in a directory, without defining a hard width. Thoughts?

output structure

Hi,

I'd like a example target file...

target/kitten.jpg

to output as...

dest/320/kitten.jpg
dest/600/kitten.jpg
dest/800/kitten.jpg

So push images into directories that have the name specified as the width value. Is this possible in the current version?

If not, would you take a pull request and I'll implement this myself? Not sure what the API should be, any suggestions? cc @Integralist @thomasparisot

Thanks,
/t

Intelligent cropping using, for example, smartcrop

Please add an "Intelligent cropping" feature. Using https://github.com/jwagner/smartcrop-cli, for example.

large file sizes for pngs

The PNGs output by grunt-responsive-images are consistently larger in file size than when I save from Photoshop. This is a problem, since responsive images are all about delivering improved performance.

For example: I started with a source PNG that's 2000x1815px and 171,786 bytes, and resized it to 1920x1742px in both Photoshop and grunt-responsive-images. I got the following output sizes:

• Photoshop, Save As…, PNG, interlaced: 174,144 bytes
• Photoshop, Save for Web & Devices…, PNG-24 (transparency, interlaced, convert to sRGB, preview use document profile, metadata none): 174,280 bytes
• grunt-responsive-images: 660,506 bytes

The above are the image sizes after all the images have been run through ImageOptim, but the grunt-responsive-images file was considerably larger than the others before that process too.

The settings for grunt-responsive-images were:

name: 'w1920',
width: 1920,
quality: 60,
aspectRatio: true,
upscale: true

These results are typical for all the PNGs I'm generating. Any idea why the grunt-produced images are so much larger than the Photoshop ones? I'm not super familiar with ImageMagick or GraphicsMagick, but I assume there must be some settings we can tweak to get better output.

All the images are attached below.

{%= path %} contains full structure, including cwd, when used with grunt-newer

Using grunt-newer with grunt-responsive-images seems to override the {%= path %} used in custom_dest and includes the FULL path from the root of the project.

npm install not up to date

Hi guys! I love your module and am using it to resize all my images to 50% for non-retina devices, I saw that you recently updated the function isValidSize to accept strings:

function isValidSize(obj) {
return _.isNumber(obj.width) ||
_.isNumber(obj.height) ||
_.isString(obj.width) ||
_.isString(obj.height);
}

however when i install the latest version ( "0.0.7") using grunt I am still getting the old version of the function

function isValidSize(obj) {
return (_.isNumber(obj.width) || _.isNumber(obj.height));
}

I have to go in and manually change it for the script to work. Am i doing something wrong? or is npm just not up to date. I'm a bit of a noob when it comes to this stuff so please let me know if i'm being silly.

Warning: spawn EMFILE Use --force to continue.

I am resizing a directory of 4000 images. I constantly get the following error:
"Warning: spawn EMFILE Use --force to continue."

I have tried the following tweaks to my system:

$ ulimit -n 10480
-bash: ulimit: open files: cannot modify limit: Operation not permitted

$ launchctl limit maxfiles 4096 4096
- doesnt seem to take effect

I have even tried to change the dependency in this task on 'fs' to 'graceful-fs' .
after installing graceful-fs via npm:

/*
 * grunt-imagemagick
 * https://github.com/icagstrout/grunt-imagemagick
  *
  * Copyright (c) 2012 Arne Strout
  * Licensed under the MIT license.
  */

 var grunt=require('grunt');
 //var fs=require('fs');
 var fs = require('graceful-fs');
 var path=require('path');

which had no effect either.

after three days of trying to get something automated for resizing all these images, I am completely lost.

I hope someone can shed some light on this problem

OS: OSX 10.9
node: v0.8.16
grunt: v0.4.1

my question on stack overflow: http://stackoverflow.com/questions/19850817/resizing-4000-images-using-a-grunt-plugin

Need to have GraphicsMagick installed

Hi,

First off: great plugin :) thanks

Had some issue setting it up though...

I had ImageMagick already installed on my machine, so I set "engine": "im" being under the impression that I didn't need to have GraphicsMagick installed.
But I got this error: "Please ensure ImageMagick is installed correctly" untill I ALSO installed GraphicsMagick.

The documentation says "You need to install EITHER GraphicsMagick OR Imagemagick CLI tools".

Anyway, working great now ;)

Debug Utility

Great plugin, first of all. I have a suggestion to add a debug option that labels each image size, for easier debugging.