Grow your CSS skills. Land your dream job.

Is it okay to use a 7000px + Image Sprite for Retina Ready Icons?

  • # May 14, 2013 at 12:35 pm

    Trying to use icons from [http://iconmonstr.com/](http://iconmonstr.com/ “http://iconmonstr.com/”) and they are 512px by 512px large.

    I minimized the size a tad, then I created a gigantic sprite…

    I just want to know if this is a bad choice using such a huge sprite.
    Should I just use each 512px Icon separately? Or are there other options?

    Please Help…

    # May 14, 2013 at 12:42 pm

    Definitely not okay. Also keep in mind the file size. Is there *any* point in time where you’ll need a 512×512 icon?

    # May 14, 2013 at 12:48 pm

    [http://icomoon.io/app/](http://icomoon.io/app/ “”)
    [http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/](http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ “”)

    Setup your custom font and use Paul Irish’s bullet point font face and never use single color icon’s as images again. Doing it this way will allow you easily re-color any of the “images” and re-size them to be whatever size you want them to be and, in my personal expirience, usually end up smaller than a well optimized sprite.

    # May 14, 2013 at 1:10 pm

    There isn’t anything wrong with a sprite with an excessively large height/width, as long as the file size is manageable. I have made ones that are 5,000+ that are 150k.

    # May 14, 2013 at 1:17 pm

    Except for this case: [Creating Compatible Web Content](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html “Creating Compatible Web Content”)

    (scroll down to **Know iOS Resource Limits**)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".