We have some sprites in core and we'll have more:
#851496: Invalid to use the CSS background to display non-background images in Forum
#821672: Forum icons not accessible to screen-reader users
#1849078: Replace many toolbar icon files with a single CSS sprite image
#565752: Core images (i.e. images in /misc) should use CSS sprites

There are some new best practices that should be considered
http://www.paciellogroup.com/blog/2012/08/notes-on-accessible-css-image-...
http://openweb.eu.org/articles/performances_web_les_sprites_CSS

And how we approach this needs to be consistent so that it is easy for modules to adopt this best practice moving forward.

Comments

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ commented
Issue tags: +mobile, +WPO

tag

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Issue tags: +sprite

tagging.

sun’s picture

sun
Primary language German
Location Karlsruhe
CreditAttribution: sun commented
Issue tags: +Assetic

Wasn't Assetic supposed to help with that?

Sprites are not compatible with a modular system architecture — in an ideal world, Sprites would be auto-generated and injected into CSS files during CSS preprocessing. That keeps the concept compatible with a modular/theme-overridable architecture, and allows sites to leverage Sprites and improve frontend performance in a much more generic way.

In the past, this has been approached in http://drupal.org/project/sprites and I think some other contrib modules already. I don't know whether they have been successful.

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ commented

Assetic would help only by enabling the use of Compass/SASS, not as the thing actually building the sprite.

barraponto’s picture

barraponto CreditAttribution: barraponto commented
Category: bug » feature

will we get around to adding a spriting library by feature freeze? SASS/Compass is out of the game for d8 (unfortunately) but what about PHP spriting libraries? although I expect them to generate css of their own.

droplet’s picture

droplet CreditAttribution: droplet commented

Just a note:

When doing sprties, please leaves more spaces between each image. and test it with/without GPU enabled.

#1069152: Throbber in textfield is misaligned when browser hardware acceleration enabled (gfx)

ry5n’s picture

ry5n CreditAttribution: ry5n commented

Two things:

1. Just FYI, Compass actually does build sprites, from a directory of separate image files: http://compass-style.org/help/tutorials/spriting/
2. There’s another relevant issue with a solid proposal that would handle this, but it’s hung up on some theme system internals: https://drupal.org/node/1849712

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Issue summary: View changes

Updated issue summary with 1849078

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Issue summary: View changes

adding 565752

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Version: 8.0.x-dev » 8.1.x-dev
Issue summary: View changes
Status: Active » Postponed

I'm assuming this should get bumped to 8.1.x.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford at OpenConcept Consulting Inc. commented
Status: Postponed » Active

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford at CivicActions commented
Issue tags: +svg

Might want to consider moving to SVG sprites
https://www.sitepoint.com/use-svg-image-sprites/
https://css-tricks.com/svg-sprites-use-better-icon-fonts/

There are definitely language and accessibility challenges though.

One way around this is:
https://upload.wikimedia.org/wikipedia/commons/1/1e/Multilingual_SVG_exa...

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/switch#SVG_%3Cs...

But that doesn't cover title/desc.