Jump to content

Suggestion: Using CSS Sprites for Icons


Ran Yefet

Recommended Posts

Posted

Sorry to open again this old topic, as suggested by other veteran members ?do=embed' frameborder='0' data-embedContent>?do=embed' frameborder='0' data-embedContent> , I will use this topic already focused on the issue.

As a suggestion to IPB Staff, please, consider to use CSS Sprite and new CSS3 transform properties techniques (wherever it is possible) in order to reduce HTTP requests.

Here the discussion started in the other topic:

Hi IPB Team,
I would really appreciate you consider those suggestions towards IPB 4 Social Suite:

Using CSS3 animation to create Pure CSS icons or, alternatively, using a CSS sprite for icons to reduce server requests.

A CSS sprite for emoticons (Smilies) to improve page speed.

Thanks for listening :smile:

#4 we really dont need sprites, because when we are creating custom themes we need to be able to change the skin's icons, etc.
#5 not a bad idea, but would not know how to implement it.

CSS sprites don't need to come at the cost of losing the ability to easily edit a skin's icons. A tool can be implemented to automatically generate a sprite for your theme from a set of icon files. A number of such tools already exist, and XenForo has one built right in. I think that would be a very reasonable feature to implement. :smile:

?do=embed' frameborder='0' data-embedContent>?do=embed' frameborder='0' data-embedContent>
Exactly, thanks Feld0 for pointing it out.
XenForo is doing it, more information here http://xenforo.com/community/threads/smilies-as-css-sprites.20121/ , it seems a great tool.

By this, you mean multiple images within one image file, then using the individual images from that file as needed? If so, that's already being done. The 'Like This' button, for example.
like_button.png

?do=embed' frameborder='0' data-embedContent>?do=embed' frameborder='0' data-embedContent>
Hi, Wolfie, I would propose, toghether with CSS sprite, to use, wherever it is possible, CSS3 transform properties, please have a look here: http://nicolasgallagher.com/pure-css-gui-icons/

Anyone still using this addon: IPB CSS Sprites 0.99 BETA ,

does it fit with latest IPB versions ?

  • Replies 83
  • Created
  • Last Reply
Posted

No offense, but I would not want sprites for emoticons like XF. Some of us use hundreds of smilies collected from years worth of searching the internet, some animated, many of different sizes, many for different holidays, many for different styles, etc. Instead of sprites, I'd prefer categories to choose from as suggested here.

As far as sprites for icons, as long as it doesn't create more work for designers and admins. Maybe a choice to use one or the other.

How much are you saving in the end? How many icons & emoticons are loading that would make this such a huge benefit to everyone? Do people really have issues with icons and emoticons taking too much to load? I don't have an issue, that's why I'm asking. I'd actually prefer not to have more css. When you start putting everything and anything into css (like some others do) you actually create bigger css files to download. So, how are those first downloads going to impact end-users on first visits? The bigger css files and the big sprite sheets. I've visited some sites that are impossible to load at first but then run fast afterwards. I'd prefer running fast on the first visit so newcomers don't get the wrong impression. IMHO...

Just thinking out loud...just opinions...

Posted

No offense, but I would not want sprites for emoticons like XF. Some of us use hundreds of smilies collected from years worth of searching the internet, some animated, many of different sizes, many for different holidays, many for different styles, etc. Instead of sprites, I'd prefer categories to choose from as suggested here.

Agree - categories would be great. Sprites would not be any good for smilies.

Posted

I'm all for adding sprites.

As far as sprites for icons, as long as it doesn't create more work for designers and admins. Maybe a choice to use one or the other.

It shouldn't take that much more work in the end.

How much are you saving in the end? How many icons & emoticons are loading that would make this such a huge benefit to everyone? Do people really have issues with icons and emoticons taking too much to load?

For example, this page I see this for images:

67 / 111 requests  ❘  222 KB / 649 KB transferred

Out of 111 requests made to the page, 67 were images. The others include CSS / JS, which are not minified on the IPS community forums. That is a lot of requests for what could easily be combined and ultimately save time and processing power. Remember, each connection to your server adds up ;)

Posted

Smilie's will not work in sprites. It is not logical to do so as most smilies are animated.

However all the rest of the images ( even logo ) should go into sprites. In fact IPB should offer a functionality that will allow Designers / Admin's to easily create sprites.

  • Management
Posted

Sprits are nice on paper, and we have thought about doing them, but quickly realized the average user's mind would be blown by trying to explain what they are :)

Posted

