how to get png8? - Githubissues

zhishaofei3 commented 8 years ago

how to get png8?

twolfson commented 8 years ago

Can you explain your use case? Why do you want a png8 image?

zhishaofei3 commented 8 years ago

In China, many people still using ie6, we need use png8 to fixed transparency problem, so I need two images, abc.png, abc-8.png

css like this: background: url(/css/i/commentsListIcons1.png) no-repeat 3px -19px; _background: url(/css/i/commentsListIcons1-8.png) no-repeat 3px -19px;

keelii commented 8 years ago

+1 for this I think png8 has smaller byte size, it`s good to performance.

twolfson commented 8 years ago

@zhishaofei3 Ah, k. It looks like none of our current engines will be able to generate png8. Due to needing both a png24 and a png8, I suggest generating the PNG8 via another task.

For grunt, there seems to be grunt-png8 which leverages pngquant:

https://github.com/moonreplace/grunt-png8

https://github.com/moonreplace/grunt-png8/blob/01cf8e277b5059476a76d34fd6a642bfd2c9c9b2/lib/png8.js#L2-L6

For gulp and Vanilla JS, there seem to be pngquant wrapper libraries:

https://github.com/papandreou/node-pngquant

http://node-modules.com/search?q=pngquant

@keelii While it's great to target a specific format for performance, depending on the output images JPEG or GIF could outperform PNG as well. In the gulp.spritesmith docs, we mention about piping to an image optimizer to optimize PNG while staying lossless:

https://github.com/twolfson/gulp.spritesmith/tree/6.0.0#continuing-the-pipeline

1052145436 commented 8 years ago

可以直接使用png24位图。然后用DD_belatedPNG.js插件修复即可。so easy!

1.在html的头部加入以下代码，如果IE6，则导入以下代码。

2.在需要修复ie6显示png24位图的地方，直接加入类ie6pngfix即可.如下：

twolfson / spritesmith

how to get png8? #60