11 {{ upvoteCount | shortNum }}
11 {{ upvoteCount | shortNum }}

CSS Sprites done fast ? How do you deal with it?

by Craig Allen
9 replies
Hi ! I'm wondering if it's only me who thinks that combining images from multiple directories within your root folder is a TEDIOUS and risky task. I was wondering if it can be done automatically thanks to some sort of tool avaible online?

Simply what would be the nicest if a program or online script would:

1. Fetch all images from an URL

2. Combine them into one big CSS sprite (big in terms of width and height of course)

3. Fetch all stylesheets from an URL specified before

4. 'Scan' the stylesheets and replace all previous paths of images with the new path and name of css sprite specified by user. All done automatically after detecting an image that was later placed in css sprite.

This is of course the beautiful scenario. Not many websites are using css sprites so I guess that each time it requires that TEDIOUS job and no such plugin as dreamt-off above exists. However, I hope to be wrong and hear a bit more from experienced guys here at WarriorForum.com

Thanks!

C.
#css #css sprite generator #deal #fast #sprites
  • Profile picture of the author insexes
    It's not good idea.

    CSS sprites are good for combining tiny [design | skin] images to one file with the final size less than 40-50KB.
    CSS sprites should be done while designing the page/content, as automatically converting of <img src=""/> or style background declaration to css sprite could cause many glitches in return.
    Signature
    Insexes. Promote it!
    Outstanding. Sapid. Onward.
    {{ DiscussionBoard.errors[8014313].message }}
    • Profile picture of the author Michael71
      Originally Posted by insexes View Post

      It's not good idea.

      CSS sprites are good for combining tiny [design | skin] images to one file with the final size less than 40-50KB.
      CSS sprites should be done while designing the page/content, as automatically converting of <img src=""/> or style background declaration to css sprite could cause many glitches in return.
      Never heard such a $#!?... sorry to say.

      You can use CSS sprites for your whole website graphics if you want. Not only for "tiny" pieces.

      Less http-requests means faster loading times.

      If you know how to handle CSS sprites (makes no sense to use CSS sprites for img tags LOL) you can save a lot of KBytes (makes sense when you have a lot of "fixed" graphics, like buttons, logo, ...).

      If you load images "dynamically" it does not make sense.

      Slider, company logo, buttons, bullets, ... instead of img tags "use" div (styled via background-position using your CSS sprite graphic).

      I used to have CSS sprite images up to 1.5MByte (using gzip and compressed) for different projects.

      Frontend performance is the keyword here. Less http-requests means faster loading...

      It does not matter where the images came from (different folders...).

      1 CSS sprite = 1 graphic

      CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks

      The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | Smashing Coding

      Do a research and find out if CSS sprites are something for you

      Even Google is using CSS sprites (I hope you can retrieve the file).

      https://ssl.gstatic.com/s2/oz/images...4bd01bb0bb.png

      They used to have nearly all graphics in ONE CSS sprite.

      When you do not have your own dedicated server with massive power and bandwidth (100mbit+), a lot of visitors, no decent cache solution, more then 250kbyte graphics on one page (4+ graphics)... you might consider using CSS sprites.
      Signature

      HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
      ---
      Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

      {{ DiscussionBoard.errors[8016079].message }}
  • Profile picture of the author insexes
    - you can get artifacts on the edges of images (because of zooming or floating point, etc..)
    - background position fails (when source was like background-position:0 80%; this could not be sprited well)...

    so the task could not be totally automated.. as it is not just "swapping" of one technique to another.
    Signature
    Insexes. Promote it!
    Outstanding. Sapid. Onward.
    {{ DiscussionBoard.errors[8014331].message }}
  • Profile picture of the author Craig Allen
    Thanks for the responses, wasn't aware of such a glitches! I was asking because of two reasons :

    1. Too many http requests on my website (images are one of the main reason for this)
    2. Page speed optimizers are advicing me to do this.

    I thought that combining all images into one or maximally two bigger ones will speed up the website as the image will have to be loaded only once and then it will be served to the user as a cached version.

    Platform: Wordpress
    Signature
    You Can't Miss This!

    Business card included, Unlimited Revisions, rich portfolio.
    Please help us grow simply by clicking the link above
    {{ DiscussionBoard.errors[8015822].message }}
  • Profile picture of the author insexes
    Originally Posted by Michael71 View Post

    Never heard such a $#!?... sorry to say.
    ...
    Even Google is using CSS sprites (I hope you can retrieve the file).
    https://ssl.gstatic.com/s2/oz/images...4bd01bb0bb.png
    ...
    another sample from google:
    http://www.google.com/images/nav_logo124.png

    Look, tiny images were grouped in one file, but the final file size is still small.

    And about glitches...take a closer look on google sprite.. there is 1 pixel margin between icons. It was done to avoid "zooming" glitches. This one pixel sometimes is "visible" sometimes not... If there is no such margin, then part of other icon could be visible while zooming.
    Signature
    Insexes. Promote it!
    Outstanding. Sapid. Onward.
    {{ DiscussionBoard.errors[8018688].message }}
  • Profile picture of the author Michael71
    Your zooming glitch is a webkit problem.

    If you handle CSS sprites correctly they are a benefit... fact.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8018802].message }}
  • Profile picture of the author Craig Allen
    Thanks for throwing a bit more light on this subject.

    @Michael71 - Yes, I'm familliar with css sprites. THIS page has css sprites implemented for examples of logo design styles. Took me a little moment to understand where is the beginning seen by css and write it well in background-position.

    However, the images on the homepage as well as the portfolio are wrapped in a shortcode which was not made by me. This makes things complicated for me at this time as I don't know how and where I should find the paths to existing images and replace them with my css sprite with a properly set background position in the css file. Also which css file can contain this... .

    Majority of http requests are just images in various types. This can be so easily and drastically reduced thanks to css sprites but I don't know where to search.
    Signature
    You Can't Miss This!

    Business card included, Unlimited Revisions, rich portfolio.
    Please help us grow simply by clicking the link above
    {{ DiscussionBoard.errors[8023603].message }}
  • Profile picture of the author Michael71
    If you are not familiar with CSS then I would say you pay someone to do it.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8023957].message }}
  • Profile picture of the author insexes
    If, this is your site, you DO NOT NEED any sprites for your page AT ALL.
    This will never speedup your page, and you've lost your profit.



    To speed up your page, you should do the following:
    1) TEST. Does your page loading fast WITHOUT images? If yes, just move all your CONTENT images on a subdomain, and DO NOT even try to use css sprites for your content images.
    2) You could use css sprite only for your DESING. logo, buttons, etc..BUT actually you have a few skin images, and it will not make the big deal for you.

    Remember, css background is always in LOWER priority, so you need to preload your images first, to make them working fast with css background.

    Most modern browsers doing pre-render of the page, before showing it..so the goal is to make the rendering faster (that is why css sprites works fine on same domain.. because all images are going in the second priority, after the page loaded).. BUT please see the (1).


    I just want your task to be done as simple as possible. I have no enough time to debate with Michael71. But I am sure that each technology should not be overused just because it is "popular".
    Signature
    Insexes. Promote it!
    Outstanding. Sapid. Onward.
    {{ DiscussionBoard.errors[8024433].message }}

Trending Topics