[RFC] CSS Image Sprites

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
pawel92
Registered User
Posts: 6
Joined: Sun Mar 30, 2014 1:14 pm

Re: [RFC] CSS Image Sprites

Post by pawel92 » Fri Apr 11, 2014 8:47 am

/a3 wrote:Another suggestion I would like to make:

hanakin has already posted some example PNG files (I'm not sure if these are based off the GIFs provided or the original PSDs) but the PNG spec contains some lossless compression filters (I'm not going into detail here, but here are some details from libpng).

There are programs including advpng, PNGOUT, pngcrush etc. that can be used to use these filters to further "compress" (or optimise) these PNG files.

I haven't spent long, but with advpng I was able to get the following results:

button_topic_new.gif in prosilver
Original GIF: 2737 bytes
PNG (GIMP): 2200 bytes
PNG (advpng): 2136 bytes

bg_tabs1.gif in prosilver
Original GIF: 1520 bytes
PNG (GIMP): 566 bytes
PNG (advpng): 550 bytes

site_logo.gif in prosilver
Original GIF: 3430 bytes
PNG (GIMP): 2332 bytes
PNG (advpng): 2236 bytes

topic_icons.png which hanakin posted
Original PNG: 1822 bytes
PNG (advpng): 1250 bytes

contact_icons.png which VSE posted
Original PNG: 12069 bytes
PNG (advpng): 9768 bytes

I have not tried these in pngcrush, PNGOUT and other programs yet, but from experience I've found advpng the best in most cases.

Another upside of using PNG: it supports alpha transparency. This way the smilies will be able to work with any background, not just blue backgrounds. In comparison, GIF only supports on/off transparency.

The only downside: the animated emoticons would have to be in the GIF format because PNG doesn't support animations. MNG and APNG do, but MNG isn't well supported (if at all) and APNG is only supported by Gecko-based browsers and is a Mozilla standard.

Oh, and by the way, image sprites are a good idea in most cases, since we're talking about the style of the page and not the content. However, smilies are part of the content and should be used in <img> tags, not CSS backgrounds (for semantic purposes - as they are technically a part of the document).
Old topic, but still current.
Compress pictures does not seem so difficult when you have at hand good programs.
pngquant, ImageOptim

Regards

Post Reply