Image supported added!

Gatsby now ships with richer support for images. Now you can "import" or "require" an image and use it within your React components and under the hood, the images will be automatically optimized.

import myImage from './my-image.jpg'

// in render function
<div>
  <h1>Hi friends!</h1>
  <img src={myImage} />
</div>

We're using the image-webpack-loader which uses the popular Imagemin project to minify your images.

There's future (responsive) image work planned! See #285 if you want to get involved.

Upgrade

This is marked as a breaking release as it could interfere with your Webpack config if you already have added image loader support.

If you have added custom image loaders already, to upgrade, in your modifyWebpackConfig function in gatsby-node.js add this line: config.removeLoader('images')

You'll also need to add image-webpack-loader to your site:

npm install --save-dev image-webpack-loader

Enjoy!