[bug]: transparent png's get a black background

[Jordaneisenburger]

Describe the bug When you have .png file with a transparent background they end up with a black background when rendered on the frontend.

To reproduce Steps to reproduce the behavior:

1. upload a .png (transparent background) file as a product image
2. go to product and you should see the background black instead of transparent

Expected behavior When using .png's I'd want them to keep their transperancy

Possible solutions The reason this is happening is because we are forcing images to be a .jpeg format if they are not .webP. This happens at the following place: https://github.com/magento/pwa-studio/blob/6d15db4a346b41b5e5b1b0967d3155a4a558f44b/packages/venia-ui/lib/util/makeUrl.js#L74-L76

To fix this we can either add an extra statement like this:

if (path.endsWith('.png')) {
    params.set('format', 'png');
} else {
    params.set('format', 'jpeg'); // Use progressive JPGs at least
}

But I'd prefer to see a solution where we get the actual file extension and use that as a format. Also we should check if that file extension is supported by the image optimizer/resizer, if not we can still fallback to .jpeg

Please complete the following device information:

• Device [e.g. iPhone6, PC, Mac, Pixel3]:
• OS [e.g. iOS8.1, Windows 10]:
• Browser [e.g. Chrome, Safari]:
• Browser Version [e.g. 22]:
• Magento Version:
• PWA Studio Version:
• NPM version npm -v:
• Node Version node -v:

Please let us know what packages this bug is in regards to:

• [ ] venia-concept
• [x] venia-ui
• [ ] pwa-buildpack
• [ ] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec
• [ ] create-pwa

[Jordaneisenburger]

Wondering if the above provided fix would be future proof, since we are always setting a "hardcoded" format? Wouldn't it be better to check the actually extension and set that as the format dynamically. Let's say someone loads an image with a future format ex. ".xjpeg" it wouldn't make sense to add jpeg or webp to it as a format. We then ofcourse also must check the dynamic extension vs the supported list from the sharp lib.

This might be too over engineered since the above provided solution is simple and works in most cases anyway.

[awilcoxa]

created in Jira backlog for grooming

[awilcoxa]

Marked as P1S1

[awilcoxa]

In progress with core team

[realadityayadav]

I know this issue is closed but the gifs do not animate due to forcing them to be webP. Can this be achieved to have them animated still @dpatil-magento @awilcoxa ?

[dpatil-magento]

@realadityayadav Gifs are currently not supported in pwa-studio.