<p>I thought I'd just add my two cents, since no one has answered this yet. :)</p>

<p>It's not clear from your question if these image elements are purely front-end design assets, or if the client/end-user needs to update them from within Craft. </p>

<p>In the case of front-end assets, my opinion is that how these are used in your site is part of the projects build phase, and not something Craft should be responsible for. If Craft starts implementing support for generating sprite sheets, there're tons of other front-end stuff that would be just as relevant to add. Compiling SCSS/LESS/Stylus, concatenation and minification of CSS and JS, building web fonts from SVG files, minification of images and SVGs, etc. I don't feel that this is what P&amp;T should spend their valuable time on. :)</p>

<p>There are numerous ways to automate building a sprite sheet as part of the build, I use <code>grunt-spritesmith</code> which also gives me a complete stylesheet with classes for all the different elements.</p>

<p>If the problem is that the client needs to update the assets, I see why the sprite sheet has to be generated by Craft. It would be possible to make a plugin that creates a stylesheet from all images in a folder, a list of images or something like that. It would probably involve a lot of inline css, since you wouldn't know the sizes and positions of the different elements in advance. </p>

<p>But, depending on the nature of the elements I'm not sure if I think it's worth it.  Since you're considering making a sprite sheet I guess that the elements isn't actual content (ie images that should be accessible, searchable by Google, etc)? In that case I think I'd just lazyload them if they result in too many requests. If the elements is actual content, combining them into a single image would really ruin accessibility, so that is a really bad idea anyhow. </p>

CC BY-SA 3.0
2014-09-24T21:04:27.137Z
André, great observations from another point of view. What I had in mind this time is at some midpoint, where the site owner would like to use and alter 'trim' screen elements which could strongly alter the feel of the site. It's a kind of personalization appropriate to the case. A little further thinking suggests this could be arranged by a plugin which constructs out of Craft-managed assets. Maybe, and not exactly simple. I didn't know about the Grunt tool; thanks for that also. Tusen takk ;)
narration_sd
CC BY-SA 3.0
2014-09-22T13:39:04.633Z
2014-09-22T13:39:04.633Z
André Elvan
<p>I'm planning for a site which will use a number of small image elements, which leads naturally to looking for first-load speedups by using sprites.</p>

<p>Since the site will be responsive, it will need the sprites to resize.</p>

<ul>
<li>One way would be to let Craft do the resizing; might work well enough.</li>
<li>the offsets would also be very nice to find re-aligned with the resized sprite locations. I think I am probably talking about a feature request here. Maybe it could be as simple as a conversion function, cached results or not.</li>
<li>another possibility would be to allow Assets to specify their own non-generated images for given Transform labels. Maybe by a middle-extension that named the tranform, if not a tranform folder solution?</li>
</ul>

<p>Ok, I think this is all dreamland for now, but might spark some thinking. I'm considering it because I think I'm realizing that the delay times for later than first images which show even on a Pingdom are probably due to limited sockets for browsers, or a modeled equivalent in the monitoring service if they are not just using Webkit contents for this.</p>

<p>Something to think about, or if someone has an answer I don't know about.</p>

<assets><responsive-images>
How to use sprite sheets effectively and responsively in Craft
# How to use sprite sheets effectively and responsively in Craft

(Asked by: username_0 on 2014-09-11)

I'm planning for a site which will use a number of small image elements, which leads naturally to looking for first-load speedups by using sprites.

Since the site will be responsive, it will need the sprites to resize.

* One way would be to let Craft do the resizing; might work well enough.
* the offsets would also be very nice to find re-aligned with the resized sprite locations. I think I am probably talking about a feature request here. Maybe it could be as simple as a conversion function, cached results or not.
* another possibility would be to allow Assets to specify their own non-generated images for given Transform labels. Maybe by a middle-extension that named the tranform, if not a tranform folder solution?

Ok, I think this is all dreamland for now, but might spark some thinking. I'm considering it because I think I'm realizing that the delay times for later than first images which show even on a Pingdom are probably due to limited sockets for browsers, or a modeled equivalent in the monitoring service if they are not just using Webkit contents for this.

Something to think about, or if someone has an answer I don't know about.

**Tags:** assets, responsive-images


---

## 1 answers

### Answer by username_1 on 2014-09-22. Score: 2

I thought I'd just add my two cents, since no one has answered this yet. :)

It's not clear from your question if these image elements are purely front-end design assets, or if the client/end-user needs to update them from within Craft.

In the case of front-end assets, my opinion is that how these are used in your site is part of the projects build phase, and not something Craft should be responsible for. If Craft starts implementing support for generating sprite sheets, there're tons of other front-end stuff that would be just as relevant to add. Compiling SCSS/LESS/Stylus, concatenation and minification of CSS and JS, building web fonts from SVG files, minification of images and SVGs, etc. I don't feel that this is what P&T should spend their valuable time on. :)

There are numerous ways to automate building a sprite sheet as part of the build, I use `grunt-spritesmith` which also gives me a complete stylesheet with classes for all the different elements.

If the problem is that the client needs to update the assets, I see why the sprite sheet has to be generated by Craft. It would be possible to make a plugin that creates a stylesheet from all images in a folder, a list of images or something like that. It would probably involve a lot of inline css, since you wouldn't know the sizes and positions of the different elements in advance.

But, depending on the nature of the elements I'm not sure if I think it's worth it. Since you're considering making a sprite sheet I guess that the elements isn't actual content (ie images that should be accessible, searchable by Google, etc)? In that case I think I'd just lazyload them if they result in too many requests. If the elements is actual content, combining them into a single image would really ruin accessibility, so that is a really bad idea anyhow.

> **Comments:**
> **username_0**: André, great observations from another point of view. What I had in mind this time is at some midpoint, where the site owner would like to use and alter 'trim' screen elements which could strongly alter the feel of the site. It's a kind of personalization appropriate to the case. A little further thinking suggests this could be arranged by a plugin which constructs out of Craft-managed assets. Maybe, and not exactly simple. I didn't know about the Grunt tool; thanks for that also. Tusen takk ;)  

---

