2

I read a couple of questions on the topic and the general feedback I see is that JPGs are for photos and PNGs are for everything else:

PNG should be used when:

  • You need transparency (either 1-bit or alpha transparency)
  • Lossless compression will work well (such as for a chart or logo, or computer generated image)

JPEG should be used when:

  • Lossless compression will not work well (such as a photograph)
  • Full color is needed

GIF should be when:

  • PNG is not available, such as on very old software or browsers
  • Animation is necessary

However, it seems like these discussions are more geared towards image download. My question is more geared toward image rendering. I'm planning to repeat a background in both the x & y directions...

background-image: url("/path/to/image.jpg");    /* repeat-x & repeat-y */

... and I can either store my image as a JPG ~13K or as a PNG ~50K. So the browser will be able to pull in this image pretty quickly since its relatively small, despite the ~40K difference. But does this difference matter when the browser renders the image on the page, especially since its a repeating background?

Hristo
  • 45,559
  • 65
  • 163
  • 230
  • Did you try it? What did it look like? – Carl Norum Apr 13 '12 at 04:58
  • I would use a PNG or a GIF. That 40k difference will add up quick. – Travis J Apr 13 '12 at 04:59
  • Actually, if your repeating background is a pattern with limited colors (most patterns are) you'll get better size results with a gif. – Ben Apr 13 '12 at 05:00
  • @CarlNorum... I did try it... it looks the same, but I don't know how that will scale across different browsers and different computers – Hristo Apr 13 '12 at 05:01
  • Is the image being used for mobile(i.e. smaller) resolutions? If so, even that smaller file size difference matters as those connection speeds are still a limiting factor. – kinakuta Apr 13 '12 at 05:06
  • @kinakuta... I haven't thought too much about that but I'm not imagining a mobile-specific version, not exactly the target platform, but there is a use case for it. – Hristo Apr 13 '12 at 05:09

2 Answers2

6

JPG is better for a low-bandwidth image - however it is not as crisp and therefore not very good for GUI.

JPG files can be saved to much smaller file size allowing faster transaction and online delivery.

JPG can be saved at different compression levels (usually from 1 – 12, 12 being the higher quality).

PNG is better for crisp images with a low number of colours,

PNG Supports 100% transparency. No need to save to a PSD (Photoshop Document) to preserve transparency.

PNG Supports layers with basic effects and formatting

You can keep saving the exact PNG file and you don’t have to worry about lossing image quality every time.

Generally, JPG is for photos and pictures, whereas PNG works well with computer generated graphics, logo's,web-icons etc.

See the more details about JPG vs PNG

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
  • I've learned this much by now... the question is more about how a browser will handle the 2 in regards to rendering and background repetition – Hristo Apr 13 '12 at 06:04
2

First, there is no difference between downloading an image and rendering it in the browser. In order for the browser to render the image it must be downloaded in full.

The fact that the image repeats is not very important. The time spent rendering the image will be insignificant compared to the time to download it.

It is always better for the images to be as small as possible. The rules of thumb you quoted will help make guesses, but you can always try both options, and see which one is smaller while not losing quality.

drewag
  • 93,393
  • 28
  • 139
  • 128
  • yea... quality-wise, they look the same. I just don't know enough about how a browser handles images (download & render & repeat) and how that scales across different browsers and platforms – Hristo Apr 13 '12 at 05:03
  • If you are interested in seeing the breakdown of loading and rendering times most browsers have profilers built into them or available as extensions. They will display a timeline of how long each element takes to load and render. – drewag Apr 13 '12 at 05:10
  • My workflow is, 1. Save as PNG from Photoshop, 2. create a JPEG version with as high a level of compression as will not noticeably impact visual quality, and 3. use the smaller one. All you should care about is file size. – twsaef Apr 13 '12 at 05:10
  • @twsaef... interesting. thanks for the suggestion. that makes sense if file size is all that matters. I just don't know if tiling an image requires a significant amount more processing power – Hristo Apr 13 '12 at 05:13