After GD-Resampling: image looks different in Firefox and IE

[the-ninth]

Hi Everybody,

I am using PHP/GD to resize a photo to a smaller size and my problem is that when I show the result in Firefox, it looks different from the original. The picture has more contrast, especially the dark areas are even darker. When I show the result in Internet Explorer or the Windows Photo Viewer it looks the same as the original photo.

The problem also only occurs when I resize the photo with PHP/GD. When I resize it with Adobe Lightroom, then the result looks correct in Firefox and Internet Explorer.

Here is an example:

With PHP/GD: http://www.the-ninth.com/demo/demo_php.jpg
With Adobe Lightroom: http://www.the-ninth.com/demo/demo_lightroom.jpg

When comparing the two photos in Firefox you'll see the difference. In IE they look nearly the same.

I am using the following functions to resize:

ImageCreateFromJpeg to read the original image,
ImageCreateTrueColor to create the new image,
ImageCopyResampled to write the resized image to the new image and
ImageJpeg with quality 100 to save the new image.

Before saving I sharpen the new image. However that is not the problem, I already tried without sharpening and the picture still looks different in Firefox.

Any ideas what I am doing wrong?

Thanks and regards, Robert

[pickle]

I don't notice any difference between the two photos.

I honestly wouldn't worry at all about one browser having a bit higher contrast than another. No two monitors are going to show the picture exactly the same anyway (due to different monitor settings, ambient light, etc).

[the-ninth]

Hi,

I did not test yet how this would change for color photos. What I read from others with the same issue on the web, it is more severe with color photos than with b&w photos. In any case, I put a lot of efforts in my photos, so I do not want to mess up anything in the presentation.

By now I have found out what the problem is. I export the photo with color profile sRGB. When GD resizes the photo, the color profile is lost. GD is not capable of storing color profiles. Now, when the browser shows the photo without profile, it depends on the browser which profile it defaults to. For the current IE it seems to be sRGB, so the picture looks the same. For Firefox it is the system/monitor profile, which in many cases is sRGB as well. That is probably why you do not see a difference. But I do have a profiled monitor and therefore a custom system/monitor profile. So Firefox uses that instead of sRGB and therefore shows the picture wrongly. Firefox can be forced to use sRGB for images without profile by setting gfx.color_management.mode to 1. Then the picture is the same in Firefox as well, even if you have a custom system/monitor profile. But of course the majority of users will not make that change.

So the whole issue is limited to users who a) have a calibrated monitor and b) a browser that does color-management, which currently is FF and Safari. I think IE9 might do it as well.

But even if the problem is limited to a small number of users, I'd like to fix it. ImageMagick should be able to store color profiles, but currently does not work on my host account. I am in contact with their support team to fix that, then I will try to recode my app to at least partly use ImageMagick.

Cheers, Robert

[josh]

After staring at the dude's flexing bicep for 2 hours, I noticed the shadow underneath looks darker and aliased a tiny bit in FF, but not in chrome. I noticed the same with this randomly chosen (but similar) image from Google. http://www.wallpaperez.net/wallpaper/ce ... te-754.jpg

However the difference is way less with your light room photo, I saved both and light room's is 212 rather than 189KB.

One is at 72 DPI the other at 240. This is your fault, not any browser, or libraries. Read this link... http://bytes.com/topic/php/answers/5948-dpi-php-gd

I also recommend image magick over what you're doing.... http://www.imagemagick.org/script/comma ... hp#density

[josh]

On second though its not the DPI, saving a file at 72dpi and 1dpi produced no difference in file size, as in your photo.

[josh]

I even found this in the PHP documentation's comments:

It should be noted that the imagecopyresampled() function is much more blurry than Photoshop CS's default bicubic funtion. And looks similar to a blury version of Photoshop's bilinear function. The documentation fails to note which algorithm is used in resampling.

ImageMagick allows bicubic resampling

Here's a good chart on wikipedia comparing qualities. The difference is negligible but definitely noticeable to the trained eye! If ImageMagick can in fact re-sample more accurately its worth trying out?

A zoomed small portion of a bitmap, using nearest-neighbor filtering (left), bilinear filtering (center), and bicubic filtering (right).
http://upload.wikimedia.org/wikipedia/c ... sample.png

More info http://www.imagemagick.org/Usage/resize/#best_filter
(also scroll up and look at the other "shrinking" example)

Here's another article that's even better. http://www.xs4all.nl/~bvdwolf/main/foto ... sample.htm

[the-ninth]

Thanks for your comments, but the issue has nothing to do with the quality of the resizing. I do sharpening with the unsharp mask from Torstein Hønsi and I am satisfied with the quality.

The difference I see comes from the lost color profile and will only be seen on systems with a custom system/monitor profile, like when you get when you calibrate your monitor. See my last posting above for details.

Cheers, Robert

[josh]

Both images are RGB 8# in photoshop.... I don't get how you definitely see that GD reverted something w/ color profiles.

Going to edit / convert to profile, under "source" it says "sRGB" for both files... just wondering how you're sure.

[the-ninth]

Hi Josh,

Try "Assign Profile" in PS. For the Lightroom version it is set to sRGB, for the PHP version it is set to "Don't Color Management This Document". "Convert to Profile" needs a source color space and defaults to sRGB if there is none in the file. You can test this with the two following files. This version were exported with AdobeRGB. In the Lightroom version you will still see AdobeRGB in "Convert to Profile", while in the PHP version it defaults to sRGB.

http://www.the-ninth.com/demo/demo_php_argb.jpg
http://www.the-ninth.com/demo/demo_lightroom_argb.jpg

What makes me sure as well is that if I make Firefox default to sRGB by setting gfx.color_management.mode to 1, the picture is displayed correctly (if it was exported with sRGB, like the two I posted initially).

By now I also found some discussions on the web, all coming to the same conclusion. GD does not support color profiles and strips them if you do resize or other operations:

http://www.google.com/search?q=php+gd+c ... =firefox-a

Cheers, Robert

[the-ninth]

Hi,

I was not correct in all details of what I described. Here a few corrections regarding the browser behavior:

IE does not do color management, it shows both images the same because it ignores embedded color profiles anyway. However, both images look slightly different from how they look in Adobe Lightroom, because there is no color management.

Firefox does color management. If gfx.color_management.mode is set to 2 it only manages images with embedded profile. So in mode 2 the Lightroom version with embedded profile looks the same as in Adobe Lightroom itself. The PHP version without embedded profile is displayed the same as in IE, i.e. incorrect. If the mode is set to 1, then Firefox does color management for images without embedded profile as well and uses sRGB for those. So in mode 1 the image is shown correctly if the color space was sRGB. The AdobeRGB images would be incorrect in mode 1 as well.

Cheers, Robert

[Apollo]

On second though its not the DPI, saving a file at 72dpi and 1dpi produced no difference in file size, as in your photo.

Note that the DPI can never have any influence on the image or filesize whatsoever. It is in fact a completely arbitrary number, which is just as unrelated to the actual image as its filename, for example.

[josh]

I swear that setting has no difference for me, and the color dynamics are still different in each browser... but w/e glad you found a solution satisfactory for you. In firefox it just seems a tad darker, but I can't see any anti-aliasing like I noticed before, in either image at any setting. Maybe my eyes were playing tricks on me before.