Suggestion: Using CSS Sprites for Icons

[Hultenius.]

I've tried the software on a live forum for a week now and the results are satisfying. The number of (useless) HTTP-requests and downloaded images are down with 40-50%. Using CSS sprites will probably decrease server load quite a bit on busy boards. The graph below shows some statistics for the last few days. Shouldn't be that hard to figure out when the software was installed... :rolleyes:


Green bars: HTTP-requests
Blue bars: Downloaded images
Turquoise bars: Downloaded pages (roughly 1/6 are actual page views, the rest are dynamic JS/CSS files and search engines)

Decreasing the server load is not the only benefit, you will also see [url=" loading times (not to confuse with render time!) and slightly better SEO (extremely small gain, but an improvement nonetheless). There are also some positive side-effects, like instant hover effect on buttons.

The software is mostly done by now, just need to write some basic documentation, clean up the code and create a simple order homepage. I will also make sure it works with upcoming IPB 3.1.3. Just wait 1-2 more weeks!

[JamesDW]

Excellent work!
Really looking forward to this, let me know if you need any assistance with further testing or input into documentation and such.
cheers,
James

[Enkidu]

can't wait :thumbsup:

[LeadCrow]

There shouldnt be a need to lose the original source images and their editability. Themes could just be edited to reference a new css sprite (ot create from admincp through an efficient suggester, then have it cached in place of the now no longer referenced source images).

Rather than reinventing the wheel for a fifteen, here's an actually good suggester. Output code provided as well.
http://spriteme.org/

[Olivier Turbis]

Yes, he has an interesting idea, I'll admit that. I'm curious how well it turns out. Once you start factoring in custom skins and such, things like this can get tricky.

Totally agree. That would be a mess.

[Amged Osman]

Totally agree. That would be a mess.

I wouldnt call it a mess really, I mean if its a mess facebook wouldn't have use it. It only needs a proper coder to understand how to code / design it if you are "REVAMPING" the whole skin, but, if you need to change one or two images of your skin then a beginner can do it.
I mean ppl were not born with regular CSS in their brains, Matt and Brandon were not born with PHP in their brains, we learn as we go, I think 50% of IPB users didnt have a clue about coding when they bought the system, yet a week or two you will find them changing few stuff they never imagined they will be ble to change. sme will go for that script.

The only thing I do not like, is its going to be paid.. not free (not because i do not want to pay) no its because being paid will not encourage everyone to try it, use it, learn it! which eventually will not make it that popular, but, who knows I could be wrong..

so anyways Good job so far

[Jaggi]

Definitely a good improvement, something i also found made a HUGE difference to bandwidth was using apache deflate and forcing caching.

Header unset ETag

FileETag None

<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">

Header unset Last-Modified

Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"

Header set Cache-Control "public, no-transform"

</FilesMatch>


<IfModule mod_deflate.c>

<FilesMatch "\.(js|css|php)$">

SetOutputFilter DEFLATE

</FilesMatch>

</IfModule>

this small change in a htaccess file made a big difference.

[Matt]

Matt and Brandon were not born with PHP in their brains, we learn as we go

Incorrect, I was created with:

$matt = new Mecham('male');

[Jaggi]

Incorrect, I was created with:

$matt = new Mecham('male');

lol :lol:

Now you know guys, this is where babies come from!

[Taylor J]

or

$matt = new Mecham('male/female/waitwhat?');

[Fishfish0001]

$matt = new Mecham(array('male', 'white'));

[Amged Osman]

$matt = new Mecham(array('male', 'white'));

lol :lol: thats even better

[Zhana]

The software is mostly done by now, just need to write some basic documentation, clean up the code and create a simple order homepage. I will also make sure it works with upcoming IPB 3.1.3. Just wait 1-2 more weeks!

Waiting for it.

[JamesDW]

Any update on this?
Is there anything we can help with? :)

[ørret]

What happened to this mod?

[Hultenius.]

Sorry guys, I've been extremely busy lately and haven't touched the code for two months or so.

But, I also have some good news. The project is not dead, the software will be released - for FREE! It will be released under GPL, so anyone else can continue to develop it.

I plan to release it next sunday, 9th of january.

[Zhana]

Glad to hear that.

[Morrigan]

I see it's been discussed (and seemingly decided) but I wanted to throw my 2 cents in.

I abhor CSS SPRITES!

Thank you.

