: Which raster image format is better for digitally displaying images when there is no transparency; JPEG or PNG? I'm trying to determine which format is better to use when there is no transparency

@Hamm6457569

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.

Vote Up Vote Down

@Carla748

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

Vote Up Vote Down

@Harper654

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.

Vote Up Vote Down

@Murray976

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

Vote Up Vote Down