5 ms·

CSS Image Orientation Lands in Firefox 26

51 points by swift 13y ago

AndreasFrom 13y ago
Uhmm, all the images are oriented right in Safari on my iPad.
- widdershins 13y ago
  You mean correctly?
  - AndreasFrom 13y ago
    Yes, sorry about the ambiguity.
- jasonlotito 13y ago
  But not Safari on the desktop. So, what's your issue?
  - foxhill 13y ago
    from what i can see, both chrome and safari respect the rotation data.
    - swift 13y ago
      Only on the iPad, where they're both using Apple's iPad version of WebKit. This isn't standards-compliant behavior. I had no idea that there were any browsers that actually did this!
      - lttlrck 13y ago
        And iPhone.
0x0 13y ago
I never understood why the EXIF rotation tag was invented. It's caused so much pain and wrongly rotated images. Why can't whatever software writing those tags just rotate the JPEG blocks instead? "jpegtran" can losslessly rotate and flip JPEG images fine.
- davej 13y ago
  My understanding is that you can't perform lossless rotation on a jpeg unless it's dimensions are a multiple of 8. I'm not 100% sure about this so I'm happy to be corrected.
  - 0x0 13y ago
    That's true, but how many cameras produce photos with dimensions that are non-multiples of 8?
    - harshreality 13y ago
      There are no cropped images on the internet?
      - Tloewald 13y ago
        Once an image is cropped it's not going to be losslessly saved. You can crop images in some cameras, but I suspect they maintain multiples of 8.
- valisystem 13y ago
  EXIF rotation tags exists because it was way more simple for camera manufacturer than actually move the pixels around depending on orientation sensor on camera. That said, what I don't understand myself is software devs that thinks it's ok to rotate the pixels and saving the image with EXIF tags without updating the rotation one.
  - benjamincburns 13y ago
byuu 13y ago
What's the technical reason that Firefox (and presumably other browsers) can't just read the JPEG EXIF data to obtain the proper orientation? This CSS tag could still be marginally useful: you could store only one corner and one side of a custom border, and flip the image for the other three. Once the tag is ubiquitous, of course.
- paulrouget 13y ago
  > What's the technical reason that Firefox (and presumably other browsers) can't just read the JPEG EXIF data to obtain the proper orientation? It's what `image-orientation: from-image` does. But it can't be done automatically (you have to explicitly use this property), that would break the web: until now, images were not rotated automatically, so developers might have rotated their images in CSS (`transform:rotate(90deg)`). If Firefox were to rotate automatically the images according to the exif data, you'd get a double rotation, or unexpected image rotations.
  - ricardobeat 13y ago
    If people took the time to build a custom solution using CSS/js to display the images, why not just pre-process them instead? IMO respecting the orientation tag by default wouldn't be unexpected at all. Btw, images are oriented correctly on Mobile Safari.
    - untog 13y ago
      Much like the CSS border-box box sizing property makes a lot more sense, it would still cause issues if the browser changed behaviour. However, if it's your site, it's as simple as adding *{ image-orientation: from-image } to your CSS file to apply it everywhere.
      - erichurkman 13y ago
        I know having a wildcard the end of a rule is non-performant ("ul > " for example has to check the parent of every* element to see if is a UL element; or even worse, "ul *" would have to check the entire ancestor tree of every element). Is there a performance impact of applying that rule to every element?
ape4 13y ago
Will this be misused. Will sites have tons of rotating images. The new blink?
- radq 13y ago
  Rotating images were already possible before with transform:rotate().

51 points by swift 13y ago

AndreasFrom 13y ago

Uhmm, all the images are oriented right in Safari on my iPad.

widdershins 13y ago
You mean correctly?
- AndreasFrom 13y ago
  Yes, sorry about the ambiguity.
jasonlotito 13y ago
But not Safari on the desktop. So, what's your issue?
- foxhill 13y ago
  from what i can see, both chrome and safari respect the rotation data.
  - swift 13y ago
    Only on the iPad, where they're both using Apple's iPad version of WebKit. This isn't standards-compliant behavior. I had no idea that there were any browsers that actually did this!
    - lttlrck 13y ago
      And iPhone.

0x0 13y ago

I never understood why the EXIF rotation tag was invented. It's caused so much pain and wrongly rotated images. Why can't whatever software writing those tags just rotate the JPEG blocks instead? "jpegtran" can losslessly rotate and flip JPEG images fine.

davej 13y ago
My understanding is that you can't perform lossless rotation on a jpeg unless it's dimensions are a multiple of 8. I'm not 100% sure about this so I'm happy to be corrected.
- 0x0 13y ago
  That's true, but how many cameras produce photos with dimensions that are non-multiples of 8?
  - harshreality 13y ago
    There are no cropped images on the internet?
    - Tloewald 13y ago
      Once an image is cropped it's not going to be losslessly saved. You can crop images in some cameras, but I suspect they maintain multiples of 8.
valisystem 13y ago
EXIF rotation tags exists because it was way more simple for camera manufacturer than actually move the pixels around depending on orientation sensor on camera. That said, what I don't understand myself is software devs that thinks it's ok to rotate the pixels and saving the image with EXIF tags without updating the rotation one.
- benjamincburns 13y ago

byuu 13y ago

What's the technical reason that Firefox (and presumably other browsers) can't just read the JPEG EXIF data to obtain the proper orientation? This CSS tag could still be marginally useful: you could store only one corner and one side of a custom border, and flip the image for the other three. Once the tag is ubiquitous, of course.

paulrouget 13y ago
> What's the technical reason that Firefox (and presumably other browsers) can't just read the JPEG EXIF data to obtain the proper orientation? It's what `image-orientation: from-image` does. But it can't be done automatically (you have to explicitly use this property), that would break the web: until now, images were not rotated automatically, so developers might have rotated their images in CSS (`transform:rotate(90deg)`). If Firefox were to rotate automatically the images according to the exif data, you'd get a double rotation, or unexpected image rotations.
- ricardobeat 13y ago
  If people took the time to build a custom solution using CSS/js to display the images, why not just pre-process them instead? IMO respecting the orientation tag by default wouldn't be unexpected at all. Btw, images are oriented correctly on Mobile Safari.
  - untog 13y ago
    Much like the CSS border-box box sizing property makes a lot more sense, it would still cause issues if the browser changed behaviour. However, if it's your site, it's as simple as adding *{ image-orientation: from-image } to your CSS file to apply it everywhere.
    - erichurkman 13y ago
      I know having a wildcard the end of a rule is non-performant ("ul > " for example has to check the parent of every* element to see if is a UL element; or even worse, "ul *" would have to check the entire ancestor tree of every element). Is there a performance impact of applying that rule to every element?

ape4 13y ago

Will this be misused. Will sites have tons of rotating images. The new blink?

radq 13y ago
Rotating images were already possible before with transform:rotate().