Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Analyze images module #1306

Merged
merged 15 commits into from
Sep 18, 2023
Merged

Analyze images module #1306

merged 15 commits into from
Sep 18, 2023

Conversation

gmetais
Copy link
Contributor

@gmetais gmetais commented Aug 15, 2023

Hello Maciej,

This is a submission from an optional phantomas module called analyze-image, inspired by analyze-css and already discussed in #819. It retrieves images loaded on the page and tries to:

  • optimize them,
  • resize them,
  • switch them to WebP/AVIF,
  • check if the sizes parameter is correct for responsive images

It also fixes the imageScaledDown metric, not working properly with picture elements.

This is a starting point, I wish this module evolves and gains new functionalities in the future (a CLI, detect HTML syntax errors, detect images loaded on the network but not attached on the page...).

The module is not yet submitted on npm, but will be soon. Would you like to share its governance with me?

(I have the same issue in this pull request as the other day, where some changes are marked as new in the diff but are already on your devel branch. Can't understand what I do wrong.)

dependabot bot and others added 11 commits July 18, 2023 20:25
Bumps [coverallsapp/github-action](https://github.com/coverallsapp/github-action) from 2.2.0 to 2.2.1.
- [Release notes](https://github.com/coverallsapp/github-action/releases)
- [Commits](coverallsapp/github-action@v2.2.0...v2.2.1)

---
updated-dependencies:
- dependency-name: coverallsapp/github-action
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Bumps [puppeteer](https://github.com/puppeteer/puppeteer) from 20.8.1 to 20.8.3.
- [Release notes](https://github.com/puppeteer/puppeteer/releases)
- [Changelog](https://github.com/puppeteer/puppeteer/blob/main/release-please-config.json)
- [Commits](puppeteer/puppeteer@puppeteer-v20.8.1...puppeteer-v20.8.3)

---
updated-dependencies:
- dependency-name: puppeteer
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Bumps [puppeteer](https://github.com/puppeteer/puppeteer) from 20.8.3 to 20.9.0.
- [Release notes](https://github.com/puppeteer/puppeteer/releases)
- [Changelog](https://github.com/puppeteer/puppeteer/blob/main/release-please-config.json)
- [Commits](puppeteer/puppeteer@puppeteer-v20.8.3...puppeteer-v20.9.0)

---
updated-dependencies:
- dependency-name: puppeteer
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@macbre
Copy link
Owner

macbre commented Aug 15, 2023

(I have the same issue in this pull request as the other day, where some changes are marked as new in the diff but are already on your devel branch. Can't understand what I do wrong.)

Your fork's devel branch seems to be behind the one from this repository.

package.json Outdated
@@ -28,6 +28,7 @@
},
"dependencies": {
"analyze-css": "^2.0.0",
"analyze-image": "gmetais/analyze-image#main",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As you've mentioned in the PR description - let's either publish this package to npm (ideally) or at least pin the github dependency to a specific commit / tag.

@macbre
Copy link
Owner

macbre commented Aug 15, 2023

To make CI pass please update the lock file:

npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.

@socket-security
Copy link

socket-security bot commented Aug 16, 2023

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages Version New capabilities Transitives Size Publisher
analyze-image 1.0.0 network, filesystem, shell +219 10.8 MB gmetais

@@ -28,7 +28,7 @@
},
"dependencies": {
"analyze-css": "^2.0.0",
"analyze-image": "gmetais/analyze-image#main",
"analyze-image": "^1.0.0",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@macbre
Copy link
Owner

macbre commented Aug 16, 2023

CI is failing with:

Error: Cannot find module 'analyze-image' from 'modules/analyzeImages/analyzeImages.js'

@macbre
Copy link
Owner

macbre commented Aug 29, 2023

@gmetais - thanks for the PR.

Before merging his one, can you try updating the dependencies of the analyze-image and publish a new version of it? Snyk reports quite a few vulnerabilities there.

npm i prints out a few of them as well:

~/git/analyze-image$ npm i
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 584 packages, and audited 585 packages in 27s

71 packages are looking for funding
  run `npm fund` for details

14 vulnerabilities (4 moderate, 10 high)

@gmetais
Copy link
Contributor Author

gmetais commented Sep 2, 2023

I update all dependencies (I even switched analyze-image to an ESM) on that branch: https://github.com/gmetais/analyze-image/tree/esm

But I still got the 2 "deprecated" warnings, because of imagemin-svgo that was updated recently but not published on npm.
And I still got 12 of the 14 vulnerabilities, mostly because of imagemin-gifsicle that was not updated for 2 years.

Also (and unfortunately), it looks like phantomas would not be able to run Jest tests if analyze-image is loaded as an ESM module (see #1169 and nodejs/node#35889).

All in all, I'm not sure updating dependencies is such a good idea 😅

@macbre
Copy link
Owner

macbre commented Sep 2, 2023

The fun with npm packages ...

I update all dependencies (I even switched analyze-image to an ESM) on that branch: https://github.com/gmetais/analyze-image/tree/esm

But I still got the 2 "deprecated" warnings, because of imagemin-svgo that was updated recently but not published on npm.
And I still got 12 of the 14 vulnerabilities, mostly because of imagemin-gifsicle that was not updated for 2 years.

Can we at least have some dependencies updated (and hence some warnings fixed)? If not, then I'm fine with merging this PR 🙂

@gmetais
Copy link
Contributor Author

gmetais commented Sep 17, 2023

I'm kind of stuck. The reason I didn't use the latest versions for some packages was because they became ES modules at some point. I tried to import() them dynamically, but it was adding to much complexity to the code. So I rewrote entirely my analyze-image module to an ES module.

It is working fine as long as I don't use Jest. Unfortunately, it triggers the segmentation fault when launching the tests.

So either we keep some packages not updated, either we don't test the analyze-image module. What do you prefer?

(For your information, it looks like the segmentation fault will be fixed soon in NodeJS v20: nodejs/node#35889 (comment))

@macbre
Copy link
Owner

macbre commented Sep 18, 2023

So either we keep some packages not updated, either we don't test the analyze-image module. What do you prefer?

Thanks for providing more context here! Well, it seems we are kind of forced to use the outdated versions then...

@macbre macbre merged commit 91adb87 into macbre:devel Sep 18, 2023
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants