search

TwicPics / components

A Web component library that brings the power of TwicPics to your favorite web framework.
MIT License
54 stars 2 forks source link

Sometimes image rendering breaks #111

Closed pfloride closed 2 months ago

pfloride commented 2 months ago

Hi there, we've had an issue come up with the way some images are rendered. It's not easy reproducible and also doesn't really seem to be a problem with the images themselves (f.e. the same image in the same browser is broken in the prod env but not in stage). Has this behaviour come up for somebody else before?

image

https://github.com/user-attachments/assets/32d4deb7-7f6a-4cd5-94fe-b3141ac18523

mbgspcii commented 2 months ago

Hi @pfloride Thank you for opening this issue. No, this behaviour has not yet been reported. Can you tell me more?

Could you share a link with us so that we can take a closer look at this case?

The fact that it works in dev and not in prod suggests to me that it may be an error in generating a specific variant of the image.

pfloride commented 2 months ago

Hello @mbgspcii, Thanks for the fast response! A colleague of mine was able to pinpoint the issue this morning and it actually seems to be a bug of the API / image transformation. We recently went through our codebase and added the background=white transformation to all TwicPics URLs. We had them in there before, but not everywhere and when refactoring, we've change the parameter order.

The old URLs always had the max-resize=600 transformation before the background=white one. Changing around the order triggers the bug. Example:

This issue is not affecting all images, just a seemingly random subset of them.

Can this issue maybe be escalated to the right team from here or should I better report it over the website?

mbgspcii commented 2 months ago

Hi @pfloride Okay, so it's a processing problem that I'm passing on to the right people. For this kind of issue (other than TwicPIcs Components issue) you should ask here (you must be logged in to your TwicPics account). We'll get back to you as soon as we have some insight into the problem you're raising.

Just one question. I went here and i checked the generated html. Did you modified the TwicPics Components code in order to generate a custom LQIP ? It is stange to have https://levejo.twic.pics/products/P000715006_2024-05-10_hero.png?twic=v1/background=white/resize-max=600/output=web as a low quality placeholder. It should be https://levejo.twic.pics/base_images/2004213.webp?twic=v1/background=white/cover=1000x1000/output=preview (a lightweight svg version). Here you have a webp version too heavy to be used as a LQIP. If you don't have modified the code, this is an issue we will have to fix.

Please keep me in touch about this.

Thans in advance.

pfloride commented 2 months ago

Thanks for passing on the issue! 🙏

We didn't modify the TwicImg component but we're doing something out-of-ordinary there. We're rendering the first gallery image natively, but we're mocking the html structure of the component and then the rest of the images are rendered by TwicImg (it's a smoother first-load experience most of the time, especially if the image is already cached). But, after now looking at it again, i guess it's not of any benefit to render the preview at all.

mbgspcii commented 2 months ago

Hi again.

We have deployed a fix for corrupted images. It may take a little time to propagate, but the service should be working properly again shortly.

Thank you for the clarification about TwicImg. Just for information, if you don't want to render the LQIP verison, may be you should tray placeholder="none".

Do not hesitate to contact us again if you still ecounter the issue (or another one...).