I'm reworking our site to reduce HTTP requests and blocking requests by concatenating JS, css, gzipping, loading all JS via LABjs and using CSS sprites for images that were loaded individually via <img> tags before.

Progress has been great so far - 5x page load performance improvement. However, we're in the top 5 organic search ranking in google for many targeted keywords and phrases. I'm afraid eliminating so many img tags with alt attributes can hurt our SEO.

Does anyone have any experience with alt tag manip/removal and effects on SEO positions? Is previous rank "sticky"?

5 Answers 5


In general you should only be using image sprites for non-tangential images such as icons. Images that relate to the content should stay as img tags.

Having said that, you probably don't need to worry too much about losing a few keywords. Using a title tag is a good idea for accessibility though.


1: Alt text is necessary for Google SEO, but only because Google likes websites that are designed for different types of browsers and user abilities, eg: text only browsers, disabled javascript, etc. that being said, having alt text for images will compliment your organic search results as a whole.

2: Using keywords in alt text is ok, but only if the alt text is used to accurately describe what the image is about, hence the purpose of alt text. In other words, if the purpose of the alt text is not for keyword density. Tip: if you have quality, relevant and original content you shouldn't even have to worry about keyword density.

3: Page speed is another factor in Google's algorithm. This is because speed favors user experience. CSS sprites help to reduce page speed by reducing http requests. Many major websites, including Google, use them.

That being said, i wish i could offer more info as i am here looking for it as well.


read the post below as it may have more info on this topic

click here for another post relating to this issue


Instead of using alt attributes to provide replacement text for text-only browsers, screen readers, search engines, etc., you can just put ordinary text content inside the element that you're using to show the CSS sprite and hide it with CSS.

One of the simplest ways to do this is with something like this:

.sprite {
    display: block;
    text-indent: -9999px;
    overflow: hidden;

Other possible solutions include wrapping the text in a span inside the sprite element, and then using absolute positioning to move it outside the screen area or setting its opacity to 0 or just plain using visibility: hidden.

Do keep in mind that you probably shouldn't overuse any of these techniques: if a significant portion of your content is hidden with CSS, search engines may think you're trying to trick them.

Also remember that you can set title attributes on just about any HTML element, and most browsers will show them as hover tooltips.

  • Id be very wary about this - not sure how a Google bot would see this as essentially you'd be placing keyword rich content in a div and then hiding it with css, it could easily be misinterpreted as keyword stuffing.
    – sam
    Commented Jul 20, 2015 at 21:58

Hiding content, keywords especially on your page just to give Google more keywords to crawl is not a good idea as the other person Karonen suggested. You shouldn't try and trick Google by hiding keywords in your content. If progress is going good keep going. You're improving the load time of your site that's a plus in Google's eyes. More comes into play for your organic rankings than the alt attributes on your img tags. If you're worried about moving down in the rankings, work on getting a few more relevant backlinks that are dofollow


You solve this by re-thinking your options.

You create a defined area with a <a> with display:block; or <div> and use overflow hidden; to hide overflow and position:relative;.

Then you place your <img> image sprite inside absolutely positioned, which is possible since you positioned the parent.

Then use :hover on the image to change position.

Now your sprite is based on an img tag, so you can use your alt text.

Following example is based on a Facebook sprite with two versions of the icon on top of each other, each 50px by 50px, total height of image being 100px:

<!DOCTYPE html>
.icon {
    border:1px solid red;
#fb {
#fb:hover {

<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.