Cloudinary f_auto serve jp2 files in Chrome (not support)

Comments

3 comments

  • Avatar
    Tamara Yulevich

    Hi Corentin, 

    This happens most likely due to opening the Browser Emulator and choosing iPhone:

    When using f_auto, the CDN logic takes into consideration a number of headers including Accept (which the browser uses to show which MIME-Types it is able to understand - such as image/jp2, image/webp etc) as well as the User-Agent header.

    In this case, the most likely reason for the broken image you are seeing is that the Dev Tools simulates a different device, iPhone, and that sends a different set of headers, including User-Agent and tells us it supports JP2 format, which means we serve back a JP2 image. JP2 is a format that cannot be displayed in Chrome and that is why the image appears as broken.

    Based on previous queries in regard to this topic, one of our colleagues actually followed up and was in contact with the team working on the Dev Tools functionality for Chrome. The Dev Tools team confirmed that they simulate the iPhone User-Agent for responsive mode, but in this case, it will conflict with the ability of the Chrome browser to display the JP2 format our f_auto will serve, which is most likely the behavior you noticed.

    The DevTools team mentioned they will not implement anything that will allow end-users to "detect" when someone is using Dev Tools versus if someone is using the actual browser - a purposeful decision to stay invisible for debugging purposes.

    To resolve this, you can update Chrome's mobile testing settings to use a different User-Agent header, test with a tool that does support the JP2 images we're sending, change your URLs to not use f_auto when testing, or we can also completely disable JP2 from being used when you use f_auto on your requests.

    Best regards,

    Tamara

    P.s we have a note about it in the Docs too:
    https://cloudinary.com/documentation/image_optimization#tips_and_considerations_for_using_f_auto

    Using developer tools for f_auto testing: Be aware that if using developer tools to emulate different browsers, Cloudinary may return a format that is unsupported by the main browser, so images may not display as expected. For example, if using Chrome dev tools to emulate an iPhone Safari browser, a JPEG-2000 may be returned, which Chrome does not support.

    0
    Comment actions Permalink
  • Avatar
    corentin

    Thank you very much for your detailed answer. 
    I understand the problem much better.
    I tried removing the Iphone emulator in Chrome and, indeed, everything works as expected and Cloudinary returns a webp file rather than jp2.
    Thanks a lot!

    0
    Comment actions Permalink
  • Avatar
    Aleksandar Kostadinov

    You're welcome, Corentin! Glad the details were helpful.

    0
    Comment actions Permalink

Please sign in to leave a comment.