Oh I guess you need a bit more then that. As the staff has said for novice skinners it makes it hard. I am a novice skinner and I have dealt with CSS sprites before and they are difficult to manage, annoying to update. Difficult to figure out where they are in the CSS (since you have to find it by coordinates instead of an image name). It's obnoxious to replace and all around frustrating. SMF has them and I've been skinning on it for some RPs for my friends and it makes my skin crawl to even start looking at their CSS.

[Hultenius.]

The application is ready for a beta release, but it might be a good idea to test it on a fresh install first :rolleyes:

[JamesDW]

Excellent news :)
How can we get our hands on it?

[Zhana]

Cool. Interested in beta app too.

[Hultenius.]

The beta version has been submitted to IPS Marketplace. It will hopefully be approved soon.
Download page:

Don't forget to report bugs in support thread! :)

Oh! And here are some configurations for the default skin. Just don't look at the configuration code for advanced images, you might get a headache ;)

Sprite: Main - Normal images

public/style_images/master/feed.png public/style_images/master/help.png public/style_images/master/loginmethods/facebook.png public/style_images/master/loginmethods/twitter.png # Global footer public/style_images/master/stats_time.png public/style_images/master/stats_server.png public/style_images/master/stats_database.png public/style_images/master/stats_compression.png # Sidebar public/style_images/master/sidebar_close.png public/style_images/master/comment_new.png public/style_images/master/sidebar_open.png public/style_images/master/comments.png public/style_images/master/user_comment.png public/style_images/master/locked_replies.png public/style_images/master/lock_small_gold.gif public/style_images/master/transmit_blue.png public/style_images/master/bell.png # Forum icons public/style_images/master/last_post.png # Topic icons public/style_images/master/t_read.png public/style_images/master/t_read_dot.png public/style_images/master/t_unread.png public/style_images/master/t_unread_dot.png public/style_images/master/t_hot_read.png public/style_images/master/t_hot_read_dot.png public/style_images/master/t_hot_unread.png public/style_images/master/t_hot_unread_dot.png public/style_images/master/t_poll_read.png public/style_images/master/t_poll_read_dot.png public/style_images/master/t_poll_unread.png public/style_images/master/t_poll_unread_dot.png public/style_images/master/t_closed.png public/style_images/master/t_moved.png # Topic row icons public/style_images/master/topicpreview.png public/style_images/master/attachicon.gif public/style_images/master/textfield_rename.png public/style_images/master/award_delete.png public/style_images/master/lock.png public/style_images/master/lock_open.png public/style_images/master/award.png public/style_images/master/bullet_error.png public/style_images/master/transmit_small.png public/style_images/master/pm_nonew.png # Button images public/style_images/master/page_white_add.png # PM public/style_images/master/bin.png public/style_images/master/folder.png public/style_images/master/folder_add.png public/style_images/master/folder_edit.png public/style_images/master/folder_page.png public/style_images/master/email_go.png public/style_images/master/note_add.png public/style_images/master/pm_new.png public/style_images/master/pm_nonew.png # Unsorted public/style_images/master/dropdown.png public/style_images/master/new_post.png public/style_images/master/delete.png public/style_images/master/close_popup.png public/style_images/master/user_add.png public/style_images/master/user_delete.png public/style_images/master/user_popup.png public/style_images/master/opts_arrow.png public/style_images/master/email_open.png public/style_images/master/page_topic_magnify.png public/style_images/master/user_off.png public/style_images/master/report.png public/style_images/master/cross.png public/style_images/master/date.png public/style_images/master/user.png public/style_images/master/spammer_off.png public/style_images/master/profile/male.png public/style_images/master/warn_add.gif public/style_images/master/warn_minus.gif public/style_extra/cprofile_icons/profile_msn.gif public/style_images/master/user_edit.png public/style_images/master/user_green.png

# Global header

Sprite: Main - Advanced images

#===================================

# GLOBAL HEADER

#===================================


### Logo background gradient

$ repeat_x,padding=0|0|20|0 :: public/style_images/master/branding_bg.png

 #branding { background: #1d3652 url({SPRITEURL}) repeat-x 0px -{Y}px; }


### Search icons

$ right,padding=3|0|10|100 :: public/style_images/master/search_expand.png

 #search .choice { background: transparent url({SPRITEURL}) no-repeat 100% -{Y}px; }

