Is there any difference between these two? Does .jpg for example load faster? “Stretch” better within the app than .png?
Thanks
JPG is a lossy format. - This means it is compressed and some information is LOST during compression. In turn this means visually it may have artifacts and not be good looking (depending on the quality setting used when encoding it).
PNG is a loss-less format - This means, although the image is compressed, no information is lost. So, the image will look good at full resolution and have no artifacts.
Comparisons
- JPG tends to encode to a smaller file size than PNG, but not always.
- PNG looks better at the same resoltion.
- A 1024 by 1024 PNG requires the same amount of VIDEO MEMORY as a 1024 by 1024 JPG. == 4 MB
Decode Speeds
I have no hard numbers on this. I am however, guessing they are equally fast and this is likely not a factor in game design decisions.
re: Stretching as you say.
Displayed at the resolution of the original image, PNG will look better. After that, if you stretch both equally, PNG will still look better.
For JPGs at 90% quality (standard setting for most JPG encoders) a sufficiently complex image will be practically the same as a PNG.
JPGS do poorly (compared to PNG) when you have large areas of a single color bordering a sharply divided color change.
Finally, there is another kind of PNG which is lossy. It uses a technique the authors call ‘quantitization’. I find that in certain cases this is visually pleasing and superior in disk size (very small) to both standard PNG and JPG.
Learn more about ‘quantitized PNGs’ here: https://tinypng.com/
Also png can have an alpha channel whereas jpeg doesn’t support transparency.
While what @roaminggamer said is true, the visual difference between a JPEG and a PNG are not that significantly different. JPEG compression can be quite aggressive if you crank it up to 30-50% but images compressed at 75% or higher are visually pretty close to a PNG file.
JPEG compression is the most severe on gradients. If your image has more detail and less smooth areas, then compression is much less noticeable.
Both JPEG and PNG compress, but JPEG uses a technique that will take areas of similar color and turn it in to the same color. The higher the compression level the smaller the file, the larger the area that gets turned into the same color. This is why it’s called Lossy. That said on images like gradients where there can be larger areas that are the same color, PNG compression does fairly well, but it really starts struggling on images with lots of detail.
So what I do, is I ask myself the first question: Does the graphic require transparency or can it be solid? If you require transparency, there is no question, you need it to be a PNG file. However if it can be solid (think of a background or a playing card) then you should consider JPEGs which could easily be 1/10th the size. Of course this means squat in memory, but loading the file from storage and how big your App Bundle is can be drastically impacted if you choose PNG’s for your solid rectangles over JPEGs.
I use a mix of PNG’s and JPEGs depending on what I’m doing.
Rob
Ill pitch in as well! 
JPG- Is a format like when you take a picture on your cell phone or camera…
PNG-Is when you make an image in lets say photoshop or paint.
just my understanding
JPEG is about the only standard for photography when it comes to a compressed image format. There are so many random pixels that using a “Run length encoding”, the backbone of PNG and GIF compression isn’t practical. Instead a grid of 4x4, 8x8, etc. pixels are scanned and the colors averaged out, which creates blocks that can be run length encoded. Artwork already has big blocks of solid colors that put through the RLE compression method. So generally it’s true that JPEG is for photos, PNG is for art. However, both photos and art are images and both JPEG and PNG can be used on images. Because JPEG’s compression makes much smaller files on photos than PNG’s do, it’s really the only good choice for photography.
Rob
JPG is a lossy format. - This means it is compressed and some information is LOST during compression. In turn this means visually it may have artifacts and not be good looking (depending on the quality setting used when encoding it).
PNG is a loss-less format - This means, although the image is compressed, no information is lost. So, the image will look good at full resolution and have no artifacts.
Comparisons
- JPG tends to encode to a smaller file size than PNG, but not always.
- PNG looks better at the same resoltion.
- A 1024 by 1024 PNG requires the same amount of VIDEO MEMORY as a 1024 by 1024 JPG. == 4 MB
Decode Speeds
I have no hard numbers on this. I am however, guessing they are equally fast and this is likely not a factor in game design decisions.
re: Stretching as you say.
Displayed at the resolution of the original image, PNG will look better. After that, if you stretch both equally, PNG will still look better.
For JPGs at 90% quality (standard setting for most JPG encoders) a sufficiently complex image will be practically the same as a PNG.
JPGS do poorly (compared to PNG) when you have large areas of a single color bordering a sharply divided color change.
Finally, there is another kind of PNG which is lossy. It uses a technique the authors call ‘quantitization’. I find that in certain cases this is visually pleasing and superior in disk size (very small) to both standard PNG and JPG.
Learn more about ‘quantitized PNGs’ here: https://tinypng.com/
Also png can have an alpha channel whereas jpeg doesn’t support transparency.
While what @roaminggamer said is true, the visual difference between a JPEG and a PNG are not that significantly different. JPEG compression can be quite aggressive if you crank it up to 30-50% but images compressed at 75% or higher are visually pretty close to a PNG file.
JPEG compression is the most severe on gradients. If your image has more detail and less smooth areas, then compression is much less noticeable.
Both JPEG and PNG compress, but JPEG uses a technique that will take areas of similar color and turn it in to the same color. The higher the compression level the smaller the file, the larger the area that gets turned into the same color. This is why it’s called Lossy. That said on images like gradients where there can be larger areas that are the same color, PNG compression does fairly well, but it really starts struggling on images with lots of detail.
So what I do, is I ask myself the first question: Does the graphic require transparency or can it be solid? If you require transparency, there is no question, you need it to be a PNG file. However if it can be solid (think of a background or a playing card) then you should consider JPEGs which could easily be 1/10th the size. Of course this means squat in memory, but loading the file from storage and how big your App Bundle is can be drastically impacted if you choose PNG’s for your solid rectangles over JPEGs.
I use a mix of PNG’s and JPEGs depending on what I’m doing.
Rob
Ill pitch in as well!
JPG- Is a format like when you take a picture on your cell phone or camera…
PNG-Is when you make an image in lets say photoshop or paint.
just my understanding
JPEG is about the only standard for photography when it comes to a compressed image format. There are so many random pixels that using a “Run length encoding”, the backbone of PNG and GIF compression isn’t practical. Instead a grid of 4x4, 8x8, etc. pixels are scanned and the colors averaged out, which creates blocks that can be run length encoded. Artwork already has big blocks of solid colors that put through the RLE compression method. So generally it’s true that JPEG is for photos, PNG is for art. However, both photos and art are images and both JPEG and PNG can be used on images. Because JPEG’s compression makes much smaller files on photos than PNG’s do, it’s really the only good choice for photography.
Rob