I have over 300+ products on my shop and we are constantly adding more. I’m not happy with the quality of my photos when they show on the gallery’s thumbnail. Once you click on the item and get a larger image the quality is fine.
A friend suggested I upload the images in png instead of jpeg but I don’t want to sacrifice my page load speed. I’m even trying to find a way to speed up my load speed.
Any thoughts or suggestions will be highly appreciated.
PNG will “kill” your load time of pages.
Try to use for jpg thumbs some higher quality.
For resize your photos use Paint.NET, it’s free and very easy to use.
png files are quite a bit larger than jpg as I think they have more colours; as loginw says try a better quality.
How are you creating your thumbnails now ?
I would use PNG only if you need transparency support for the images and then only if GIF (which also supports transparency) doesn’t give you sufficient quality. You can help keep PNG file sizes relatively small by saving in 8 bit PNG instead of 24 bit PNG if the quality is good enough.
For everything else I would suggest using JPG.
But as Rubble asks, your thumb quality issue is probably related to the way you are creating your thumbnails and not the image format.
I’d also recommend using JPG for load speed, with that many images making them a PNG could affect load speed a lot. You can try using GIMP if you need a free image manipulator. ( http://www.gimp.org )
It sounds like whatever script or routine is shrinking the images for the thumbnails is doing it in a bad way. It’s either using a poor quality resampling algorithm or it’s saving the thumbnails using a poor quality setting.
Switching to PNG would only be a workaround and as others have said, you don’t want PNG for large photographs as it’d take up 5 to 10 times as much data (if it were only the thumbnail that was PNG, it might not be as bad…).
To help with the actual problem you’d have to go to whoever programmed the shopping site. Or if you programmed it yourself, show us the code you are using to convert the thumbnails.
For pics and photos, choose JPG. If you need transparency support for the images (better if small size), then you can use PNG.
Typically if there’s a quality issue with the thumbs, the problem isn’t so much with your choice of file format as it is your resizing method. What are you using to resize them? Are you making the thumbs separate files? Do you do a sharpen pass after the resize algorythm does it’s soften, or are you doing pixel resize?
Do you have an example? Show us one of the images we could probably take a stab at showing you different ways of handling it.
Just remember – photoshop wouldn’t know an optimized .png or even how to optimize an image for web use from the hole in it’s DVD – which is why I use Paint Shop Pro – and why many people will run photoshop saved images through things like optipng or pngcrush.
I use Photoshop Elements for optimising images for web publishing and don’t have any problems with image quaility.
I said optimization – that means FILE SIZE… not quality… and since PNG is lossless, quality is the same regardless of saving method; compression on the other hand is not and when it comes to compressing PNG, Adobe pretty much has no clue what they are doing – hell, the GD module in PHP does a better job of it.
NOT that photoshop jockies usually even think about file sizes with their megabyte plus monstrosities of uselessness.
even between PNG8 and PNG24?
Hey guys, thank you for all the help and sorry I’ve been MIA. It’s been a crazy week (in a good way).
I shoot my images in raw and import them into lightroom and do most color corrections and adjustments on LR (some require PS) and then export it in jpg. I usually export them in 1200x800 with a 75 quality. Do you think that resizing and exporting through lightroom could be an issue?
PNG8 itself is inherently a lossless format – it’s compression compared to the 8 bit source does no further damage to the data.
The conversion of a 24 bit image to 8 bits however… that can do damage – though that has jack to do with the file formats compression. You load a png8, save a png8, no new damage is made…
Try that with a jpeg – load and save 15% loss twenty times…
if you want your images to load faster use jpeg but if you really need the transparency use png format. save it in below 24 bit for lesser file size.
Without knowing exactly what/how processing you do on your images, it could be. But it shouldn’t be.
I shoot my photos in jpg (because my camera doesn’t shoot RAW, but it does shoot TIFF), then do all the colour, exposure etc etc corrections in Photoshop Elements and save the edited image in PSD format. I then export resized images as jpg (or png if transparency is needed) with quality lowered to ~50% for web publication or emailing. With my eyes, I normally see significant loss of quality beginning to appear at <50% quality, but not always.
I must say that I disagree here, Jason.
Maybe in past versions of Photoshop the application wasn’t very good with image optimization, but with any of the recent CSX releases (I’m running 5 or 5.5, but same goes for 3 and 4 at least) it does a wonderful job. The key is in using the “Save for Web & Devices” feature rather than “Save As.”
If I understood our recent conversation on the subject correctly, Paint Shop Pro doesn’t support the latest and greatest of JPG optimization, either. (or, at least the version you’re using?) As you may recall, I took an image you saved from Paint Shop Pro at 200KB down to under 100KB with reasonable quality in Photoshop.
I believe Photoshop does an excellent job with PNG’s this way as well because I have run the results through PNGCrush and it returns the same file size, (sometimes a few bits smaller, or larger) even using brute mode.
I’ve spent a good deal of time lately playing with and researching image optimization for the web and Photoshop has established itself with me as a trusted and invaluable tool during that process.
You said in your original post that you are uploading these to a gallery after you save the images, right? Once uploaded, the full 1200x800 size looks fine, but the thumbnails have low quality, correct?
If so, then what gallery are you uploading these to? It sounds like your problem may be there, in the creation of the thumbnails.
You may want to consider bringing the full size images down a bit smaller from 1200x800 and dropping the quality to 50-60%, too. (This won’t resolve thumbnail quality issues, but is probably best practice for the web)
if the OP would like to post a link to the site we might be able to advise further on optimising those particular images (well some of them) or at least diagnose what the problem might be
Even if the OP doesn’t want to post a link — telling us what forum gallery software he/she is referring to and/or posting the relevant code would probably suffice.
yeah it would be a bit weird to post a link i guess 
software and/code doesn’t tell us either what the images look like or what their file size is.
Just to chime in, Photoshop is poor in optimization compared to Fireworks. I generally see a 25-50% reduction from Photoshop’s “Save for Web & Devices” in Fireworks when optimizing.
Also, I think the question has been answered, but I’d like to put in my general rules for image file types. They work in most situations except a few edge cases where a bit of experimentation is required:
If I can do PNG8 without lossing more than a few colors, I’ll do PNG8. If I can’t, PNG24/32 (if I need transparency or not).