Image Colour Changes in Gallery Display Mode

[Veronica]

Hello - I did a search and could not find a similar problem and hoping someone can help me please...

My website is http://www.veronicacolvin.com - and this problem seems to have cropped-up since I implemented the new website...

I just uploaded three new images (they were high res, I reduced their size before uploading via the adjust size option in my MacBrook Pro), and two of the images have changed colour from warm to cool. If you view all these three images in my library, they are all warm, all correct. I load the images into a gallery i.e. in Beauty/Editorial - they look correct. But once you "view" the images on the website/carousel, two of them change from warm to cool. This colour change does not happen to all images I upload, but it does seem to happen to one in four images on average.

For example, here are the images that I just uploaded:

- http://veronicacolvin.com/portfolio/editorial-and-beauty/#jp-carousel-3371 (this is a warm image, but appears cool in the carousel)

- http://veronicacolvin.com/portfolio/editorial-and-beauty/#jp-carousel-3372 (again, warm image but appears cool in the carousel)

- http://veronicacolvin.com/portfolio/editorial-and-beauty/#jp-carousel-3373 (warm image and appears warm - this is correct, and how the above three images should appear i.e. warm)

Again, if I edit "Editorial and Beauty" page - the images appear correct in the Gallery. But as soon as you view them in the Carousel (as per the links above)- those two images change from warm to cool.

Thoughts or suggestions?

I already contacted Design Palette Pro Support and it is not a design/theme issue.

Many thanks. 🙂

http://www.veronicacolvin.com

[Veronica]

Just a quick update - I went back and got two new resized images (of the two playing up above), gave them a new file name, uploaded them and they are now displaying fine. But why is this happening in the first place?! It will happen again, so if anybody can shed any light on the problem, it will be much appreciated.

[Veronica]

Update - however I am still having problems with this image - http://veronicacolvin.com/portfolio/editorial-and-beauty/#jp-carousel-3383

No matter how many times I upload a new image with a new file name, it still displays too cool. It should look warm. Argh! Very frustrating.

[MoodyRiviera]

OK, maybe it's just me, but it's hard for me to totally understand what you're talking about here, because I see what this last image you posted looks like in the carousel (at least I think it's in the carousel) but where do I see what you think the image is *supposed* to look like??? What am I missing here. I understand all about images that are too warm and too cool...but I can't see enough here to make a comparison and then try to figure out what's going wrong.

And, once again...maybe it's just me...but I think some of the links you've posted here are going to something other than what you think they're going to...not much help for troubleshooting.

*MoodyRiviera*

[Veronica]

Thanks MoodyRiviera for taking the time to look and respond.

Apologies for the confusion, I did not think I could give you access to the image in my Media Library (in WordPress) without admin rights - but I was wrong.

I hope the below helps to show my problem.

Sample of image that displays cool in the Carousel - whereas it should be warm:

http://veronicacolvin.com/portfolio/editorial-and-beauty/#jp-carousel-3383
(in the Carousel) - too cool

http://i1.wp.com/veronicacolvin.com/wp-content/uploads/2014/03/Kahli_VL815_Cropii-websize-v2.jpg
(link to the file from the Carousel) - too cool

http://veronicacolvin.com/wp-content/uploads/2014/03/Kahli_VL815_Cropii-websize-v2.jpg
(link to image in my Media Library) - warm, true colours of the image

Please let me know if you need additional information. I'm not a very technical person, and I do appreciate the help. 🙂

[MoodyRiviera]

@Veronica,

Thanks for taking the time to figure out the links so we can actually see the problem...and I definitely do see the problem...and it's definitely a very weird problem.

I mean, to me it doesn't make sense why a carousel (I see you're using the JetPack carousel) would cause an image to display with such different color tones that way...especially just *some* of the photos.

It's strange that if I look at the "cool" image in the carousel, and then download that image directly from the carousel onto my hard drive and then open the image it reverts to its proper "warm" tones. It's the same image...the exact same image...but it looks very different "coming through" the carousel.

I've never used that carousel...but...is there any kind of "color filter" setting that might be inadvertently applied to some of the images in the carousel? Long shot, I know...but really...that's what it looks like...the effect we're seeing here is similar to if you had the image open in Photoshop and then chose Image > Adjustments > Photo Filter... > and then ran one of the "cooling" filters.

I'm guessing that you don't want to start over with a different carousel plugin...I won't even suggest that...so I'll have to hope that someone with a bigger brain than mine (lots of them out there) will come along, view your code, and see some obvious problem that I can't see.

I'll keep watching this thread because I'm really interested to see what the problem was once it's figured out.

*MoodyRiviera*

[Veronica]

@moodyriviera

Thanks! I had a look at the image in the Image Gallery and no, there is no colour filter. In fact, when I put the image in the gallery, I don't do anything different to the images, I follow the same steps with every single one. That is why it is so frustrating as there is no consistency with the error.

And to top it off, when I upload the same image with different file names into the Gallery, eventually, one shows correctly in the Carousel.

[MoodyRiviera]

One more thought: The theme you're using has a feature that changes the images (for example on the home page)...changes the look of the images when you mouse over them.

I know that's not the same effect that's causing the problem with the image in your carousel, but I was just thinking...it wouldn't hurt to just quickly activate a different theme...a simple one that doesn't in any way play with images...and see if the problem persists.

When you change to a different theme, it might mess up a lot of your layout and other things, but I would guess the carousel should still work...and any problems would only be temporary...would straighten out as soon as you went back to your original theme.

If the problem seems to go away with a different theme, you would then have narrowed down the problem to some unwanted interaction between the JetPack carousel and your current theme...and then someone who knows code a lot better than I do might figure it out.

