search

generoi / genero-design-system

https://gds.generogrowth.com/
MIT License
4 stars 0 forks source link

gds-image or not? #46

Closed oxyc closed 1 year ago

oxyc commented 3 years ago

Not sure we want this? If we do, what about picture? What's the use case for having it as a component?

Can superimpose be an option here instead?

taromorimoto commented 3 years ago

@oxyc My initial feeling is that gds-image could be used as a "an image with good defaults". Basically it would hide all those millions of img and picture parameters. I think it could be any variation of img, source, picture elements. It could be used in post body or in teasers. This would enable us to nice transition animations like medium and what we do in Platta article body images.

And of course if you need, you can use the vanilla img/picture elements.

One thing to consider is SEO. So should the main img element be used as a as is in a slot so that bots that don't run JS can parse images? And then if it's implemented like that, then the browser would anyways parse and start rendering the main image before the proper version of the image has been "resolved" by the gds-image.

So in the end maybe best of both worlds could be achieved by using slotted vanilla img/picture elements with gds-image container that would do all sort of nice transition stuff etc?

Some examples: https://www.webcomponents.org/element/@polymer/iron-image https://www.webcomponents.org/element/@@npm/plastic-image https://material.io/archive/guidelines/patterns/loading-images.html#loading-images-behavior

oxyc commented 3 years ago

A few other reasons to keep the tag at least inside <gds-image>

I'm wondering how we should handle transition animations now that we have loading="lazy" though? Can we provide the transition animation even with native lazy loading?

taromorimoto commented 3 years ago

Yeah, probably a good idea to keep the native tags.

I think if the gds-image has a transition (maybe even gds-image-transition) then it's actually good if the img has loading="lazy". Then the image loading won't get triggered too early and the gds-image could do somethings with the slotted native image elements.

But yeah, maybe at this point the gds-image could be something that we could take a look in the future rather than during the current big refactor?