OpenCart Community

THIS PROBABLY HAPPENS TO YOU ALL WITHOUT EVEN KNOWING IT - OC MAKES YOUR PRODUCT IMAGES LOOK UGLY AND DULL ON MANY CUSTOMER'S MONITORS... SO READ ON

i honestly tried to google out solution but had no luck so i decided i have to ring the alarm myself... i already spent days trying to solve this serious problem but i had to turn to the community to help me on this one... its potentially affecting all OC users whether they notice it or not...

Ok many of us spend hours fine tuning the product photos in Photoshop and Lightroom… we tune colours, saturations, brightness, contrast, everything… we want our products to look their best… YOUR PRODUCT IMAGES SELL THE DAMN THING...

to make your products look and SELL the best... you have to do the fine-tuning of colours and saturation and contrast in reasonably color managed workflow using color profiles like AdobeRGB and sRGB… all printed graphics and photos rely on color profiles and color management to make sure the images you have in magazines will make you BUY THE PRODUCT...

when we are happy with the product images we upload them into 'public_html/image/data/Product/' everything is fine and than OPENCART takes these perfect photos we took hours finetuning (and saved with color profiles to retain perfect colors and saturation across monitors and devices) and OPENCART caching engine STRIPS AWAY the color profiles whenever it resizes an image (to thumbnail, image list, product image, etc)

i tested thoroughly and everytime OPENACRT takes a perfect jpg with sRGB profile included and resizes it into image cache repository (public_html/image/cache/data/) the resizing engine THROWS AWAY the sRGB profile and produces what is called Untagged RGB - these JPGs without color profile (aka Untagged RGB) are a horrid thing because every browser on every operating system and every platform renders them DIFFERENTLY so your perfect photos you took hours to fine tune now look

- DULL
- WASHED OUT COLOURS
- LACK CONTRAST

OPENCART MAKES YOUR PRODUCTS LOOK LIKE SH#T ON MANY MONITORS

STRIPPING AWAY RGB PROFILES WHEN RESIZING AND CACHING DESTROYS THE PUNCH OF ALL YOUR PRODUCT VISUALS

when opencart resizes while caching it doesnt change R G B values in the file, it doesnt recalculate pixel R G B values… all it does it takes a JPG with profile included (aka color managed) and resizes and THROWS AWAY THE RGB PROFILE (aka makes it look randomly on every monitor)

WHAT A STUPID BUG !!!

everyone who used photoshop for more than 1 day knows that without RGB profiles included in files there is no way that your images will look on customers screen the way you intended… there is a whole industry around color management and how to make same image look identical on multitude of monitors and devices around the globe - fashion photography and fashion magazines would be dead without color profiles - color profiles are an essential building block in digital photography, prepress, printing, graphic design… all is dependant on single thing - COLOR PROFILES

AND OPENCART THROWS THEM INTO TRASH WHENEVER IT RESIZES YOUR IMAGES… THAT IS EVERYTIME YOU LOAD A PAGE AND IN EVERY SINGLE THUMBNAIL OR PRODUCT SHOT YOU SEE...

it mercilessly throws away RGB profiles from all resized and cached images rendering them UGLY on 50% of monitors… for an e-comerce system where product image SELLS it means everything... this is serious BUG or OMISSION of standards…

NOW THE WIRDEST THING... OPENCART caching engine only discard the color profile when it has to resize the jpg while caching… say you have an original product JPG that you uploaded and it has physical dimensions 1080x720… if you set your 'Product Image Popup Size' - that is the full screen zoom box - to exactly 1080x720 than the cached image OPENCART generates DOES RETAIN sRGB profile (and looks milion miles better and juicier)… its because OPENCART did cache that file BUT without resizing it (it just moved the JPG image from 'public_html/image/data/Product/' into 'public_html/image/cache/data/' and changed its name (added '-1080x720.jpg' cache name sufix)...

TALK ABOUT DOUBLE STANDARDS... so some cached copies in 'public_html/image/cache/data/' do end up with RGB profiles and some dont... OC caching just behaves without any color management rules or standard in place...

only when OPENCART cache engine has to RESIZE dimensions of the image it DISCARDS the color profile...

i attached 3 files

1) biografiktion-1.jpg
this is original jpg with sRGB profile, as it was uploaded to 'public_html/image/data/Product/' - its physical dimensions are 1080x720

2) biografiktion-1-1080x720.jpg
this is a JPG thats cached when my 'Product Image Popup Size' MATCHES the original image physical dimensions (1080x720) - sRGB profile is retained even though OC makes a cache copy - it DOESNT RESIZE anything while creating the cached copy so the sRGB profile is retained in the cached copy... weird... but nonethless this image looks NICE AND SATURATED, JUICY IN MY BROWSER

