Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I was wondering why when people talk about sprites they only mention .png files. Is there any problem in creating sprites for .jpg files?

share|improve this question

3 Answers 3

up vote 9 down vote accepted

There's nothing saying you can't use JPEG but generally PNG's are better because of several factors:

  • Most page based elements such as tabs and icons compress far Superior than JPEG.
  • PNG is a lossless compression format
  • Jpeg doesn't support transparency (the main issue, most page elements contain the need for transparency).

Generally PNG files will compress smaller if the element is not so complex - jpeg compresses better at photography and more complex images - most page elements such as buttons, tabs, social media icons are simple therefor more suited for PNG as well as the need for transparency.

share|improve this answer
    
I know when using these formats. In this case my question is: why people doesn't create sprites for jpg images? is there any problem with that? If I create an sprite with the jpg, i will reduce the number of requests. –  tirengarfio Jun 18 '13 at 16:46
2  
Your question asks why are sprites usually created for png and not jpg - My answer includes the reasons why PNG is better including the information that you can use JPEG if you want too. i.e There's nothing saying you can't use JPEG –  bybe Jun 18 '13 at 16:49
    
@tirengarfio - Jpegs don't have transparancy. PNG does. Do you want to regenerate all your sprites and buttons just because you decide to change the background color they overlay? Nuff said. –  Fiasco Labs Jul 9 '13 at 15:52

It's not that PNG is better for sprites, it's that PNG is better for the types of images people normally use sprites for (buttons, icons etc.). You can use any web-suitable image format for sprites.

Imagine you have a staff page on your company website that lists 10 or so staff members with a small photo alongside each one. If you wanted to speed up this page up by merging all the photos into one sprite, in this example JPEG would probably be a better choice, as it'll give you better compression for that sort of image.

share|improve this answer

Spriting can be used for JPEGs too. Just remember the rules:

  1. Use JPEG for photos, PNG for art (or WebP for both)
  2. Spriting is for decorative images, not content. e.g. don't sprite photos on a photo sharing website, or a web page discussing image optimisation! Do sprite background images and other decorative pictures.
  3. Carelessly spriting JPEGs together is lossy and can result in bleeding of one image into another. Use jpegtran's lossless crop & drop feature
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.