Should I use JPG or PNG for a tile-able background (background-repeat)?
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?
Answer
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.