Grow your CSS skills. Land your dream job.

Image sprites vs. image tags

  • # February 15, 2013 at 7:29 pm

    Hi Guys,

    I have lot of questions in my mind on using sprites. I know that using sprites in a website can save lot of http requests and it make website faster.

    But is it a good idea if I sprite every image I got on the website?
    If no, then how should I decide which images to sprite and which to put in html?
    Does it do any good to website if I put image in html?
    During my research i found lots of modern and reputed websites using images in html instead of using them as sprites even if those images are just decorative.

    Using sprites for Icons would be a big YES but what about using sprites for big images (for ex. 500px X 200px each)?

    Many thanks
    Yoge

    # February 15, 2013 at 9:19 pm

    A common rule of thumb is if the images are just decoration (ie background, shadows and such) then you can put them in the css and make them sprites if you so wish. If they are informational or important to the content then you can use them as img.

    # February 16, 2013 at 12:05 am

    Using sprites for large images isn’t a good idea because those images are usually a bit heavy in file size. Creating a sprite with them would make the site load very slowly. We’ve used sprites in the past for icons as they are small and save http requests. Today, we use icon fonts not just for file size but it is also easier to style and scale. Not to mention icon fonts are widely supported compared to SVG.

    http://icomoon.io (fixed)

    # February 16, 2013 at 5:06 am

    You probably mean http://icomoon.io :)

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

You must be logged in to reply to this topic.

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