Any way to optimize images as next-gen images?

[joshbedo]

Wondering if there is anything so for example JPG converts to Webp or other next-gen images. Google Lighthouse is complaining about my site using JPG and looking for a way to optimize them without manually converting everything.

[mischnic]

You should be able to append ?as=webp as seen here: https://github.com/parcel-bundler/parcel/blob/v2/packages/core/integration-tests/test/integration/image/reformat.js

We should add that to the docs...

[mischnic]

1. Please don't post screenshots of errors but instead copy and paste them
2. You pressed "Comment" too quickly, it didn't really upload the screenshot

[joshbedo]

Alright well any ideas on how to get this working says can't install url with webp: prefix and query param so what you suggested doesn't work. Also I'm noticing I have to import images since there is no public directory.

Ex:
import image1 from "../assets/img/image1.jpg"

<img src={image1} />

➜  apptivity-site-2.0 git:(master) ✗ npm run build
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm info lifecycle [email protected]~prebuild: [email protected]
npm info lifecycle [email protected]~build: [email protected]

> [email protected] build /Users/joshbedo/Desktop/projects/apptivity-site-2.0
> parcel build index.html

⠙ Building index.html...(node:25703) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
⠸ Building index.js...(node:25706) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
⠴ Building index.js...(node:25705) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
⠇ Building Slider.js...(node:25707) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
(node:25708) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
🚨  /Users/joshbedo/Desktop/projects/apptivity-site-2.0/components/Slider.js:5:24: Cannot resolve dependency 'url:../assets/img/partner1.png?as=webp'
  3 | import Carousel from "react-multi-carousel";
  4 |
> 5 | import partner1Img from "url:../assets/img/partner1.png?as=webp";

[joshbedo]

Just removed .babelrc and a preset that might be redundant and now I'm seeing this error instead.

Server running at http://localhost:1234
⠋ Building...(node:27086) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
⠼ Building factoryWithTypeCheckers.js...(node:27089) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm timing stage:rollbackFailedOptional Completed in 1ms
npm timing stage:runTopLevelLifecycles Completed in 795ms
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "url:": url:..
npm timing npm Completed in 1117ms

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/joshbedo/.npm/_logs/2020-11-27T02_37_06_207Z-debug.log
🚨  /Users/joshbedo/Desktop/projects/apptivity-site-2.0/components/Slider.js:5:24: Failed to install url:...
  3 | import Carousel from "react-multi-carousel";
  4 |
> 5 | import partner1Img from "url:../assets/img/partner1.png?as=webp";
    |                        ^
  6 | import partner2Img from "../assets/img/partner2.png";
  7 | import partner3Img from "../assets/img/partner3.png";
  8 | import partner4Img from "../assets/img/partner4.png";

[mischnic]

I think you're using Parcel 1? This is only supported in Parcel 2

[ivoba]

Is there also a way to generate webp or other modern image formats for parcel v1?