Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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 anytime I need to display a different icon, I simply change the positioning in my CSS code and that icon shows up instantaneously without any load time. In this chapter we will be covering how to create your own image sprites in Photoshop and how to optimize them properly so that you can hand them off to a developer or use them yourself in your own CSS-based layouts.
If you'd like more information about CSS sprites or CSS in general, be sure to check out Joseph Lowery's course on site navigation with CSS in Dreamweaver or James Williamson's CSS: Page Layouts course, both of which cover CSS and implementing image sprites your code. Now let's jump back in a Photoshop and get started building our own image sprites.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.