1

I'm trying to determine which format is better to use when there is no transparency in an image. More importantly though, I'm trying to figure out when it's better to use one over the other.

From what I understand, JPEG essentially tricks the human eye into filling in the gaps by limiting the information to just enough that the details still appear to be the same image at specific sizes.

JPEG is probably best for detailed images.

All I can confidently state about PNG, is that it is a lossless file format that supports transparency.

I have been looking them up, but there is a whole host of information that I have to read through, and then read deeper to make sure I understand. I can't find a particularly good description either. So hopefully I can get a good answer here.

  • When should I use PNG over JPEG?

  • When should I use JPEG over PNG?

  • What are the strengths of each format, from a graphic designers point of view?

Improve this question

4 Answers 4

Reset to default
4

For me... with no transparency.. whichever is smaller (kb).

Save for Web in Adobe apps allows you to switch between formats to compare resulting file sizes. I simply switch between PNG24 and JPG to compare the resulting sizes.

I start with JPG medium (30) and check quality. Then compare to the PNG24 size. If JPG 30 is smaller.... I start stepping up by quality settings of 10. I try JPG 40. Still smaller than the PNG, then JPG 50, if quality requires it.

It's all a "look and see" game. You have to determine, image by image, what quality or format is needed. In my experiences, there's no such thing as a setting with always works better (other than gif for single image animation).

Improve this answer
3
  • 1
    :) That involves saving as both and comparing, you don't really do that with every image do you?
    – Dom
    Commented Jul 19, 2014 at 21:28
  • No save for Web will show you the overall size when you pick a format. You need to actually save both formats.
    – Scott
    Commented Jul 19, 2014 at 22:40
  • thats why the save for web exists so you can easily and quick compare dozen of settings in a minute. BTW this is also how high quality video compression is made. why guess when you can know.
    – joojaa
    Commented Jul 20, 2014 at 0:49
4

The rule of thumb is to use JPEG for photos, and PNG for graphics. Of course, there are instances where this rule doesn't apply, but usually this is the best choice.

The advantage of JPEG is that it can compress large, detailed images to workable file sizes.

PNG works better for images that have straight lines and geometric shapes (lines that shouldn't appear blurry or jaggered), solid colours and don't have a resolution that is so high that it would make them unworkably large in PNG format. Flat graphics are particularly suited for the PNG format. That is, if you can't use a vector format. To give you an example: if you were to make a screenshot of this page, you would best output it in PNG.

As a graphic designer, for distribution on the web, I would use JPEG for photos, and then PNG for anything else unless the file size is too large to be displayed on the web. One advantage of PNG is that it supports lossless compression, however there are other formats I would probably prefer over PNG for this feature. For example: I would prefer TIFF over PNG for lossless compression of photo-like images, and vector formats over PNG.

Improve this answer
1
  • JPEG can compress… detailed images? Certainly it can do one-way job, but result depends on the nature of said details.
    – Incnis Mrsi
    Commented Dec 9, 2014 at 6:25
1

I am suprised nobody has mentioned this before. There are superior image saving techniques than Photoshop. You can mess with Adobe exporting for days and you will get much better quality with different tools. Lot of times you save 60% more while having identical image quality.

If you optimize the images in a good way, you will find that JPEGs are good for photos and PNGS for mostly everything else. Its good habit to always optimise images, its really simple and it you will save lot of bandwidth / diskspace.

Optimalization

ImageOptim

If you care about sizes and quality i highly recommend ImageOptim its free which with Jpeg, PNG and Gif images. It does a lot of clever optimalizations (cleans up headers and metatags) and it just makes all images a lot smaller. Its loseless so even if you use jpeg it wont change the image quality. You should use lossy compression on jpeg and then run it through ImageOptim.

Jpeg

Photoshop save for web isn't really good for saving compressed images. There is paid (unfortunately) program called JPEGmini. Its hands down best lossy JPEG compression engine. I would suggest export from your program as high quality jpeg then run it through JPEGmini and then run it through ImageOptim. It makes insane difference.

PNG

ImageAlpha is also free project that applies lossy compresion on PNGs. This is very useful when you need small transparent images. Again the workflow would be export PNG24 then run it through ImageAlpha and after that ImageOptim. You might ask why you would need lossy PNG. Well if you create graphics for webs, interfaces or sprites for games for example. It is extremely important to have small transparent images.

If you want loseless PNG just use ImageOptim.

Progressive Loading

When you put stuff on web, its good to know about progressive loading. Images are loaded as a whole and at first are blury. This is very useful for user experience. Both Jpegs and PNG can do this but its more effective for Jpegs. More about progressive loading it here.

Windows

All of the software above is unfortunately only for Macs. Probably because most of web developers and designers have macs. If you need something similar for Windows i've heard good things about FileOptimizer which uses many of the same techiques as the software mentioned above.

Improve this answer
0

If it's an image with text for a post on social media, PNG turns out better / text is crisper. (specifically Facebook)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.