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

3 Answers 3


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.

  • 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.
    – tirenweb
    Jun 18, 2013 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 Jun 18, 2013 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. Jul 9, 2013 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.


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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