Need help with converting images properly

[encrypted21]

I have a very lame question (probably).

On my website I use a small image upload script. It generates thumbnails and pictures for es-commerce. However, recently I've noticed that some images kinda 'loose color'.

Sample can be observed with this picture of a red sofa here:



Converted image on the left, original - on the right.

I do think it's something to do with colorspaces probably. My code is very simple and looks like this (I'll skip some code and leave only Imagick parts):

$image = new Imagick($picfile);
Imagick::setResourceLimit (6, 1);

$image->resizeImage($maxwidth,0,Imagick::FILTER_LANCZOS,1);

$image->cropThumbnailImage($maxwidth, $maxheight);

$image->writeImage($path);

$image->destroy();

I probably need to add up some line in the beginning to convert this to srgb or something. Can someone point me out to what should be added? Thanks!

[snibgo]

I probably need to add up some line in the beginning to convert this to srgb or something.

Without seeing your input file, guessing is difficult.

Why have you shown obviously different images for before/after comparison? Why not use the same image? And post them as two separate images, two separate files.

What version IM are you using? If older than 6.9.0, I suggest you upgrade.

[encrypted21]

Ok. Updated imagick, but that's not a source of the problem as it seems.

Seems like it's browser connected for some reason. In IE everything is pretty bright. In Chrome, FF, site images are slightly more 'pale' for some reason.

UPD: Really strange issue.

In IE this red is bright red regardless. In Chrome and FF this picture is 'more orangey', comparing to original website picture:

http://www.comfyco.com/store/leather_so ... -6412.html
https://www.foagroup.com/wezen-5.html

[snibgo]

They look the same to me, and the pixel values at a couple of sample locations are the same.

You say the source image is from https://www.foagroup.com/wezen-5.html (just one sofa), and the generated image is at http://www.comfyco.com/store/leather_so ... -6412.html (two sofas), so that can't be correct.

IM v6.7.2-7 is very old. I suggest you consider an upgrade.

[encrypted21]

Thanks for your replies, snibgo. As I said above, most likely it's not seems it's Imagick related.

imagick module version 3.4.3
imagick classes Imagick, ImagickDraw, ImagickPixel, ImagickPixelIterator
Imagick compiled with ImageMagick version ImageMagick 6.7.2-7 2016-06-16 Q16 http://www.imagemagick.org
Imagick using ImageMagick library version ImageMagick 6.7.2-7 2016-06-16 Q16

Just upgraded Imagick, that's what's it's upgraded to in whm/pecl packages.

Could you open up those two links in different browsers and just say if the shade of red is the same to you everywhere? I can 100% say that shade is different in Chrome and FF for me, but not in IE.

[fmw42]

Be sure you convert to and add an sRGB profile to your images. If they do not have an sRGB profile, then they might look different on different viewers/websites, because they interpret an RGB image differently. With the profile, they will all interpret the image the same for display if they honor the profile.

[snibgo]

Using Internet Explorer v11.0.9600.18618 and Firefox 52.0.2, the images look the same, to my eyes. I don't currently use any other browsers.

fa-6412-lg.jpg (with two sofas) has an embedded profile. Some browsers use embedded profiles, if setup to do so, but others ignore embedded profiles. However, the profile is sRGB, so I would expect this to make little or no difference.

(Fred beat me to it. For best Web compatibility, I always suggest that images are encoded as sRGB. A profile should then be redundant, but may be needed for some browsers or computers.)

[fmw42]

I have had more consistent results across browsers using profiles than not using them.

[encrypted21]

Hm, so I just use:

$image = new Imagick($picfile);
$image->transformimagecolorspace(\Imagick::COLORSPACE_SRGB);

regardless? ...

I did see those images, but unfortunately, they're all RGB. No different profiles. However, they do look different in different browsers. In FF, for example, I have this:



this is somewhat strange image of previews for all extra pictures for this product. You can see 2 first images are 'darker' than others, but they all have the same colorspace initially.

[fmw42]

The coloration of the two red sofas in the same image at https://www.foagroup.com/wezen-5.html look quite different to me.

[fmw42]

Why are you so sure that the coloration of all the sofas should be the same. They might be different plus the lighting while taking the pictures could make they look different colors.

Your code does not add any profiles.

[encrypted21]

>Why are you so sure that the coloration of all the sofas should be the same

Because I see the source images and they're all 100% the same color + they're all the same on manufacturer's website for me + on my site in IE.

[snibgo]

From the documentation http://phpimagick.com/Imagick/transform ... &channel=1 , IMagick's transformImageColorspace is equivalent to IM's "-colorspace".

I suggest you should use "-colorspace" with no profiles, or "-profile" without "-colorspace". Trying to use both systems on the same image is a bad idea.


All my comparisons were of the corresponding sofa, the one on the right where there are two.

[fmw42]

I see two different color red sofas in the first image when I go to your link. All of the following browsers show that difference (safari, opera, chrome, firefox). If they are in the same photo, then the difference cannot be anything but an actual difference in the colors of the sofas.

[fmw42]

Using -colorspace is not the same as adding a profile. Profiles give more consistent viewing across browsers in my opinion. As snibgo says, do not use both.