Sprits are nice on paper, and we have thought about doing them, but quickly realized the average user's mind would be blown by trying to explain what they are :smile:

Where is our enterprise package :D

Posted

Sprits are nice on paper, and we have thought about doing them, but quickly realized the average user's mind would be blown by trying to explain what they are :smile:

That's the thing - why go for lowest common denominator - if someone can't learn how something works like a CSS sprite, they really have no business customizing their forum themselves and should hire a professional.

Bah, forget sprites - do a CSS font, that way IPB 4.0 will be ready for Retina displays - and this should apply to ALL GUI stuff - not just icons.

And, there are ways of generating CSS sprites, so a UI in the ACP could be built to "customize" them if need be - just make sure to offer a 2x version of the sprite for Retina displays and other high-resolution situations.

Posted

No offense, but I would not want sprites for emoticons like XF. Some of us use hundreds of smilies collected from years worth of searching the internet, some animated, many of different sizes, many for different holidays, many for different styles, etc. Instead of sprites, I'd prefer categories to choose from as suggested here.

CallieJo, it is pleasant to discuss with you, first of all let me say thanks for your calm and respectful message. It would be great to have the option to use or not CSS sprites for emoticons.

However all the rest of the images ( even logo ) should go into sprites. In fact IPB should offer a functionality that will allow Designers / Admin's to easily create sprites.

100% agree on this point: please, consider to give us the option to easily use CSS sprites.

GreenLinks, not to sound intrusive (forgive me in that case ;) ), what do you personally think about using CSS3 transform properties for icons as an alternative method?

Posted

CallieJo, it is pleasant to discuss with you, first of all let me say thanks for your calm and respectful message. It would be great to have the option to use or not CSS sprites for emoticons.

Choices always have my vote. It keeps both sides happy & more productive. :smile: I'm not against the idea for others...I just don't want to be forced into using it myself.

Thank you as well for discussing the suggestion in a thoughtful and understanding manner.

  • Management
Posted

That's the thing - why go for lowest common denominator - if someone can't learn how something works like a CSS sprite, they really have no business customizing their forum themselves and should hire a professional.

Spend 10 minutes in our support ticket queue and you will change your mind :)

Posted

For those advanced users... What's stopping you from writing your own skin and converting everything over to use CSS Sprites?

If it's just a simple re-write of the skin and some CSS, why can't you do it for your community. >_<

---

People want what they want, even if they don't know how to do it. The concept of sprites is easy for those that are technically minded... But those that aren't would have difficulty wrapping their head around it... Hell, they have problems wrapping their head around a repeating image... Like the maintitle...

You take the 'one to one', this file goes here, out of the equation it will seriously hinder the tinkerers...

Posted

100% agree on this point: please, consider to give us the option to easily use CSS sprites.

As has been mentioned, you have this option already. :) Write a skin (or copy the default one) and make the images into a sprite, and then update the CSS to use it. This is most certainly an option now.

Posted



Does it mean you are later (IPS 4.0) going to consider CSS sprites for icons ? :smile: :smile:

Not how I read it.

Nothing is stopping you from using them now. Just write a skin that uses them.
Posted

Not how I read it.

Nothing is stopping you from using them now. Just write a skin that uses them.

This is what I meant. If you want to use sprites at present, you can. It is simply up to you to do so (i.e. you have to build the sprite from your images and adjust your CSS definitions to use the sprite instead of individual images).

  • 3 weeks later...
Posted

What about the emoticons? Sprites would make emoticon management a lot simpler, and reduce the amount of requests to boot.

Will IPB 4 also address Retina-quality graphics? I would consider using SVG with a PNG fallback for all ACP and main forum UI elements that don't require a traditional graphic where regular CSS wouldn't be practical.

Posted

What about the emoticons? Sprites would make emoticon management a lot simpler, and reduce the amount of requests to boot.

Will IPB 4 also address Retina-quality graphics? I would consider using SVG with a PNG fallback for all ACP and main forum UI elements that don't require a traditional graphic where regular CSS wouldn't be practical.

I don'r think smilies inside sprites is a wise idea as that will remove gif smilies. Gif smilies are critical imo for communities.

All though i fully agree with SVG images and a fallback to PNG for retina display.

  • 2 weeks later...
Posted

CSS sprites are great, the problem is they are not understandable by most people. If we delivered them as a sprite, anyone that wants to change an image to one bigger than the default is going to have a really tough time reconfiguring all the coordinates.

  • 4 months later...

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...