niels-io / next-image-export-optimizer Goto Github PK
View Code? Open in Web Editor NEWUse Next.js advanced <Image/> component with the static export functionality. Optimizes all static images in an additional step after the Next.js static export.
Use Next.js advanced <Image/> component with the static export functionality. Optimizes all static images in an additional step after the Next.js static export.
I am trying to pass placeholder="none" as a prop but it is resulting in a type error.
It looks like it is conflicting with the types for react (@types/react
) - https://github.com/DefinitelyTyped/DefinitelyTyped/blob/68688f3ec09c41aa8923ff232f99913e2bdb4c54/types/react/index.d.ts#L1861
Hi,
I am getting segfaults from next-image-export-optimizer.
---- next-image-export-optimizer: Begin with optimization... ----
Found 44 supported images in public/images, static folder and subdirectories.
Using sizes: 10,16,32,48,64,96,128,256,384,640,750,828,1080,1200,1920,2048,3840
Start optimization of 44 images with 17 sizes resulting in 748 optimized images...
██ 5% | ETA: 117s | 42/748 | Total size: 6.5 MBsh: line 1: 25707 Segmentation fault: 11 next-image-export-optimizer
I am on macos M1. There is an issue on sharp: lovell/sharp#3048
but that looks like it was resolved with the latest release v0.31.0 which is what your package uses, and what did get installed.
Sometimes it even segfaults during next build:
info - Creating an optimized production build .sh: line 1: 27459 Segmentation fault: 11 next build
It only gets through 8 resizings before it happens
.rw-r--r-- 82 crucialfelix 22 Sep 09:24 aaron-burden-1381021-unsplash-opt-10.WEBP
.rw-r--r-- 120 crucialfelix 22 Sep 09:24 aaron-burden-1381021-unsplash-opt-16.WEBP
.rw-r--r-- 322 crucialfelix 22 Sep 09:24 aaron-burden-1381021-unsplash-opt-32.WEBP
.rw-r--r-- 600 crucialfelix 22 Sep 09:24 aaron-burden-1381021-unsplash-opt-48.WEBP
.rw-r--r-- 1,012 crucialfelix 22 Sep 09:24 aaron-burden-1381021-unsplash-opt-64.WEBP
.rw-r--r-- 2.1Ki crucialfelix 22 Sep 09:24 aaron-burden-1381021-unsplash-opt-96.WEBP
.rw-r--r-- 3.5Ki crucialfelix 22 Sep 09:24 aaron-burden-1381021-unsplash-opt-128.WEBP
.rw-r--r-- 13Ki crucialfelix 22 Sep 09:24 aaron-burden-1381021-unsplash-opt-256.WEBP
.rw-r--r-- 0 crucialfelix 22 Sep 09:24 aaron-burden-1381021-unsplash-opt-384.WEBP
(last one is size 0)
I have just local images, config is simple:
{
// ...
images: {
loader: "custom",
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
},
env: {
nextImageExportOptimizer_imageFolderPath: "public/images",
nextImageExportOptimizer_exportFolderPath: "out",
nextImageExportOptimizer_quality: 75,
nextImageExportOptimizer_storePicturesInWEBP: true,
nextImageExportOptimizer_generateAndUseBlurImages: true,
},
}
Thank you!
Hey, really appreciate this library!
I'm using typescript and I was wondering if it would be easy to add them myself or add them to the resource here @types/next-image-export-optimizer
Any input appreciated!
Again thank you for this library, I think its a problem that next doesn't allow image exporting with using their image component.
Next allows you to configure a basePath
so you can serve your site from a subpath. For example, we deploy our Next.js site to www.spotvirtual.com/_preview
so we can test changes before making them live at www.spotvirtual.com
.
I noticed that the generateImageURL
code from ExportedImage.tsx
does not take basePath
into account for statically-imported images. Ideally, it would prepend the basePath
since this is what next/image
does.
It should be easy to fix. I may send a PR for this, though I am leaning towards changing our deployment so that the preview site is served from a different subdomain, e.g. www-preview.spotvirtual.com
. This would prevent issues like this from arising in the first place.
There is a related next.config.js
property called assetPrefix
. Ideally the PR for this would take assetPrefix
into account too. If both basePath
and assetPrefix
are set, I'm not sure which one "wins".
Hi, I use the component ExportImage but it come to an error says "filePath.split is not a function", how do i fix it?
Originally posted by @milkeddy1 in #24 (comment)
Next.js throws a warning about the library's custom next.config.js options:
https://nextjs.org/docs/messages/invalid-next-config
I'm not sure what the alternative is. Perhaps next-image-export-optimizer options could be stored elsewhere?
Great work, just a minor error.
Easy to fix by creating the said directory manually.
Export successful. Files written to /Users/sonium/gitlab/fusionmetrics/landingpage/out
---- next-image-export-optimizer: Begin with optimization... ----
Error: ENOENT: no such file or directory, mkdir 'public/images/nextImageExportOptimizer'
at Object.mkdirSync (node:fs:1357:3)
at nextImageExportOptimizer (/Users/sonium/gitlab/fusionmetrics/landingpage/node_modules/next-image-export-optimizer/src/optimizeImages.js:122:10)
at Object.<anonymous> (/Users/sonium/gitlab/fusionmetrics/landingpage/node_modules/next-image-export-optimizer/src/optimizeImages.js:320:3)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Module._load (node:internal/modules/cjs/loader:827:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47 {
One nice thing about the Next.js Image component is the placeholder functionality, but it requires a blurDataURL
to use for the blur effect.
Of course it would be an option to assume that the optimised images will be at the specific location, and add the blurDataURL
with something like this:
const image = '/example.jpg'
const imageName = 'example'
<ExportedImage
src= { image } // "image.jpg"
alt="Large Image"
width='720'
height='960'
layout='responsive'
placeholder="blur"
blurDataURL= {`/nextImageExportOptimizer/${imageName}-opt-16.WEBP`} // "/nextImageExportOptimizer/example-opt-16.WEBP"
/>
However, this can become tedious if you have to provide both the full image path for the src
and the image file name (to not end up with a broken path like /nextImageExportOptimizer/example.jpg-opt-16.WEBP
), or include extra script to automatically strip the file ending from the image.
Is there an easier way to add the URL (let's say example-opt-16.WEBP
) to each <ExportedImage />
component that has the property placeholder="blur"
?
Thanks!
0.10.0
causes Runtime Errors in previously working project during dev with the next
command, export
does not produce a working output either. Release 0.9.6
is working fine.
If this occures on my particular setup only, I can provide more information to pinpoint the issue.
npm test
reports 2 snapshots failing, is this known?
Proper passing/failing tests should be established before proceeding with further releases.
Let me know if you need any help 👍
Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of ForwardRef(LoadableComponent)
.
Hi and congrats for taking the initiative of this package!
I'm often facing use-case where I have to deploy static pages under a subfolder in a shared hosting.
Unfortunately it doesn't work with the needed next.conf.js basePath
property, to resolve asset. The built path doesn't take that into account.
I would like to help but I'm not sure being skilled enough for this 🤭.
Tell me if you have recommandation regarding this bug or needed contribution, I'm really interested to get this package working.
iSSUE
If I exchange the next/image Image component with ExportedImage from this package, according to Lighthouse a Layout shift occurs.
WORKAROUND
Wrapping the ExportedImage with a div with fixed size fixes this issue.
Hi,
First, thanks for making this project.
I have a use case where I am trying to host the next-exported files (html, js, css, etc) separately from the images. I'd like to host the images on a remote edge server (eg, S3 or similar) and was wondering if there might be a way to:
I've tried doing a simple find | sed
on the output, but it's not clear to me if the source sets are even being used.
I guess my questions are:
thanks for any input you might have and for this great project.
Was wondering if you might be able to add support for changing the name of the directory where the images export to something other than nextImageExportOptimizer/
via configuration.
If it's not in scope for you, I may be able to open a PR.
Thanks for the great project!
import Image from "next-image-export-optimizer/future/ExportedImage";
TS2307: Cannot find module 'next-image-export-optimizer/future/ExportedImage' or its corresponding type declarations.
I'm trying to deploy a Next.js SSG site on Cloudlfare. Below is my configuration and error output. I'm not sure if the next-image-export-optimizer is configured correctly or if it's Cloudflare with the issue.
package.json
"scripts": {
"dev": "next",
"build": "next build",
"preexport": "npm run build",
"export": "next build && next export && npx next-image-export-optimizer",
"prestart": "npm run export",
"start": "serve out"
},
Build command: next build && next export && npx next-image-export-optimizer
(*note: I've also tried just next build && next export
by itself to see if that would fix the issue but no joy)
Build output directory: /out
Root directory: /
12:51:45.508 | info - Checking validity of types...
-- | --
12:51:50.892 | info - Creating an optimized production build...
12:52:01.071 | info - Compiled successfully
12:52:01.071 | info - Collecting page data...
12:52:02.982 | info - Generating static pages (0/5)
12:52:03.017 | info - Generating static pages (1/5)
12:52:03.022 | info - Generating static pages (2/5)
12:52:03.029 | info - Generating static pages (3/5)
12:52:03.038 | info - Generating static pages (5/5)
12:52:03.044 | info - Finalizing page optimization...
12:52:03.047 |
12:52:03.056 | Page Size First Load JS
12:52:03.056 | ┌ ○ / 3.06 kB 86.2 kB
12:52:03.056 | ├ /_app 0 B 83.2 kB
12:52:03.056 | ├ ○ /404 194 B 83.4 kB
12:52:03.056 | ├ ○ /photography 607 B 90.7 kB
12:52:03.056 | └ ● /photography/photo/[slug] 1.87 kB 92 kB
12:52:03.056 | └ /photography/photo/stairway
12:52:03.056 | + First Load JS shared by all 83.2 kB
12:52:03.056 | ├ chunks/framework-5f4595e5518b5600.js 42 kB
12:52:03.056 | ├ chunks/main-7d0be5702b1cad24.js 27.6 kB
12:52:03.056 | ├ chunks/pages/_app-1851968b312786ab.js 12.8 kB
12:52:03.056 | ├ chunks/webpack-fd82975a6094609f.js 727 B
12:52:03.056 | └ css/7eb7ceb2ca28c6b8.css 3.75 kB
12:52:03.056 |
12:52:03.056 | ○ (Static) automatically rendered as static HTML (uses no initial props)
12:52:03.056 | ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
12:52:03.056 |
12:52:03.788 | info - using build directory: /opt/buildhome/repo/.next
12:52:03.793 | info - Copying "static build" directory
12:52:03.796 | info - No "exportPathMap" found in "/opt/buildhome/repo/next.config.js". Generating map from "./pages"
12:52:03.797 | info - Launching 1 workers
12:52:03.797 | info - Exporting (0/3)
12:52:03.797 | info - Copying "public" directory
12:52:04.385 | info - Exporting (3/3)
12:52:04.399 | Export successful. Files written to /opt/buildhome/repo/out
12:52:04.681 | Unexpected token '.'
12:52:04.832 | Failed: build command exited with code: 1
I have an image called engagement.png
that has a width of 732px. Naturally, all of the generated images with width >= 732px are the exact same image, as evidenced by the file sizes:
If I am reading the code correctly, sharp is run for each image, for each width. This means we are doing a lot of duplicate work if the image is much smaller than the max device size (3840 by default).
What if we optimized this so that the 828px, 1080px, 1200px, .etc images were created by simply copying the 750px image? (obviously this depends on the width of the original image)
Happy to PR if you are interested.
Hi, first of all thank you for your amazing library and the perfect docs.
I have a feature request. I would love to have the image quality as a an (optional) prop on . I wonderf if this would be possible.
Many thanks in advance and kind regards
one of the advantages of using next/image is that it can suss out width/height.
It seems like this library doesn't work unless you specify width/hight or have a containing div where the width and height are specified.
eg, the following works fine with next/image but will just show up empty (zero width and height):
<div className='md:float-right md:relative w-full md:w-1/3 md:ml-4 md:mb-2'>
<ExportedImage
className="rounded"
placeholder='blur'
src={profile.src}
alt={profile.alt}
sizes="(max-width: 768px) 100vw,
(max-width: 1200px) 50vw,
33vw"
/>
</div>
Hi, is there a specific reason why there is only conversion to WEBP available? AVIF is supposed to be even better. I'm thinking about coding it up, but I wanted to ask first. There could be the option to convert to avif by default, with the fallback to webP / orginal, if the browser doesn't support AVIF.
Hey!
First of all, thank you very much for this!
I'm using your package for the first time and I'm facing a problem:
After I run npm export
, next-image-export-optimizer creates a 'nextImageExportOptimizer' folder and a 'next-image-export-optimizer-hashes.json' file in my public dir.
I understand that the hashes are probably used to check if the images have already been optimized. I don't get why I get the 'nextImageExportOptimizer' leftover folder, though. In my understanding, it should be cleaned up after it's contents have been copied to the 'out' folder.
I'm I doing something wrong? Is this the expected behavior?
Hey there,
just discovered your (seems like :p) awesome package.
I had a try on it but when I export my site by running next build && next export && next-image-export-optimizer
, I can see that all my images are well optimised in different sizes and copied into the out folder but when I inspect the resulting html, no img tag at all are injected. Images appears well on next dev
.
I'm definitely doing something wrong but I don't find what. I followed the instructions here with the exact same config. My images are in the public folder and I wrote a basic component like this:
<ExportedImage src="images/destination/image-europa.png" layout="fill" />
Any ideas on what I'm doing wrong ?
Edit: I uploaded this training project here https://github.com/johann-taberlet/space-tourism-website
Hi, I have an issue that the ExportedImage cannot optimze image size as well as return 404 status (see the image).
import bannerImg2 from '@assets/images/Home/banner-2.jpg' // store at the path "public/assets/images/Home"
<ExportedImage src={bannerImg2} alt='text' layout='responsive' useWebp={true} />
Please help me how to fix this issue. Thanks for your help.
I have this setup in package.json
"build": "next build && next export -o ../api/Web/wwwroot && next-image-export-optimizer",
"build:docker": "next build && next-image-export-optimizer && next export -o .export",
How do I change the nextImageExportOptimizer_exportFolderPath
dynamically based on the command?
Just wanted to say thanks for this awesome lib ❤️
First of all, thank you for writing this plugin and finally bringing a solution to the next.js image export shenanigan! ❤️
From the docs and tryouts I understand that images have to be stored in a folder like public/images
.
It would be super nice if subfolders would get included in the optimization process, too, so that
next-app/
├─ public/
│ ├─ images/
│ │ ├─ hero-image.jpg
│ │ ├─ project-1/
│ │ │ ├─ project-cover.jpg
│ │ ├─ project-2/
│ │ │ ├─ project-cover.jpg/
│ │ ├─ .../
gets compiled into
next-app/
├─ out/
│ ├─ images/
│ │ ├─ nextImageExportOptimizer/
│ │ │ ├─ hero-image-32.webp
│ │ │ ├─ hero-image-16.webp
│ │ │ ├─ ...
│ │ │ ├─ project-1/
│ │ │ │ ├─ project-cover-16.webp
│ │ │ │ ├─ project-cover-32.webp
│ │ │ │ ├─ ...
│ │ │ ├─ project-2/
│ │ │ │ ├─ project-cover-16.webp/
│ │ │ │ ├─ project-cover-32.webp
│ │ │ │ ├─ ...
│ │ │ ├─ .../
Like this, the public image folder would stay nice and organised for bigger projects without having to worry about conflicting image names.
I am upgrading to v13 of Next.js and v1 of this package. Building my static website works fine, but running the next dev server gives me errors when using fill
images:
Error: Image with src "/_next/static/media/bol.4615d14b.png" has both "width" and "fill" properties. Only one should be used.
I am not specifying a width in the image:
<ExportedImage
src={project.logoPath}
alt={project.organization}
useWebp
fill
style={{ objectFit: "scale-down", objectPosition: "right top" }}
/>
It only happens on the dev server, but it makes development much more cumbersome. It also happens to fill images in other places. My other images, which don't use fill
, do not cause any errors. I use the legacy component for fill images now as a workaround.
Any ideas on how this can be fixed?
Next.js version 13 was released yesterday - at the moment the next peer dependency is pinned at v12.x, meaning it conflicts when version 13 is installed. Can this be upgraded? The fact that next/future/image is the new default might have to be dealt with before upgrading though
Afternoon, the latest version 0.14.0 seems to be broken with my nextjs application.
When running on the latest version of everything I see the following issue
Error: ENOENT: no such file or directory, stat '.next/static/media'
When running nextjs this folder does not exist within the .next output, I have no static assets as they are all dynamically imported and then ran with the tool
Looks related to this PR - https://github.com/Niels-IO/next-image-export-optimizer/pull/36/files
Let me know what you need, or want me to look into and I can come back to this issue
My next.config.js looks like this
const packageVersion = require("./package.json");
const nextConfig = {
poweredByHeader: false,
generateBuildId: async () => {
// You can, for example, get the latest git commit hash here
return packageVersion.version;
},
async rewrites() {
return [
{
source: "/:slug*.html", // Old url with .html
destination: "/:slug*", // Redirect without .html
},
];
},
reactStrictMode: true,
images: {
domains: ["localhost"],
loader: "custom",
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
deviceSizes: [640, 750, 828, 1080, 1200, 1920],
},
env: {
nextImageExportOptimizer_imageFolderPath: "public/images",
nextImageExportOptimizer_exportFolderPath: "out",
nextImageExportOptimizer_quality: 75,
nextImageExportOptimizer_storePicturesInWEBP: true,
nextImageExportOptimizer_generateAndUseBlurImages: true,
},
};
module.exports = nextConfig;
Hi There,
Since updating to v1.0 my Jest tests are failing with the following:
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/development/myproject/node_modules/next-image-export-optimizer/dist/ExportedImage.d.ts:2
import { ImageProps, StaticImageData } from "next/image";
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import { Grid, Typography } from '@mui/material';
> 2 | import ExportedImage from 'next-image-export-optimizer';
| ^
3 | import { useContext } from 'react';
4 |
5 | import BrandContext from '../../contexts/BrandContext';
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1796:14)
at Object.<anonymous> (components/USP/USP.tsx:2:1)
I have tried adding a the transformIgnorePatterns to the jest.config.js to ignore the ExportedImage.d.ts but I still keep getting the error on all code importing ExportedImage.
I'm not sure how to resolve the issue so any advice would be great.
Many thanks,
Stefan
Hi!
First of all, this is an incredibly useful tool - thank you for all the work you've put in!
I noticed that the imageSizes
property setting in my next.config are being ignored during the next-image-export-optimizer
process.
Here is what next-image-export-optimizer
is showing:
Here's what my next.config.js
file looks like:
module.exports = {
images: {
loader: "custom",
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
},
trailingSlash: true,
env: {
nextImageExportOptimizer_imageFolderPath: "public/pokemon-images",
nextImageExportOptimizer_exportFolderPath: "out",
nextImageExportOptimizer_quality: 75,
nextImageExportOptimizer_storePicturesInWEBP: "true",
// If you do not want to use blurry placeholder images, then you can set
// nextImageExportOptimizer_generateAndUseBlurImages to false and pass
// `placeholder="none"` to all <ExportedImage> components.
//
// If nextImageExportOptimizer_generateAndUseBlurImages is false and you
// forget to set `placeholder="none"`, you'll see 404 errors for the missing
// placeholder images in the console.
nextImageExportOptimizer_generateAndUseBlurImages: true,
},
experimental: {
workerThreads: false,
cpus: 1,
},
};
And here are the two instances of ExportedImage
in my app:
<ExportedImage
src={`/type_svgs/${type.name.toLowerCase()}.svg`}
alt={`${type.name} Type icon`}
width={25}
height={25}
placeholder={"empty"}
/>
<ExportedImage
src={`/pokemon-images/${pokemonData.pokemonApiName}.png`}
alt={`Picture of the Pokemon ${pokemonData.name}`}
width="350"
height="350"
useWebp={process.env.nextImageExportOptimizer_storePicturesInWEBP === "true"}
priority
/>
/Users/vittaljk/poc/home/node_modules/next-image-export-optimizer/src/optimizeImages.js:89
if (nextjsConfig.images?.nextImageExportOptimizer?.imageFolderPath) {
^
SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
at internal/main/run_main_module.js:17:47
Hi,
Im using next export and the images are not found, How do I make it such that the beginning path of images has "./" instead of "/".
Thanks
Hi @Niels-IO,
It's me again. The ExportedImage
has worse LCP performance then the native Image
when using priority
.
I am performing the following Lighthouse testing in the browser:
When using Image
without priority
:
When using Image
with priority
set:
However using ExportedImage
with priority
makes no difference in the LCP time:
This is my next.config.js file:
Even lowering the quality did not help. To me it look like the priority attribute does not get set properly,
can you take a look at this?
Thanks!
Configuration used:
"next": "^12.2.3",
"react": "^18.2.0",
"next-image-export-optimizer": "^0.12.1",
I'm currently trying to run the image export opti in my pipeline (is pretty generic, nothing special going on in there) but for some reason it fails after yarn export at next-image-export-optimizer/src/optimizeImages.js:89
Which is const legacyPath = nextjsConfig.images?.nextImageExportOptimizer;
With an error SyntaxError: Unexpected token '.' after the question mark.
Could you please help me out, and point me at what I'm doing wrong here :)
(locally it runs fine, of course haha)
TIA
Hi,
I've noticed that conditional config parameters are ignored and default were used.
For example, this one with changed imageSizes
will work as expected
next.config.js:
module.exports = {
images: {
loader: "custom",
imageSizes: [16, 48, 54, 64, 100, 128, 144, 384],
deviceSizes: [640, 750, 828, 1080, 1200, 1920],
},
env: {
// ...
},
}
but having a conditional in there, will ignore the changes and load the defaults:
module.exports = {
images:
process.env.NODE_ENV === "production"
? {
loader: "custom",
imageSizes: [16, 48, 54, 64, 100, 128, 144, 384],
deviceSizes: [640, 750, 828, 1080, 1200, 1920],
}
: {
// ...
},
env: {
// ...
},
}
I think it might be helpful to output a warning when the process isn't finding the values, so that one can see it will use defaults (like it warns when it doesn't find a next.config.js)
I ran into an issue when trying to adjust the image and device sizes in next.config.js
.
For my specific use case I do not need all default imageSizes: [16, 32, 48, 64, 96, 128, 256, 384]
and deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]
, and as a way to speed up the build time tried to adjust the list of sizes to something more suitable, like deviceSizes: [640, 750, 1080, 1920]
.
It might also be that I do not understand the configuration properly. However, if they are not meant to be customised, then I also do not see the need to specify them in next.config.js
🙂
The plugin only generates new, optimised images for the specified imageSizes
and deviceSizes
, and adjusts the srcSet
of the image tag to make use of the new sizes.
The plugin indeed only generated the sizes specified, but does not adjust the image tag properly so that it includes non-existent files. This breaks the image when the browser window gets too wide or too small.
1. Change next.config.js
module.exports = {
images: {
loader: "custom",
nextImageExportOptimizer: {
imageFolderPath: "public/images",
exportFolderPath: "out",
imageSizes: [16, 32],
deviceSizes: [1920, 2048],
quality: 75,
},
},
env: {
storePicturesInWEBP: true,
},
};
2. Run npm run export
3. Resulting out/images
folder
4. Resulting img tag
<img id="test_image" alt="test_image" sizes="100vw"
srcset="images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-640.WEBP 640w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-750.WEBP 750w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-828.WEBP 828w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-1080.WEBP 1080w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-1200.WEBP 1200w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-1920.WEBP 1920w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-2048.WEBP 2048w,
images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-3840.WEBP 3840w"
src="images/nextImageExportOptimizer/chris-zhang-Jq8-3Bmh1pQ-unsplash-opt-3840.WEBP"
decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover;">
Eventual custom 'onLoadingComplete' function passed as prop is not fired.
<ExportedImage
...
onLoadingComplete={() =>
console.log("This is not called.")
} />
Most probably caused by this line.
Thanks for writing this plugin!
When using export build I get the following error.
Export successful. Files written to /project/websites//out
/project/websites//node_modules/next-image-export-optimizer/src/optimizeImages.js:78
if (nextjsConfig.images?.nextImageExportOptimizer?.imageFolderPath) {
^
SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
at internal/main/run_main_module.js:17:47
The definition of automaticallyCalculatedBlurDataUrl
generates a URL for a 10px image:
next-image-export-optimizer/src/ExportedImage.tsx
Lines 118 to 119 in e3b1a18
But the default imageSizes
array does not contain 10
, so you get a 404 when the browser tries to load the URL.
It seems like replacing the hardcoded 10
with the smallest number in imageSizes
would fix this. Let me know what you think.
Version affected: v0.15.2 and below
In my case using [email protected] with workspaces, PnP, and zero installs
When using yarn berry, starting a dev server or build fails with the following error:
Error: next-image-export-optimizer tried to access react, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Workaround is to explicitly add the dependency to .yarnrc.yml
followed by a new yarn install
:
packageExtensions:
"next-image-export-optimizer@*":
dependencies:
"react": "*"
The above line results in the blur effect not applying because the URL #sharpBlur
is not found.
First let me say, thank you so much for this project!
The README says:
In the development mode, the original image will be served. The optimized images are created at build time only.
But the code tries to use optimizedLoader
regardless of whether Next is running in development mode or production mode.
Whether the original or optimized image is rendered is determined by whether the optimized image exists in public
.
Which is correct, the README or the code? I am happy to create a PR.
Here is a screenshot showing the problem. The image src
is an optimized .WEBP
file and you can tell it's development mode because of <script>
tag for react-refresh.js
.
I'm having this error below after upgrading to version 1.0.0 on next 13.0.0 with appDir enabled. Next suggests it's an issue with the package.json, but I can't figure it out... Can this be fixed? Thanks
Error: Module not found: Package path . is not exported from package node_modules\next-image-export-optimizer (see exports field in node_modules\next-image-export-optimizer\package.json)
2 | import Heading from '@components/heading'
3 |
4 | import ExportedImage from 'next-image-export-optimizer'
5 |
6 | import styles from './Links.module.css'
7 |
Getting the below output. All config are as per example
---- next-image-export-optimizer: Begin with optimization... ----
Found 0 supported images in public/images
Copy optimized images...
---- next-image-export-optimizer: Done ----
If not, can you add support for it. https://nextjs.org/docs/api-reference/next/future/image
I use notion which has expiration dates on all files fetched through its API.
The URL's look something like the following:
[hash]/image.png?X-Amz-Algorithm=...&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=...%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=....&X-Amz-Expires=3600&X-Amz-Signature=...&X-Amz-SignedHeaders=host&x-id=GetObject
It took me some time to realize that while these images are downloaded just fine, they aren't being replaced on the site.
Removing the query parameter from the requests fixes this, but it would be nice if this tool could handle it (or mention it in the readme) to avoid unnecessary pitfalls for others.
Thanks for a great project.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.