How to avoid Google indexing a Sprite Sheet as the main image

[jetteroheller]

I use since 2009 sprites, a big picture containing all the small graphics for a site.
How can I mark this picture as not interesting for the searcher?

[Robert Charlton]

jetteroheller, first just a note to mention that I needed to remove the subject line from your post, because we don't use subject lines in the Google SEO News forum. I'm noting the line here, though, as it conveys some information that might apply to your question: "The sprite is 44 kB, 380x900 pixel".

For some general background for members here not familiar with sprites... here's a thread from May 2008 when sprites were starting to be used to speed up page loading, not long before you began using them. Sprites are also used for game animations.

The thread links both to a Google "sprite sheet" (which is what these collections of images are called) and also to a very important Google blog post about Google's approach to incorporating an alt text equivalent for individual sprite images, say when used as image links....

Google, Image replacement & CSS Sprites
May, 2008
https://www.webmasterworld.com/google/3659061.htm [webmasterworld.com]

The main point of using sprites together on one sheet was to reduce a large number of http calls to a page that these small and frequently-used graphics would otherwise require.

Regarding your concern...

How can I mark this picture as not interesting for the searcher?

I'm thinking that if you tried blocking by robots.txt, Google might not be able to access the graphics for use on your site.

I've never seen any discussion anywhere about blocking Sprite Sheets from indexing, and searching now doesn't bring up anything on the topic.

When I do an image search for [google sprite sheet] I get many sheets displayed, mostly sheets that have been posted elsewhere. In terms of your sprite sheet being indexed, I'm thinking the indexed image of the sheet is very unlikely to produce any traffic... but (conjecture here), I think it does need to be in the index if its component images are to display as intended.

Chances are that the size of your sheet is going to give it more prominence than, say, several smaller sheets might have. I'm not understanding, though, what your concern is.

Mod's note: I've just added the word "Sheet" following Sprite in the title, to make the title reflect general naming conventions.

[edited by: Robert_Charlton at 1:22 am (utc) on Aug 27, 2017]

[Robert Charlton]

PPS: I should add that as HTTP/2 becomes widely used, its multiplexing capabilities will reduce the slowing effect of multiple http calls, since all the calls won't be lining up in a single queue. At that point, sprite sheets, on large sites, will become less necessary.

[jetteroheller]

Even at http/2, sprites are a main advantage, because the combined graphic is shorter than the parts.
I just tested the "Google Custom Search" on my site.
70% of search results showed the sprite left of the text listing.

[Robert Charlton]

I just tested the "Google Custom Search" on my site.
70% of search results showed the sprite left of the text listing.

Ah, I see. Yes, Google Custom Search likes to show thumbnail images, so they need something to show on the left side. Forgive length of this in advance...

It may be that if your logos, say, are all on your Sprite Sheet, Google's image algo might feel that the best thumbnail choice it has is the entire sheet. There would be a lot of factors affecting this, including what other choices there are.

What you need, IMO, is a way of specifying something analogous to a Facebook Open Graph image in your head section, in which you are able choose an image to display when a page url is called.

I don't think that Google has anything that's precisely the same, but there may be something you can do involving proper schema markup, as described in the Google Developers Structured Data documentation, which is similar.

To see what we've discussed here before, involving both Google markup and also how Google might choose its thumbnails if it does so algorithmically, I'm listing several prior threads and where they lead. I suggest you follow them backwards and maybe do some testing.

A question also about images in Custom Search came up a few years ago...

Google site search: customizing with rich snippets
Jan 2, 2014
https://www.webmasterworld.com/google/4634966.htm [webmasterworld.com]

While the discussion fizzled, and we don't know whether it was followed up, I think the answer probably is in the thread I recommended about how Google might choose images for thumbnails in Food Recipe searches.

Food Recipe SERPs and Thumbnail Photos
May, 2013
https://www.webmasterworld.com/google/4574582.htm [webmasterworld.com]

tedster there suggested checking out Google's Rich Snippers markup documentation.

Google Developers - Structured Data
Rich Snippets for Recipes
[developers.google.com...]

Note that in this section of Google Developers documentation, Google also discusses many rich snippets areas beyond recipes, including Products, Reviews, Music, Books, etc, etc.

Essentially, I think you'll have to provide for Google an image that's an alternative to your Sprite Sheet, and either to mark it up in a way that Google will use it in Custom Search, or to make it distinctive enough in a visual way that Google might algorithmically use it.

I'd be very interested in what works if you try it... or in any other approaches people have tried that might work.

[jetteroheller]

I just noticed in my log files, that device Pixel ratio 1 is now a minority. So I try now to handel the situation in this way:

The old sprite containing logo and all small graphics will be replaced by 2 graphics.

