No optimizations are happening

[jordyvandomselaar]

Packages:

{
    "babel-plugin-styled-components": "^1.10.7",
    "dotenv-webpack": "^1.7.0",
    "file-loader": "^6.0.0",
    "image-trace-loader": "^1.0.2",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "^7.1.0",
    "imagemin-svgo": "^7.1.0",
    "jimp": "^0.10.1",
    "lqip-loader": "^2.2.0",
    "next-videos": "^1.1.4",
    "responsive-loader": "^1.2.0",
    "svg-sprite-loader": "^4.2.5",
    "webp-loader": "^0.6.0",
    "next-compose-plugins": "^2.2.0",
    "next-optimized-images": "^2.5.7"
  }

Build script:

next build && next export -o build/

Next config

// next.config.js
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
const withVideos = require('next-videos');
const Dotenv = require('dotenv-webpack');

const nextConfig = {
    webpack: (config, options) => {

        config.plugins.push(new Dotenv({ silent: true }));

        return config;
    },
};

module.exports = withPlugins([
    [optimizedImages, {}],
    [withVideos, {}],

    // your other plugins here

], nextConfig);

When requiring an image like so:

require("../assets/img/content/blog-header.jpg").default

and running

npm build

I still get the original image:

http://localhost:8000/_next/static/images/blog-header-e92e08032b49a33b9e710b97acbd569a.jpg

I'm expecting to get a webm image or at least a much smaller image but nothing seems to be happening.

---

When adding ?lqip to an image, I get

TypeError: Cannot read property '1' of null

[durchanek]

I do not think that conversion to webP is automatic. Also, check if there is a difference in filesize for the resulting image and maybe try to tweak imagemin-mozjpeg. To get "much smaller image", the compression needs to lower image quality and JPEG optimisers generally have conservative default setting.

[jordyvandomselaar]

@durchanek that makes sense. Thanks! Do you know of a way to turn webp on for all images without having to append ?webp everywhere?

[durchanek]

@jordyvandomselaar webP is still not supported in Apple browsers, but you can use something like this: https://github.com/cyrilwanner/next-optimized-images/issues/44#issuecomment-485079916

[jordyvandomselaar]

@durchanek Thanks for the warning with Apple browsers, I did not know that. Unfortunately the proposed solution won't work with things like css background images but I'll try some other options =)

[durchanek]

@jordyvandomselaar Yeah, it will not, but you can use Modernizr together with a SASS mixin or a JSS function.

[jordyvandomselaar]

@durchanek makes sense. I'll close this issue as I think it's a PEBCAK =) Thanks for the help!