Solved

Thumbnail images turning strange colors

Posted on 2006-10-28
13
530 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now