test(e2e): store images in jpeg format

[fshovchko]

Closes: #2393

[ala-n]

It is definitely an enhancement that we can use, as we will get files that are practically smaller.
However, it does not utilize the possibility of WebP compression. It improves the file size just because PNG compression that sharp uses by default is better compared to the raw PNG output that pupiter gives out of the box. So, we still store snapshots as PNGs, just with compression (a similar result can be achieved by using the sharp wrapper on top of the screenshot function screenshots.push(await sharp(await page.screenshot(options)).png().toBuffer());).

To summarize everything, I'd have to say:

1. The sharp library is definitely a good start, and we can leave it in the codebase with 100% confidence. (Just add a note in the README that it may require npm install --include=optional sharp -g to work properly in some cases.)

2. We can definitely transform this PR into a partial solution that provides compression, which is a valuable and valid improvement (just without WebP until it actually affects file format to store).

3. Regarding Dima's comment above, I'm not sure that lossy compression should be a problem unless it consistently gives us the same result. We are definitely not going to catch some color problems with the image, so unless compress(snapshot) = compress(actual) is valid for approximate similarity, we are fine.

4. Regarding the original ticket with WebP, here are some notes to move forward:

   • Snapshot storing is a jest part of the process.
   • It happens inside the matching library, specifically at the toMatchImageSnapshot level. If I remember correctly, we can describe to Jest itself how to store a snapshot, so we might not need to override jest-image-snapshot since it utilizes Jest's original snapshotting. But it still should be a little bit tricky thing to do as I mentioned initially.

[dshovchko]

If compression is ok for us I vote for storing images in AVIF format. AVIF has higher compression efficiency than WebP.

[ala-n]

If compression is ok for us, I vote for storing images in AVIF format. AVIF has higher compression efficiency than WebP.

This is a totally valid suggestion. If sharp (or another image processor) can work with AVIF (approximately fast), we can use it. I'll update the original ticket.

[ala-n]

🎉 This PR is included in version 5.0.0-beta.34 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