Add pjpg format only if image type of not png.

[revanth0212]

Description

This PR adds logic in makeUrl.js file in venia-ui to handle png image requests.

Currently, the makeOptimizedUrl function does not consider the file type while adding URLSearchParams. It adds webp and pjpg in that respective order. This means if the server can not handle webp it will consider pjpg. webp is compatible with png, so when the user requests a png it will be returned with a transparent background.

If the server does not support webp since the current code does not regard png and applies pjpg as the format, instead of a transparent background, we will get the image with a black background.

But with the current change, instead of pjpg the UI will request a png instead.

All this happens only if the backend does not support webp and is served by a backend that does not handle pjpg properly. For instance, we were not able to reproduce this issue till we switched off fastly, because fastly handles pjpg well and does not return a black background. When we switched off fastly, the backend image optimization was handled by hastily which was retuning the black background.

I am not sure if the approach taken by fastly or hastily is correct but one thing is for sure, we have to send format as png for a png image request irrespective of the backend.

Troubleshooting Tips:

1. Check if the backend service supports webp. If it does, everything should be fine.
2. If it does not, check the file format requested in the URLSearchParams.

Related Issue

Closes #2340

Verification Stakeholders

@zetlen
@jimbo
@Jordaneisenburger

Verification Steps

To test use this, use this backend URL:
MAGENTO_BACKEND_URL=https://staging-5em2ouy-mfwmkrjfqvbjk.us-4.magentosite.cloud/

1. Go to https://magento-venia-concept-7bnnn.local.pwadev:8914/simple13.html
2. With fastly enabled/disabled everything should work fine. You should see a transparent background when you open the image in the network tab.

Screenshots / Screen Captures (if appropriate)

Checklist

None

[PWAStudioBot]

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).

Generated by 🚫 dangerJS against f7c296c

[revanth0212]

Piggybacking on the comment @Jordaneisenburger made on the issue, what should we do to make this extensible?

Should we do something like this?

if (isValidImageFileType(imageFileType)) {
    params.set('format', imageFileType);
} else {
    params.set('format', 'pjpg');
}

[jimbo]

Thanks for updating the tests as well. I think this is the fix we're looking for. At the moment, I'm not sure how to open up these build processes to customization, but we'll have to spike on it.

[devops-pwa-codebuild]

Performance Test Results

The following fails have been reported by WebpageTest. These numbers indicates a possible performance issue with the PR which requires further manual testing to validate.

https://pr-2400.pwa-venia.com/venia-tops.html : LH Performance Expected 0.75 Actual 0.66