Is there a way to change the order of images in the layout algorithm?

computersarecool commented 9 years ago

First: Thanks for spritesmith, it is awesome.

Second: I see that the order of images in the left-to-right algorithm is based on the file names in the directory (so A.jpg would be on the left and B.jpg would be on the right)

Would it be possible to manually set the order?

I am interested in this because I am trying to make a responsive design where the sprites will be based on percentages not pixel locations, and I would like to be able to set the percentage based on colors in the files rather than the file names.

This is just a small request - I didn't see it documented so I thought I'd ask.

twolfson commented 9 years ago

Positioning/layout can be adjusted via the algorithm option. Here's relevant documentation:

https://github.com/Ensighten/grunt-spritesmith/tree/5.1.1#documentation

https://github.com/Ensighten/grunt-spritesmith/tree/5.1.1#algorithms

Order can be manually set for any of the linear algorithms (e.g. top-down, left-right, diagonal). To perform this:

Specify the algorithm option
Disable sorting via algorithmOpts (enabled by default)
Force order of images by listing them in src without any glob (e.g. *.jpg)

For example, the following guarantees A.jpg is to the left of B.jpg:

// Using a forced list -- not `src: '*.jpg'`
src: ['A.jpg', 'B.jpg'],
algorithm: 'left-right',
algorithmOpts: {
  sort: false
}

computersarecool commented 9 years ago

@twolfson For some reason, when I try to run the task with an array of images, it works with one image in the array, but any more than that and Grunt just returns:

Running "sprite:front" (sprite) task Killed

