Understanding image sprites


show more Understanding image sprites provides you with in-depth training on Web. Taught by Justin Seeley as part of the Photoshop CS6 for Web Design (2012) show less
please wait ...

Understanding image sprites

Web sites that have a lot of images in them can take a long time to load, especially if those images are individually loaded one at a time from a server. In recent years, designers have found a way to alleviate this pain by using something called an image sprite. Basically an image sprite is a collection of images that are put together into one single image. When a developer codes the images into the site, they use the X and Y coordinates of each image to show only the portion they need at a given place in the site. This reduces the number of server requests and saves you serious bandwidth and time in the long run.

In the example I have here onscreen, you'll see a series of social media icons. I don't necessarily want to display them all at once, but I might want to add them individually to different areas of my site, or showcase them in a list or something like that. By providing this as a sprite, I ensure that all of the icons are loaded when the page loads and then...

Understanding image sprites
Video duration: 1m 25s 4h 56m Appropriate for all Updated Oct 04, 2013

Viewers:

Understanding image sprites provides you with in-depth training on Web. Taught by Justin Seeley as part of the Photoshop CS6 for Web Design (2012)

Subject:
Web
Software:
Photoshop
Author:
please wait ...