3) biografiktion-1-1024x768.jpg
this is what happens when OC has to RESIZE while caching - this time i set 'Product Image Popup Size' box size to 1024x768 - while OC was caching AND RESIZING the original 1080x720 into a cached version of 1024x768 - the sRGB profile was discarded and this JPG is 'Untagged RGB' and looks ugly in many browsers… DULL, WASHED OUT, UGLY - DO I NEED TO REPEAT THAT IMAGES SELL YOUR PRODUCTS ON ESHOP

I ZIPPED ALL IMAGES SO THERE IS NO WAY THE JPGS CAN BE ALTERED BY BBS BOARD IMAGE ENGINE...

i dont have to tell you that RESIZING while caching takes place on all levels of OC (product thumbnails in category listing, additional product images in gallery, cart thumbnails, and the list goes on) - resizing while caching is a CORE function of OPENCART - all these resized images will look UGLY and WASHED OUT to many customers because the way OPENCART caching engine is setup it DISCARDS all color profiles from the cached JPG copies evertyime OC does a resize on an image...

THIS IS VERY SERIOUS PROBLEM and potentially makes all your products look UGLY and UNSELABLE or LESS DESIRABLE... and this HAPPENS TO EVERY SINGLE OPENCART WEBSITE AROUND THE GLOBE... although not to every browser - the display of "Untagged RGB" images varies vastly across operating systems and browsers... but you can be sure that great many customers see your products as DULL, WASHED OUT, UGLY UNSTAURATED PRODUCT VISUALS

i wish i could find a solution for this so far i came up with these:

1) is there a way to command OC to not discard color profiles when RESIZING while caching files ? any switch or javasrcipt to copy paste somewhere into the source files… this would be most elegant solution… to teach OC to retain RGB profiles whatever he does to the cache pictures - every cached image should retain an RGB profile of the original "mother" JPG that you upload to 'public_html/image/data/Product/' - this would be just best solution...

2) this is pretty weird solution but could work... manually create (pre-render) all cached images in photoshop with sRGB profiles and manually upload into 'public_html/image/cache/data/' - basically you would do all the resizing work MANUALLY in photoshop and retain all sRGB profiles and than upload these manually resized and named JPGs into the cache directory so OC would use them without knowing they were produced MANUALLY by human and not by the OC caching robot which discards profiles whenever it resizes… this solution seems ok, if a little laborious, but the problem is that the cache can be DELETED or REWRITEN randomly by OC at its own will… is there any way to DISABLE refreshing of cache in OC - basically command OC to never touch, replace or update images that are in the folder 'public_html/image/cache/data/'

3) there are also some ways to alter your browser to treat all 'Untagged RGB' images as sRGB images but you would have to set it up individually on every customers PC and depending largely on their Operating System and Browser - IMPOSSIBLE FEAT - you can tweak a browser to display 'Untagged RGB' the way it displays sRGB JPGs but to ask ALL your customers (who are often close to computer analphabets) is totally unrealistic and nobody would go through such technical process…

NOW I END UP WITH 50% OF CUSTOMERS SEEING DULL, UGLY, WASHED OUT IMAGES OF MY PRODUCTS

THIS PROBABLY HAPPENS TO YOU ALL WITHOUT EVEN KNOWING IT

THERE IS GOT TO BE A FIX TO MAKE OUR IMAGES LOOK THE SAME IN OPENCART AS THEY LOOK IN PHOTOSHOP… RGB PROFILES RETENTION IS THE ONLY PROFESSIONAL WAY...

p.s. attached are 3 test files that clearly demonstrate that OC takes an original JPG (1280x720) with sRGB profile included and while RESIZING (1024x768) to create a cached copy it discards the color profile... however the color profile is retained on a cached copy, which was cached BUT didnt have to go through the RESIZING process (1280x720)...

ALL FILES ARE ZIPPED TO PREVENT ANY ALTERATION TO JPG FILES BY BBS IMAGE ENGINE

It's my understanding this is an edge case that primarily effects Mac + Safari + calibrated monitors. All other browsers / OSes will interpret default RGB as sRGB.

Either way this is an issue with PHP's GD library, not OpenCart. You can try posting again on the bug report at https://bugs.php.net/bug.php?id=53598 . You can also try converting the image class to use ImageMagick. If you do make sure to share the code so it can help others.

nope... firefox 29.0.1 on OSX doesnt interpret Untagged RGB as sRGB... not even close... all the colours are shifted, desaturated and washed out... iam not using calibrated monitor but a standard Apple Air 11'' LCD screen... i dont know what is the percentage of mac users among any particular customer group but there are peer groups where macs are very prevalent in customer base and they will all see bad washed out colours on their monitors when using Firefox...

thanks for the links but i see no solution unfortunatelly... the BUG report just says the same as i do GD library doesnt support color profiles and i dont know how to use ImageMagick... iam no php programmer...

any suggestions how to "converting the image class to use ImageMagick"

thanks for the info i hope someone else found a solution to this problem...

i guess its hard to say how many customers this affects but add all customers with APPLE MAC macbooks and firefox and you have a pretty large group of people who see your images as UGLY, WASHED OUT and DULL...

On Windows Firefox defaults to color management on tagged images only. You can check your settings in about:config. The preference name is gfx.color_management.mod. I suspect your browser or OS is falling back to your monitor color profile rather than sRGB so try changing the value to 2 or 0 if it's not already.

You'll also find that most optimization like Yahoo Smush.it and Google Page Speed guidelines recommend stripping color profiles from images to improve load speed.

I did find a class for adding ICC profiles at http://jpeg-icc.sourceforge.net and got it working. An image sample is attached using the sRGB_IEC61966-2-1_black_scaled.icc profile from http://www.color.org/srgbprofiles.xalter . If you're interested I can work it into a commercial mod for the extension store.

rvrv wrote:thanks for the info i hope someone else found a solution to this problem...

You can upload images at in the exact size you are displaying on your site. This way only thumbnails will be resized. It's what I've been doing since day one. Transcoding anything is almost never beneficial to quality and if you use photoshop "save for web..." you'll end up with brilliant looking images at a smaller filesize.

That being said, using Imagick instead of GD sounds like the way to go.

hi guys thanks for replies... iam very glad somebody takes time to solve this with me... i am searching myself around web and there seems to be more people having issues with GD library stripping profiles but no solution yet...

- yes this color and saturation shift seems to happen on APPLE LCDs running Firefox (OSX)... i guess ALL APPLE MACBOOKS have a "Display LCD" profile in place from factory (check in Finder/System Prefrences/Displays)... i would say its not Apple's fault because they are just trying to color-manage whole workflow (including their LCD monitors) and as long as i use color profiles ALONG THE WHOLE PATH everything works fine and dandy on APPLE LCD (photoshop, lighrooom, prepress, everything)... the trouble comes when profiles are stripped... than it gets messy on APPLE LCDs and Firefox... the colors look ok in SAFARI so i guess Apple has a more sofisticated color management in Safari that tranlates 'Untagged RGB' > sRGB > LCD Display Profile... or something like that... unfortunatelly FIrefox ignores the MACBOOK LCD display profile (because FF is multiplatform) so the colors and saturation are off in FF but not in Safari... i dont know who is to blame (Firefox, Apple, GD library, internet elfs ) all i know is when the profile is retained everything works fine on all platfroms and browsers - out of the box - WIN, OSX, SAFARI, FF, APPLE LCD, ACCER, ASUS, FUJITSU LAPTOP LCD - everything...

- i know there are some internal switches in firefox which are OFF by default but i cant ask my customers to go setup their firefox... my products must look awesome - out of the box - on WIN, OSX, SAFARI, and FIREFOX and any LCD monitor (within a reason)... without any tweaking of setting on user side

- Yahoo Smush.it and Google Page Speed - i understand they try to keep profiles out of the game, because it makes things SO MUCH EASIER - BUT NOT NECESARILY BETTER LOOKING - as you see in real life, throwing profiles away doesnt make the problem of color shift go away - no it makes it more chaotic and unpredictable and browsers and operating systems are left to do "guess work" without profiles in place - quite often the browsers or operating systems (unstandardized themself) fall back to some wrong color interpretation across platforms and devices... but you cant blame them when you DELETED the only viable guide - the color profile... i guess trying to omit color profiles on internet is a route to HELL...
it would be wonderfull if all we had to do is say sRGB is the "internet standard" and all untagged JPGs will be treated as sRGB and nobody is to use profiles anymore... well as you can see in reality things are more complicated with APPLE and MOZZILA having a little "different" opinions on profiles usage... i guess competing companies will always be breaking internet standards and make their own rules (Apple is a king in making his own rules irrelevant of any PC world standards)... until we live in ideal world where everything is according to standards from A-Z id say the easiest way is to keep profiles where they originaly were and all will be fine as it always was UNTIL someone decides to strip the profiles and everything breaks loose on OSX or WINDOWS... i lived all my life with profiles and never had trouble... they make things easier and more precise without the guess work... unfortunatelly not all manufacturares and developers agree

