• Necessary for unit tests (in #2)
• Would help split into 3 scripts (#15)

Node.js 10 is the new LTS:
https://medium.com/@nodejs/october-brings-node-js-10-x-to-lts-and-node-js-11-to-current-ae19f8f12b51

Should be an independent script.

Tutorial: https://medium.com/@fsjohnny/using-google-analytics-api-with-node-js-eb1f5af3375a

Depends on #6

There are only two hard things in Computer Science: cache invalidation and naming things. — Phil Karlton

True.

responsive-image-widths is not easy to spell (image or images? width or widths?) and type in a shell, so we would like to rename it to something shorter, and either more explicit or more fun/memorable.

Current options:
👍 srcset-sizer
😁 daltons (there is already a dalton package on npm, but there should be no ambiguity)
🎉 BRITS: Better Responsive Image Tools Selection
❤️ RIWAL: Responsive Image Widths et AL.

You can vote with reactions, and suggest other names in comments.

Currently the documentation say to run a commande for each sources.
We could make the script return a sizes list to each sources of a picture element with media query detected when runing resize by puppeteer.

Related: #266

It looks like Google Analytics' own "Browser Size" dimension we dismiss here gives a smaller viewport width than our own computed value:

I guess it doesn't include the scrollbar width.

• Do we have to use the same value, or keep our own?
• How does it deal with overflowing scrollbars?

As most Analytics solutions only provide viewport widths and nothing about screen densities, this would help use Daltons without requiring addition of custom dimensions months in advance.

For example, we know that there is a strong correlation between thinner viewports and high density:
https://twitter.com/TimVereecke/status/1121757778400481282

Because there is not existing statistics for a new website.

• add configuration by file (see Building Configurable CLI Apps
  in Yargs‘ documentation)
• configure multiple runs in one single configuration file

• Add Eslint config
• Add .editorconfig
• Add Prettier config file or package.json key
• Add unit tests
• Add Travis-CI automated test
• Add automated publish/deploy

Hello,

There is no return without verbose or destFile option.
I think we should display a spinner during process and only print final return at end.

Basic users would only have result or error.

Should help reduce computing time

Should both:

• help reduce computing time
• prevent loading too large images on 3dppx+ screens (see also #64)

I guess it's time to upgrade the Node.js versions to latest active LTS at least.

Step to reproduce

1 - remove --verbose from example/simple/run.sh
2 - cd example/simple
3 - `./run.sh

What is happen

It display help information for cli

What should happen

Run the script silently

Currently not compatible, staying on v4.x

https://github.com/adaltas/node-csv/blob/csv-parse%405.0.0/packages/csv-parse/CHANGELOG.md#500-2021-11-15

When in verbose mode.

Might use https://github.com/kroitor/asciichart

Use Google's Pupeteer

• Load data from a CSV file
• Fill an array with data

Will be useful for multiple images or single image with Art Direction

Screen with >2dppx density require lower quality, more compressed, images:
https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio

It might be better having different images widths for high density screens (most being mobiles) and low density screens.

Serving lower quality images to high density screens requires using <picture> with a density media query:

<picture>
  <source
    media="(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2)"
    sizes="…"
    srcset="
      image-q10-720.jpg 720w,
      image-q10-1280.jpg 1280w,
      image-q10-1400.jpg 1400w">
  <img
    src="image-q80-320.jpg"
    sizes="…"
    srcset="
      image-q80-360.jpg 360w,
      image-q80-800.jpg 800w,
      image-q80-1024.jpg 1024w">
</picture>

The 2dppx threshold should be a parameter.

@welcoMattic after working on it a little more, I'm not sure I understand the intent of this part:

https://github.com/cleverage/daltons/blob/master/src/index.js#L116-L125

  result.centroids.forEach((centroid) => {
    const centroidWidth = centroid[0]
    closestRealWidths.push(
      [...perfectWidths.keys()].reduce((prev, curr) => {
        return Math.abs(prev - centroidWidth) > Math.abs(curr - centroidWidth)
          ? curr
          : prev
      }),
    )
  })

Could you explain why you don't use the centroids directly?

It is currently missing

• multiply both arrays to find all required image widths
• find most frequent widths (above a threshold)
• reduce the array with n pixels neighbours

bin to expose responsive-image-sizes.js as a binany to be run in cli without node command.
main to set responsive-image-sizes.js default importable js of the package to making it usable as a dependency.

Files:

• variations file
• destination file

One option to overwrite all files, or one option per file?

For example, allow settings rounded screen densities to [1, 1.5, 2, 2.5]

Aims:

• reduce computing time (much less combinatorial)
• prevent serving images to really high density screens

Use https://github.com/SBoudrias/Inquirer.js/ ?

For example, a CSV exported from a Google Analytics report starts like this:

# ----------------------------------------
# nicolas-hoizey.com
# Viewport et densité d'écran
# 20180501-20180731
# ----------------------------------------

Viewport width,Screen density,Pageviews
1920,1,"3,505"
1440,2,"1,341"
1366,1,"1,194"
375,2,725
360,3,587

• ; separator
• comment lines
• empty lines
• delimiter (")
• thousands separator (",")
• decimal separator ("." in English, "," in French)

Should help reduce computing time

Could be useful if we only want the list of image width variations, for example

It should not be necessary to explain what “contexts” means, what it contains.

I'm trying to write results in a file with -f option, but I catch this error

Step 2: get variations of image width across viewport widths
Launch headless Chrome
Go to https://www.courbet.test
Checking widths of image main picture.c-block__img > img
Finished at viewport: 1280px
Couldn’t load page located at https://www.courbet.test:
ReferenceError: writeFile is not defined

Did you face this case before?