Resize imagen?

[rollrodrig]

Hello. This plugin is awesome i am working some proyects with it and it works great. Now i was wondering my self if is posible do something like this. `

            .logo_banca_simple {
                @include retina-sprite($logo-banca-simple);
                @media (max-width: 600){
                    // Is posible to do it?
                    // I need a small version of the logo
                    @include retina-sprite($logo-banca-simple * 0.8);
                }
            }

`

[twolfson]

Nope, there isn't anything built in spritesmith to handle that. There are a couple solutions I can think of for your problem:

• Scale background-size and background-position values
  • This won't be compatible for browsers that don't support background-size
  • http://caniuse.com/#search=background-size
  • Con: Wastes extra bandwidth for media query since the image doesn't need those extra pixels

.logo_banca_simple {
    @include retina-sprite($logo-banca-simple);
    @media (max-width: 600){
        .logo-banca-simple {
            background-size: ($logo-banca-simple-total-width * 0.8) ($logo-banca-simple-total-height * 0.8);
            background-position: ($logo-banca-simple-offset-x * 0.8) ($logo-banca-simple-offset-y * 0.8);
        }

         @media (-webkit-min-device-pixel-ratio: 2),
                 (min-resolution: 192dpi) {
            background-size: ($logo-banca-simple-2x-total-width * 0.8) ($logo-banca-simple-2x-total-height * 0.8);
            background-position: ($logo-banca-simple-2x-offset-x * 0.8) ($logo-banca-simple-2x-offset-y * 0.8);
        }
    }
}

• Generate a smaller spritesheet and use those variables separately
  • If all your images are scaled down, then I suggest creating another spritesheet. We can create another set of scaled images via other gulp tasks like gulp-image-resize
  • https://www.npmjs.com/package/gulp-image-resize/
• Skip using spritesmith for that image (e.g. <img />)
  • Con: Wastes extra bandwidth for media query since the image doesn't need those extra pixels

[rollrodrig]

thank you.