Prev: Resize image
Next: What means a blank between two Tags in CSS ? How to setup a margin top of a TABLE?
From: Jason Carlton on 11 Feb 2010 22:33
If I understand the concept of sprites correctly, I would basically
create an empty <DIV></DIV> tag with fixed width and height, then use
CSS to define the background of this DIV by reading certain points of
a single larger image.

A very small percentage of my website traffic uses a screen reader
(for the visually impaired), and rely on ALT tags to define images. If
I utilize sprites instead of regular images, how do I set a type of
ALT tag for this DIVs so that the screen readers can understand them?
From: jeff on 12 Feb 2010 03:15
Jason Carlton wrote:
> If I understand the concept of sprites correctly, I would basically
> create an empty <DIV></DIV> tag with fixed width and height, then use
> CSS to define the background of this DIV by reading certain points of
> a single larger image.
>
> A very small percentage of my website traffic uses a screen reader
> (for the visually impaired), and rely on ALT tags to define images. If
> I utilize sprites instead of regular images, how do I set a type of
> ALT tag for this DIVs so that the screen readers can understand them?

Not that I understand the use of sprites, or screen readers, but
title should work on everything. If not in theory, in practice for most UAs.

<foo title="foo">Foo</foo>
works in all my browsers except IE6

<div title="foo">Foo</div>
works in all.

Jeff
From: Jason Carlton on 12 Feb 2010 04:46
On Feb 12, 3:15 am, jeff <jeff_th...(a)att.net> wrote:
> Jason Carlton wrote:
> > If I understand the concept of sprites correctly, I would basically
> > create an empty <DIV></DIV> tag with fixed width and height, then use
> > CSS to define the background of this DIV by reading certain points of
> > a single larger image.
>
> > A very small percentage of my website traffic uses a screen reader
> > (for the visually impaired), and rely on ALT tags to define images. If
> > I utilize sprites instead of regular images, how do I set a type of
> > ALT tag for this DIVs so that the screen readers can understand them?
>
>    Not that I understand the use of sprites, or screen readers, but
> title should work on everything. If not in theory, in practice for most UAs.
>
> <foo title="foo">Foo</foo>
> works in all my browsers except IE6
>
> <div title="foo">Foo</div>
> works in all.
>
>    Jeff

I can't pretend to understand either, honestly. If I understand the
purpose correctly, though, you would take a page with a lot of small
images (like emoticons), and instead of using 50 separate images, you
would compile them into a single large image. The purpose is to
decrease the number of concurrent connections, which (allegedly) slow
down the load time.

You would replace this:

<img src="emoticonA.gif" width="20" height="20" border="0">
<img src="emoticonB.gif" width="20" height="20" border="0">
<img src="emoticonC.gif" width="20" height="20" border="0">
<img src="emoticonD.gif" width="20" height="20" border="0">

With something like this:

..emoticon {
background-image:url('emoticon_sprite.gif'); // the big image
width: 20px;
height: 20px;
}

<div class="emoticon" style="background-position: 0px 0px;"></div>
<div class="emoticon" style="background-position: 0px -20px;"></div>
<div class="emoticon" style="background-position: 0px -40px;"></div>
<div class="emoticon" style="background-position: 0px -60px;"></div>

That's just hacked out for this post, so please ignore any typos. It
just outlines how I think that sprites are supposed to work.

As for screen readers, I'm not sure if they'll read the "title" tag or
not. The only one that I've seen in person was built like the old
Lynx, so it's ability to recognize things was pretty minimal. Still, I
guess it's worth a shot.

Thanks, Jeff,

Jason
From: Andy Dingley on 12 Feb 2010 06:53
On 12 Feb, 09:46, Jason Carlton <jwcarl...(a)gmail.com> wrote:

> I can't pretend to understand either, honestly. If I understand the
> purpose correctly, though, you would take a page with a lot of small
> images (like emoticons), and instead of using 50 separate images, you
> would compile them into a single large image. The purpose is to
> decrease the number of concurrent connections, which (allegedly) slow
> down the load time.

Sounds like obsolete voodoo code from the '90s. Don't.

(From curiosity though, where did you discover this?)
From: Jason Carlton on 12 Feb 2010 16:13
On Feb 12, 6:53 am, Andy Dingley <ding...(a)codesmiths.com> wrote:
> On 12 Feb, 09:46, Jason Carlton <jwcarl...(a)gmail.com> wrote:
>
> > I can't pretend to understand either, honestly. If I understand the
> > purpose correctly, though, you would take a page with a lot of small
> > images (like emoticons), and instead of using 50 separate images, you
> > would compile them into a single large image. The purpose is to
> > decrease the number of concurrent connections, which (allegedly) slow
> > down the load time.
>
> Sounds like obsolete voodoo code from the '90s. Don't.
>
> (From curiosity though, where did you discover this?)

My server was running slow recently with a high number of Apache
processes, and one of the theories was to cut down on the number of
HTTP-Requests. That's when someone suggested CSS sprites.

A simple search for "css sprites" comes up with the same basic code
structure:

http://www.google.com/search?q=css+sprites

This one seems to explain the code side of it better:

http://www.css-tricks.com/css-sprites/
 |  Next  |  Last
Pages: 1 2
Prev: Resize image
Next: What means a blank between two Tags in CSS ? How to setup a margin top of a TABLE?