1.) logo in double resolution of the img width and height
2.) all the rest placed in a 1450x120 picture. Most interesting icons on the left side.

My logo shows on my 5" smartphone with 1280x720 resolution and Device Pixel Ratio = 2
much better with double resolution. The cost is only 3 kb more for the logo in 672x204 instead of 336x102.

Most pictures on my site are 600x450 or 450x600. So i hope Google prefers the real picture
instead of the 1450x120 sprite or the 672x204 logo.

[Robert Charlton]

Good luck with that approach, which sounds good. I'll be curious whether it's enough, or whether markup is also needed.

[robzilla]

Even at http/2, sprites are a main advantage, because the combined graphic is shorter than the parts.

What's the advantage of that? One combined graphic is much larger in file size and will take longer to download than multiple smaller images fetched in parallel. Sprites are also a pain to maintain, and require a bit more processing on the client side.

[jetteroheller]

I maintain my sprites with Scribus DTP.
I make in Scribus a page as large in mm as pixel.
I export the page as graphic with 127 DPI and 20% zoom, So every mm is a pixel.
With the image frames, I have exact control over placement and size.

After exporting from Scribuus,
pngquant and optipng reduze the file size. Optipng can optimize some kb even after pngquant.

My sites are at the Google speed test always top.
2 seconds for the sites with AdSense
Some pages without AdSense reach even 1 second load time in the test.

On the server are only compressed versions of htm and js files.
The css is compact and in the head of the page.

2 accesses are enough to display the first content.
Compressed htm file,
the sprite image for all the standard graphics.

compressed js file is loaded asynchron.

The combined graphic is smaller than all the parts.

[robzilla]

I know the combined graphic can be smaller, but that's not the point. HTTP/2 employs multiplexing whereby multiple resources can be downloaded in parallel. 10 images of 10 KB each will be downloaded simultaneously, whereas a single sprite image may amount to "only" 90 KB (i.e. less than 10 x 10 KB) but will take longer to download (90 KB vs 10 KB).

|===========================| 90 KB

vs.

|===| 10 KB
|===| 10 KB
|===| 10 KB
|===| 10 KB
|===| 10 KB
|===| 10 KB
|===| 10 KB
|===| 10 KB
|===| 10 KB
|===| 10 KB

Furthermore, the combined graphic isn't always smaller, unless you are willing to sacrifice the image quality. For example, small icons with <256 colors may be saved individually as 8-bit PNGs. Combine dozens of those images into one large image and you're likely to exceed the 256 color limit of an 8-bit PNG. You will either have to drop colors from the image, decreasing the quality, or save as a much larger 24-bit PNG.

[jetteroheller]

pngquant makes a very good job in creating a 256 color table.

[lucy24]

Question: Have people actually found sprite sheets when doing image searches? What do you see in the SERP?

Some years ago I changed one page with multiple small pictures to use sprites instead, for the usual reasons of reducing work for both the visitor and my server. But later I realized that some of those individual images, with their individual alts and adjoining text, were indexed in their own right--in fact it was the main way people entered the page. I ended up compromising by changing one set back to individual pictures, while leaving the other as a single sprite. (People look up heraldic lions: rampant, couchant, guardant and so on. Nobody looks up heraldic rats.)

[Robert Charlton]

lucy, the issue here was that the sprite sheet was appearing as the thumbnail for the site in Google Custom Search. See my Aug 27 post.

[jetteroheller]

Just changed to the new sprite 1450x120 a few days ago.
Just wanted to control the success.

The customized search is broken.

With site:MY_SITE keyword

there are good search results, but with the customized search, it's broken.

[developers.google.com...]

URL - Enter the site that you want Custom Search to crawl. If you enter the URL of a specific page without the subdomain (the www in www.example.com), Custom Search automatically searches all the subdomains of the site. If example.com has the subdomains, www, store, and home, Custom Search searches for www.example.com, store.example.com , and home.example.com. So you do not need to add each subdomain.

But all search results only from www.MY_SITE
not one from the sub domain, where this search term is mainly covered.

Also javascript is indexed. In the javascript is some text about news on all my sites.
This text is brought only by javascript on a page.
This is also indexed.

[jetteroheller]

Despite the statement "automatically searches all the subdomains", I added now all the subodmains in customized search.

Now are at the same keyword 4 pages of the right subdomain in front.
But they are followed by many pages of www.MY_SITE irrelevant for the search,
where this keyword has only be brought to this page by javascript in my news system.

Completely different
site:MY_SITE keyword
34 search results from the subdomain where this theme is covered.
On place 35 MY_SITE/news where I bring news from all my sites.

Seems I have to search for a new local search solution.
I once had written my own local search in Perl.
Very simple, but at last much better than to what degenerated "Google custom search"