Solved

Thumbnail images turning strange colors

Posted on 2006-10-28
13
531 Views
Last Modified: 2006-11-18
I created thumbnails and large jpgs in PS that I uploaded for a php gallery script. The large images look fine on the site, but the thumbnails look like they have a severely limited color pallette with very low quality. See the offending images at :
http://www.bojodesigns.com/gallery/index.php?cid=1

If you click on a thumbnail you can see what I mean. I've tried resaving all of the thumbs with a higher jpg quality but that didn't help. I'm not doing and photo resizing in my script...

Does anyone have experience with this problem?? TIA
0
Comment
Question by:kjerstih
  • 5
  • 4
  • 2
  • +2
13 Comments
 
LVL 16

Accepted Solution

by:
HackneyCab earned 60 total points
ID: 17826247
You say Photoshop did that? Very strange. It looks like the number of colours was reduced crudely, but JPEG doesn't offer an option to reduce the number of colours.

Using Photoshop Elements 4.0, I can reduce the large image of the cat w/ cigar to 3.3Kb and it looks almost as good as an uncompressed version. (JPEG quality level 50 in Photoshop Elements, halfway between medium and high quality, using the "Save for Web..." option on the File menu.)
0
 
LVL 3

Expert Comment

by:jsev1995
ID: 17827013
I has to be color modes. Perhaps it was changed to something other than CMYK, RGB, etc?
0
 
LVL 2

Expert Comment

by:jumpfroggy
ID: 17827020
We need to know where the thumbnails are being made.  In photoshop?  In PHP?

It sounds like you're making them in Photoshop.  If so, how are you resizing/saving them?  While you resize and save, do you see the color problem?  If you reopen the file, does it happen then?  Is it only when you upload and view in a browser?

If you resize in PHP, what script is doing the resizing?

I had trouble with color problems when resizing in PHP, turned out I wasn't using true-color images before resizing (so they were pallette-ized by default).
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 28

Expert Comment

by:gamebits
ID: 17827499
I used MGI Photosuite 4 to resize the picture and they look almost as good as the full size, one you can also download is IrfanView it's a free software but it give you quite a bit of control (shift-G) will let you adjust gamma correction, brigthness, contrast, saturation as well as color balance.

http://www.irfanview.com/

Gamebits
0
 

Author Comment

by:kjerstih
ID: 17831012
Hi all,

Thanks for the comments. To address some of the questions….I made both the large and the thumbnail images in PS CS2 and both look fine when reopened in PS. Both sets of images are in the AdobeRGB(1998) color profile. I resized the large images down in PS and then did a “Save for web” with the jpeg, high quality settings. I’m not doing any resizing in PHP (no GD issues)…but for giggles, here’s the code that deals with grabbing my thumbnails from a directory and outputting them:

// Thumbnail Listing

      else if( $cid && empty( $pid ) )
      {
            $number_of_thumbs_in_row = 3;

            $result = mysql_query( "SELECT photo_id,photo_caption,photo_filename FROM gallery_photos WHERE photo_category='".addslashes($cid)."'" );
            $nr = mysql_num_rows( $result );

            if( empty( $nr ) )
            {
                  $result_final = "\t<tr><td>No Category found</td></tr>\n";
            }
            else
            {
                  while( $row = mysql_fetch_array( $result ) )
                  {
                        $result_array[] = "<a href='http://www.bojodesigns.com/gallery/index.php?cid=$cid&pid=".$row[0]."'><img src='".$images_dir."/tb_".$row[2]."' border='0' alt='".$row[1]."' /></a>";
                  }
                  mysql_free_result( $result );      

                  $result_final = "<tr>\n";
      
                  foreach($result_array as $thumbnail_link)
                  {
                        if($counter == $number_of_thumbs_in_row)
                        {      
                              $counter = 1;
                              $result_final .= "\n</tr>\n<tr>\n";
                        }
                        else
                        $counter++;

                        $result_final .= "\t<td>".$thumbnail_link."</td>\n";
                  }
      
                  if($counter)
                  {
                        if($number_of_photos_in_row-$counter)
                  $result_final .= "\t<td colspan='".($number_of_photos_in_row-$counter)."'>&nbsp;</td>\n";

                        $result_final .= "</tr>";
                  }
            }
      }

//end code

Thanks again for your assistance.
0
 
LVL 3

Assisted Solution

by:jsev1995
jsev1995 earned 65 total points
ID: 17831173
Don't degrade the quality. The images have odd colors which can only be displayed if the images are saved at a higher quality. I created the thumbnails for you, you can download them at:

http://www.mediamax.com/root06/Hosted/Images.zip

They will take slightly longer to load, but they will display properly. (And probably only a few milliseconds longer).
0
 

Author Comment

by:kjerstih
ID: 17831228
jsev1995,

I'm a little confused about what you mean by not degrading the quality. A "high" jpeg setting under the save for web option is usually overkill when it comes to image quality for the web. I have routinely used the "medium" setting over the years without these weird effects. Is it possible something else is going on? Thank you for creating these thumbnails..they definitely are what I'm shooting for...but don't really solve my problem. I'm going to have much more than these 5 thumbnails so I need to be able to do it myself.
0
 
LVL 3

Expert Comment

by:jsev1995
ID: 17833322
I'm sorry, I misread/mixed up something. Try these instructions, nothing more, to make your thumbnails, and see if it works:

1. Open large image in photoshop
2. Go to image->resize->Image Size
3. Set the size and click OK
4. File->save

If this works for you, you clicked some other setting last time and that caused the problem. If not, it is some kind of bug in Photoshop and should be reported to Adobe Support.

What version of Photoshop are you using?
0
 

Author Comment

by:kjerstih
ID: 17834675
I'm using PS CS2. I will try the regular save (versus the save for web I've been using) later today. Though even if it works, I would be curious to know why this time "save for web" didn't work....why even have the web optimization choice in PS?! I'll let you know how it works...Thanks.
0
 
LVL 16

Expert Comment

by:HackneyCab
ID: 17835234
Does "Save for Web..." let you choose a colour profile? If so, make sure it's sRGB and not Adobe RGB.
0
 

Author Comment

by:kjerstih
ID: 17835446
PS doesn't let you pick in the save window, but I will try that as well as the regular save option....thanks for the reminder about sRGB, I vaguely recall that can cause some problems every once in awhile.
0
 
LVL 3

Expert Comment

by:jsev1995
ID: 17837542
so did my suggestion work?
0
 

Author Comment

by:kjerstih
ID: 17839676

Mea Culpa everyone! I forgot that I have a file upload scriptthat has one line for resizing in PHP...I was only looking at my main gallery script before! Once I manually inserted records into my db without using the upload script, all was well. So that was the problem. My sincerest apologies and thanks to all that made suggestions. I would like to split my points between jsev1996 and HackneyCab for their efforts...
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question