I've just put some photos up online and I noticed that they photos appear to be a different colour in Firefox and Safari to IE and Chrome... Any ideas on what the issue could be? Due the browsers interpreter colours spaces differently or something?
Cheers
Anthony
They interpret color spaces differently because some browsers ignore ICC color profiles that are part of the images themselves. Safari and Firefox 3+ don't however, though Firefox needs to be configured to enable it.
Here's a related link: http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html
I've noticed that png format especially differs cross browser wise. When I noticed this, I converted to jpg and it resolved it.
Related
I know this isn't a new problem and I've done a full day (literally) of research. I use the latest Xcode 6, and I'm trying to use all PDF files as vector art resources. However, when I export these images from Illustrator in sRGB (sRGB IEC61966-2.1) , these images show up noticeably darker than if I used a png file.
Some previous suggested solutions are: setting Illustrator file color profile to "web" and choose color space "RGB", and exporting to pdf with Illustrator converting the color space to "sRGB IEC61996-2.1". The latter worked for me for one of the images... And today when I tried the same thing it didn't work!
So I tried all the other solutions, I retried, restarted, tried using different programs, renaming resources, cleaning the project... Nothing worked! The colors still look darker on screen, and the old PDF icon I made look perfect still!
The PDF looks perfect in any other viewer, including Xcode itself, by the way. It's when Xcode compiles, the images get broken (PNG files are generated, and something is wrong with their colorspace).
This is driving me nuts... Anyone else having this problem?
Depending on the screen, you can tell that the center button is quite a bit lighter than the other two icons. I intersected two just to show how distinguishable it is. But on my MacBook Air, they appear identical. Perhaps this has to do with what people say about Apple taking the compiling machine's color space into account? On my iPhone and MacBook they look very different.
Update If I change my MacBook Air's display -> color profile to sRGB, I can clearly tell the difference now. I'm retrying importing the PDF,and maybe the conversion will be correct. Will update.
I've had tremendous troubles with this. And I finally figured it out.
Apple uses sRGB for iOS. To do this you must save your pdf (convert to) in sRGB. I do this with Illustrator -> new -> profile = "web", color space = "RGB" -> save as PDF -> (in options) convert to sRGB. This is suggested by many others in similar questions' solutions. The next... Is what I found out. A trap, if you will.
CAUTION! When you copy past paths over to the new artboard in RGB, the RGB values may have been changed by Illustrator. This took me ages to figure out... Even though the saving to PDF part was right, Illustrator broke it by changing the values by default, making everything darker and more dull.
Hope this helps!
I've developed a fairly graphic heavy website.
Mostly it is fully functional but a few users are observing a few corrupted background images when viewing from iPad or iPhone.
It doesn't seem to make a difference whether the image is a .jpg, .png or DataURI image.
Screenshots of the corrupted images can be seen here http://imgur.com/a/UbRim
On an iPhone, refreshing the page doesn't make a difference. On and iPad apparently, it does. Most of the time and most of the images look absolutely fine.
The website is http://www.alternative-tune.co.uk/
The only other thing I wonder is could it be the color profile (simply because I don't have a clear understanding of them). Photoshop tells me it's:
RGB: sRGB IEC61966-2.1
CMYK: US Web Coated (SWOP) v2
But surely this is ruled out by the fact that it works fine most of the time?
Does anyone have any ideas what's going on?
Many thanks,
Ben
If you make a simple website with the code:
<div style='background-color: rgba(0,0,0,.05);width:50px;height:50px'></div>
and view it on various devices, you'll see very different colors.
On my iPhone and iPad, it looks white but on my MacBook you can see a definite light grey that looks close to #fafafa; I haven't tested thoroughly on other devices but I think that Android Chrome will sometimes display a third in between color.
This isn't an issue of different screen color capacities, because the iPad is definitely capable of displaying #fafafa.
So what's the story and is there any way to fix it?
rgba(0,0,0,.05) is an incredibly light color. A 5% tint is not visible on many lower end LCDs - especially 6bit panels. Personally, when I use RGBA I only tweak by 10% increments. Also, you will notice that #fafafa and rgba(0,0,0,.05) don't display the same because they aren't the same. #f2f2f2 is rgba(0,0,0,.05) (at least in Photoshop.)
You also have variances between the type of RGB. Devices also adapt differently based on lighting conditions - and they don't adapt the same way. There's also different screen types like AMOLED
From my experience that normally happens because of the contrast on the different screens and brightness settings. My suggestion is play with those.
Also check this for browser compatibility but those you mentioned should be ok:
http://css-tricks.com/rgba-browser-support/
Last time I saw someone asks why Safari on iPad doesn't show some 1920x1440 jpeg with real size & I solved that puzzle. You have to use a progressive-encoded jpeg. However, I find another different problem.
Say, demo.jpg is a progressive-encoded jpeg with 2000x3000 & I upload it to my website. I then access it via url ...demo.jpg, Safari will show it with 2000x3000 size, perfect.
Now I make a most-simple html file named mypic.html. This html has only img tag with src=demo.jpg or src=demo.jpg width=2000 height=3000 inside body. Now I access it via url ...mypic.html. This time Safari show a very small icon of a question mark?
Does anybody know why the latter case fail?
The problem is about the memory available to Safari. The total amount of RAM is just 256MB, and Safari stops showing the image of much smaller size. You need to scale them down.
I have a website that I need to make some images that are colored, with a 45% opacity, so you can see through to the background. My problem is that for obvious reasons I cannot use a .png. I have used a gif. When I get it on the site, the opacity has read as far as the color, but you cannot see through it. How do I make this happen
EDIT
I don't want to use an IE6 hack if I don't have to. As far as I have tried, there are no scalable hacks.
GIF does not support alpha transparency. Why is it so obvious that you cannot use PNG?
PNG works in all modern browsers, whereas alpha transparency is not supported in IE6 natively. However, there are many fixes for this available on the good 'ol webernets..
If you absolutely must support "dumb users", force them to use Chrome Frame, the "i'm in ur browser making ur browser another better browser" browser. Chrome Frame is a plugin for IE that renders the page using the Chromium engine from Google.
gif has only 1 bit of opacity, you can't have 45%
GIF transparency is either all on, or all off. It does not support partial transparency. PNG however does have partial transparency support. Unless you have a specific requirement to not use PNG images, I see no reason they could not be used.
Use transparent PNG to gain the full Alpha Channel, and then a fall-back CSS for Internet Explorer 6 that uses GIF, or one of the many workarounds to support transparent PNGs in IE6 (except the "workarounds" using AlphaImageLoader)
As stated above GIF only has 1 bit opacity, meaning On or OFF, nothing in-between. That is the same as 8-bit PNG.
Assuming the reason you can't use .PNG is because you're required to to fall back and work in older version of Internet Explorer. Unforuntately there is no good way to make it work. There are hacks that you can use to get PNGs to work properly in IE6, but if you have to support all the way back to IE5 you're SOL.
After playing around with different transparent GIFs, some are unstable and cause CSS glitches. For example, if you have an <img> and you use the tiniest transparent GIF possible, it works fine, however, if you then want your transparent GIF to have a background-image, then this is impossible. For some reason, some GIFs such as the following prevent CSS backgrounds.
Short but Unstable
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
I would advise using the slightly longer and more stable version as follows:
Stable But Longer
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7