Why do some WebP Images appear upside down?

by @edent | | 1 comment | Read ~137 times.

A few years ago, Google introduced a new image format to the world - WebP. It purports to be a superior image format for the web but, like all new toys, it takes a little while for the bugs to be ironed out.

I found a curious case where some WebP images are rendered upside down!

Three renderings of WebP on Android Browsers-

On the left is Opera for Android, centre is Chrome for Android, and on the right is Firefox for Android. Firefox is the only one which renders the lower image correctly. The upper image is also WebP.

This also seems to affect iOS.

The original article has since replaced the WebP images with standard JPGs - but I managed to grab one of the images before they were removed.

A WebP formatted image which appears to render upside down on some platforms.
(Photo via David Wilfert)

I'm not sure if my Android phone has somehow mangled the file when it was saved, or whether the image was like that to start with.

There are, I suppose, three possibilities.

  1. Both iOS and Android have a bug with rendering some WebP images.
  2. Buzzfeed's CDN has a bug which rotates some WebPs - and doesn't serve them to Firefox due to lack of support.
  3. A collective hallucination.

For now, I'm tempted to put the blame on a buggy image conversion - that seems to be the simplest explanation. Either way, a salutary reminder to check your content in several different browsers.

One thought on “Why do some WebP Images appear upside down?

  1. Tom says:

    My money would be on the EXIF "orientation" property. The orientation property rotates/flips the image (allowing modifying just a few bits instead of having to rewrite all the image data) and support for it is pretty patchy. I would guess that when a Buzzfeed author uploads an image, it gets processed in two different ways: 1. compress the JPEG so that it's smaller, and 2. convert the JPEG to WebP so that it's even smaller. I reckon the tool/library used for #1 takes account of the orientation property and the tool/library for #2 ignores it.

Leave a Reply

Your email address will not be published. Required fields are marked *