Why does my photo thumbnail appear darker than the original pic?

Hey everyone, I'm trying to upload some new product pics and am having trouble. My product thumbnails appear dark before and after upload, but when you click on the image, it's the original color/hue.


I am uploading to my wordpress site, if that helps.


For an example, please check out the photo here


Thanks for any help and advice you can send my way.


Wilson

MacBook Pro (Retina, 15-inch, Mid 2015), OS X Yosemite (10.10.5)

Posted on Jan 9, 2016 3:26 PM

Reply
3 replies

Jan 9, 2016 5:18 PM in response to jwilsonallison

It's not a Photos problem but an HTML issue. The correct color image file is named all-it-red-ls.jpg. However, the darker version that one clicks on is named call-it-red-ls-510x600.jpg. It's a different image file, not a thumbnail. You'll have to determine how the darker image is created and why the color is rendered darker or change the file to the same file that the popup image is.


You might ask your question in the iWeb forum as those who hang out there are website developers and will have more detail for you.



Currently you're are using the following code:


<div class="slide easyzoom" style="width: 510px; overflow: hidden; position: absolute; transform: matrix(1, 0, 0, 1, 510, 0); -webkit-backface-visibility: hidden; height: 600px;">

<a href="http://cavecloth.com/wp-content/uploads/2016/01/call-it-red-ls.jpg" title="call it red ls">

<img itemprop="image" src="http://cavecloth.com/wp-content/uploads/2016/01/call-it-red-ls-510x600.jpg" alt="call it red ls" title="call it red ls">

<div class="zoom-button large icon-expand tip-top hide-for-small tooltipstered"></div>

</a>

</div>



Change it to


<div class="slide easyzoom" style="width: 510px; overflow: hidden; position: absolute; transform: matrix(1, 0, 0, 1, 510, 0); -webkit-backface-visibility: hidden; height: 600px;">

<a href="http://cavecloth.com/wp-content/uploads/2016/01/call-it-red-ls.jpg" title="call it red ls">

<img itemprop="image" src="http://cavecloth.com/wp-content/uploads/2016/01/call-it-red-ls" alt="call it red ls" title="call it red ls">

<div class="zoom-button large icon-expand tip-top hide-for-small tooltipstered"></div>

</a>

</div>


and it will be as you want it to be.


User uploaded file

Nov 14, 2016 8:11 AM in response to Old Toad

If you want to add images to your web page the correct way...


Then don't put the original larger image into the HTML and use HTML to set the size as Old Toad suggests, that is NOT the correct way to show a different size image image sorry! Google will mark you down, it is an unoptimised way to serve webpages, the website will load slower, its not good for those on slower or 3/4G connections.


You should be creating a new thumbnail image at the correct size you want it displayed on the site, like you originally did, so you do need to find out why the smaller image is darker. Its probably something to do with the colour profile of the original image.


And all images should be optimised.

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

Why does my photo thumbnail appear darker than the original pic?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.