Looks bad exporting to .JPG

[boycce]

Test exporting to JPG, looks pretty bad.

[twolfson]

Can you upload a version of the input, a PNG output (expected output), and JPG output (actual output)? Also, if you are using grunt-spritesmith/gulp.spritesmith, can you paste there config here?

[boycce]

Hey @twolfson, here it is.

Input JPG's

Output PNG

Output JPG (not so good)

Grunt spritesmith config

(grunt-spritesmith 4.6.1)

pngbg: {
  src: [
    'imgs/blue-btn.jpg',
    'imgs/next.jpg',
    'imgs/menu-item.jpg'
  ],
  destCss: 'sass/generated-bgs.scss',
  dest: 'imgs/spritesheet-bgs.png',
  algorithm: 'top-down'
},

jpgbg: {
  src: [
    'imgs/blue-btn.jpg',
    'imgs/next.jpg',
    'imgs/menu-item.jpg'
  ],
  destCss: 'sass/generated-bgs.scss',
  dest: 'imgs/spritesheet-bgs.jpg',
  algorithm: 'top-down'
}

[twolfson]

Ah, I see the checkerboard in the lowest image is getting destroyed and the wood texture is getting a little funky. For saving, we are using save-pixels which leverages jpeg-js under the hood. Unfortunately, there is no quality knob on the repo and I am not sure that transitioning repos will actually solve the problem.

Have you tried our using an engine with a quality knob on it (e.g. gmsmith)?

https://github.com/twolfson/gmsmith/tree/0.5.0#canvasexportoptions-cb

pngbg: {
  src: [
    'imgs/blue-btn.jpg',
    'imgs/next.jpg',
    'imgs/menu-item.jpg'
  ],
  destCss: 'sass/generated-bgs.scss',
  dest: 'imgs/spritesheet-bgs.png',
  algorithm: 'top-down',
  engine: require('gmsmith'),
  imgOpts: {
    quality: 100
  }
},

jpgbg: {
  src: [
    'imgs/blue-btn.jpg',
    'imgs/next.jpg',
    'imgs/menu-item.jpg'
  ],
  destCss: 'sass/generated-bgs.scss',
  dest: 'imgs/spritesheet-bgs.jpg',
  algorithm: 'top-down',
  engine: require('gmsmith'),
  imgOpts: {
    quality: 100
  }
}

[boycce]

Yeah I switched over to gmsmith yesterday which works well. Would be nice not to worry about installing GraphicsMagick and grunts gm, gmsmith in my deployments, but it's not that much extra work :ghost: Thanks

[twolfson]

That's great to hear. I think we should open an issue in jpeg-js to see how open the maintainer is to supporting quality. Can you upload a copy of the JPEG generated gmsmith? I want to give examples of what we are talking about supporting.

[jabadia]

Save-pixels already supports quality parameter for JPG saving: https://github.com/scijs/save-pixels/pull/15

Would you consider implementing the quality option?

[twolfson]

Yea, it was actually myself that added said support =P https://github.com/scijs/save-pixels/pull/15 https://github.com/scijs/save-pixels/issues/13

I'm not sure why I didn't follow through to add it to pixelsmith. Would you be interested in opening a PR to add it as an option as in phantomjssmith?

https://github.com/twolfson/phantomjssmith/tree/1.0.0#canvasexportoptions

[twolfson]

Quality is now supported for export in pixelsmith via @jabadia in #7. Their work has been released in 2.1.0 =)