$ padding=5|10|6|6 :: public/style_images/master/search_icon.png

 #search .submit_input { background: #528f6c url({SPRITEURL}) no-repeat -{X}px -{Y}px; }


### Navigation bar

$ fill_x :: public/style_images/master/primarynav_bg.png

 #primary_nav { background: #192b40 url({SPRITEURL}) no-repeat -{X}px -{Y}px; height:{H}px;}

$ fill_x :: public/style_images/master/tab_left.png

 #primary_nav ul li.active { background: transparent url({SPRITEURL}) no-repeat -{X}px -{Y}px;}

$ right :: public/style_images/master/tab_right.png

 #primary_nav ul li.active a { background: transparent url({SPRITEURL}) no-repeat 100% -{Y}px;}



#===================================

# BOARD INDEX

#===================================


### Show/hide forum category buttons	

$ :: public/style_images/master/cat_minimize.png

a.toggle { background: transparent url({SPRITEURL}) -{X}px -{Y}px; width:{W}px; height:{H}px;}

$ :: public/style_images/master/cat_maximize.png

.category_block h3.collapsed a.toggle { background: transparent url({SPRITEURL}) -{X}px -{Y}px; width:{W}px; height:{H}px;}


### Show/hide sidebar buttons    

$ :: public/style_images/master/cat_minimize_small.png

.index_stats_collapse.open { background: transparent url({SPRITEURL}) -{X}px -{Y}px; width:{W}px; height:{H}px;}

$ :: public/style_images/master/cat_maximize_small.png

.index_stats_collapse.close { background: transparent url({SPRITEURL}) -{X}px -{Y}px; width:{W}px; height:{H}px;}


### Subforum bullets

$ right,padding=4|5|4|3 :: public/style_images/master/bullet_black.png

table.ipb_table ol.subforums li { background: transparent url({SPRITEURL}) no-repeat -{X}px -{Y}px;}

$ right :: public/style_images/master/bullet_green.png

table.ipb_table ol.subforums li.newposts { background: transparent url({SPRITEURL}) no-repeat -{X}px -{Y}px;}



#===================================

# BUTTONS

#===================================


### Blue buttons

$ fill_x :: public/style_images/master/topic_button_left.png

.topic_buttons li { background: transparent url({SPRITEURL}) no-repeat -{X}px -{Y}px; }

$ right :: public/style_images/master/topic_button_right.png

.topic_buttons li a { background: transparent url({SPRITEURL}) no-repeat 100% -{Y}px; }


### Blue buttons - Hover

$ fill_x :: public/style_images/master/topic_button_left_hover.png

.topic_buttons li:hover { background: transparent url({SPRITEURL}) no-repeat -{X}px -{Y}px; }

$ right :: public/style_images/master/topic_button_right_hover.png

.topic_buttons li:hover a { background: transparent url({SPRITEURL}) no-repeat 100% -{Y}px; }


### Gray/disabled buttons

$ fill_x :: public/style_images/master/topic_button_left_disabled.png

.topic_buttons li.disabled { background: transparent url({SPRITEURL}) no-repeat -{X}px -{Y}px; }

$ right :: public/style_images/master/topic_button_right_disabled.png

.topic_buttons li.disabled span { background: transparent url({SPRITEURL}) no-repeat 100% -{Y}px; }


### Red/closed buttons

$ fill_x :: public/style_images/master/topic_button_left_closed.png

.topic_buttons li.closed { background: transparent url({SPRITEURL}) no-repeat -{X}px -{Y}px; }

$ right :: public/style_images/master/topic_button_right_closed.png

.topic_buttons li.closed span, .topic_buttons li.closed a { background: transparent url({SPRITEURL}) no-repeat 100% -{Y}px; }


### Post buttons

$ fill_x :: public/style_images/master/post_button_left.png

ul.post_controls li { background: transparent url({SPRITEURL}) no-repeat -{X}px -{Y}px; }

$ right :: public/style_images/master/post_button_right.png

ul.post_controls a { background: transparent url({SPRITEURL}) no-repeat 100% -{Y}px; }



#===================================

# Other stuff

#===================================


### Input field background

$ repeat_x,bottom :: public/style_images/master/input_text.png