- well PRODUCT THUMBNAILS are one of the MOST important cached copies... they are the first thing your customer sees when they load your page... and if they look like sh#t than you lost the first WOW suprise moment when all your products should literaly jump out of the screen on your customer and shout BUY ME, CLICK ME look how beautifull and juicy i look... but when they all look like washed out color laser copies... hmmmmm

- rph about that class THAT WOULD BE WONDERFULL... id be happy to pay for such extension... i dont know any programming but this would be super cool... provided it would really work across the whole OPENCART image caching system - i never heard of sRGB_IEC61966-2-1_black_scaled.icc... but the attached image certainly does contain a color profile you are onto something with this "jpeg-icc" thingy ... i use:

sRGB IEC61966-2.1
Adobe RGB (1998)
Coated FOGRA39 (European press CMYK standard)

... the extension would have to be 100% transparent without ADDING or STRIPPING anything from the processed images... no header or metadata alteration... WHAT COMES IN GOES OUT... just pixel resized... all it would do is tell OPENCART to retain the profile of the ORIGINAL JPG whatever that profile might be... no R G B values shift or manipulation... NO ICC PROFILE MANIPULATION - it would just copy the profile parameters from ORIGINAL onto the CACHE COPY... for this extension to become a hit it would have to work totally independatly of themes or anyhting (vQMOD would be the best) and if i would choose to upload all my "mother" JPGs with say AdobeRGB or ProPhotoRGB profile... the extension would just retain whatever profile on all cached copies (40x40, 500x500, all cached resizes)... and also all other images that customers see... wow that would be a wonderfull world to live in... color-managed OPENCART... YEAH BABY now you could go crazy with product images and product galeries in photoshop and lightroom... that would lift the OPENCART into really PRO LEVEL...

- ImageMagick is thrown around, but frankly iam no programmer so i dont even know what it is (i read the php manual page but its a klingon to me) let alone being able to use it or implement to OPENCART... but if anyone would take the responsibility and implement ImageMagick or "jpeg-icc" into OPENCART resizing engine and make OPENCART retain profiles in all images it processes without breaking anything (i use ton of extensions and vQmods and complete graphic template - so the extensions would have to be 100% compatible across all the OPENCART addons) - NOW THAT WOULD BE A COOL THING and worth buying... the fact that you could make OPENCART show the same images to all your customers as you see in photoshop and lightroom thats what i call a PROFESSIONAL E-COMMERCE PLATFORM...

i never tried Magento, Shopify, ZenCart, Prestashop, Ubercart, Drupal but i believe at least some of them must have this multiplatform, multibrowser, profile chaos solved and THATS A BIG ADVANTAGE for their eshop owners compared to OPENCART... i think its about time for somebody to make OPENCART look amazing across ALL PLATFORMS... our product images are one of the most valuable assets of our eshops... they should look the best our programming skills allow... we OPENCART users owe it to our products and eshops... we spend hours perfecting every aspect and than 1 single omission in code (GD striping profiles) sets us back against the competition... LETS MAKE OUR ESHOPS LOOK WORTH IT ON ALL PLATFORMS... THE TOOLS ARE THERE

Magento, ZenCart, Ubercart, and Prestashop all use GD like OpenCart.

I'll get the mod published on Monday if you're serious about buying it. I don't think I'll sell very many so I'd like a firm commitment.

since imagick seems to be universally hailed as the superior to GD i'd like to suggest that you consider submitting something like this to be incorporated into the core. not sure if this is reasonable and/or realistic. what do you think ryan?

It's not ImageMagick. It's just an ICC color profile embedder.
Adding ImageMagick to OpenCart would probably best be done by changing the image class to an adapter design pattern like with the database and (in 2.0) cache.

oh.. well that's awesome all the same! nice work. i was actually looking at this:
http://sourceforge.net/projects/jpeg-icc/
with the same thing in mind.

Yes, that's what I linked to earlier in the thread and use for this mod. The work is done, it just needs cross-version testing and a documentation write-up. I just find doing those things a grind.

RPH> iam ready to pay for anything better than NO PROFILES AT ALL... i see your particular approach you've chosen is that your plugin will add a pre-set color profile into all cached files... so id have to choose a single color profile and that would be assigned to every cached image regardless of what profile was originally in the "original JPGs" uploaded to 'public_html/image/data/Product/'... i guess given the circumstances this is the best we can get in shortest amount of time... wow you are quick... please just make sure the most standradised profile is included... in photoshop its labeled sRGB IEC61966-2.1 so most people will know it under this particular label...

i am commited to buy and beta test using my web and photoshop as a testing equipment... i hope if anything needs fixing you can support me

