grunt-imagine
Advanced tools
Use @cowboys js based optimizer grunt to optimize (and or inline) your projects image resources.
Install this grunt plugin next to your project's [grunt.js gruntfile][getting_started] with: npm install grunt-imagine
Then add this line to your project's grunt.js gruntfile.
grunt.loadNpmTasks('grunt-imagine');
If you want to use the pngmin, jpgmin, gifmin or pngnq tasks, you need to have some third party tools installed & in your global PATH:
It is enough if you have one tool per task installed, but if you provide more of them, grunt-imagine will recognize that and will try to use them, if they´ll help to shrink the filesize.
Note: I will add more tools to the chain in the future, if you would like to see a tool in image, ping me.
If you would like to shrink the size (lossless) of your *.png files, set up a src description, where to find your original *.png files and a directory where you would like to store your optimized files.
The task will take the original directory setup from your src directories, and will copy them over (even for subdirs).
Warning! If the dest property is set equally to your src directory, imagine will override your files!
pngmin: {
src: [
'src/*.png',
'src/img/*.png'
],
dest: 'build'
}
If you would like to shrink the size (lossless) of your *.gif files, set up a src description, where to find your original *.gif files and a directory where you would like to store your optimized files.
The task will take the original directory setup from your src directories, and will copy them over (even for subdirs).
Warning! If the dest property is set equally to your src directory, imagine will override your files!
gifmin: {
src: ['src/**/*.gif'],
dest: 'build'
}
If you would like to shrink the size (lossless) of your *.jpg files, set up a src description, where to find your original *.jpg files and a directory where you would like to store your optimized files.
The task will take the original directory setup from your src directories, and will copy them over (even for subdirs).
Warning! If the dest property is set equally to your src directory, imagine will override your files!
jpgmin: {
src: ['src/**/*.jpg'],
dest: 'build'
}
If you would like to use lossy compression via jpegoptim's -m flag, you can
add a quality configuration option:
jpgmin: {
src: ['src/**/*.jpg'],
dest: 'build',
quality: 80 // use lossy JPEG compression at 80% quality
}
If you would like to quantizize your PNG images in RGBA format, set up a src description, where to find your original *.png files and a directory where you would like to store your optimized files.
The task will take the original directory setup from your src directories, and will copy them over (even for subdirs).
Warning! If the dest property is set equally to your src directory, imagine will override your files!
pngnq: {
src: ['src/**/icons*.png'],
dest: 'build'
}
If you would like to inline your images (data:uri/base64) in your *.css or *.png files, you can use the inlineImg task, just add a src, where imagine can find your *.css and/or *.html files.
If you use absolute paths, use the base property to tell imagine, where it can find your images.
If you set the ie8 flag to true, only images smaller than 32kb will be inlined.
inlineImg: {
src: ['src/**/*.css', 'src/**/*.html'],
ie8: true,
base: 'build/img',
dest: 'build'
}
Imagine provides the ability to generate sprite maps and the corresponding css, scss, sass, less or stylus files. At the moment, only *.png files can be processed.
sprites: {
icons36: {
src: ['src/img/icons36/*.png'],
css: 'src/css/icons36.css',
map: 'src/img/icons36.png'
}
}
This configuration will generate an image named icons36.png in the 'src/img' folder, which contains all of the *.png images found in the 'src/img/icons36/' folder.
Given that two matching images were found in the'src/img/icons36/' folder, named 'MyImage1.png' and 'MyImage2.png', the generated css file would look like this:
.MyImage1, .MyImage2 {
background: url("../img/icon36.png") no-repeat;
}
.MyImage1 {
background-position: 0 -432px;
}
.MyImage2 {
background-position: 0 -396px;
}
This task doesn´t depend on any external libraries, except for PhantomJS, which the most of you should have installed if you´re using grunt.
The images are be sprited vertically, so you might need to set up some margin to give´em some space:
sprites: {
icons36: {
src: ['src/img/icons36/*.png'],
css: 'src/css/icons36.css',
map: 'src/img/icons36.png',
margin: 15
}
}
Now you´re images will be places with 15 px of space between them.
You can add a prefix to every class by specifying this option
sprites: {
icons36: {
src: ['src/img/icons36/*.png'],
css: 'src/css/icons36.css',
map: 'src/img/icons36.png',
classPrefix: 'Icon'
}
}
which would generate something like this:
.Icon-MyImage1, .Icon-MyImage2 {
background: url("../img/icon36.png") no-repeat;
}
.Icon-MyImage1 {
background-position: 0 -432px;
}
.Icon-MyImage2 {
background-position: 0 -396px;
}
The task has the ability to output the CSS portion in multiple format. The default format is straight CSS. However you can choose to output to SASS, SCSS, LESS or Stylus placeholders to include to your stylesheets. The possible values for this options are css, scss, sass, less, stylus.
For example, the following configuration:
sprites: {
icons36: {
src: ['src/img/icons36/*.png'],
css: 'src/css/icons36.css',
map: 'src/img/icons36.png',
output: 'scss'
}
}
would generate something like this:
%icons36 {
background: url("../img/icon36.png") no-repeat;
}
%Icon-MyImage1 {
@extend %icons36;
background-position: 0 -432px;
}
%Icon-MyImage2 {
@extend %icons36;
background-position: 0 -396px;
}
This will add the CSS "width" and "height" properties to the tasks' output. This setting is false by default.
For example, the following configuration:
sprites: {
icons36: {
src: ['test/out/img/icons36/*.png'],
css: 'test/out/scss/icons36.scss',
map: 'test/out/img/icons36.png',
output: 'scss',
dimensions: true
}
}
would generate something like this:
%icons36 {
background: url("../img/icons36.png") no-repeat;
}
%sprite_01 {
@extend %icons36;
width: 32px;
height: 32px;
background-position: 0 0;
}
%sprite_02 {
@extend %icons36;
width: 48px;
height: 48px;
background-position: 0 -32px;
}
If you want to set a specific (static) CSS output path (maybe because you´re fiddling around with your <base href>),
you can do so by extending the config with a staticImagePath like so:
sprites: {
icons36: {
src: ['src/img/icons36/*.png'],
css: 'src/css/icons36.css',
map: 'src/img/icons36.png',
staticImagePath: 'public/img/'
}
}
The output would look like the following:
.MyImage1, .Icon-MyImage2 {
background: url("public/img/icon36.png") no-repeat;
}
.MyImage1 {
background-position: 0 -432px;
}
.MyImage2 {
background-position: 0 -396px;
}
staticImagePath propertystaticImagePath described in #60Copyright (c) 2012 asciidisco Licensed under the MIT license.
FAQs
Grunt tasks for optimizing, inlining & spriting images
We found that grunt-imagine demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.