Do you know why this could be? Here are my settings:

    sprite: {                                                                                                                                                                                                                           
      front: {                                                                                                                                                                                                                          
        src:[                                                                                                                                                                                                                           
          'app/images/prep_sprites/front_sprites/cherry-gallery.jpg'                                                                                                                                                                    
//          'app/images/prep_sprites/front_sprites/nectarine-gallery.jpg'                                                                                                                                                               
//          'app/images/prep_sprites/front_sprites/lemon-gallery.jpg',                                                                                                                                                                  
//          'app/images/prep_sprites/front_sprites/apple-gallery.jpg',                                                                                                                                                                  
//          'app/images/prep_sprites/front_sprites/electricity-gallery.jpg',                                                                                                                                                            
//          'app/images/prep_sprites/front_sprites/plum-crazy-gallery.jpg',                                                                                                                                                             
//          'app/images/prep_sprites/front_sprites/powder-gallery.jpg',                                                                                                                                                                 
//          'app/images/prep_sprites/front_sprites/proton-powder-gallery.jpg'                                                                                                                                                           
        ],                                                                                                                                                                                                                              
        dest: 'app/images/sprites/front_sprites.jpg',                                                                                                                                                                                   
        destCss: 'app/styles/front_sprites.styl',                                                                                                                                                                                       
        cssSpritesheetName: 'front_sprites',                                                                                                                                                                                            
        algorithm: 'left-right',                                                                                                                                                                                                        
        algorithmOpts: {                                                                                                                                                                                                                
          sort: false                                                                                                                                                                                                                   
        }                                                                                                                                                                                                                               
      },

I know it is not an issue with the images because if run as the only item in the array, the task finishes but as soon as their are two it says 'killed'. Also, this exact same set up (except algorithmOpts) worked with the globbing*`

(Using Grunt-spritesmith v 5.1.1)

Thanks for any help

twolfson commented 9 years ago

Everything seems to be in order. Can you try running with verbose output?

grunt sprite --verbose

computersarecool commented 9 years ago

Sure: (by the way, I also lied, it doesn't actually work with globbing either, same result, killed). The weird part is that is does succeed when there is just one image in the array:

Here is the output (the relevant part I think, I can paste the whole thing if you need):

Registering "grunt-spritesmith" local Npm module tasks.                                                                                                                                                                                 
Reading /home/optonox/Documents/gitprojects/night_walker/client/node_modules/grunt-spritesmith/packag                                                                                                                                   
e.json...OK                                                                                                                                                                                                                             
Parsing /home/optonox/Documents/gitprojects/night_walker/client/node_modules/grunt-spritesmith/packag                                                                                                                                   
e.json...OK                                                                                                                                                                                                                             
Loading "grunt-spritesmith.js" tasks...OK                                                                                                                                                                                               
+ sprite                                                                                                                                                                                                                                
Loading "Gruntfile.js" tasks...OK                                                                                                                                                                                                       
+ build, default, serve, server, test                                                                                                                                                                                                   

Running tasks: sprite:front                                                                                                                                                                                                             

Running "sprite:front" (sprite) task                                                                                                                                                                                                    
Verifying property sprite.front exists in config...OK                                                                                                                                                                                   
Files: app/images/prep_sprites/front_sprites/cherry-gallery.jpg, app/images/prep_sprites/front_sprite                                                                                                                                   
s/nectarine-gallery.jpg -> app/images/sprites/front_sprites.jpg                                                                                                                                                                         
Killed

(This was run with two images in the array)

With one file, the verbose output is this:

Running tasks: sprite:front                                                                                                                                                                                                             

Running "sprite:front" (sprite) task                                                                                                                                                                                                    
Verifying property sprite.front exists in config...OK                                                                                                                                                                                   
Files: app/images/prep_sprites/front_sprites/cherry-gallery.jpg -> app/images/sprites/front_sprites.jpg                                                                                                                                 
Files "app/styles/front_sprites.styl", "app/images/sprites/front_sprites.jpg" created.                                                                                                                                                  

Done, without errors.                                                                                                                                                                                                                   

Execution Time (2015-10-27 08:11:14 UTC)                                                                                                                                                                                                
loading tasks  51ms  ▇▇▇ 3%                                                                                                                                                                                                             
sprite:front   1.9s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 97%                                                                                                                                
Total 2s

Also, as a note, I just switched this code from my local Macbook to Fedora on a (new) cloud server. is there some configuration could have been left out when I moved servers?

twolfson commented 9 years ago

Hm, weird. What version of node and npm are on the server?

node --version
npm --version

Also, for good measure can you include the output of npm ls within grunt-spritesmith?

cd node_modules/grunt-spritesmith
npm ls

computersarecool commented 9 years ago

node v4.2.1 npm 3.3.9 (gotta keep 'em current)

Output:

── async@0.9.2                                                                                                                                                                                                                         
├─┬ spritesheet-templates@10.0.0                                                                                                                                                                                                        
│ ├─┬ handlebars@3.0.3                                                                                                                                                                                                                  
│ │ ├─┬ optimist@0.6.1                                                                                                                                                                                                                  
│ │ │ ├── minimist@0.0.10                                                                                                                                                                                                               
│ │ │ └── wordwrap@0.0.3                                                                                                                                                                                                                
│ │ ├─┬ source-map@0.1.43                                                                                                                                                                                                               
│ │ │ └── amdefine@1.0.0                                                                                                                                                                                                                
│ │ └─┬ uglify-js@2.3.6                                                                                                                                                                                                                 
│ │   ├── async@0.2.10                                                                                                                                                                                                                  
│ │   └─┬ optimist@0.3.7                                                                                                                                                                                                                
│ │     └── wordwrap@0.0.3                                                                                                                                                                                                              
│ ├── handlebars-layouts@1.1.0                                                                                                                                                                                                          
│ ├── json-content-demux@0.1.3                                                                                                                                                                                                          
│ └── underscore.string@3.0.3                                                                                                                                                                                                           
├─┬ spritesmith@1.4.0                                                                                                                                                                                                                   
│ ├── async@0.2.10                                                                                                                                                                                                                      
│ ├─┬ layout@2.2.0                                                                                                                                                                                                                      
│ │ └── bin-pack@1.0.1                                                                                                                                                                                                                  
│ └─┬ pixelsmith@1.2.0                                                                                                                                                                                                                  
│   ├── async@0.9.2                                                                                                                                                                                                                     
│   ├─┬ concat-stream@1.4.10                                                                                                                                                                                                            
│   │ ├── inherits@2.0.1                                                                                                                                                                                                                
│   │ ├─┬ readable-stream@1.1.13                                                                                                                                                                                                        
│   │ │ ├── core-util-is@1.0.1                                                                                                                                                                                                          
│   │ │ ├── isarray@0.0.1                                                                                                                                                                                                               
│   │ │ └── string_decoder@0.10.31                                                                                                                                                                                                      
│   │ └── typedarray@0.0.6                                                                                                                                                                                                              
│   ├─┬ get-pixels@3.2.3                                                                                                                                                                                                                
│   │ ├── data-uri-to-buffer@0.0.3                                                                                                                                                                                                      
│   │ ├── jpeg-js@0.1.1                                                                                                                                                                                                                 
│   │ ├─┬ mime-types@2.1.7                                                                                                                                                                                                              
│   │ │ └── mime-db@1.19.0                                                                                                                                                                                                              
│   │ ├─┬ ndarray-pack@1.1.1                                                                                                                                                                                                            
│   │ │ └─┬ cwise-compiler@0.1.0                                                                                                                                                                                                        
│   │ │   └── uniq@0.0.2                                                                                                                                                                                                                
│   │ ├── node-bitmap@0.0.1                                                                                                                                                                                                             
│   │ ├── omggif@1.0.8                                                                                                                                                                                                                  
│   │ ├── parse-data-uri@0.2.0                                                                                                                                                                                                          
│   │ ├── pngjs2@1.2.0                                                                                                                                                                                                                  
│   │ ├─┬ request@2.65.0                                                                                                                                                                                                                
│   │ │ ├── aws-sign2@0.6.0                                                                                                                                                                                                             
│   │ │ ├─┬ bl@1.0.0                                                                                                                                                                                                                    
│   │ │ │ └─┬ readable-stream@2.0.2                                                                                                                                                                                                     
│   │ │ │   ├── core-util-is@1.0.1                                                                                                                                                                                                      
│   │ │ │   ├── inherits@2.0.1                                                                                                                                                                                                          
│   │ │ │   ├── isarray@0.0.1                                                                                                                                                                                                           
│   │ │ │   ├── process-nextick-args@1.0.3                                                                                                                                                                                              
│   │ │ │   ├── string_decoder@0.10.31                                                                                                                                                                                                  
│   │ │ │   └── util-deprecate@1.0.2                                                                                                                                                                                                    
│   │ │ ├── caseless@0.11.0                                                                                                                                                                                                             
│   │ │ ├─┬ combined-stream@1.0.5                                                                                                                                                                                                       
│   │ │ │ └── delayed-stream@1.0.0                                                                                                                                                                                                      
│   │ │ ├── extend@3.0.0                                                                                                                                                                                                                
│   │ │ ├── forever-agent@0.6.1                                   

   │ │ ├─┬ form-data@1.0.0-rc3                                                                                                                                                                                                         
│   │ │ │ └── async@1.4.2                                                                                                                                                                                                               
│   │ │ ├─┬ har-validator@2.0.2                                                                                                                                                                                                         
│   │ │ │ ├─┬ chalk@1.1.1                                                                                                                                                                                                               
│   │ │ │ │ ├── ansi-styles@2.1.0                                                                                                                                                                                                       
│   │ │ │ │ ├── escape-string-regexp@1.0.3                                                                                                                                                                                              
│   │ │ │ │ ├─┬ has-ansi@2.0.0                                                                                                                                                                                                          
│   │ │ │ │ │ └── ansi-regex@2.0.0                                                                                                                                                                                                      
│   │ │ │ │ ├─┬ strip-ansi@3.0.0                                                                                                                                                                                                        
│   │ │ │ │ │ └── ansi-regex@2.0.0                                                                                                                                                                                                      
│   │ │ │ │ └── supports-color@2.0.0                                                                                                                                                                                                    
│   │ │ │ ├─┬ commander@2.9.0                                                                                                                                                                                                           
│   │ │ │ │ └── graceful-readlink@1.0.1                                                                                                                                                                                                 
│   │ │ │ ├─┬ is-my-json-valid@2.12.2                                                                                                                                                                                                   
│   │ │ │ │ ├── generate-function@2.0.0                                                                                                                                                                                                 
│   │ │ │ │ ├─┬ generate-object-property@1.2.0                                                                                                                                                                                          
│   │ │ │ │ │ └── is-property@1.0.2                                                                                                                                                                                                     
│   │ │ │ │ ├── jsonpointer@2.0.0                                                                                                                                                                                                       
│   │ │ │ │ └── xtend@4.0.0                                                                                                                                                                                                             
│   │ │ │ └─┬ pinkie-promise@1.0.0                                                                                                                                                                                                      
│   │ │ │   └── pinkie@1.0.0                                                                                                                                                                                                            
│   │ │ ├─┬ hawk@3.1.0                                                                                                                                                                                                                  
│   │ │ │ ├── boom@2.9.0                                                                                                                                                                                                                
│   │ │ │ ├── cryptiles@2.0.5                                                                                                                                                                                                           
│   │ │ │ ├── hoek@2.16.3                                                                                                                                                                                                               
│   │ │ │ └── sntp@1.0.9                                                                                                                                                                                                                
│   │ │ ├─┬ http-signature@0.11.0                                                                                                                                                                                                       
│   │ │ │ ├── asn1@0.1.11                                                                                                                                                                                                               
│   │ │ │ ├── assert-plus@0.1.5                                                                                                                                                                                                         
│   │ │ │ └── ctype@0.5.3                                                                                                                                                                                                               
│   │ │ ├── isstream@0.1.2                                                                                                                                                                                                              
│   │ │ ├── json-stringify-safe@5.0.1                                                                                                                                                                                                   
│   │ │ ├── node-uuid@1.4.3                                                                                                                                                                                                             
│   │ │ ├── oauth-sign@0.8.0                                                                                                                                                                                                            
│   │ │ ├── qs@5.2.0                                                                                                                                                                                                                    
│   │ │ ├── stringstream@0.0.4                                                                                                                                                                                                          
│   │ │ ├── tough-cookie@2.2.0                                                                                                                                                                                                          
│   │ │ └── tunnel-agent@0.4.1                                                                                                                                                                                                          
│   │ └── through@2.3.8                                                                                                                                                                                                                 
│   ├─┬ ndarray@1.0.18                                                                                                                                                                                                                  
│   │ ├── iota-array@1.0.0                                                                                                                                                                                                              
│   │ └── is-buffer@1.1.0                                                                                                                                                                                                               
│   ├─┬ ndarray-fill@1.0.1                                                                                                                                                                                                              
│   │ └─┬ cwise@1.0.8                                                                                                                                                                                                                   
│   │   ├─┬ cwise-compiler@1.1.2                                                                                                                                                                                                        
│   │   │ └── uniq@1.0.1                                                                                                                                                                                                                
│   │   ├─┬ cwise-parser@1.0.2                                                                                                                                                                                                          
│   │   │ ├── esprima@1.2.5                                                                                                                                                                                                             
│   │   │ └── uniq@1.0.1                                                                                                                                                                                                                
│   │   ├─┬ static-module@1.1.3                                                                                                                                                                                                         
│   │   │ ├─┬ duplexer2@0.0.2                                                                                                                                                                                                           
│   │   │ │ └─┬ readable-stream@1.1.13                                                                                                                                                                                                  
│   │   │ │   ├── core-util-is@1.0.1                                                          
│   │   │ │   ├── inherits@2.0.1                                                                                                                                                                                                        
│   │   │ │   ├── isarray@0.0.1                                                                                                                                                                                                         
│   │   │ │   └── string_decoder@0.10.31                                                                                                                                                                                                
│   │   │ ├─┬ escodegen@1.3.3                                                                                                                                                                                                           
│   │   │ │ ├── esprima@1.1.1                                                                                                                                                                                                           
│   │   │ │ ├── estraverse@1.5.1                                                                                                                                                                                                        
│   │   │ │ ├── esutils@1.0.0   

Thanks for looking at all this btw.

twolfson commented 9 years ago

Yea... everything seems in order. Let's try pulling down the repo and running its tests =/

# Clone the repository
git clone https://github.com/Ensighten/grunt-spritesmith
cd grunt-spritesmith

# Install dependencies and devDependencies
npm install

# Run our tests
npm test

computersarecool commented 9 years ago

So I changed to a different directory (than where I have been developed), switched to the root user (to avoid any permissions running npm install) . Running npm test returned:

> grunt-spritesmith@5.1.3 pretest /home/optonox/Documents/grunt-spritesmith                                                                                                                                                             
> twolfson-style install                                                                                                                                                                                                                

> grunt-spritesmith@5.1.3 test /home/optonox/Documents/grunt-spritesmith                                                                                                                                                                
> npm run precheck && mocha src-test/ --reporter dot && npm run lint                                                                                                                                                                    

> grunt-spritesmith@5.1.3 precheck /home/optonox/Documents/grunt-spritesmith                                                                                                                                                            
> twolfson-style precheck docs/ src/ src-test/ tasks/                                                                                                                                                                                   

(node) child_process: options.customFds option is deprecated. Use options.stdio instead.                                                                                                                                                

  ․․․․․․․․․․․․․․․․․․․                                                                                                                                                                                                                   

  17 passing (15s)                                                                                                                                                                                                                      
  2 failing                                                                                                                                                                                                                             

  1) grunt-spritesmith running a task using overrides generates an image:                                                                                                                                                               
     Error: ENOENT: no such file or directory, open '/home/optonox/Documents/grunt-spritesmith/src-test/scratch/sprite.overrides.png'                                                                                                   
      at Error (native)                                                                                                                                                                                                                 
      at Object.fs.openSync (fs.js:549:18)                                                                                                                                                                                              
      at Object.fs.readFileSync (fs.js:397:15)                                                                                                                                                                                          
      at Context.<anonymous> (/home/optonox/Documents/grunt-spritesmith/src-test/grunt-spritesmith.test.js:111:28)                                                                                                                      
      at callFn (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runnable.js:250:21)                                                                                                                                   
      at Test.Runnable.run (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runnable.js:243:7)                                                                                                                         
      at Runner.runTest (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:373:10)                                                                                                                             
      at /home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:451:12                                                                                                                                              
      at next (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:298:14)                                                                                                                                       
      at /home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:308:7                                                                                                                                               
      at next (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:246:23)                                                                                                                                       
      at Immediate._onImmediate (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:275:5)                                                                                                                      
      at processImmediate [as _immediateCallback] (timers.js:368:17)                                                                                                                                                                    

  2) grunt-spritesmith running a task using overrides generates coordinates:                                                                                                                                                            
     Error: ENOENT: no such file or directory, open '/home/optonox/Documents/grunt-spritesmith/src-test/scratch/sprite_positions.overrides.styl'                                                                                        
      at Error (native)                                                                                                                                                                                                                 
      at Object.fs.openSync (fs.js:549:18)                                                                                                                                                                                              
      at Object.fs.readFileSync (fs.js:397:15)                                                                                                                                                                                          
      at Context.<anonymous> (/home/optonox/Documents/grunt-spritesmith/src-test/grunt-spritesmith.test.js:121:29)                                                                                                                      
      at callFn (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runnable.js:250:21)                                                                                                                                   
      at Test.Runnable.run (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runnable.js:243:7)                                                                                                                         
      at Runner.runTest (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:373:10)                                                                                                                             
      at /home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:451:12                                                                                                                                              
      at next (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:298:14)                                                                                                                                       
      at /home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:308:7                                                                                                                                               
      at next (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:246:23)                                                                                                                                       
      at Immediate._onImmediate (/home/optonox/Documents/grunt-spritesmith/node_modules/mocha/lib/runner.js:275:5)                                                                                                                      
      at processImmediate [as _immediateCallback] (timers.js:368:17)                                                                                                                                                                    

npm ERR! Test failed.  See above for more details.

twolfson commented 9 years ago

Okay, that means there's no issue in grunt-spritesmith (the failing ones are likely due to missing Graphics Magick which is fine). Going to take a second look at your configuration =/

computersarecool commented 9 years ago

If it is of any help, all of my code (including the images) is available on the dev branch here:

https://github.com/computersarecool/night_walker

Thanks for taking a look at this, I really enjoy your plugin and it was working great on my mac, until my mac died two days ago.

twolfson commented 9 years ago

Still looks fine. Maybe something is broken with the other images. Can you run nectarine-gallery.jpg standalone?

computersarecool commented 9 years ago

Yes, that file (and all the others) work fine if they are the only item in the array. The "final" sprite is output with just that image in the spritesheet.

twolfson commented 9 years ago

I cloned the repo on the dev branch, installed dependencies, and ran grunt sprite:front but it looks like everything is working for me =(

twolfson commented 9 years ago

Trying to match up your versions -- I was on node@0.10

twolfson commented 9 years ago

As a sanity check, can you remove and reinstall your node_modules?

rm -r node_modules
npm install

twolfson commented 9 years ago

It still runs for me on Linux Mint 17.1 with node@4.2.1, npm@3.3.9, grunt@0.4.5, and grunt-spritesmith@5.1.3 =(

Maybe the issue is you are running out of RAM on your server?

twolfson commented 9 years ago

My reasoning would be that these are rather large images and they are being decoded/manipulated/encoded in memory =/

twolfson commented 9 years ago

When looking at top, it seems to use up to 1.6GB of virtual memory o_o

computersarecool commented 9 years ago

well god damn, it's looking like my problem, not yours.

I bet you that is it, I am running this on the free Amazon AWS tier which is pretty small. I should have clarified that, it probably would have saved us time.

twolfson commented 9 years ago

You can likely try some of the other engines -- they might be more memory efficient (e.g. gmsmith, canvassmith). Docs/examples can be found on that here:

https://github.com/Ensighten/grunt-spritesmith/tree/5.1.3#engines

https://github.com/Ensighten/grunt-spritesmith/tree/5.1.3#engine

computersarecool commented 9 years ago

I really hope I didn't waste your time here. The Killed message isn't that descriptive and I have never run into it before.

Do you know why they would get that big? I realize they are large images but only in the neighborhood of 800kb, and there are 8 of them... That part doesn't make full sense to me

As a side note, even though I swear I ran npm install on my client/node_modules in this same set up about a week ago, it too gives a killed response (this time it hangs on extract:binary → gunzTarP).

Do you think this also be to ram issues?

twolfson commented 9 years ago

Hmm, Google + Stack Overflow are saying "yes" =/

http://stackoverflow.com/questions/10876136/what-can-cause-node-js-to-print-killed-and-exit

twolfson commented 9 years ago

Side note: From a financial perspective, Digital Ocean is much cheaper than AWS (it's $5/month) for similar setups (much less IaaS in DO but VMs are similar).

twolfson commented 9 years ago

Alright, heading off for the night :sleeping:. Best of luck on finding a solution that works for you =)

computersarecool commented 9 years ago

I love Digital Ocean and whenever I finish this app (if I finish?) I plan to host it there (at least the api stuff).

I have been experimenting with AWS because I wanted to learn about all of the IaaS options and since I am not the fastest developer it helps to be able to develop for free right now (well, I used to be able to develop, until I ran out of memory).

Anyway, I've been checking out your website, you are clearly a smart guy! Thanks for all of your work. Hopefully you'll let me bother you again in the future.

twolfson commented 9 years ago

Something I thought of while falling asleep: Since your images are so large, spritesmith is likely hurting more than helping. CSS sprites are intended to reduce the overall overhead with making lots of HTTP requests to different small images.

However, when you have very large images in the spritesheet -- that forces loading of all of them (even if you only need 1) which drains significantly more bandwidth than the HTTP request overhead. A better solution for your use case might be image lazy loading.

twolfson / grunt-spritesmith

Is there a way to change the order of images in the layout algorithm? #146