Probably won't hurt to try...

*MoodyRiviera*

[Erik D. Slater]

When you change to a different theme, it might mess up a lot of your layout and other things

If you change a theme, it "should" move any widgets to the Inactive Widgets area ... since widgets are theme-based ... and the cause of theme compatibility issues 🙂

You may want to try the Preview option first ... just to minimize (or even eliminate altogether) the chance of screwing things up royally 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[MoodyRiviera]

Good point, @Erik D. Slater. By the way, I was thinking of asking you to come over and take a look at this problem...but now you're here so I won't have to ask you. 🙂

*MoodyRiviera*

[Erik D. Slater]

I actually did take a look initially ... but the links provided were getting me all confused, e.g. this link here wasn't going to where I think the OP had intended. It just takes me to the Editorial / Beauty page.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Erik D. Slater]

Then I saw that you (the Moodster) took on the task of trying to solve the problem ... so I thought I'd leave it in your capable 🙂

I'm still a bit fuzzy on the issue ... but I'm also interested 🙂

The thing is ... on my 23-inch monitor, I see no issues between carousel version and direct version.

Is there a better example of the carousel vs non-carousel conflict?

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[MoodyRiviera]

Ha ha ha...as you know, "The Moodster" operates totally on guesswork...so I think we need a guy who actually knows something...someone like you.

OK...I hope this screenshot will illustrate the problem:

In the screenshot, the image on the left is what the image (screenshot) looks like when she uploaded it...a nice, natural color tone.

The image on the right (screenshot) shows what the image looks like when it's viewed in the carousel...a much colder tone that the OP doesn't want.

Apparently, this happens only sometimes...and only to *some* of her images.

Where it really gets weird is if you view the image in the carousel...with the undesirable cold color tone...and then control-click (or right-click) to download the image to your computer, when it lands on my desktop it has reverted to its nice normal color tones.

What is causing the color tone to change from when the image is in a normal state compared to when it's viewed in the carousel?

This is a very interesting case, and I think you might be the guy to solve it.

Here's the screenshot demonstrating the warm and the cold so you can see.

http://wp4designers.com/erik.jpg

*MoodyRiviera*

[Erik D. Slater]

Hey ... I'm a woman 🙂

Oh wow. That's quite a difference. The image on the right is the image I am seeing.

And ... oh my ... I'm such an idiot for not noticing this earlier. Check out these two links:
- undesired version
- desired version

The first image is being served by WordPress.com ... i.e. Jetpack ... and the OP may have Photon turned on. If you try to drag the image from the browser to your desktop, it won't give you the image directly, i.e. something else is getting in the way.

The second image is being served by veronicacolvin.com. If you try to drag the image from the browser to your desktop, it does exactly what you would expect, i.e. it's just an image.

Regardless if Photon is turned on or not, Jetpack is the issue here.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Erik D. Slater]

Additional info.

The file size of the undesired version is actually larger than the version uploaded by the OP!! The dimensions are, of course, the same.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Erik D. Slater]

Reading again through some of the earlier comments, I'm fairly certain Photon is currently activated.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[MoodyRiviera]

Thanks for your excellent analysis, Erik....seems that we both agree that JetPack is involved in the problem...but...

...but we also know that JetPack and Photon are not *known* for causing this problem...with all the billions and billions of people using JetPack and Photon if this were a common problem we would have heard about it...that's why I'm wondering if it's some weird interaction between JetPack, Photon, and the particular theme she's using.

Further complicating things is the OP's comment that the problem seems to not occur with every image...doesn't happen all the time. Weird.

Hello, OP...if you're still out there, try our suggestions about playing with the theme to see if the problem goes away, and let us know.

*MoodyRiviera*

[Erik D. Slater]

I checked the source code of the page ... and Photon is definitely on.

The reason I believe the problem is related to Photon is because of this:
"All images are compressed on the fly using either a combination of pngquant and OptiPNG or jpegoptim. Lossless compression is available by specifying a quality setting of 100 in the query arguments"

This would explain why the problem occurs sporadically.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[MoodyRiviera]

Thanks Erik...not sure why you're speaking in Greek today...ha ha ha...all that pngquant and jpegoptim and stuff like that...but OK... 🙂

I was looking at the "warm" image in Photoshop and saw something I have never seen before...in all my twenty-five years of playing with Photoshop. Of course, back in the earlier days there was no such feature known as "Save for Web"...but OK...so I had the "warm" image open, and then chose "Save for Web"...and the image instantly turned "cold" in the "Save for Web" dialog box...regardless of any settings I was using. That's Weird with a capital "W"!!!

To show you what I mean, you can see a screenshot of the image itself (on the left) nice and warm and then the "Save for Web" dialog box where the image is icy cold.

What is going on here???

http://www.wp4designers.com/eriksunday.jpg

*MoodyRiviera*

[Erik D. Slater]

not sure why you’re speaking in Greek today

Not my speak ... I swear 🙂 References to pngquant, OptiPNG and jpegoptim are actually links on the that page. But when I copied the line, you only get the Greek 🙂

I've actually used these tools before. And y'know what? I hate them. They don't work ... whereas other online tools work flawlessly. This circles back to a previous conversation we had before 🙂

The "Save for Web" thing you mentioned ... not weird at all. In fact, it is becoming more and more likely that Photon is the culprit ... because the "Save for Web" feature probably runs the image through something like - or even one of - pngquant, OptiPNG or jpegoptim.

We know that the original upload is OK because we can actually see it. The served version is definitely not OK - we can see that too. The file sizes are different ... yet the dimensions are the same.

It's Photon, man ... all the way 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Author]

Posts