PNG & JPG Comparison

image
jpg
png
export

#1

It is quite typical that I export views into raster images such as PNGs and JPGs.
Ever since SketchUp implemented transparency option in PNG exports, I have been utilizing that heavily.
Because I go back and forth between PNGs and JPGs, I was wondering what other people to when they come to exports.

I know there is compression (reducing file size) for JPGs and transparency for PNGs.
But is there any other benefits that I am not aware of using one type over the other?

*Image exports are usually for quick presentation on edits in photoshop.


#2

JPG are lossy, every time you save a JPG you loose some information and quality of the image.

PNG is lossless - you can keep editing and saving it without loosing information.

I only ever save out JPG for the very final presentation export if, and only if I need to send by email or upload to website.


#3

So PNG exports are ideal since you have more room for edits.

Makes sense.

Any concerns for storage?


#4

Since JPEGs are lossy they can be smaller than PNGs - if you turn the quality when exporting low enough. I only use JPG when I know image size is an issue - for web use for instance. But even then I often use PNGs - particular if the image is graphics and not a photo You don’t notice the JPEG compression as easily with your typical photo.

PNG is my default file format to store flat images. It compress well. In terms of storing your data it shouldn’t be an issue as disk space is cheap.

I’m really fanatic about keeping original files - I keep all PSD files when I do a comp - then save out PNGs for general distribution of flattened images. I only use JPG when I really have to compromise quality for filesize.

But the most important thing is to not save work-in-progress in JPG - due to the loss of quality. You can never fully restore an image back to original once saved as JPG. Use it, and similar lossy image formats as final output.


#5

SketchUp models often have many visible faces that have a flat colour with no texture. In compressed JPG files these are a problem as they often display ugly artifacts while not compressing very well. That is why PNG is often a better choice. The JPG artifacts are a real nuisance in PDF exports from LayOut 2016 that applies by default a heavy compression to images unless you remember to turn it off, and with no option to use PNG instead.

Anssi


#6

+1 on this… @thomthom


#7

SketchUp doesn’t have all of the abilities that it could have. The general case is that JPEGs are lossy, by varying amounts, and PNGs are not lossy if you have them as 24 or 32 bit. If file size isn’t an issue, everything should be PNG. If file size is an issue, and transparency isn’t needed, everything should be JPEG.

The missing feature in SketchUp, that is in some other tools, is the ability to JPEG compress the opaque pixels, but keep the transparency.


#8

@colin I’m pretty sure the JPEG spec does not support an alpha channel. I don’t doubt somebody has come up with a hack to store additional transparency info, but I believe there is no standard for this.


#9

I was referencing other tools, Adobe Animate for example. With that you can import a PNG with transparency, set its compression to JPEG, and still you get the transparency on playback. They somehow stash the alpha and reimpose it on the decompressed JPEG.


#10

Even existing functions do have some little problems such as outline & halo around the PNG transparent images.

I would think alpha on JPG would be a lot more complicated :confused:


#11

The JPG format doesn’t support transparency.


#12

Finding the optimal settings for your image requires careful analysis along many dimensions . Before going for an analysis, you must be aware of a few key factors such as types of compression, colour depths, Resolution etc. PNG and JPG are by far the two most commonly used image file formats on the web. These formats have become the most popular because of their compatibility with modern browsers, broadband speeds, and the needs of average users. More on…JPG Vs PNG