Generated image file is too big

[patrick-hintermayer]

My image folder has a total size of 5.91 MB and the generated image file has a size of 26.8 MB.

This is my gulp task

gulp.task('sprite', function () {
    var spriteData = gulp.src([
        pub.images + "/**/*.png",
        pub.images + "/**/*.gif",
        pub.images + "/**/*.jpg",
        pub.images + "/**/*.jpeg"
    ]).pipe(spritesmith({
        imgName: '_sprite.png',
        imgPath: "../_sprite.png", // path for sass styles
        cssName: '_sprite.scss',
        cssVarMap: function (sprite) {
            sprite.name = 'image_' + sprite.name;
        },
    }));
    spriteData.img.pipe(gulp.dest(pubRoot)); // should not be within a src folder!
    spriteData.css.pipe(gulp.dest(src.sass));
});

[twolfson]

This is likely being caused by the JPG/JPEGs which are lossy and have better compression for some content than PNGs (which are lossless). Can you tell me how many of each file format type you have and their respective sizes?

[patrick-hintermayer]

JPG: 9 files with a total size of 5,48 MB GIF: 3 files with a total size of 50,5 KB PNG: 19 files with a total size of 318 KB

[twolfson]

Yep, this issue is definitely caused by converting large JPGs into PNGs. The compression is different and the PNGs can't compress as well. I'd suggest creating 2 spritesheets; 1 for the JPGs (generating a new JPG spritesheet) and 1 for the GIF/PNGs (generating a new PNG)

Although, it's probably best to not bundle the JPGs at all and consider something else as sending 5MB of content to users isn't a great practice =/