High Performance Images by Colin Bendell Tim Kadlec Yoav Weiss Guy Podjarny Nick Doyle and Mike McCall

Author:Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle, and Mike McCall
Language: eng
Format: mobi, epub
Publisher: O'Reilly Media, Inc.
Published: 2016-08-25T04:00:00+00:00

Animations

Using CSS sprites to do video spriting

Games and JavaScript

Making a website feel more like a mobile app

A comprehensive review of the different techniques and usages can be found at Smashing Magazine’s post The Mystery of CSS Sprites.

Drawbacks and shortcomings

While CSS sprites do provide broad browser support and are well understood, it isn’t all unicorns and rainbows. There are many rough edges in this technique.

Operationally:

Global sprites versus local sprites: should you create one global sprite but have many of the icons unused in a page, or have one sprite per page but have duplication?

Large sprites need to partitioned. Sprites shouldn’t be larger than 10 packets (~40 KB). Use partitioning schemes to manage growth.

Cache invalidation — any change will cause the sprite to be invalid and render downstream caches moot. You will certainly need to version your sprites and force the end user to download the new sprite, even if 90% of the icons haven’t changed.

You must be vigilant about ensuring that unsprited references to small images don’t creep into the system.

Chicken and egg: sprite first or style first? Sprites must be created first before creative teams can style a page and decide if the sprite is good enough. Iterating on an icon is burdensome.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.