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

[T-6] Image transformer #4881

Merged
merged 17 commits into from
Aug 3, 2020
Merged

[T-6] Image transformer #4881

merged 17 commits into from
Aug 3, 2020

Conversation

DeMoorJasper
Copy link
Member

↪️ Pull Request

Allow resizing of images using query parameters and sharp

Closes #3737
Closes #3736
Closes #3477

Closes T-6

💻 Examples

import image from 'url:./image.jpg?height=200';
import image from 'url:./image.webp?height=200&width=300';
import image from 'url:./image.png?width=300';

🚨 Test instructions

Run kitchen sink example

✔️ PR Todo

  • Added/updated unit tests for this change
  • Filled out test instructions (In case there aren't any unit tests)
  • Included links to related issues/PRs

@height
Copy link

height bot commented Jul 12, 2020

This pull request has been linked to and will mark 1 task as "Done" when merged:

  • T-6 Support query params to pass options to transformers (unlink task)

💡Tip: You can link multiple Height tasks to a pull request.

@DeMoorJasper DeMoorJasper changed the title Image minifier rework [T-6] Image transformer Jul 12, 2020
@DeMoorJasper DeMoorJasper requested review from devongovett, wbinnssmith, mischnic and padmaia and removed request for devongovett and wbinnssmith July 12, 2020 12:31
@parcel-benchmark
Copy link

parcel-benchmark commented Jul 12, 2020

Benchmark Results

Kitchen Sink ✅

Timings

Description Time Difference
Cold 6.88s +572.00ms ⚠️
Cached 2.25s -32.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.d5807e82.webp 102.94kb -12.74kb 🚀 263.00ms +18.00ms ⚠️
dist/modern/parcel.d5807e82.webp 102.94kb -12.74kb 🚀 263.00ms +18.00ms ⚠️
dist/legacy/index.html 701.00b +0.00b 608.00ms -78.00ms 🚀
dist/modern/index.html 701.00b +0.00b 605.00ms -79.00ms 🚀
dist/modern/index.e480862d.css 77.00b +0.00b 1.51s +115.00ms ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.d5807e82.webp 102.94kb -12.74kb 🚀 134.00ms -76.00ms 🚀
dist/modern/parcel.d5807e82.webp 102.94kb -12.74kb 🚀 133.00ms -76.00ms 🚀
dist/legacy/index.42516b4a.js 1.10kb +0.00b 321.00ms -97.00ms 🚀
dist/modern/index.8a1ced31.js 1.10kb +0.00b 320.00ms -97.00ms 🚀
dist/legacy/index.html 701.00b +0.00b 322.00ms -113.00ms 🚀
dist/modern/index.html 701.00b +0.00b 320.00ms -97.00ms 🚀
dist/legacy/index.0e158b6b.css 77.00b +0.00b 321.00ms -97.00ms 🚀
dist/modern/index.e480862d.css 77.00b +0.00b 320.00ms -97.00ms 🚀

React HackerNews ✅

Timings

Description Time Difference
Cold 29.07s +339.00ms
Cached 2.34s +58.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/PermalinkedComment.c85d137d.js 4.22kb +0.00b 5.55s -5.62s 🚀
dist/UserProfile.30e15baf.js 1.62kb +0.00b 5.55s -5.62s 🚀
dist/NotFound.5aa6b041.js 387.00b +0.00b 5.55s -5.62s 🚀
dist/logo.24c8bf9e.png 274.00b -54.00b 🚀 150.00ms -4.00ms

Cached Bundles

Bundle Size Difference Time Difference
dist/logo.24c8bf9e.png 274.00b -54.00b 🚀 154.00ms -12.00ms 🚀

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 2.90m +4.05s
Cached 5.36s +357.00ms ⚠️

Cold Bundles

Bundle Size Difference Time Difference
dist/index.47a240b6.js 2.73mb +6.00b ⚠️ 1.64m +4.18s
dist/media-viewer.a8f3a476.js 72.02kb +0.00b 15.57s -2.42s 🚀
dist/card.ce67dc35.js 55.09kb +0.00b 13.32s -1.71s 🚀
dist/Modal.e3bd77d0.js 41.40kb +0.00b 5.90s -622.00ms 🚀
dist/component.37867f50.js 22.51kb +0.00b 5.90s -628.00ms 🚀
dist/DatePicker.cbe44a9b.js 21.17kb +0.00b 10.25s -668.00ms 🚀
dist/EmojiPickerComponent.898d8be6.js 18.23kb +0.00b 10.25s -667.00ms 🚀
dist/js.48be70a4.js 16.40kb +0.00b 5.90s -627.00ms 🚀
dist/ui.cee430a3.js 13.97kb +0.00b 13.21s -1.63s 🚀
dist/workerHasher.65b8a1b7.js 11.78kb +0.00b 53.71s +39.69s ⚠️
dist/EmojiTypeAheadComponent.9af6e5fc.js 8.67kb +0.00b 53.70s +40.77s ⚠️
dist/component.11476a92.js 6.05kb +0.00b 5.90s -628.00ms 🚀
dist/card.4ac5c1b2.js 5.61kb +0.00b 14.07s -2.84s 🚀
dist/media-viewer.bc661bce.js 3.92kb +0.00b 15.57s -2.42s 🚀
dist/EmojiPickerComponent.624bf3f4.js 3.58kb +0.00b 11.66s +738.00ms ⚠️
dist/png-chunks-extract.8d15a914.js 3.41kb +0.00b 5.90s -628.00ms 🚀
dist/dropzone.2f1a1e17.js 3.23kb +0.00b 52.82s +20.34s ⚠️
dist/Modal.2835744c.js 3.08kb +0.00b 5.26s +442.00ms ⚠️
dist/EmojiUploadComponent.88a444df.js 2.18kb +0.00b 53.70s +40.77s ⚠️
dist/card.cadccd96.js 2.03kb +0.00b 15.86s -16.49s 🚀
dist/ResourcedEmojiComponent.d9a49606.js 2.00kb +0.00b 5.22s +405.00ms ⚠️
dist/date.d49e64f8.js 1.73kb +0.00b 6.51s -641.00ms 🚀
dist/16.f40c1329.js 1.73kb +0.00b 6.30s -45.16s 🚀
dist/images.80270b1f.js 1.67kb +0.00b 6.64s -504.00ms 🚀
dist/16.86a8c7d4.js 1.66kb +0.00b 7.21s +471.00ms ⚠️
dist/feedback.8b7c7928.js 1.64kb +0.00b 7.15s -528.00ms 🚀
dist/workerHasher.9bb425b1.js 1.54kb +0.00b 53.70s +40.77s ⚠️
dist/list-number.4632b459.js 1.46kb +0.00b 6.78s -490.00ms 🚀
dist/status.cccf04be.js 1.46kb +0.00b 7.02s -431.00ms 🚀
dist/16.cff410ff.js 1.38kb +0.00b 6.12s -621.00ms 🚀
dist/code.af9ca2b3.js 1.38kb +0.00b 6.48s -44.98s 🚀
dist/16.c1ed07f8.js 1.33kb +0.00b 7.21s +471.00ms ⚠️
dist/16.6603f2f3.js 1.33kb +0.00b 6.12s -621.00ms 🚀
dist/16.249c644a.js 1.31kb +0.00b 6.48s -511.00ms 🚀
dist/link.d12cc130.js 1.30kb +0.00b 6.78s -491.00ms 🚀
dist/heading6.4c4017db.js 1.30kb +0.00b 7.13s -542.00ms 🚀
dist/heading3.93606b9c.js 1.29kb +0.00b 7.03s -643.00ms 🚀
dist/16.ab5c0088.js 1.27kb +0.00b 6.30s -688.00ms 🚀
dist/emoji.e603e70e.js 1.23kb +0.00b 6.64s -504.00ms 🚀
dist/16.afee1494.js 1.23kb +0.00b 6.30s -45.16s 🚀
dist/16.7c7a40c9.js 1.19kb +0.00b 6.30s -45.16s 🚀
dist/16.06d5a67b.js 1.18kb +0.00b 6.48s -511.00ms 🚀
dist/heading5.dde15cec.js 1.17kb +0.00b 7.13s -542.00ms 🚀
dist/expand.6889aead.js 1.16kb +0.00b 7.15s -3.77s 🚀
dist/16.f040d62d.js 1.14kb +0.00b 6.13s -614.00ms 🚀
dist/16.ecf8a702.js 1.13kb +0.00b 7.26s +510.00ms ⚠️
dist/16.1b342686.js 1.13kb +0.00b 6.12s -621.00ms 🚀
dist/16.2e7f52c6.js 1.13kb +0.00b 6.12s -619.00ms 🚀
dist/16.da43aa07.js 1.13kb +0.00b 7.21s +471.00ms ⚠️
dist/heading2.e219309a.js 1.11kb +0.00b 7.02s -429.00ms 🚀
dist/16.dd07505e.js 1.10kb +0.00b 5.22s +403.00ms ⚠️
dist/component.40194190.js 1.07kb +0.00b 5.22s +404.00ms ⚠️
dist/mention.b1828447.js 1.07kb +0.00b 6.78s -490.00ms 🚀
dist/heading4.5316f6f2.js 1.06kb +0.00b 7.13s -542.00ms 🚀
dist/16.317b9164.js 1.05kb +0.00b 6.30s -691.00ms 🚀
dist/layout.ac6734f9.js 1.05kb +0.00b 6.66s -607.00ms 🚀
dist/divider.d2be55a1.js 1.03kb +0.00b 6.64s -505.00ms 🚀
dist/quote.f4e09143.js 1.02kb +0.00b 6.90s -549.00ms 🚀
dist/action.cb287eb0.js 1.00kb +0.00b 6.48s -511.00ms 🚀
dist/decision.91f3af14.js 1010.00b +0.00b 6.64s -505.00ms 🚀
dist/panel-warning.68b04096.js 1008.00b +0.00b 6.90s -447.00ms 🚀
dist/list.057cb664.js 978.00b +0.00b 6.78s -490.00ms 🚀
dist/heading1.fa66b375.js 976.00b +0.00b 7.02s -431.00ms 🚀
dist/panel-error.c4b05f6f.js 906.00b +0.00b 6.78s -568.00ms 🚀
dist/panel.9dbc048e.js 897.00b +0.00b 6.90s -446.00ms 🚀
dist/table.b35545be.js 889.00b +0.00b 7.02s -431.00ms 🚀
dist/panel-success.7eb0809a.js 845.00b +0.00b 6.90s -448.00ms 🚀
dist/panel-note.ec8386b7.js 841.00b +0.00b 6.90s -448.00ms 🚀
dist/media-card-analytics-error-boundary.964206cc.js 833.00b +0.00b 13.31s -1.52s 🚀
dist/media-viewer-analytics-error-boundary.bbe40a02.js 757.00b +0.00b 15.62s -2.38s 🚀
dist/EmojiPickerComponent.a968dafe.js 535.00b +0.00b 11.66s -1.26s 🚀
dist/simpleHasher.f8e69464.js 528.00b +0.00b 13.20s -1.63s 🚀
dist/index.html 119.00b +0.00b 985.00ms +243.00ms ⚠️

Cached Bundles

No bundle changes detected.

Three.js x4 🚨

Timings

Description Time Difference
Cold FAILED -0.00ms
Cached FAILED -0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

Click here to view a detailed benchmark overview.

@@ -32,6 +32,7 @@
"script:*.vue": ["@parcel/transformer-vue"],
"style:*.vue": ["@parcel/transformer-vue"],
"custom:*.vue": ["@parcel/transformer-vue"],
"url:*.{png,jpg,jpeg,webp}": ["@parcel/transformer-image", "..."],
Copy link
Member

Choose a reason for hiding this comment

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

hmm so now you couldn't use it from CSS/HTML without the url: prefix either... :/

Copy link
Member Author

@DeMoorJasper DeMoorJasper Jul 21, 2020

Choose a reason for hiding this comment

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

that's probably why I originally did it without the url: prefix...

Copy link
Member Author

Choose a reason for hiding this comment

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

so should I change it back?

Copy link
Member

@devongovett devongovett left a comment

Choose a reason for hiding this comment

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

Let's get it in first and figure out the url thing later. Seems like we're going to need to treat url: specially...

: undefined;
let format = asset.query.as ? asset.query.as.toLowerCase().trim() : null;

let imagePipeline = sharp(inputBuffer);
Copy link
Member

Choose a reason for hiding this comment

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

If none of the options are set, should we skip running sharp altogether? Maybe faster?

Copy link
Member Author

Choose a reason for hiding this comment

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

But the output might be non minified

Copy link
Member

Choose a reason for hiding this comment

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

Hmm it's not an optimizer... I guess we could check that option too. I was more thinking in dev it might be slow/unnecessary.

Copy link
Member Author

@DeMoorJasper DeMoorJasper Aug 3, 2020

Choose a reason for hiding this comment

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

Yeah... I can fix that in a follow-up PR if you want, sharp isn't always smaller anyway, I've had a couple cases in which it significantly enlarged output images... (on personal/work projects)

@DeMoorJasper DeMoorJasper merged commit 22b0143 into v2 Aug 3, 2020
@DeMoorJasper DeMoorJasper deleted the image-minifier-rework branch August 3, 2020 07:43
@rhendric rhendric mentioned this pull request Oct 7, 2020
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Parcel 2: Image Resizing Transformer Parcel 2: WebP Transformer [RFC] Import query params
3 participants