Let's perform the following steps to add image resizing and compression to the blog post cover images loaded by our Angular application:

1. First, let's add simple image compression to our Angular application's webpack.prod.config.js WebPack configuration. We will simply import the imagemin-webpack-plugin module and append it to the end of our plugins configuration. We will set up a filter to only apply compression to .png and .jpg/.jpeg image files, as well as some configurations for the quality of compression we want to use:

...
const ImageminPlugin = require('imagemin-webpack-plugin').default;
...

module.exports = {
  ...
  "plugins": [
    ...
    new ImageminPlugin({
      "test": /.(png|jpe?g)(?.*)?$/,
      "pngquant": {
        "quality": "50"
      }
    })
  ],
  ...
};

2. Our compression plugin is the last step of our build process. So, before compressing our resources, we can resize them for additional file size savings. To do that, we will need to add the image-maxsize-webpack-loader module as a loader for our .png and .jpg/.jpeg image files. We will also want to remove these files from the filter we use to load our other web assets with url-loader. This way, we will handle the processing of images from other web assets uniquely:

...
module.exports = {
  ...
  "module": {
    "rules": [
      ...
      {
        "test": /.(webp|gif|otf|ttf|woff|woff2|cur|ani)$/,
        "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
      },
      {
        "test": /.(png|jpe?g)(?.*)?$/,
        "use": [
          "url-loader?name=./assets/images/[name].[hash].[ext]&limit=1000",
          "image-maxsize-webpack-loader?max-width=800&max-height=600"
        ]
      },
...

3. Since our image-maxsize-webpack-loader will automatically create new resized images for us, we don't need to copy the original images from assets anymore into our build. To do this, we will simply find and remove "assets" from the GlobCopyWebpackPlugin configuration, which copies it to our build directory. This way, only images we have resized will be copied to our build directory and processed by imagemin-webpack-plugin:

...
"plugins": [
  new NoEmitOnErrorsPlugin(),
  new GlobCopyWebpackPlugin({
    "patterns": [
      "assets",
      "favicon.ico"
    ],
    "globOptions": {
      "cwd": path.join(process.cwd(), "src"),
      "dot": true,
      "ignore": "**/.gitkeep"
    }
  }),
...

4. Since image-maxsize-webpack-loader is a WebPack loader, we need to actually import a resource in our application in order for WebPack to recognize it as a resource that needs optimization. By default, image paths that begin with "/" are ignored by our Angular WebPack configuration and will remain unaltered. However, absolute paths in styles are registered and processed by WebPack. We can use this to our advantage to configure our cover to use a media-query to responsively serve different sized versions of our cover image, based on the user's screen resolution. Add the following styles in the /src/app/posts/post/post.component.scss component style sheet:

.cover {
  background-image: url('../../../assets/images/dots.png?max-width=1200&max-height=600');
  background-size: cover;
  background-position: 50% 50%;
  min-height: 200px;
}

@media screen and (max-width: 991px) {
  .cover {
    background-image: url('../../../assets/images/dots.png?max-width=720');
    min-height: 100px;
  }
}

5. In order to use this new responsive cover image, we will need to update our /src/app/posts/post/post.component.html component template also:

<div class="row">
  <div class="card">
    <div class="card-img-top img-fluid cover" alt="Card image cap"></div>
    <div class="card-header">
      <small class="pull-left">Posted - {{ postDate | date:'shortDate' }}</small>
      <small class="pull-right">Matt DeLucas</small>
    </div>
    <div class="card-block">
      <h4 class="card-title">Blog Post - {{postId}}</h4>
      <p class="card-text">...</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

6. Now, we can build our new production WebPack configuration to see our image optimization in action. This configuration will automatically detect that /assets/images/dots.png is used twice at two different sizes and will automatically generate two different sized versions of this image as well as update their URL path in our style sheet to point to the correct one. At the end of the build, our image compression will also further optimize the output image files:

npm run build