})
.default})
})
})
}){kind=icon}
})
+ 
+ *
+);
+
+/**
+ * Results in:
+ *
+ *
+ *
+ * Even if the image size is above the defined limit.
+ */
+```
+
+The inlining will only get applied to exactly this import, so if you import the image a second time without the `?inline` option, it will then get normally referenced as a file if it is above your limit.
+
+#### ?url
+
+When you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.
+If you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.
+
+If you are using this option a lot, it could also make sense to [disable the inlining](#inlineimagelimit) completely and use the [`?inline`](#inline) param for single files.
+
+```javascript
+import React from 'react';
+
+export default () => (
+
+);
+
+/**
+ * Results in:
+ *
+ *
+ *
+ * Even if the image size is below the defined inlining limit.
+ */
+```
+
+The inlining will only get disabled for exactly this import, so if you import the image a second time without the `?url` option, it will then get inlined again if it is below your limit.
+
+#### ?original
+
+The image won't get optimized and used as it is.
+It makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.
+
+```javascript
+import React from 'react';
+
+export default () => (
+
+);
+```
+
+This can also be combined with the `?url` or `?inline` resource query (e.g. `?original&inline`).
+
+#### ?lqip
+
+> Requires the optional package `lqip-loader` (`npm install lqip-loader`)
+
+When using this resource query, a very small (about 10x7 pixel) image gets created.
+You can then display this image as a placeholder until the real (big) image has loaded.
+
+You will normally stretch this tiny image to the same size as the real image is, like *medium.com* does.
+To make the stretched image look better in chrome, check out [this solution](https://github.com/zouhir/lqip-loader/issues/5) and add a blur filter to your image.
+
+```javascript
+import React from 'react';
+
+export default () => (
+
+);
+
+/**
+ * Replaces the src with a tiny image in base64.
+ */
+```
+
+#### ?lqip-colors
+
+> Requires the optional package `lqip-loader` (`npm install lqip-loader`)
+
+This resource query returns you an **array with hex values** of the dominant colors of an image.
+You can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.
+
+The number of colors returned can vary and depends on how many different colors your image has.
+
+```javascript
+import React from 'react';
+
+export default () => (
+ ...
+);
+
+/**
+ * require('./images/my-image.jpg?lqip-colors')
+ *
+ * returns for example
+ *
+ * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']
+ */
+```
+
+#### ?trace
+
+> Requires the optional package `image-trace-loader` (`npm install image-trace-loader`)
+
+With the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.
+
+```javascript
+import React from 'react';
+import MyImage from './images/my-image.jpg?trace';
+
+export default () => (
+
+ 
{/* <-- SVG trace */}
+ 
{/* <-- Normal image which you want to lazy load */}
+
+);
+
+/**
+ * Results in:
+ *
+ *
+ * 
+ * 
+ *
+ */
+```
+
+`require('./images/my-image.jpg?trace')` returns an object containing the trace (`trace`) as an inlined SVG and the normal image (`src`) which also gets optimized.
+
+The trace will have exactly the same width and height as your normal image.
+
+Options for the loader can be set in the [plugin configuration](#imagetrace).
+
+#### ?resize
+
+> Requires the optional package `responsive-loader` (`npm install responsive-loader`)
+> and either `jimp` (node implementation, slower) or `sharp` (binary, faster)
+
+After the `?resize` resource query, you can add any other query of the [`responsive-loader`](https://www.npmjs.com/package/responsive-loader) which allows you to resize images and create whole source sets.
+
+```javascript
+import React from 'react';
+
+const oneSize = require('./images/my-image.jpg?resize&size=300');
+const multipleSizes = require('./images/my-image.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000');
+
+export default () => (
+
+ *
+ *
+ {/* Single image: */}
+ 
+
+ {/* Source set with multiple sizes: */}
+ 
+
+);
+```
+
+If only the `size` or `sizes` param is used, the `?resize` param can also be omitted (e.g. `my-image.jpg?size=300`). But it is required for all other parameters of `responsive-loader`.
+
+You can also set global configs in the [`responsive`](#responsive) property (in the `next.config.js` file) and define, for example, default sizes which will get generated when you don't specify one for an image (e.g. only `my-image.jpg?resize`).
+
+#### ?sprite
+
+> Requires the optional optimization packages `imagemin-svgo` and `svg-sprite-loader` (`npm install imagemin-svgo svg-sprite-loader`)
+
+If you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.
+In that case, you can use `?sprite` which uses [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) to render and inject an SVG sprite in the page automatically.
+
+```javascript
+import React from 'react';
+import MyIcon from './icons/my-icon.svg?sprite';
+
+export default () => (
+
+ my page..
+
+);
+```
+
+All props passed to the imported sprite will get applied to the `