A collection of images compounded in to one image file. Used to optimise page loading in website development, and used to create states/frames for animated graphics.

  1. In website development, an image sprite is used to optimise website loading times by reducing the number of separate resources that need to be fetched from the server when a website is loaded.

    Images of all different sizes are placed together in a single file and their coordinates within the image file are referenced using a language such as Cascading Style Sheets (CSS) or JavaScript, amongst others.

  2. In animation, an image sprite can be used to create a variety of animations; infinitely looping animations, banner animations and game animations, to name a few.

    The various states or frames of the animations are placed in a grid-like formation, and their specific coordinates are referenced for both sequential and non-sequential animation purposes.

history | excerpt history