Using Sprites

[Allen Brown]

Is it good practice to use image sprites to reduce the number of HTTP
calls?

If so, any plans to build it into the tool?

[EnviroChem]

Using sprites can certainly help. In my case, I use little arrow
gliphs on my menus in some locations (there are four arrows and a
square block). Each gliph was about 54 bytes in size but because of
overhead etc. even on my 15mbps connection required 80ms to download
typically. By combining them into a single sprite I created an image
that was about 144 bytes in size, but the download time was still just
about 80ms. Thus I reduced the download time for those images by
320ms. That represents a pretty good savings.

The way to use a sprite is to combine the group of like images (e.g.
my arrows) into one image file that has enough space between each
image that when positioned as a background image only the desired part
of the image is visible. The CSS rules you will need to use are:
background-image, background-repeat, background-position, and height.

I don't see building and coding sprites as something that could be
easily turned into an automated tool. This really does take planning
for each individual implementation.

[Richard Rabbat]

As EnviroChem says, a sprite is more than just looking at a few images on a page.

see http://www.google.com/images/nav_logo7.png

if you get a good idea of what images you'd like to sprite, Steve Souders's SpriteMe may be a good tool to use.

Richard.

--
You received this message because you are subscribed to the Google Groups "page-speed-discuss" group.
To post to this group, send email to page-spee...@googlegroups.com.
To unsubscribe from this group, send email to page-speed-disc...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/page-speed-discuss?hl=en.

--
Richard Rabbat | Product Manager | Google, Inc.
E: rab...@google.com | M: +1-650-714-7618 | Google Voice: +1-617-213-0819

[Thomas Hey'l]

Sprites are certainly nice to have. They might also have some
drawbacks. On scarse usage, the required CSS will waste more than an
optimized image. Worse, a user with an agent that does not handle CSS
will not see the desired results but something misleading instead.

Of course, I see the advantages. Is the risk worth the saving? In my
opinion, the answer is no. We have one resource for one result and one
URL, and that's the way I handle it.

Regards, Thomas

[Allen Brown]

I wasn't suggesting the creation of a tool that could build and code
sprites. I was thinking more about giving the Page Speed tool the
ability to detect the existence of a lot of small images and then to
recommend that sprites are used.

Allen

On Jan 30, 8:42 pm, Richard Rabbat <rab...@google.com> wrote:
> As EnviroChem says, a sprite is more than just looking at a few images on a
> page.

> seehttp://www.google.com/images/nav_logo7.png

> if you get a good idea of what images you'd like to sprite, Steve Souders's

> SpriteMe <http://www.spriteme.org/> may be a good tool to use.

> > page-speed-disc...@googlegroups.com<page-speed-discuss%2Bunsubs cr...@googlegroups.com>

[EnviroChem]

A detecting a page with lots of little gliphs and the recommending the
use of sprites as a way to reduce the number of images to download is
a good idea. I know in my case by creating a sprite out of my five
navigation gliphs reduced the number of files needed to download by
four and actually decreased the total number of bytes that had to be
downloaded as well. This was a double win. I also use little 16x16
social networking icons to encourage people to share my articles with
their social network. By turning these icons into a sprite and then
creating an image map for the sprite I was able to eliminate 11 image
file calls per page.

[Steve Souders]

SpriteMe automatically recognizes background images that can be sprited, creates the sprites, and tells you the size savings. The code is open source and runs in all browsers.

-Steve

To unsubscribe from this group, send email to page-speed-disc...@googlegroups.com.

[David Calhoun]

Just as an aside, the reason downloading 54 bytes is roughly
equivalent to downloading 144 bytes is because of the way the packets
are transferred. As it turns out, sending 1byte takes the same amount
of time as sending 1,000 bytes because of packet size.

You can read more info about this here:
http://developer.yahoo.net/blog/archives/2009/10/a_engineers_gui.html

-David

On Jan 30, 10:54 am, EnviroChem <k...@environmentalchemistry.com>
wrote: