search

SparkPost / matchbox

🔥 A react UI component library
https://design.sparkpost.com
110 stars 10 forks source link

@sparkpost/matchbox-media package should provide .webp image formats #620

Closed nicklemmon closed 4 years ago

nicklemmon commented 4 years ago

🚀 Feature request

Current Behavior

Currently, .jpg and .png images are provided via @sparkpost/matchbox-media.

Desired Behavior

From MDN:

WebP supports lossy compression via predictive coding based on the VP8 video codec, and lossless compression that uses substitutions for repeating data. Lossy WebP images average 25–35% smaller than JPEG images of visually similar compression levels. Lossless WebP images are typically 26% smaller than the same images in PNG format.

Ideally, .webp formats would also be provided. On the site, we could supply these images with .png images as a fallback:

https://caniuse.com/webp https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#WebP

Suggested Solution

On our end, we can use the HTML picture element and provide fallbacks:

https://css-tricks.com/using-webp-images/#using-webp-in-html

Who does this impact? Who is this for?

Substantially improves perf for end users - but only if all images are not included as part of our bundle. This would offer a huge benefit to sparkpost.com users, and could benefit our users if our images are not part of our bundle.

jonambas commented 4 years ago

👍 We have a ticket cut for this

https://sparkpost.atlassian.net/browse/UX-322