Magento Expert Forum - Improve your Magento experience

Results 1 to 4 of 4

What is a sprite? How is it applied using CSS? What is the benefit?

  1. #1

  2. #2
    Junior Member
    Join Date
    Jun 2018
    Posts
    17
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates.
    To display a single image from the combined image, you could use the CSS background-position property, defining the exact position of the image to be displayed.
    When a particular image is required, the CSS references the sprite sheet, offsets it by the index of the desired sprite, then defines the size of the sprite in pixels.

  3. #3
    Junior Member
    Join Date
    Sep 2016
    Posts
    181
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    A sprite is a bitmap graphic that is designed to be part of a larger scene. It can either be a static image or an animated graphic. Examples of sprites include objects in 2D video games, icons that are part of an application user interface, and small images published on websites.


    Bar Stool | Cafeteria Chairs | Student Writing Chairs | Revolving Office Chairs

  4. #4
    Junior Member petershene's Avatar
    Join Date
    Aug 2017
    Location
    South Africa
    Posts
    54
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Krina View Post
    Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates.
    To display a single image from the combined image, you could use the CSS background-position property, defining the exact position of the image to be displayed.
    When a particular image is required, the CSS references the sprite sheet, offsets it by the index of the desired sprite, then defines the size of the sprite in pixels.
    Pretty much this, the benefits i will add is one i noticed in particular, its actually what got me to learning about sprites , you can have a sprite for lets say ten icons, and your browser will treat and load it as 1 resource instead of ten, this helps with loading times. Eliminates possible render blocking.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •