1

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.

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.

  • 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 Sep 24 '14 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.