[Mobile] Hero banner is missing in home page

[josteph]

Description

Only happens in mobile screen, desktop looks fine.

Mobile

https://res.cloudinary.com/wargabantuwarga/image/upload/c_scale,w_720,q_90,cs_tinysrgb,f_auto/hero_banner_desktop_zat71c

Desktop

https://res.cloudinary.com/wargabantuwarga/image/upload/c_scale,w_720,q_90,cs_tinysrgb,f_auto/hero_banner_desktop_zat71c

Expected Behaviour

Shows image correctly

Additional Information

The image URL requested is the same https://res.cloudinary.com/wargabantuwarga/image/upload/c_scale,w_720,q_90,cs_tinysrgb,f_auto/hero_banner_desktop_zat71c but it isn't loading correctly on mobile screen

Response headers for Mobile

content-type: image/jp2

Response headers for Desktop

content-type: image/webp

[kelilipan]

It seems, this only happens on devtools and only when I choose "apple" device type.

when I'm using "Responsive" it works

I think we need real devices with small screen to reproduce this

EDIT:

• Cloudinary return a different file format because f_auto. It will automatically decide which format is better.
  https://support.cloudinary.com/hc/en-us/community/posts/360043026611-some-images-are-not-served-as-webp-with-f-auto-in-chrome

• DevTools also change the browser user-agent to iPhone
  
  So cloudinary will return image/jp2 format which is not supported by our chrome https://caniuse.com/jpeg2000, that's why it failed to render.

this is fine tho...
but still, need to test on the old iPhone devices

[josteph]

The banner image is correctly displayed in iPhone 5S Safari as well.

Should we close this issue?

[kelilipan]

Yes, i think we should.
it works as intended.