[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.
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

[RFC] CSS Image Sprites

Post by hanakin »

Proposal
All imageset images should be converted to sprites to increase the speed at load time and reduce server requests.

Results
  • This would limit the amount of image files that the server would have to retrieve.
  • Make the editing of all related images easier as they are contained in one file as opposed to hundreds.
  • All images of the same kind would appear or load at the same time prevent holes in rendering.
I have put together several files for the proposal I have the original psds as well as rendered gifs & pngs for all of them with exception to those that contain animation. I will post them for review please leave comments on them as well as suggestions for changes or improvements

I am currently using these in the theme on the test board
more info on this can be found here viewtopic.php?f=108&t=35613&p=218007#p218007
Last edited by hanakin on Fri Mar 18, 2011 10:35 pm, edited 1 time in total.
Donations welcome via Paypal Image

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] Image Sprite Usage

Post by hanakin »

FORUM ICONS
Forum Icons GIF
Forum Icons GIF
forum_icons_hot.gif (2.87 KiB) Viewed 22635 times
Forum Icons GIF
Forum Icons GIF
forum_icons.gif (8.74 KiB) Viewed 22635 times
Forum Icons PNG
Forum Icons PNG
forum_icons.png (13.34 KiB) Viewed 22635 times
Last edited by hanakin on Fri Mar 18, 2011 3:45 pm, edited 1 time in total.
Donations welcome via Paypal Image

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] Image Sprite Usage

Post by hanakin »

POST ICONS
Pot Icons GIF
Pot Icons GIF
post_icons.gif (1.79 KiB) Viewed 22635 times
Post Icons PNG
Post Icons PNG
post_icons.png (3.84 KiB) Viewed 22635 times
Donations welcome via Paypal Image

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] Image Sprite Usage

Post by hanakin »

TOPIC ICONS
Topic Icons GIF
Topic Icons GIF
topic_icons.gif (963 Bytes) Viewed 22635 times
Topic Icons PNG
Topic Icons PNG
topic_icons.png (1.78 KiB) Viewed 22635 times
Donations welcome via Paypal Image

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] Image Sprite Usage

Post by hanakin »

CONTACT ICONS
Contact Icons GIF
Contact Icons GIF
contact_icons.gif (3.41 KiB) Viewed 22635 times
Contact Icons PNG
Contact Icons PNG
contact_icons.png (10.18 KiB) Viewed 22635 times
Donations welcome via Paypal Image

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] Image Sprite Usage

Post by hanakin »

LINK ICONS
link_icons.gif
Link Icons GIF
(2.32 KiB) Downloaded 254 times
*Not transparent therefore no PNG required, also image to large to view on here
Donations welcome via Paypal Image

User avatar
Christian 2.0
Registered User
Posts: 4
Joined: Mon Dec 21, 2009 6:04 pm
Location: UK
Contact:

Re: [RFC] CSS Image Sprites

Post by Christian 2.0 »

This would prove to be a nightmare for style authors and custom styles.

Rather than displaying a different source file for each image, the system would have to move the CSS background image. That's fine in itself, although restricts custom imagesets to the same size as the prosilver icons. So if a style author were to re-do an image sprite with different dimensions, they'd need to work out all of the new background-position values for every image, even if only one icon has been resized.

Nice idea, although the few advantages don't justify the huge amount of work this would add to something simple such as creating a custom imageset.

User avatar
naderman
Consultant
Posts: 1727
Joined: Sun Jan 11, 2004 2:11 am
Location: Berlin, Germany
Contact:

Re: [RFC] CSS Image Sprites

Post by naderman »

I agree that this should happen automatically, rather than hardcoded and manually. Sprites are certainly a necessity if we want to improve frontend performance, but we need to avoid the issues Christian described. I think Cullen (ckwalsh) can say a few words about that.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] CSS Image Sprites

Post by hanakin »

Christian 2.0 wrote:This would prove to be a nightmare for style authors and custom styles.

Rather than displaying a different source file for each image, the system would have to move the CSS background image. That's fine in itself, although restricts custom imagesets to the same size as the prosilver icons. So if a style author were to re-do an image sprite with different dimensions, they'd need to work out all of the new background-position values for every image, even if only one icon has been re-sized.

Nice idea, although the few advantages don't justify the huge amount of work this would add to something simple such as creating a custom imageset.
It only restricts if they do not update the CSS

I get what you are saying however when you are referring to style authors, u are referring to those who tweak current themes or images. This is the main problem with phpbb it caters to style authors rather than front-end designers who are quite used to this as it is common practice. In fact there are tools out there that do this for you already http://csssprites.com/. It is this that leads to the current state of the styles DB which is nothing more than the same styles with different colors or repositioned elements and altered graphics. The idea of building off of existing styles is quite ridiculous to me as it does not force people to be creative.

This is infact the main reason why it is so difficult to get rid of subsilver and for that matter why it still exists.

Not that an automated system is not a noble idea depending on exactly how it is implemented, but it lends it self to a database controlled style which I am completely against. The css should have no connection with the back-end whatsoever. This limits/restricts the designer as well as adds additional complexities, a set of steps or hoops they must jump through to complete a designer thus deterring them from even trying.
Donations welcome via Paypal Image

User avatar
MattF
Extension Customisations
Extension Customisations
Posts: 675
Joined: Mon Mar 08, 2010 9:18 am

Re: [RFC] CSS Image Sprites

Post by MattF »

Christian 2.0 wrote:So if a style author were to re-do an image sprite with different dimensions, they'd need to work out all of the new background-position values for every image, even if only one icon has been resized.
The default sprites could be made to accommodate this, however, if they were made with lots of space between them. Wouldn't this mean, they could be resized but the background-position values could remain unchanged, and only the new size/dimensions would need to be entered by the style author?
contact_icons.png
contact_icons.png (11.79 KiB) Viewed 21974 times
Has an irascible disposition.

Post Reply