.input_text { background: #ffffff url({SPRITEURL}) repeat-x 0px -{Y}px; }

Sprite: Topic view - Normal images

# Not categorized public/style_images/master/spacer.gif public/style_images/master/snapback.png public/style_images/master/add.png # Button icons public/style_images/master/lock.png public/style_images/master/page_white_add.png public/style_images/master/arrow_rotate_clockwise.png public/style_images/master/report.png public/style_images/master/comment_add.png public/style_images/master/comment_edit.png public/style_images/master/comment_delete.png # Regular smilies (not animated!) public/style_emoticons/default/biggrin.gif public/style_emoticons/default/smile.gif public/style_emoticons/default/tongue.gif public/style_emoticons/default/wink.gif public/style_emoticons/default/happy.gif public/style_emoticons/default/laugh.gif public/style_emoticons/default/dry.gif public/style_emoticons/default/mellow.gif public/style_emoticons/default/ph34r.gif public/style_emoticons/default/mad.gif public/style_emoticons/default/laugh.gif public/style_emoticons/default/blush.gif public/style_emoticons/default/huh.gif public/style_emoticons/default/happy.gif public/style_emoticons/default/sleep.gif public/style_emoticons/default/ohmy.gif public/style_emoticons/default/cool.gif public/style_emoticons/default/sad.gif # Sharelinks public/style_extra/sharelinks/twitter.png public/style_extra/sharelinks/facebook.png public/style_extra/sharelinks/digg.png public/style_extra/sharelinks/buzz.png public/style_extra/sharelinks/delicious.png public/style_extra/sharelinks/email.png public/style_extra/sharelinks/print.png public/style_extra/sharelinks/download.png # Member pane public/style_avatars/blank_avatar.gif public/style_images/master/user_add.png public/style_images/master/user_green.png public/style_images/master/email_open.png # Post editor public/style_images/master/rte_icons/font_color.png public/style_images/master/rte_icons/resize_small.png public/style_images/master/rte_icons/resize_big.png public/style_images/master/rte_icons/help.png public/style_images/master/rte_icons/undo.png public/style_images/master/rte_icons/redo.png public/style_images/master/rte_icons/bold.png public/style_images/master/rte_icons/italic.png public/style_images/master/rte_icons/underline.png public/style_images/master/rte_icons/strike.png public/style_images/master/rte_icons/subscript.png public/style_images/master/rte_icons/superscript.png public/style_images/master/rte_icons/unordered_list.png public/style_images/master/rte_icons/ordered_list.png public/style_images/master/rte_icons/emoticons.png public/style_images/master/rte_icons/link.png public/style_images/master/rte_icons/picture.png public/style_images/master/rte_icons/email.png public/style_images/master/rte_icons/quote.png public/style_images/master/rte_icons/code.png public/style_images/master/rte_icons/media.png public/style_images/master/rte_icons/indent.png public/style_images/master/rte_icons/align_left.png public/style_images/master/rte_icons/align_center.png public/style_images/master/rte_icons/align_right.png public/style_images/master/rte_icons/outdent.png public/style_images/master/rte_icons/spellcheck.png public/style_images/master/rte_icons/rte_arrow.png public/style_images/master/rte_icons/remove_formatting.png public/style_images/master/close_popup.png # Post icons public/style_extra/post_icons/icon1.gif public/style_extra/post_icons/icon2.gif public/style_extra/post_icons/icon3.gif public/style_extra/post_icons/icon4.gif public/style_extra/post_icons/icon5.gif public/style_extra/post_icons/icon6.gif public/style_extra/post_icons/icon7.gif public/style_extra/post_icons/icon8.gif public/style_extra/post_icons/icon9.gif public/style_extra/post_icons/icon10.gif public/style_extra/post_icons/icon11.gif public/style_extra/post_icons/icon12.gif public/style_extra/post_icons/icon13.gif public/style_extra/post_icons/icon14.gif # Posting page public/style_images/master/information.png public/style_images/master/chart_curve_add.png public/style_images/master/bullet_delete.png

Sprite: Topic view - Advanced images

### Citation background image

$ right,fill_x,bottom,padding=-8|0|0|0 :: public/style_images/master/citation_bg.png

p.citation { background: #d3e9dc url({SPRITEURL}) no-repeat 100% -{Y}px;}

[Rowen7]

I just installed it.

I love it. Google Page Speed loves it too.

[Gaffney]

Is there a way to support several skins without adding all of them into one massive sprite ?

[sobrenome]

Is there any news about a new version compatible with ipb 3.3.3?