SEO problems with images and page speed - is there a workaround?

[Broadway]

1) Google wants pages to load faster.

2) One way to do this involves the use of image sprites (one larger graphic file composed of a composite of your page's individual images).

3) But image sprites don't involve the use of the html tag <IMG SRC="" ALT=""> (at least the way I know how to do them - using css and then using a portion of the sprite as the background for a <div>)

4) The keywords in the "alt="" portion of an image tag are a valuable portion of on-page SEO.

So, in order to gain speed, it seems I have to give up an SEO advantage.

Is there a work around?

As another SEO disadvantage, it also seems that using a sprites approach would work against visibility in Google images and therefore against being listed as an "image" on page 1 of the normal SERP's.

[aristotle]

Have you tried compressing the images to smaller file sizes? About a year ago I took a look at this and discovered that many images can be compressed to surprisingly small sizes with very little loss of quality on a computer screen.

I thought I had already compressed most of my images to as small as practical. But I did some tests and was very surprized at how much smaller I could make them without losing any noticeable quality.

[tedster]

I would never use CSS sprites for important image content. The technique is great for "window trim" and generic buttons - that's the only place.

[Broadway]

Thank you both for replies.

I initially got interested in image sprites because some of my pages show before-and-after type photos and
I was looking for ways to do image rollovers for these makeovers.

I saw the javascript solution (two image calls) and then ran across the CSS image sprite method. The CSS code is simpler, cleaner, and involves just one image call from the server.

As soon as I marked up a test page, I realized the SEO disadvantages (I guess both methods would have the same disadvantages).

Anyway, I came up with this idea as an alternative.

High up on the page, display the before-and-after photos as an image rollover using a CSS sprite.

Then, lower on the page where not so many people look, show the entire image sprite (.jpg) but at 1/4 scale.

There will still be just the one call to the server to retrieve the image (now shown in two locations). The small version will be displayed by an Image tag and have an "ALT=" descriptor. And the small image will also be surrounded by text describing the before-and-after changes shown in the photos (another SEO plus).

Now I have this question:

For some reason I'm assuming that Google Image Search will take notice of the image as found in the Image tag, as opposed to being a background image in a div.

My question would then be, in regards to JUST Google image search ranking, is there any sort of conflict or problem
associated with the declared dimensions in an image tag being much smaller than the native dimensions of the image?
Is this discrepancy something that would look hinky and keep Google from including the .jpg in the image search results?

[aristotle]

Then, lower on the page where not so many people look, show the entire image sprite (.jpg) but at 1/4 scale.

I must be missing something here- why do you want to show it at reduced size? That doesn't appear to save any loading time or bandwidth as compared to showing it at full size.

[Broadway]

Because it's so large (550px X 850px, with the before-and-after images spliced together).

It has already been shown in detail at page top as the image rollover. It just seems a bit much to make it so prominent on the lower portion of the page too.

[aristotle]

I see. As for your question about the declared dimensions in an image tag being much smaller than the native dimensions of the image, I doubt that this would cause a problem. It's not much different than specififying an image width as a percentage, since this can also reduce an image in some cases.

[topr8]

>>There will still be just the one call to the server to retrieve the image

assuming you have set up the server correctly to ensure teh browser uses the cached version of the image.

personally i think you are losing the plot, if we are just talking about one before and after pic, eg 2 http requests instead of one, i think there is very little gain to be had timewise ...

... if you are concerned about the download speed, why don't you serve the before image from www.example.com/img_folder/img
and the after photo from
images.example.com/img_folder/img
this way they would download in parallel and page load time would be quicker.

>>As for your question about the declared dimensions in an image tag being much smaller than the native dimensions of the image, I doubt that this would cause a problem.

i agree with aristotle, infact on a gardening site i visit, they very often (annoyingly) show huge images (clearly taken directly from a digital camera and not compressed or resized) which are shown on the site in much reduced size ... and i notice they appear in google image search from time to time

[tedster]

show huge images... on the site in much reduced size

Back in Nov 2010, Google released an Apache module (mod_pagespeed) that will automatically serve only the pixels needed for an image that is resized in the HTML [googlewebmastercentral.blogspot.com...]

[topr8]

... interesting link tedster

although i must admit i spend a lot of time processing and compressing my images to be exactly as required - on my money site anyway ... and i say thank goodness for amateur webmasters!

[TheMadScientist]

You might try loading a smaller version (resized to the smaller size to keep the kb down) on the bottom of the page like you talked about and loading the full version at the top of the page in an iFrame ... If you have a secondary site, or subdomains you can load the iFrame and full version from there rather than your main domain, which should force the browser to open 2 extra connections to your info.

Browsers usually only open 2 connections per domain ... Using the sub-domain or separate domain is a trick to force the browser to open more simultaneous connections to load what you want to display.

ADDED: Didn't see topr8's post until now, just answered the question after skimming ... We're saying to do the same thing, only different ... The second http request will not contain much overhead and you can serve the image and iFrame from cookieless domains, which should help a bit.

Personally, I usually use a separate site or subdomain for serving 'long-term-cache' files.

[Lame_Wolf]

There are a few things you can do that will speed up your site[s] without upgrading servers etc.

If you use images on your site, you can use the following free programs...

jpg cleaner [http://www.rainbow-software.org/programs.html] This clears out any hidden information that photoshop and other programs add to image files.

irfanview [http://www.irfanview.com/] used by many webmasters. This reduces the file size even further without loss of quality. (unless you overdo it).

Space and Line Remover [http://www.tucows.com/preview/343145] This program will compress your html documents.

And last by not least, CSS Tidy (I won't suppy a link for this as there are a few, and the best free one [IMO] is online)

[aristotle]

Lame Wolf recommended:
irfanview [http://www.irfanview.com/] used by many webmasters. This reduces the file size even further without loss of quality. (unless you overdo it).

I agree. This is a great utility. It's also free. Just go to the website, download and install.