getimage and transparent webp images on iOS

René Poulsen

Posted on 26/11/2020 11:13:40

Hi,

I'm using getimage.ashx to create webp images on a solution. Some of the images I create webp images of is transparent PNGs. They work fine on Mac and PC in Chrome, Firefox, Safari and Edge but on iOs the images are not transparent - but have a white background instead.

The image path looks like this: /admin/public/getimage.ashx?Image=/Files/Templates/Designs/designname/assets/img/image.png&Format=webP&Width=258

Anyone else experiencing the same issues with transparent webp images using getimage?

(I've tested the images on another solution in a different ummentionable CMS ;-) where it works fine on iOs as well - so I guess it's not an issue with the images)

Replies

Nicolai Pedersen

Posted on 26/11/2020 14:41:46

Hi René

What IOS and Safari version? IOS has just recently received webp support and GetImage returns jpeg to browsers that does not support webp - or does not send the webp accept header.

So my guess would be that what you actually see is a jpg image on the Ios. Maybe because we need to always send a webp image - and not fall back tp jpg if not supported.

You can test this by saving the image generated by getimage as webp and upload that to the solution and access the webp image with a direct URL - not using getimage.

BR Nicolai

René Poulsen

Posted on 26/11/2020 14:44:01

Hi Nicolai,

Tested some more today and the funny thing is, that it's working on my iPhone running iOS 14.2 and NOT on my iPad - altso running 14.2. That's weird!

EDIT: I would like avoiding the "download and use directly" as I would have to check for webp support myself at this point in the project. So I guess I'll be using PNGs instead.

Nicolai Pedersen

Posted on 26/11/2020 15:05:27

Hi René

Can be the accept headers on the devices... Because we made it with fallback.

BR Nicolai

René Poulsen

Posted on 26/11/2020 16:34:58

Would it somehow be possible to serve the original jpg instead of a jpg, when webp is not supported? That would be nice :-)

Nicolai Pedersen

Posted on 27/11/2020 08:42:56

Original png you mean?

You can use srcset to solve it:

<picture>
  <source srcset="img/cat.webp" type="image/webp">
  <source srcset="img/cat.jpg" type="image/jpeg"> 
  <img src="img/cat.jpg" alt="Alt Text!">
</picture>

BR Nicolai

Nicolai Pedersen

Posted on 27/11/2020 08:42:56

Original png you mean?

You can use srcset to solve it:

<picture>
  <source srcset="img/cat.webp" type="image/webp">
  <source srcset="img/cat.jpg" type="image/jpeg"> 
  <img src="img/cat.jpg" alt="Alt Text!">
</picture>

BR Nicolai

René Poulsen

Posted on 27/11/2020 09:31:06

By "the original PNG" I mean the image I actually supply as "Image" in the getimage url: /admin/public/getimage.ashx?Image=/Files/Templates/Designs/designname/assets/img/image.png&Format=webP&Width=258.

So if webp is not supported it would be really nice if the getimage just used "image.png" instead of converting it to a jpg. I know how the picture element works ;-) To me it would just make sense that the original image would be used if webp is not supported - instead og converting image.png to a jpg with a white background.

You must be logged in to post in the forum

Developer forum

getimage and transparent webp images on iOS

Replies