1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

has anybody tried puting logo in image sprite?

Discussion in 'White Hat SEO' started by Marcink99, Jan 7, 2013.

  1. Marcink99

    Marcink99 Power Member

    Joined:
    Aug 23, 2010
    Messages:
    725
    Likes Received:
    99
    I see pros and cons.... Iam redesigning my site with lots of image sprites. I noticed some big companies use image sprite for logos some dont... I will report any rank/ changes if i get from it.

    Whats your take on it?

    I dont think alt tag is that big of a deal as I have internal linking in place.

    They only negative I see is that people will not be able to save my logo but than again I never saved any logos eather. Ohh and if somebody print my page logo will not show up but url will so no biggie...

    In my mind everything should be in sprite accept post/page images.
     
  2. Endire

    Endire Elite Member Premium Member

    Joined:
    Mar 27, 2012
    Messages:
    1,756
    Likes Received:
    1,061
    Gender:
    Male
    Marcink99,

    There are tons of positives to using CSS sprites (mainly reducing the number of requests thereby reducing your website's load time) among others. I don't really see any negatives other than the ones you have mentioned. The alt attribute isn't a huge factor for rankings anyway and most of the time it is difficult to use it effectively for SEO.

    Here is a good write-up on sprites,

    http://www.alistapart.com/articles/sprites

    Best,

    Shawn
     
  3. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,063
    Likes Received:
    2,872
    Gender:
    Male
    When you use CSS sprites, your HTTP requests decrease and thus the page loading time. It takes more time for your browser to download 2 x 10kb file than 1 x 20kb file, because it has to make 2 requests instead of 1.
    As per my knowledge, there is absolutely NO CON using sprite images anywhere in your website. Just make sure that you place proper title and alt tag in your logo div / span or whatever you are using.

    I encourage you to use sprite images instead of normal img tags anywhere possible ( including logo) :)
     
  4. Marcink99

    Marcink99 Power Member

    Joined:
    Aug 23, 2010
    Messages:
    725
    Likes Received:
    99
    "proper title and alt tag in your logo div / span" ??? I thought that there is no way to add alt tag to class.
     
  5. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,063
    Likes Received:
    2,872
    Gender:
    Male
    Sorry that's wrongly said... Put title only if you have a div, and title as well as alt if you have span...

    for example
    Code:
    <div id="logo" title="mywebsitename"></div>
    
    or
    
    <span id="logo" title="mywebsitename" alt="mywebsitename"></span>
    
     
  6. proweb

    proweb Regular Member

    Joined:
    Feb 24, 2011
    Messages:
    291
    Likes Received:
    144
    I've never found image sprites that useful. They always ended up larger than the sum of all my images (which negatively affected my load time). But then again, I wasn't loading countless small images either.

    Personally, I really only see them useful if you have a very large site, your website is hosted on a shared server, or if you're targeting people with crappy internet connections.
     
  7. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,063
    Likes Received:
    2,872
    Gender:
    Male
    I think you are missing something. It can't be larger than the sum of all images. Go check some tutorial about Sprite images first.

    Secondly, even if your combined sprite is slightly bigger in size, your site might still load a lot faster!! Why??

    It actually takes more time to process a http request then downloading the actual file. As i said in my first post, it takes more time to download 2 x 10KB file than 1 x 20KB file.

    Another cool thing that will happen to your site when you use sprite images intelligently, is that, all the backgrounds / logo / icons or other images in your page will load at once. So the user will see it like ... zzaaapp and your site is loaded! THis is awesome because UI is really important. Here's what users think of your UI in common when it loads in the given time:

    .1 sec to 1 sec -> user thinks the site is running locally ( on his / her own computer) and they would be more than happy to comeback anytime.
    More than 1 sec - 3 sec-> User thinks the site is not running locally, but he/she will be happy with the site.
    More than 3 sec to 10 second -> user starts feeling that something is being processed and they will soon get the result. This is the point where they start getting frustrated.

    More than 10 Second -> Always show a message to user that this will take time, or he might never comeback


    Now get the point! Always try to cut down the loading time as much as you can. So always use sprite where-ever you can. Also compress your Javascript / Css etc, but that's off topic..
     
  8. proweb

    proweb Regular Member

    Joined:
    Feb 24, 2011
    Messages:
    291
    Likes Received:
    144
    I used them correctly.

    The problem I had is that all of my images are compressed differently. Some images are compressed 30% and others 80%. However, to keep my quality up using Sprites I had to compress all my images to 30% which increased the size of the Sprite image. The size of the sprite image then exceeded the combined sum of all my other images previously, and while I did have less server requests, it did not make up for the fact that I was having to load 10+kb of extra images.

    I have nothing against Sprites, in fact I wish I could use them...but my sites are designed in a way that Sprites are not benefitial for me. I can have the page load much faster without using them.

    And yes, I did extensive load time tests to determine this.

    Currently my website load time is .37 seconds, but apps like Facebook, Google+, and Twitter slow down some of my pages to 2 seconds.
     
    Last edited: Jan 8, 2013
  9. Marcink99

    Marcink99 Power Member

    Joined:
    Aug 23, 2010
    Messages:
    725
    Likes Received:
    99
    I firt run all my images through photoshop save for web option and than combine them into sprite... I gues puting all pictures in one image and than saving them for web would work the same. Not sure if you have photoshop if not look for free alternative.