• Stars
    star
    202
  • Rank 193,691 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 11 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Optimize PNG, JPEG, GIF, SVG images with grunt task.

grunt-image GitHub Actions Status

Optimize PNG, JPEG, GIF, SVG images with grunt task.

Install

$ npm install --save-dev grunt-image

Usage

This is an example of gruntfile.js.

module.exports = function (grunt) {
  grunt.initConfig({
    image: {
      static: {
        options: {
          optipng: false,
          pngquant: true,
          zopflipng: true,
          jpegRecompress: false,
          mozjpeg: true,
          gifsicle: true,
          svgo: true
        },
        files: {
          'dist/img.png': 'src/img.png',
          'dist/img.jpg': 'src/img.jpg',
          'dist/img.gif': 'src/img.gif',
          'dist/img.svg': 'src/img.svg'
        }
      },
      dynamic: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.{png,jpg,gif,svg}'],
          dest: 'dist/'
        }]
      }
    }
  });

  grunt.loadNpmTasks('grunt-image');
};

You can configure parameters applied to each optimizers such as following:

options: {
  optipng: ['-i 1', '-strip all', '-fix', '-o7', '-force'],
  pngquant: ['--speed=1', '--force', 256],
  zopflipng: ['-y', '--lossy_8bit', '--lossy_transparent'],
  jpegRecompress: ['--strip', '--quality', 'medium', '--min', 40, '--max', 80],
  mozjpeg: ['-optimize', '-progressive'],
  gifsicle: ['--optimize'],
  svgo: ['--enable', 'cleanupIDs', '--disable', 'convertColors']
}

Result

grunt-image result

License

MIT ยฉ Shogo Sensui

More Repositories

1

grd

A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
HTML
2,206
star
2

whale

Unofficial Trello app ๐Ÿณ
TypeScript
278
star
3

gulp-image

Optimize PNG, JPEG, GIF, SVG images with gulp task.
JavaScript
222
star
4

lazyload-image

HTMLImageElement extension for lazy loading.
HTML
209
star
5

gulp-stylestats

Gulp task for StyleStats.
JavaScript
60
star
6

vscode-svgo

Fully featured SVGO extension for Visual Studio Code ๐Ÿฏ
TypeScript
58
star
7

quail

Unofficial but officially accepted esa app ๐Ÿฆ
TypeScript
56
star
8

chrome-extension-hands-on

Chrome Extension Hands-on!
53
star
9

pinput

Light-weight chrome extension for Pinboard.
JavaScript
44
star
10

vue-grd

Simple, Light-weight and Flexible Vue.js component for grid layout.
HTML
43
star
11

x-notification

Declarative Browser Notification as Web Components.
HTML
37
star
12

linter-textlint

A plugin for Atom Linter providing an interface to textlint.
JavaScript
33
star
13

atom-stylefmt

Format your CSS using stylefmt.
JavaScript
33
star
14

node-github-markdown

Parse GitHub flavored markdown to static html.
JavaScript
29
star
15

reachable-urls

Check URLs are reachable in text ๐Ÿ•ต๏ธ
JavaScript
29
star
16

syntax-highlight

Code syntax highlight element.
HTML
28
star
17

input-suggest

Show suggestions when you input.
JavaScript
23
star
18

position-sticky

Polyfill for position: sticky;.
HTML
22
star
19

simplehttp2server

simplehttp2server wrapper that makes it seamlessly available as a local dependency
JavaScript
19
star
20

webcomponents-sandbox

Web Components sandbox
JavaScript
19
star
21

atom-csscomb

Sort your CSS properties with CSSComb.
JavaScript
19
star
22

emoji-workflow

Alfred workflow for Emoji.
Ruby
18
star
23

PinFeed

A simple Pinboard client for iOS focusing to timeline which you follow.
Swift
18
star
24

social-button

Social Buttons as Web Components
TypeScript
17
star
25

lazyload

Minimal lazy image loader.
HTML
16
star
26

switch-element

Switch UI Element like iOS
HTML
14
star
27

atom-svgo

Minify SVG with SVGO ๐Ÿฏ
JavaScript
14
star
28

throttle-decorator

ES decorator that makes a function throttled.
JavaScript
13
star
29

amazon-payment-history

APH sums up payment history for Amazon.
JavaScript
13
star
30

rog

Retrieve open graph data from passing URL.
JavaScript
12
star
31

grd-sass

Sass port of 1000ch/grd that is a CSS grid framework using Flexbox.
SCSS
11
star
32

vue-recognizer

Vue.js plugin to recognize touch, mouse, pointer events using Hammer.js.
TypeScript
11
star
33

go-jpegoptim

Go
11
star
34

cssr

Go home and be a family man!
JavaScript
11
star
35

dotfiles

1000ch's dotfiles
Shell
10
star
36

boilerplate-next

JavaScript
10
star
37

gistslide

Make your gist slide to present.
JavaScript
10
star
38

react-router-hashlink

react-router-dom/Link wrapper to handle hash value
JavaScript
9
star
39

Sublime-svgo

SVGO plugin for Sublime Text ๐Ÿฏ
Python
9
star
40

grunt-ystkyrk

