options.jpeg

Type: Object

Default value: null

This parameters governs the output type: JPEG (when non-null), or PNG (when null).

If specified, it is passed to a canvas object as parameter when creating a JPEG stream. See Canvas#jpegStream() and Canvas#syncJPEGStream() for details. If null, a PNG stream is created.

The most frequently used parameters to generate JPEG are quality, which is a number from 0 to 100 (default: 75), and progressive, which is a boolean value (default: false).

It is important to know that this setting can affect a destination file name. If dest has an extension, it is used as is, but if there is no extension, '.png' or '.jpg' will be added depending on options.jpeg value.

It is recommended to specify an extension explicitly in order to use grunt-tight-sprite task with other plugins, like grunt-newer (see Recipe: rebuild sprite on demand with newer).

Examples

Example #1

Default configuration:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      dest: "images/icons.png"
    }
  }
})

The spite will have type PNG, and it will be placed in images/icons.png.

Example #2

JPEG of quality 85:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        jpeg: {
          quality: 85
        },
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      dest: "images/icons.jpeg"
    }
  }
})

The spite will have type JPEG, and it will be placed in images/icons.jpeg.

Example #3

Regular PNG:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        jpeg: null,
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      dest: "images/icons.xyz"
    }
  }
})

The spite will have type PNG, and it will be placed in images/icons.xyz.

Example #4

JPEG of quality 90:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        jpeg: {
          quality: 90
        },
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      dest: "images/icons.xyz"
    }
  }
})

The spite will have type JPEG, and it will be placed in images/icons.xyz.

Example #5

Regular PNG with an automatic file extension:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      dest: "images/icons"
    }
  }
})

The spite will have type PNG, and it will be placed in images/icons.png.

Example #6

Progressive JPEG with an automatic file extension:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        jpeg: {
          progressive: true
        },
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      dest: "images/icons"
    }
  }
})

The spite will have type JPEG, and it will be placed in images/icons.jpg.