SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    png or jpeg for product images?

    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.

  2. #2
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,198
    Mentioned
    72 Post(s)
    Tagged
    3 Thread(s)
    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 ?

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Member mattschmoldt's Avatar
    Join Date
    Mar 2010
    Location
    Utah
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 )

  6. #6
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff

  7. #7
    SitePoint Member sedge's Avatar
    Join Date
    Apr 2009
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For pics and photos, choose JPG. If you need transparency support for the images (better if small size), then you can use PNG.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    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.

  11. #11
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    ... and since PNG is lossless, quality is the same regardless of saving method;
    even between PNG8 and PNG24?

  12. #12
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    even between PNG8 and PNG24?
    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...

  14. #14
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AndersonL View Post
    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?
    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.

  16. #16
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    759
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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 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.

    Quote Originally Posted by AndersonL View Post
    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?
    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)
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  17. #17
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  18. #18
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    759
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by davemies View Post
    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.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  19. #19
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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:
    - JPG for any photo or really complex image (like a screenshot).
    - GIF for any small images (generally less than 100x100).
    - PNG for everything else (or anything that needs transparency).

    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).

  21. #21
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JPG is the best for small logos, PNG is only suitable for larger photos.

    Edit: When using Facebook image, go with JPG.

  22. #22
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    omg.

    please don't post if you don't know what you're talking about. it's quite embarrassing

    jpg for logos? png for larger photos? lol wtf.

    please: read the thread before posting, check your facts and if you're not sure then best not to say or at least say it but say you're not sure.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •