: Why are image sprites usually only created for ".png" files and not ".jpg"? I was wondering why when people talk about sprites they only mention .png files. Is there any problem in creating

@Bryan171

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


Use JPEG for photos, PNG for art (or WebP for both)
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.
Carelessly spriting JPEGs together is lossy and can result in bleeding of one image into another. Use jpegtran's lossless crop & drop feature

Vote Up Vote Down

@Phylliss660

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.

Vote Up Vote Down

@Nimeshi995

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.

Vote Up Vote Down