{"id":840,"date":"2017-12-06T14:40:54","date_gmt":"2017-12-06T11:40:54","guid":{"rendered":"https:\/\/iamakulov.com\/notes\/?p=840"},"modified":"2017-12-06T15:57:50","modified_gmt":"2017-12-06T12:57:50","slug":"optimize-images-webpack","status":"publish","type":"post","link":"https:\/\/iamakulov.com\/notes\/optimize-images-webpack\/","title":{"rendered":"How to optimize images in webpack"},"content":{"rendered":"

Images take more than a half<\/a> of the size of an average page:<\/p>\n

\"A<\/p>\n

That\u2019s a lot of traffic! But with webpack, it\u2019s easy to decrease it.<\/p>\n

1. Inline small PNG, JPG and GIF images#<\/a><\/h1>\n

Use url-loader<\/code><\/a> to embed small PNG, JPG and GIF images into the bundle.<\/p>\n

url-loader<\/code> converts a file (if it\u2019s smaller than the specified size) into a Base64 URL<\/a> and inserts this URL into the bundle. This helps to avoid extra image requests (which is useful even with HTTP\/2<\/a>).<\/p>\n

The limit of 5-10 KB is OK:<\/p>\n

\/\/ webpack.config.js\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: \/\\.(jpe?g|png|gif)$\/,\r\n        loader: 'url-loader',\r\n        options: {\r\n          \/\/ Images larger than 10 KB won\u2019t be inlined\r\n          limit: 10 * 1024\r\n        }\r\n      }\r\n    ]\r\n  }\r\n};\r\n<\/code><\/pre>\n
2. Inline small SVG images#<\/a><\/h1>\n
Use svg-url-loader<\/code><\/a> to embed small SVG images.<\/p>\n
This loader works like url-loader<\/code>, but it encodes files using the URL encoding<\/a> instead of the Base64 one. Because SVG is text, the result of the URL encoding is smaller.<\/p>\n
The limit of 5-10 KB is also OK:<\/p>\n
\/\/ webpack.config.js\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: \/\\.svg$\/,\r\n        loader: 'svg-url-loader',\r\n        options: {\r\n          \/\/ Images larger than 10 KB won\u2019t be inlined\r\n          limit: 10 * 1024,\r\n          \/\/ Remove quotes around the encoded URL \u2013\r\n          \/\/ they\u2019re rarely useful\r\n          noquotes: true,\r\n        }\r\n      }\r\n    ]\r\n  }\r\n};\r\n<\/code><\/pre>\n
3. Optimize image size#<\/a><\/h1>\n
Use image-webpack-loader<\/code><\/a> to make images smaller.<\/p>\n
This loader compresses PNG, JPG, GIF and SVG images by passing them through optimizers. Since it just pipes images through itself and doesn\u2019t insert them into the bundle, it should be used with url-loader<\/code>\/svg-url-loader<\/code>.<\/p>\n
The default loader settings are OK:<\/p>\n
\/\/ webpack.config.js\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: \/\\.(jpg|png|gif|svg)$\/,\r\n        loader: 'image-webpack-loader',\r\n        \/\/ Specify enforce: 'pre' to apply the loader\r\n        \/\/ before url-loader\/svg-url-loader\r\n        \/\/ and not duplicate it in rules with them\r\n        enforce: 'pre'\r\n      }\r\n    ]\r\n  }\r\n};\r\n<\/code><\/pre>\n
Questions#<\/a><\/h1>\n
\u201cWhy is this important?\u201d<\/em>
\nAs I\u2019ve said, images take more than 50% of the average page size, and optimizing them is super-easy. Through, at the same time, I\u2019ve rarely seen webpack configs that do it. We seriously should always optimize them.<\/p>\n
\u201cWhat should I do?\u201d<\/em>
\nGo and add these loaders to your config.<\/p>\n
\u201cAre the any side effects?\u201d<\/em>
\nA couple:<\/p>\n