search

EyalAr / lwip

Light Weight Image Processor for NodeJS
MIT License
2.36k stars 230 forks source link

Artefacts after resize #109

Open iboozyvoozy opened 9 years ago

iboozyvoozy commented 9 years ago

https://github.com/aslansky/css-sprite/issues/42

EyalAr commented 9 years ago

Please isolate the problem and provide instructions how to reproduce it.

See how to contribute.

farism commented 9 years ago

This appears to be an issue with transparent images only. The sample repo shows some different outputs. The standard resolution sprite.png, and lwip-transparent.png images were generated with css-sprite and contain artifacts. The lwip-background.png with a white background has no artifacts.

Thank you for your hard work on this great project.

https://github.com/farism/lwip-resize-artifacts

itayco commented 9 years ago

I'm encountering this issue as well, also using css-sprite.

EyalAr commented 9 years ago

@farism thanks for the code, I will check it out.

iljapanic commented 9 years ago

+1 (also using via css-sprite)

arm1n commented 9 years ago

+1 (using css-sprite too)

hisnameisjimmy commented 9 years ago

I'm also seeing issues via css-sprite. I tried installing previous versions of lwip going back to 0.0.3, and the issue persists. If you need another example project to spur a fix, I am happy to provide.

I'm certain an issue like this isn't an easy thing to debug, but using css-sprite, and by extension lwip, is an essential part of my dev process and I would love to see some movement towards a fix for this. I am happy to guinea pig.

hisnameisjimmy commented 9 years ago

For those looking for a workaround to the css-sprite issue, you can take the @2x version and resize it manually using something like photoshop, then just save it over the generated @1x sprite.

This may seem obvious, but it wasn't to me. Hopefully this helps someone else running into this issue.

farism commented 9 years ago

That's a decent solution, but not automatable. As I'm using gulp for my task runner, I decided to just use gulp-image-resize (with graphics magic dep) to automate the generation of 1x sprite. However, this almost defeats the purpose of using css-sprite because one of the primary highlights is that it's supposed to be dependency free :p

EyalAr commented 9 years ago

The artifacts seem to be caused due to aliasing. LWIP does not apply anti-aliasing filters when resizing images. Photoshop, on the other hand, does; which is why you don't see those artifacts when resizing with PS. If you disable anti-aliasing in PS (choose "nearest neighbor" interpolation), you will get the same results as in LWIP.

For now, my best suggestion is try the different interpolation methods LWIP supports, and choose the one which gives you the best result.

I will look into implementing anti-aliasing filters as part of LWIP's API.

hisnameisjimmy commented 9 years ago

All of the interpolation methods currently produce artifacts of one kind or another, but I look forward to seeing anti-aliasing making it into LWIP!

@farism I also like your idea of using gulp-image-resize, which is a totally workable solution in my workflow.

leslc commented 9 years ago

Thanks @EyalAr for LWIP. +1 on adding anti-aliasing. I'm using css-sprite as well.