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