Steal away!
I will be using CSS sprites for the responsive theme I'm working on so I now spent some time with the /images/ directory (but didn't yet work with any subfolder within). I ignored pixel.gif, spacer.gif and pollbar gifs. Pollbar can be replaced with pure CSS while spacer should go back to the 90's where it came from!
Results:
- All 13x13 -> 16x16 pixel images: GIF 23 kB (34 files), PNG 9.94 kB
- All 18 x 18 pixel images: GIF 13.5 kB (17 files), PNG 2.37 kB
- All 22 x 22 pixel images: GIF 3.19 kB (3 files), PNG 2.6 kB (alpha transparent)
These PNG images can each contain 100 sprite icons, so most of the slots are still available! I analyze and reorganize icons in the subfolders later so changes to be expected. This is also why I have no shareable CSS done for these yet.
Out of curiosity, if you went through the effort of compiling these into one image, why not use the PNG versions? It seems rather silly to use the GIFs (lack of partial transparency).
http://www.famfamfam.com/lab/icons/silk/
I was unaware of PNG versions. It might be a bit more effort to find the right ones out of that site though. In the other hand I could just go ahead and include more than just the ones MyBB uses.
Update!
Attached you can find all the famfamfam icons as a sprite image. I attached three versions, 256 color, 48 color and 4-bit greyscale version, file size details for comparison:
- Original 1000 image files: 646 kB
- Full color / 8-bit alpha: 522 kB
- 256 color / 4-bit alpha: 292 kB
- 48 color / 4-bit alpha: 212 kB
- 16 color (4-bit greyscale) / 4-bit alpha: 160 kB
So yeah, 212 kB is quite a bit of size, but in the other hand that does include 1000 images. MyBB currently has about 128 of these images in use and those files consume 114 kB and do not have alpha transparency
I also included CSS as a regular version and compressed in gzip. Usage:
<div class="mybb-icon mybb-icon--add">Add something</div>
256 color version:
[
attachment=30419]
48 color version:
[
attachment=30415]
4-bit greyscale version:
[
attachment=30420]
Cheat sheet for class names:
http://www.famfamfam.com/lab/icons/silk/...ex_abc.png
For example
car_add from that cheat sheet will be accessible as
mybb-icon--car-add
(2013-10-30, 03:41 PM)Merri Wrote: [ -> ]I was unaware of PNG versions. It might be a bit more effort to find the right ones out of that site though. In the other hand I could just go ahead and include more than just the ones MyBB uses.
Update!
Attached you can find all the famfamfam icons as a sprite image. I attached three versions, 256 color, 48 color and 4-bit greyscale version, file size details for comparison:
- Original 1000 image files: 646 kB
- Full color / 8-bit alpha: 522 kB
- 256 color / 4-bit alpha: 292 kB
- 48 color / 4-bit alpha: 212 kB
- 16 color (4-bit greyscale) / 4-bit alpha: 160 kB
So yeah, 212 kB is quite a bit of size, but in the other hand that does include 1000 images. MyBB currently has about 128 of these images in use and those files consume 114 kB and do not have alpha transparency
I also included CSS as a regular version and compressed in gzip. Usage:<div class="mybb-icon mybb-icon--add">Add something</div>
256 color version:
48 color version:
4-bit greyscale version:
Cheat sheet for class names:
http://www.famfamfam.com/lab/icons/silk/...ex_abc.png
For example car_add from that cheat sheet will be accessible as mybb-icon--car-add
I really am surprised at the time you invested in it, great work.
I would share all the possible icon-font css codes i have used, once i finish replacing all images with icon fonts.
Reps up.
regards
Thanks
I didn't need to spend time on figuring anything out so it was quite straightforward to just do the optimizations based on old knowledge. I also tried my luck with an online sprite generator that was surprisingly decent:
http://spritegen.website-performance.org/
For this reply I tried the other search results that Google gave me for sprite generators and none of them worked as well as the one linked above. The only thing it does wrong is not allowing 0px offsets between images, because who cares about Safari 3's bug with background images these days? That is why there is so much space between the images. In the other hand there are "retina" displays these days so having ~4px extra around each image (possible blurring issues with resized images if tightly together).
Boom!
Attached is an even better optimized version. I changed the sprite tiling to horizontal and shrunk the offset to 4px. The result is a far better optimized sprite image!
HQ version (32-bit, 8-bit alpha): 251 kB
LQ version (8-bit/256 colors, 4-bit alpha): 139 kB
Personally I find it hard to see any difference between the versions. Zip file includes both versions of the sprite image, CSS and sample HTML.