I am having a strange issue with displaying JPG image on browser. The image color is mostly washed out while being viewed on any browser (Chrome, IE and FF). But it's fine when using desktop applications (Windows Photo Viewer, Paint, etc.) to view.
You can see the example here: https://dl.dropboxusercontent.com/u/2095747/asp.jpg
Does anyone know any particular reason for it?
Regards,
Harry
The image uses a type of embedded color correction that browsers do not support.
Since you seem to have used Photoshop to generate that image, you should reopen your source file and re-export the image using the "Save for web" action, which will either not embed a color profile at all, or use a browser compatible format.
Related
I have an angular 2 application in production environment that allows you to choose a profile picture. Recently, performing tests with safari mobile, specifically for IOS 13.3.1 version(older) and IOS 13.4.1(new) version. I noticed that the image is shown rotated depending of safari browser version used (I built a stackblitz for this that you can review):
IOS 13.3.1 version(older)
IOS 13.4.1(new)
When I take images from an iPhone's in portrait mode and upload the image to my app it is shown rotated only for IOS 13.3.1 version(older). However, I examined the EXIF meta-information images from each of my devices and found that both images have the same value in the orientation property:
IOS 13.3.1 version(older)
IOS 13.4.1(new)
My question is. Why does the image display change depending on the IOS version, knowing that in both cases the orientation EXIF is the same value (6)?
This is a subject that worries me since I had already solved this problem by rotating the image depending of EXIF orientation value for its correct display (e.g. exif.js have been created to handle this situation by detecting the exif orientation flag), but this problem now appears again with the new version of IOS. What would be an example of code that I can use to make it sustainable over time? Is there not a consensus among the browsers to manage the orientation of the images?
What is the explanation for this illogical behavior?
Thank you so much!
We also stumbled upon this when our mobile suddenly behaved differently and finally find the root cause of this.
Both WebKit (iOS) and Android (Chrome) have just recently changed the default behavior of the image-orientation CSS propterty. While it was none before, it is now from-image. This means: Before, they ignored the EXIF data of an image by default, while they are now using it to auto-correct the image. Which break our own auto-correction based on the exifreader library.
Here are some relevant links:
https://www.fxsitecompat.dev/en-CA/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/
https://bugs.webkit.org/show_bug.cgi?id=89052
Funny enough, also the Slack team seems to have run into this:
https://bugzilla.mozilla.org/show_bug.cgi?id=1634180
Fortunately, the author of the exifreader library (who just some weeks later ran into the same problems) also guided me to a way to detect the behavior. You can find his answer here:
https://github.com/mattiasw/ExifReader/issues/99#issuecomment-640217716
I also noticed that Modernizr has a test for this, so I am actually using a custom modernizr build now to detect the browser behavior.
The webkit browser is rotating the images before you upload them based on the EXIF data then it gets applied again by your app. We were able to confirm this on new (81) version of Chrome and Mobile Safari on 13.4. then the app is rotating them further and it gets twisted.
When these PDFs are opened in browser in Google Chrome the colours are changed drastically, but when opened in another browser or opened in Preview on Mac the colours go back to normal.
It also doesnt occur in some other languages.
You can see in the screenshot below what it should display (top) and what it is displaying (bottom).
The first page consists of a single large JPEG2000 compressed image: 8 bit indexed color, 1276 x 1790 pixels.
A quick look at a comparison of browsers shows Chrome does not support JPEG2000 (officially at least, since you still got to see something).
There seem to be some plugins that add JPEG2000 support to Chrome, but
that is a local solution, it does not fix the issue for all users; and
Chrome uses its own internal PDF renderer, so it might not work "inside" PDFs.
I've created a SVG using Inkscape. Now, I've uploaded it to my page and it shows different in different browsers but I don't know what's the issue.
Firefox: The best render
Chrome: Fails on the left side
For at least, I want that Chrome render equals quality of Firefox render but I don't know how?
SVG File: https://github.com/AdrianArroyoCalle/adrianarroyocalle.github.io/blob/master/city.svg
Web: http://adrianarroyocalle.github.io
Also mention that if I open the SVG with Chrome without an HTML page, it shows like Firefox, but reduced.
I have saved the image below using an embedded sRGB profile. Photoshop is set up with the proper color settings (RGB is sRGB IEc61966-2.1) and proof setup is "Internet Standard RGB (sRGB)". The image looks the same in Photoshop, Safari, and Firefox. But viewing it in Chrome 23 gives me a very dull image as if its not reading the embedded color profile.
Pages such as this suggest that Chrome is properly managing color profiles. So am I doing something wrong here? Is it possibly a bug in how Chrome is handling color profiles? I have seen Chrome do some weird stuff (color profiles being obeyed and ignored back and forth as I scroll) in previous versions.
You could try removing the colour profile, and then saving out the image again following the guidelines from this guy »
Unfortunately you might have to fiddle around with your image once the colour profile's been stripped out but at least then you'll have a clean slate.
Use # color code. it works better than R,G,B and...
Animated PNG images (APNG) have been around for quite a while in an attempt to add this functionality of the GIF format to PNG images. According to Wikipedia they are supported in Opera (>= 9.5) and in Firefox (>= 3.0). The first frame in the APNG animation is displayed if a browser doesn't support APNG images, since it was defined as an extension of the widely supported PNG format. Suppose you have an animated PNG that you want to show in your site and you want to warn your users if their browsers doesn't support it. How would you do it?
Make the first image display for a very short period of time, and have it be a big, ugly error message.
If the first frame isn't a useful image, and the animation is crucial, it's probably too early be using them in your website. Better to wait until more browsers support it.
If for some reason they're vital and must be used then I'd include an error message in the first frame like Adam Jaskiewicz suggested, however, users that support APNG will see the warning for a brief period of time.
Apparently support can be detected as in this article on Ajaxian