just 2 things if it would be possible

1) i hope it will be compatible will other extensions and templates... btw. i use 1.5.6... vQMod would be fantastic !!!

2) if you can make it so that whatever GD library touches during page load gets a profile assigned... iam no expert in OC so i dont know if there are other critical image resizes that my customers can see (across the whole web page) but if you could make the profiler stick really deep into the OC brain so that ALL POTENTIAL images that get to my customers already have profile assigned... we should strive to make the extension go ALL THE WAY WITHOUT MISSING ANY PICTURES WITHOUT A PROFILE ASSIGNED... hopefully the whole OC should be "color-managed"...

WOW I CANT WAIT FOR MONDAY

YOU'RE THE BEST RPH

I've started the last bit of work. If everything goes well I should be able to publish in the next couple hours.

YES PLEASE... iam waiting anxiously... i have midnight here and 5 PM in Nebraska... so ill be back again in 10 hours... when you will be in bed... Zzzzz fingers crossed and good luck... i can beta test a release candidate if you want (i dont need documentation and cross platform to be done as long as it will work on 1.5.6)... i pay anyway

thanks for doing this... i feel this extension could earn quite a momentum once people realise OC (PHP GD library) isnt really working on all APPLE monitors (iMac, eMac, MacBook, Apple Cinema) using factory color profile and Firefox...

in general... i think its safer to have all images on OC color-tagged... i didnt test all platform / browser combination so this problem might not be only OSX/FF specific... anyway it will be good to have profiles included on all images... just "for sure"... its one of those extensions that just safes time and worrying... its nice to know that OC and you Photoshop / Lightroom are connected once again...

Color Profiler is now available at http://www.opencart.com/index.php?route ... n_id=17376

MAN I LOVE YOU, RPH !

IAM SPEECHLESS... IT WAS SUCH AN ACT OF KIDNESS... WHAT WERE THE ODDS... I ASKED ON THURSDAY AND ITS TUESDAY (5-6 DAYS) AND MY PICTURES LOOK LIKE A COPY&PASTE FROM PHOTOSHOP... SIDE BY SIDE WINDOWS (PHOTOSHOP AND OSX FIREFOX) THEY ARE IDENTICAL...

I CANT THANK YOU ENOUGH !!!

CASE SOLVED !!! AND WHAT A SOLUTION !!!

the PDF documentation is TOP NOTCH, its a vQMod and it just works (ive got OC 1.5.6 with NevaCart template skin and quite a few extensions and vQMods in place and your extension plays well with all the others in my case - i didnt use the "Purge Image Cache" option since iam used to delete cache via FTP - i feel safer when i do the maintenance manually)

WELL DONE RPH !

i encourage EVERYBODY who uses APPLE computer (or any APPLE branded LCD monitor in combination with OSX) to try this test with OC and see if they need this extension...

open same OC category with product thumbnails in SAFARI, CHROME, FIREFOX in OSX... you should see that on default OC installation the FIREFOX images will be DULL, UNSATURATED, WASHED OUT...

if that is your case buy this extension and after that you should see this: <attached ZIP at the end of this post>

attached ZIP with screenshots from my OSX using SAFARI, CHROME, FIREFOX side-by-side with a PHOTOSHOP... as you can see with the Color Profiler installed all my browsers display same colors as my photoshop... AWESOME !!!

now some of you may say whats the big deal... according to various global internet usage researches...

OSX has a 7% global internet usage share
FIREFOX has a 20% global internet usage share

well the global scene doesnt have to reflect your particular customer profile... in global usage statistics... if you combine companies like CITIBANK, GE MONEY, ALLIANZ, AMAZON, FEDEX - they will probably have a million employees browsing internet everyday and not a single APPLE MAC computer...

but if you for example catter a comunity of designers and creative people the chance is that there will be more APPLE MAC computers in your customers pool than is the global average across all industries combined...

so dont be fooled by global internet usage statistics across all industries that include banks, insurance houses, FORTUNE 500 companies... always make sure that your particular customers are well supported...

i know many of my customers personally (friend and friends of friends, we meet on parties and exhibitions) and most of them use APPLE MAC - it might be a coincidence, but such is my customer's profile... and 10-20% of them will likely use FIREFOX...

just saying...

<attached ZIP with screenshots after Color Profiler installed - all browsers (FF, CHROME, SAFARI) on my OSX show the same image as my PHOTOSHOP - try that on your own OSX and see how do you compare - i zipped all images so the BBS image manager wont alter them)

Glad to hear it resolves your issue!

ABSOLUTELY !

this COLOR PROFILE is not available?
I need my images on OC on sRGB.