In order to reduce the number of image requests on the OPAC, perhaps it would be advantageous to create a single PNG containing all the images tiled together, then use CSS values to 'mask' the unnecessary parts. This could reduce the overall page load time by several hundred milliseconds. Not a significant percentage in the grand scheme of things, but every little bit counts. Thoughts?
I agree, a worthy goal.
I don't see which discussion to start here. it's the kind of question we have on a lot of other bugs: it's a cool idea, now who do it ? removing the "in discussion" status. If one of you think it's usefull, switch back, and start the discussion on the wiki & mailing list
Created attachment 9226 [details] [review] Bug 7500 - Use CSS Sprites for faster page loading This patch moves *most* small interface icons and the Koha log into a single 10K sprite image. CSS is used to position the sprite correctly for each icon instance. Not covered by this patch: XSLT icons, star ratings icons, table sort icons (the latter which I don't think can be done using this technique). A follow-up patch should remove the individual images which have been replaced by the sprite.
Owen, I love this patch, it goes a long way towards reducing round trip times to server :-) However, I don't think we should include koha-logo.gif in sprites, since it's element which most library customize, and applying your patch on top of customized installation shows correct logo but shifted because of css modifications to h1#libraryname Dropping koha-logo.gif from sprites.png would also make sprites smaller, since all other icons are smaller than Koha logo.
(In reply to comment #3) > Created attachment 9226 [details] [review] > Bug 7500 - Use CSS Sprites for faster page loading > > This patch moves *most* small interface icons and > the Koha log into a single 10K sprite image. CSS > is used to position the sprite correctly for each > icon instance. woo - nice idea! Owen, whats the method to create the 10k sprites file?, just curious...
A long time ago, I wrote automatic CSS sprite generator: http://svn.rot13.org/index.cgi/Frey/view/trunk/lib/Frey/Web/CombineImages.pm Would it make sense to turn it into Template Toolkit plugin, possibly as part of Bug 1918 so we can generate sprites automatically?
(In reply to comment #5) > Owen, whats the method to create the 10k sprites file?, just curious... The images are just grouped together in one tall narrow file. I did it in Photoshop, but it could have been done just as easily in another image editor. (In reply to comment #6) > Would it make sense to turn it into Template Toolkit plugin, possibly as > part of Bug 1918 so we can generate sprites automatically? That seems like more work for the server than is necessary considering how seldom we add new image files for the interface.
Created attachment 9239 [details] [review] Bug 7500 [FOLLOW-UP] Use CSS Sprites for faster page loading This patch removes the Koha logo from the sprite and corrects the positioning of other elements in the CSS. Apply this one on top of the first to test this option.
Created attachment 9241 [details] [review] Bug 7500 - Use CSS Sprites for faster page loading This patch moves *most* small interface icons and the Koha log into a single 10K sprite image. CSS is used to position the sprite correctly for each icon instance. Not covered by this patch: XSLT icons, star ratings icons, table sort icons (the latter which I don't think can be done using this technique). A follow-up patch should remove the individual images which have been replaced by the sprite. Signed-off-by: Dobrica Pavlinusic <dpavlin@rot13.org>
QA comment: nothing specific to say, passed QA Just some number YSLOW gives for a random opac-detail page (with "socialnetwork syspref activated, that add some image not concerned by this patch) : * BEFORE the patch = 50 components, 16 css images, images+css image = 30.5k * AFTER the patch = 43 components, 7 css images, images+css image = 36.3k (that's a larger size, probably because we load 1 large image, not X tiny ones. But they'll be cached, so it's OK) passed QA
I'd really like to push this patch before the release, but its an ENH that will wait for after 3.8 If there's something wrong hidden, I don't want to release without a good testing time. A question for Owen: * you say "most". Does it mean you'll provide a follow-up for other images, or images that aren't in won't be added -whatever the reason- * could you provide also the follow-up that removes now useless images ?
I missing from this first patch is: - Social network images - Star ratings images - XSLT icons Each of these is a feature which can be turned on or off. Options: - Make a single sprite for each - Add them all to the main sprite Opinions?
(In reply to comment #12) > I missing from this first patch is: > > - Social network images > - Star ratings images > - XSLT icons > > Each of these is a feature which can be turned on or off. Options: > > - Make a single sprite for each > - Add them all to the main sprite I would say a sprite for each. About XSLT icons, are you talking of itemtype images ? if you're I'm not sure we should "sprite" them: most libraries use a few of them.
(In reply to comment #12) > I missing from this first patch is: > > - Social network images > - Star ratings images > - XSLT icons > > Each of these is a feature which can be turned on or off. Options: > > - Make a single sprite for each > - Add them all to the main sprite I think social network images is worth being put in a separate sprite and star rating in another one, and XSLT icons are probably not a good idea because only one is used on a given record and we have a lot of icons, so we would upload an image much larger than needed PS: for social network & star, the sprite being loaded only if those features are ON, of course
Created attachment 9594 [details] [review] Bug 7500 [FOLLOW-UP][Social networks] Use CSS Sprites for faster page loading This patch adds a new sprite image for social network links. The page markup has been modified to accommodate the image- replacement technique used to display the images. When testing be sure to clear your cache to load the new CSS.
Created attachment 9599 [details] [review] Bug 7500 [FOLLOW-UP][Star ratings] Use CSS Sprites for faster page loading Combines two star ratings sprites into one and makes the corresponding CSS changes. The two original images have been removed. To test, view star ratings on search results and the detail page. Try setting star ratings on the detail page.
Created attachment 9623 [details] [review] Bug 7500 [FOLLOW-UP][Missing images] Use CSS Sprites for faster page loading - Adds shelf browser navigational arrows to the main sprite. - Removes "caret.gif" (a sort of breadcrumbs separator in the OPAC) and replaces it with a similar Unicode arrow entity. - Replaces item-bullet.gif (a custom list bullet used in the Cart) with data URI encoding the image in the CSS
(In reply to comment #15) > Created attachment 9594 [details] [review] > Bug 7500 [FOLLOW-UP][Social networks] Use CSS Sprites for faster page loading This patch does not apply (I just test this one), can you rebase it please ?
Created attachment 9677 [details] [review] Bug 7500 [FOLLOW-UP][Social networks] Use CSS Sprites for faster page loading This patch adds a new sprite image for social network links. The page markup has been modified to accommodate the image- replacement technique used to display the images. When testing be sure to clear your cache to load the new CSS.
Created attachment 9678 [details] [review] Bug 7500 [FOLLOW-UP][Social networks] Use CSS Sprites for faster page loading This patch adds a new sprite image for social network links. The page markup has been modified to accommodate the image- replacement technique used to display the images. When testing be sure to clear your cache to load the new CSS.
Created attachment 9679 [details] [review] Bug 7500 [FOLLOW-UP][Social networks] Use CSS Sprites for faster page loading This patch adds a new sprite image for social network links. The page markup has been modified to accommodate the image- replacement technique used to display the images. When testing be sure to clear your cache to load the new CSS.
Created attachment 9680 [details] [review] Bug 7500 [SIGNED-OFF][FOLLOW-UP][Social networks] Use CSS Sprites for faster page loading
I am a little confused by the status of this bug. Does anything here still need sign off?
Yes, two patches still need to be signed off: Attachment 9599 [details] (Star ratings) and Attachment 9623 [details] (Missing images).
Created attachment 11398 [details] [review] Bug 7500 [FOLLOW-UP][Star ratings] Use CSS Sprites for faster page loading Combines two star ratings sprites into one and makes the corresponding CSS changes. The two original images have been removed. To test, view star ratings on search results and the detail page. Try setting star ratings on the detail page. Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Created attachment 11399 [details] [review] Bug 7500 [FOLLOW-UP][Missing images] Use CSS Sprites for faster page loading - Adds shelf browser navigational arrows to the main sprite. - Removes "caret.gif" (a sort of breadcrumbs separator in the OPAC) and replaces it with a similar Unicode arrow entity. - Replaces item-bullet.gif (a custom list bullet used in the Cart) with data URI encoding the image in the CSS Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
QA Comment: Looks good to me. Passed QA
QA comment: if i'm not wrong owen, you replaced /opac-tmpl/prog/images/socnet/facebook16.png by a social sprite, but facebook16.png is not removed. Shouldn't it be removed ? (same thing for other social network links)
(In reply to comment #28) > QA comment: if i'm not wrong owen, you replaced > /opac-tmpl/prog/images/socnet/facebook16.png by a social sprite, but > facebook16.png is not removed. > > Shouldn't it be removed ? (same thing for other social network links) Owen = ping
Created attachment 12165 [details] [review] Bug 7500 [FOLLOW-UP, revised][Social networks] Use CSS Sprites for faster page loading This patch adds a new sprite image for social network links. The page markup has been modified to accommodate the image- replacement technique used to display the images. When testing be sure to clear your cache to load the new CSS. Revision: Rebased, and unused social network images removed.
The 3 follow-up have been pushed to master: Bug 7500 [FOLLOW-UP][Star ratings] Use CSS Sprites for faster page loading Bug 7500 [FOLLOW-UP][Missing images] Use CSS Sprites for faster page loading Bug 7500 [FOLLOW-UP, revised][Social networks] Use CSS Sprites for faster page loading (does not apply to new/Bug_7500, that is old, so pushed directly to master)
Created attachment 13314 [details] [review] Bug 7500 [Lists follow-up] Use CSS Sprites for faster page loading I just noticed there were a couple of instances where the lists page referred to an image which was removed in a previous patch for Bug 7500. This patch corrects it. To test, edit a list in the OPAC. The breadcrumbs menu should have no broken images.
Owen's description for the last patch sounds like a bug - please reset to enhancement if I am wrong.
Created attachment 13386 [details] [review] Signed patch (lists follow-up)
QA Comment for attachment 13386 [details] [review]: trivial one-line fix. Passed QA
The patch that is attached to this bug seems to be unrelated. Could you please attach the signed-off version of the patch, Marcel?
Created attachment 13421 [details] [review] Signed patch (lists follow-up) This should be the right one now :)
This patch has been pushed to master.
Patch pushed to branch 3.10.x
When YUI toolbars are fully purged from the staff client we'll need to do some cleanup on stray image files and evaluate what images need to be "sprited" for that interface.