ๅƒ•ใฏ่ช“ใ†ใ€‚50ๅนดๅพŒใฎๅ›ใ‚’ใ€ไปŠใจๅค‰ใ‚ใ‚‰ใšๆ„›ใ—ใฆใ„ใ‚‹ใ€‚
JavaScript
9
star
41

webpagetest-local

Debug WebPagetest Private Instance at local.
Ruby
9
star
42

grunt-cwebp

Convert JPG and PNG images to WebP with grunt task.
JavaScript
9
star
43

srcset-image

Polyfill for srcset feature as Web Components.
JavaScript
8
star
44

memory-leak

Memory Leak Examples.
HTML
8
star
45

array-fill

Polyfill for Array.prototype.fill
JavaScript
7
star
46

vue-trim

Vue.js component for trimming images using Cropper.js.
Vue
7
star
47

nd

Node.js version manager.
Go
7
star
48

gulp-cwebp

Convert JPG and PNG images to WebP with gulp task.
JavaScript
7
star
49

hugo-boilerplate

Minimum structure for Hugo
HTML
7
star
50

webp.herokuapp.com

Web tool for converting JPEG & PNG to WebP
JavaScript
6
star
51

js-training

๐Ÿซ๐ŸŽ’
JavaScript
6
star
52

strobo.fm

A podcast by @1000ch
HTML
6
star
53

node-speedcurve

SpeedCurve API thin wrapper.
JavaScript
6
star
54

x-geolocation

Declarative Geolocation API as Web Components.
HTML
6
star
55

nuxt-ua

UserAgent detector using Platform.js for Nuxt.
TypeScript
6
star
56

cobra

cobra = flask + mongodb + heroku;
Python
6
star
57

x-marked

Web Components which renders markdown using marked.
TypeScript
6
star
58

grunt-sync-version

Synchronize version of JSON setting file with Grunt task.
JavaScript
6
star
59

go-md

Markdown Parser in CLI
Go
5
star
60

postcss-csscomb

PostCSS plugin to apply CSScomb
JavaScript
5
star
61

array-copyWithin

Polyfill for Array.prototype.copyWithin.
JavaScript
5
star
62

webponize

โš ๏ธ Temporary repository for Sparkle update
5
star
63

fluent

Lightweight DOM llibrary.
JavaScript
5
star
64

memorypool

JavaScript Memory Pool implementation
JavaScript
5
star
65

antennas

Antennas
JavaScript
4
star
66

x-zangief

He is Zangief.
HTML
4
star
67

lgtm-emoticon

Emoticon LGTM Generator
JavaScript
4
star
68

tanistagram.com

@hiloki was born in 1982.
JavaScript
4
star
69

one-click-clear

This extension provides an easy way to clear browser history.
JavaScript
4
star
70

node-asterisk

CSS document generator.
CSS
4
star
71

eslint-config

1000ch's ESLint config.
JavaScript
4
star
72

underscore.dom

This is plugin for "_". This contains functional API of DOM manipulation.
JavaScript
4
star
73

x-flexbox

Web Components which provide Flexbox features.
TypeScript
3
star
74

todo

Simple TODO application using Polymer, IndexedDB, Service Worker. Available on online and offline.
HTML
3
star
75

dsstore

Go
3
star
76

atom-vtab

Verticalize tabs on Atom.
CSS
3
star
77

gulp-dependency-visualizer

Gulp plugin for js-dependency-visualizer
JavaScript
3
star
78

vscode-csso

Minify CSS with CSSO.
TypeScript
3
star
79

dashboard

Resources
JavaScript
3
star
80

carousel-panel

Carousel gallery component.
HTML
3
star
81

EventEmitter

EventEmitter.
JavaScript
3
star
82

og-card-simulator

Show open graph card from given URL.
JavaScript
3
star
83

dwebp-bin

dwebp node.js wrapper that decode WebP to PNG.
JavaScript
3
star
84

markdown-headings

Get headings in markdown.
JavaScript
3
star
85

gist-reveal

Make your gist presentation with reveal.js.
JavaScript
3
star
86

atom-cssbeautify

Beautify your CSS with CSSBeautify.
JavaScript
3
star
87

brushup-sample

Introduction to html/css/js lint tools.
CSS
3
star
88

affilink

JavaScript
2
star
89

chromiup

Keep your Chromium newest.
JavaScript
2
star
90

atom-imagemin

Minify images with imagemin.
JavaScript
2
star
91

inspector

HTMLInspector wrapper as chrome extension.
JavaScript
2
star
92

licecap-icon

Utility for LICEapp to set or replace its icon.
JavaScript
2
star
93

yaml-format

Format YAML.
HTML
2
star
94

url-opener

Open urls with 1 click.
JavaScript
2
star
95

image-encoder

Encode image into dataURI
JavaScript
2
star
96

versy

Better versioning and tagging using npm version.
JavaScript
2
star
97

install-package

Install node modules from JavaScript.
JavaScript
2
star
98

service-worker-push-notification

Service Worker push notification demo app
JavaScript
2
star
99

nanikiru

nanikiru?
JavaScript
2
star
100

html-ready

The promise to ensure window/document is ready.
TypeScript
2
star