Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Inject width and height for img tags
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
tasks
test
.gitignore
.jshintrc
Gruntfile.js
LICENSE-MIT
README.md
package.json

README.md

grunt-inline-imgsize

Inject width and height for img tags

Getting Started

If you haven't used grunt before, be sure to check out the Getting Started guide.

From the same directory as your project's Gruntfile and package.json, install this plugin with the following command:

npm install grunt-inline-imgsize --save-dev

Once that's done, add this line to your project's Gruntfile:

grunt.loadNpmTasks('grunt-inline-imgsize');

If the plugin has been installed correctly, running grunt --help at the command line should list the newly-installed plugin's task or tasks. In addition, the plugin should be listed in package.json as a devDependency, which ensures that it will be installed whenever the npm install command is run.

The "inlineImgSize" task

Use the inlineImgSize task for injecting the width and height properties of <img> tags. This enhances the user experience because fewer repaints are required as a page's assets are loaded in.

Overview

In your project's Gruntfile, add a section named inlineImgSize to the data object passed into grunt.initConfig().

grunt.initConfig({
  inlineImgSize: {
  }
})

Options

options.encoding

Type: String Default value: 'utf8'

The encoding of the file contents.

Usage Examples

Basic Image Size Inlining

grunt.initConfig({
  inlineImgSize: {
    files: {
      src: ['index.html', 'contact.html']
    }
  }
})

Custom Options

grunt.initConfig({
  inlineImgSize: {
    options: {
    },
    files: [{
      expand: true,
      cwd: 'src',
      src: ['*.html'],
      dest: 'dest/'
    }]
  }
})
Something went wrong with that request. Please try again.