+ Reply to Thread
Results 1 to 11 of 11

Thread: PNG vs JPEG

  1. #1
    Junior Member aalish is on a distinguished road
    Join Date
    Dec 2013
    Posts
    21
    Thanks
    44
    Thanked 8 Times in 5 Posts

    PNG vs JPEG

    Hello everyone,

    before you jump to post a reply, please take the time to read my thread.
    This is not a general discussion for PNG and JPEG, it is for a specific website, etsy.com
    more specifically for the banners.

    I got into a very serious argument with a fellow seller, which make me to test both PNG and JPEG.

    here is my results with my tests:
    Terminology: DPI is the quality of an image, the higher the number the better the quality, the standard for
    -printing is 300DPI
    -web use 72DPI, lower than 72 DPI is BAD IMAGE!

    I used an banner 760x100 pixels, 300 dpi, size (2.533x0.333 inches)
    and the same image as PNG, I saved both images from the website, this way I will see the image's quality's numbers, I use photoshop which is a professional program for designers, those as the results:
    PNG
    size: 2.536x0.334 inches,
    118DPI (it kept the same size as my 300dpi original banner in inches, BUT at a lower resolution, that is lower resolution image)
    JPEG :
    width : 10.556x1.389
    72DPI (it kept the proportions perfect as my original banner, from 300DPI to 72 DPI which it the correct size and resolution)

    Then I make a 72DPI image (which is for web use), PNG lossless (it means it was saved with all the data/resolution of my design from the source, which is photoshop) at 760x100 pixels
    (size 10.556x1.389inches),
    I uploaded and those are the results when I saved the banner from my shop's webpage:
    size: 10.686x1.406 inches
    DPI 28!!!!
    what is this? 28dpi resolution from 72? thats a very bad quality image, Etsy compression system degraded the quality.



    But I am confused with the banner I make that was 300 dpi, which resulted at the same size in inches, but at lower resolution. Does this means it degraded the resolution or not? because those numbers showed me that PNG had a loss at the resolution!
    or my mind forgot math.

    So, because my mind has stopped, is PNG a better choice for a website that either way compress the files like this?

    Because at the test and vector art, I see no visible difference to the banner when I have my tab open from the previous image which was JPEG, actually when I upload the image, it has a small noise, same the PNG and JPEG. Absolutely no difference!


    Please some tech savvy here to enlighten me a little bit. Again, try to reply according to those results from this specific website.


    Best Regards,
    Aalish

  2. #2
    Banned Steffy is on a distinguished road
    Join Date
    Dec 2013
    Posts
    31
    Thanks
    13
    Thanked 21 Times in 9 Posts
    Hello Aalish,

    Quote Originally Posted by aalish View Post
    So, because my mind has stopped, is PNG a better choice for a website that either way compress the files like this?
    PNG is a better choice just when the image has a gradient or you need a trasparent background. Otherwise JPG is always the best choice.

    I suggest you to make your files/banners always at 72 DPI, unless you've also to print them forget the 300 DPI, it's just a waste of time and by resizing the image there's the chance that you ruin it; forget also about the inches, again unless you've to print it, just care about the banner's size in pixel (I assume that you've to respect a certain size for the banners).
    Then, when your file is ready just use the "save for web" option in Photoshop and you can choose the file format (so you can see immediately if it's better a PNG or a JPG) and the quality. You shouldn't have any more problems then.

    Maybe Etsy uses to reduce the quality of images that are too big, like Facebook does.

    Good luck and feel free to ask if you still have problems!

  3. The Following User Says Thank You to Steffy For This Useful Post:

  4. #3
    Junior Member aalish is on a distinguished road
    Join Date
    Dec 2013
    Posts
    21
    Thanks
    44
    Thanked 8 Times in 5 Posts
    Thank u for your info!

    etsy compress all sizes, either they are 20kb or 2mb.
    plus it converts the PNG to JPEG automatically with the numbers I wrote above. Im talking about it with other graphic designers and we have agree on that!
    I test it with the save for webuse just now!
    Yes, the PNG does looks clearer at the preview and the 4up at my photoshop, BUT at the etsy website it shows it like it would if it was the JPEG option, it has the noise around the letters.

    Etsy converts the images from PNG to JPEG.
    Down Point, for the etsy.com and only, either PNG or JPEG, it doesn't have any difference what so ever. At other websites, yes.

    but I learn a lot from this!

    Thank you so much!

  5. #4
    Banned Vetinari is on a distinguished road
    Join Date
    Jan 2014
    Posts
    20
    Thanks
    5
    Thanked 2 Times in 2 Posts
    There's another wrench in the works that has nothing to do with file type. To understand it you have to divorce the idea of storage from display. Storage is like a box in which an image is put away to be shown later, display is the way it's shown to the audience.


    If you're doing graphics for display on a screen you have no control over DPI (dots per inch).

    Let's remove banners or graphics from the equation. Let's look at it in terms of televisions.

    Right now the standard display resolution for screens is 1920x1080. If you make a graphic of any kind to display on that, regardless of how it's stored, that's all the dots you're going to get. If you smear those dots out over the big screen display in a sports arena and then stand a few feet away the dots are going to be so big you can easily spot them. If you take that same image and shrink it down to a 4-5" smartphone display, it's so dense that it's difficult to see any dots at all because they're so close together.

    You have the same image but vastly different DPI. It gets even more complicated on computer screens. There is no standard resolution for tablets or phones or computers, and there is no standard size. You might have a 30" screen with 1920x1080 resolution or a 11" screen with a resolution of 2560×1700. When you're working in a raster workflow like Photoshop, unless you know the final actual size of display (like printing a photograph or sheet of paper), you're best off to just ignore DPI and resolution settings in terms of inches or centimeters or other real-world measurements. You'll find your sanity left less challenged if you choose to work purely in terms of actual pixels.

    Now, I haven't used Etsy, but if they're doing anything on the back end of their software to re-sample images (removing or adding pixels) to make it fit some arbitrary size, then they should be hit in the face by barrel of lukewarm mackerel. I'd launch a complaint, or at least a request that there be a no training-wheels mode for people who know what they're doing so that an artist could upload an image of the specifications he needs for a specific output.

  6. The Following User Says Thank You to Vetinari For This Useful Post:

  7. #5
    Junior Member aalish is on a distinguished road
    Join Date
    Dec 2013
    Posts
    21
    Thanks
    44
    Thanked 8 Times in 5 Posts
    @ Vetinary,

    Thank you, you make me understand it little bit better.
    You are right, but I thought that checking the size in physical measurements after saving the uploaded image from the site, would help me see if the image had a loss at the resolution. I guess I thought it wrong. How do I check that?


    I was reading various articles as to why businesses/venues like etsy does the compression.
    first of all, the banners that I make are for digital display purposes for each business, I make their graphics, (they are not logos which in this case of course png is standard to give, at least that's what sellers give with logos, lets set this aside).

    I was reading that PNG sometimes it may not be best because it may make the load page time slower, etsy hosts 1 million businesses right now and it is growing, imaging all those businesses to have 2mb pure png image.

    Of course they don't say this, and make people like me which I saw that my images either JPEG or PNG, look exactly the same with some slight noise at both of them, between graphic designers to fight.
    Because I support that it looks the same, while others say, no PNG looks better....
    Trust me it doesn't!
    Of course at my shop I give after request PNG, but I have as standard JPEG, not that I charge more to give PNG, but I want to keep it simple, many people who are buying from me, they don't know what zip file is.

  8. #6
    Banned rondoletti is on a distinguished road
    Join Date
    Jan 2014
    Posts
    40
    Thanks
    183
    Thanked 9 Times in 7 Posts
    It mainly depends on whether you want a solid background or not. JPEG is the highest quality, but if you don't want a background and would rather have your site's background, PNG and GIF are the only two formats that won't fill empty space with a solid color. I usually use PNG for most of my images, although I use Jpeg for higher quality images, such as photographs. Unless you plan on using a photograph for your background, PNG is the way to go.

  9. The Following User Says Thank You to rondoletti For This Useful Post:

  10. #7
    Banned Ludovick is on a distinguished road
    Join Date
    Sep 2013
    Posts
    51
    Thanks
    32
    Thanked 18 Times in 16 Posts
    These days, website owners use JPG and PNG files almost interchangeably, and many bloggers on services like WordPress.org or Blogger and are completely oblivious to the effects of large image sizes will actually use those images interchangeably. However, more experienced website owners know that not only will smaller image sizes reduce your overall server memory consumption, but they’ll also increase page load speed, which is a nice SEO boost as well.

    This is the major difference between JPG and PNG – file size – but the reasons aren’t obvious until you take a closer look at the images themselves.

    Code:
    Only the registered members can see the download links/content. please Register to gain full access.

  11. The Following User Says Thank You to Ludovick For This Useful Post:

  12. #8
    Junior Member gazraven is on a distinguished road
    Join Date
    Dec 2013
    Posts
    22
    Thanks
    22
    Thanked 8 Times in 7 Posts

    file sizes

    Hi,

    If you export as a PNG then reduce the file size dramatically by converting it using Tiny PNG. Do a Google search for Timy PNG. It can reduce the size by 75% approximately.

    Photoshop 'Save for Web' is good but it saves extra info in the file that is unnecessary for display on web pages. Tiny PNG strips out all the unneeded stuff.

  13. The Following 2 Users Say Thank You to gazraven For This Useful Post:

  14. #9
    Banned iamevo is on a distinguished road
    Join Date
    Jun 2013
    Posts
    35
    Thanks
    7
    Thanked 9 Times in 5 Posts
    PNG is better quality, but like as the previous poster said, stick it through TinyPNG

  15. #10
    Junior Member Morineko is on a distinguished road
    Join Date
    Oct 2013
    Posts
    24
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by gazraven View Post
    Hi,

    If you export as a PNG then reduce the file size dramatically by converting it using Tiny PNG. Do a Google search for Timy PNG. It can reduce the size by 75% approximately.

    Photoshop 'Save for Web' is good but it saves extra info in the file that is unnecessary for display on web pages. Tiny PNG strips out all the unneeded stuff.
    Oooh, interesting. Do you know what kind of process they do determine what's unnecessary? Sounds very handy!

  16. Your ad here

  17. #11
    Banned stradivarious is a splendid one to behold stradivarious is a splendid one to behold stradivarious is a splendid one to behold stradivarious is a splendid one to behold stradivarious is a splendid one to behold stradivarious is a splendid one to behold stradivarious is a splendid one to behold
    Join Date
    Dec 2013
    Posts
    905
    Thanks
    532
    Thanked 789 Times in 258 Posts
    PNG always been considered one of the heaviest formats.

+ Reply to Thread

Similar Threads

  1. enlarging jpeg images without artifacts
    By artist1 in forum Books & Tutorials
    Replies: 1
    Last Post: 02-17-2014, 01:10 PM
  2. OpooSoft PDF To JPEG Converter 6.9
    By HamadaBader in forum Classic Tools
    Replies: 0
    Last Post: 12-20-2013, 10:36 AM
  3. Simulating In-Camera JPEG using ACR (Adobe Camera Raw)
    By ocimuw in forum Color Proofing Management
    Replies: 1
    Last Post: 06-12-2013, 12:39 AM

Tags for this Thread

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