Jump to content



Photo
- - - - -

png vs jpg images?


This topic has been archived. This means that you cannot reply to this topic.
4 replies to this topic

#1   GoTTi

GoTTi
  • Members
  • 448 posts

Posted 29 April 2012 - 00:40

i just realized i shouldve probably been uploading png images with a cleared background so the images show a little better with the style settings of the store....

what is better for the store? png (with transparent background) or jpg?

i know the size of the files matter here...is there any way to make the images size smaller? right now my jpg's are all 500x500 (99% of them) and the size is still compact. the png i did shot up to like 100kb in size.

#2   al3ks

al3ks
  • Members
  • 288 posts

Posted 29 April 2012 - 00:48

Depends what you need the images for. I would only use .png's for small images like icons but for files with large resolution like photos I'd use jpg, mainly because of lighter size. Also consider .gif it is often used for website elements such as buttons, also helps keep the file size down and improve loading times.
Find this post helpful? Click the 'Like this' button. :)

#3   GoTTi

GoTTi
  • Members
  • 448 posts

Posted 29 April 2012 - 00:53

are you using anything else to control the images shown on your stores? cuz how would i use small png files for icons and have a different image load on the actual item page?


do you mean like...someone is looking at "index.php?cPath=1" and your image is a small png file, but when they goto the item "product_info.php?cPath=1&products_id=18" you have a different image in there thats a jpg image?

#4 ONLINE   Jack_mcs

Jack_mcs
  • Members
  • 26,419 posts

Posted 29 April 2012 - 01:34

i just realized i shouldve probably been uploading png images with a cleared background so the images show a little better with the style settings of the store....

what is better for the store? png (with transparent background) or jpg?

i know the size of the files matter here...is there any way to make the images size smaller? right now my jpg's are all 500x500 (99% of them) and the size is still compact. the png i did shot up to like 100kb in size.

If you need transparent images, you can't use jpg's. If it doesn't matter, then use whichever creates the smallest file size (on average). The dimensions of the image (500x500) doesn't make much difference. You should make them whatever the largest size is that you want to display. It is the actual file size that matters. You should install an image thumbnail contribution to handle the images. It will display your images so they appear clear and crisp (assuming the originals are) and at a lower file size.

#5   MrPhil

MrPhil
  • Members
  • 5,156 posts

Posted 29 April 2012 - 17:13

GIF: old format, limited palette (256 colors), full transparency replacing one color. Excellent for diagrams, charts, icons, buttons with large expanses of a fixed color (and not too many of them).Good, lossless compression. Supported on all browsers.

JPEG: format optimized for photos (that's the 'P' in the name). No transparency. Excellent compression, but at the cost that it's "lossy". High-frequency information is removed, leading to degradation of the image. Not good for diagrams, charts, icons, buttons with large expanses of a fixed color because you get artifacts and bleed-over from one region into another, which degrades the quality. Note: multiple color models (RGB, HSV, CMYK, etc.) available, but Internet Explorer can display only RGB. Otherwise, very widely supported.

PNG: format that tries to be the best of both worlds. Decent, lossless compression available, but doesn't compress as well as JPEG. "Alpha channel" variable transparency, but older browsers don't support it. Less artifacting than JPEG, more colors available than GIF. Older browsers may have trouble with PNG, although it's been around long enough that most browsers can at least basically support it.

Use JPEG for photographs (no transparency), and either GIF or PNG for other purposes. Be aware of what older browsers will do to your PNG images (especially if you want to use transparency). Match the image type to the application. Don't be one of those idiots who use JPEG for everything, including charts and diagrams, which show very visible and annoying artifacting.