Highlighted

Gif becomes grainy/pixelated in 'Save For Web'

New Here ,
Mar 14, 2015

Copy link to clipboard

Copied

Hello! I recently switched laptops and I have been having major issues trying to regain the quality gifs I used to make. After I have my gif set to go, I go to save it in 'Save For Web'. This is where all of my problems start. My gif no longer looks smooth, but the entire thing has a grainy or pixelated look -- and it doesn't change no matter how I fiddle with my settings. When switching from the 'original' to the 'optimized' tab in the save for web page, you can obviously see a loss of quality. It may be slight, but it makes a huge difference to me.

Here's a side by side reference:

10.png

Not sure if it will help, but here are my settings when saving (I have changed from 'pattern' to 'diffusion' and nothing changes):

9.png

Thank you for any help you can provide!

First, JJMack is correct: lots of colours (around 32100) in this example do make it harder to convert without grain.

Second, the quality of the GIFs you produced in Save for Web (SfW) prior to the purchase of the new laptop were never any "better" - it merely means that the previous screen was unable to display the results at a decent enough quality to actually discern the differences between the original and the GIF version with reduced colours. Screen quality does matter.

Second, Photoshop's Save for Web colour reduction algorithms are quite old-fashioned, and (far) better methods are available. Not in Photoshop, however. For a good conversion you will have to look elsewhere.

Here is the original version @2x zoom (32101 colours):

original.png

Photoshop's version. The best visual quality I could achieve in SfW (diffusion dither at 81%, perceptual). Obvious banding issues, and a very grainy result.

ps.png

Next up: RIOT (Radical Image Optimization Tool). RIOT features a newer "NeuQuant neural-net" colour quantization algorithm. Notice how the gradients are quite nicely retained, although here and there some issues pop up (lips/makeup, building, arm highlight, and greenery are missing colour). Overall, though, the final result is much less grainy looking than Photoshop's effort. At the expense of smaller areas with unique colours.

riot.png

Next, let's try Color Quantizer with standard settings,  a two factor gradient priority, and 256 colours. Dithering was set to Shiau-Fan @75%. Slight banding in the lighter areas of the background, and the building and lips are again missing colours from the original. Much less grainy than Photoshop's version.

cq.png

Colour Quantizer features a quality mask brush, which allows us to safeguard smaller areas with unique colours from colour degradation. I painted a mask for the lips, the building and greenery in the background, the skin of the woman on the right in the background, the lighter area around the vent, and the forehead to preserve those areas' quality as much as possible.

I feel this result speaks for itself. There is slight banding visible in the lighter area of the wall on the right, but still much less pronounced compared to SfW's version. The colours are all there, especially the important ones for the makeup and the smooth facial tones of Kate. The shoulder's highlight is also preserved nicely. Even the woman on the right in the background looks spot on (which was yet another sore point in SfW's version).

CQ2.png

Arguably the best version. Far superior to Photoshop's failed effort.

Fourth, if you are still using GIF to optimize still images: STOP NOW. GIF is terrible in comparison to properly optimized and compressed PNG files. Only use GIF when small animated movies are your goal.

Here is a 512 colour version produced in Color Quantizer (Photoshop's SfW function lets us down once more, unfortunately: there is no option to reduce an image to 512 colours for PNG):

CQ3.png

This last version is visually (mostly) indistinguishable from the original, and clocks in at only 52kb.

Of course, if you are saving this as a still image, jpg should have been your choice in the first place, since it is a photo.

Conclusions:

- avoid Photoshop's "Save for Web" function if your intention is a quality colour reduction;

- avoid GIF for still images. Either use PNG or JPG. JPG works best for photos;

- avoid Photoshop and SfW if your intention is to optimize PNGs well. Sfw cannot save PNG files with reduced colours beyond 256 colours;

- fall back to external and/or online utilities to optimize PNG and GIF files. Color Quantizer and RIOT deliver better results than SfW. Or use online optimization tools to optimize animated GIFs (Optimize animated GIF). You can also optimize each frame in a tool such as CQ, and then import the individual frames into a animated GIF utility. Remember, each frame can save its own custom 256 colour palette;

- for optimum quality a quality mask tool, such as the one in CQ, is a very effective and efficient method to guarantee the best possible conversion;

- file sizes of png files created in external utilities almost always beat the ones generated in Photoshop and SfW;

- a better choice to export PNG files is Photoshop CC Generator. At least that one allows for 8bit PNG files with full transparency (another missing essential feature that SfW fails to provide).

Other resources (these refer to png, but are also effective for GIF optimization in Photoshop):

http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

PNG Optimization Guide: More Clever Techniques - Smashing Magazine

Color Quantizer: Color quantizer

RIOT standalone version (no installation required): http://download.criosweb.ro/download.php?sid=R

TOPICS
Import and export

Views

94.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Gif becomes grainy/pixelated in 'Save For Web'

New Here ,
Mar 14, 2015

Copy link to clipboard

Copied

Hello! I recently switched laptops and I have been having major issues trying to regain the quality gifs I used to make. After I have my gif set to go, I go to save it in 'Save For Web'. This is where all of my problems start. My gif no longer looks smooth, but the entire thing has a grainy or pixelated look -- and it doesn't change no matter how I fiddle with my settings. When switching from the 'original' to the 'optimized' tab in the save for web page, you can obviously see a loss of quality. It may be slight, but it makes a huge difference to me.

Here's a side by side reference:

10.png

Not sure if it will help, but here are my settings when saving (I have changed from 'pattern' to 'diffusion' and nothing changes):

9.png

Thank you for any help you can provide!

First, JJMack is correct: lots of colours (around 32100) in this example do make it harder to convert without grain.

Second, the quality of the GIFs you produced in Save for Web (SfW) prior to the purchase of the new laptop were never any "better" - it merely means that the previous screen was unable to display the results at a decent enough quality to actually discern the differences between the original and the GIF version with reduced colours. Screen quality does matter.

Second, Photoshop's Save for Web colour reduction algorithms are quite old-fashioned, and (far) better methods are available. Not in Photoshop, however. For a good conversion you will have to look elsewhere.

Here is the original version @2x zoom (32101 colours):

original.png

Photoshop's version. The best visual quality I could achieve in SfW (diffusion dither at 81%, perceptual). Obvious banding issues, and a very grainy result.

ps.png

Next up: RIOT (Radical Image Optimization Tool). RIOT features a newer "NeuQuant neural-net" colour quantization algorithm. Notice how the gradients are quite nicely retained, although here and there some issues pop up (lips/makeup, building, arm highlight, and greenery are missing colour). Overall, though, the final result is much less grainy looking than Photoshop's effort. At the expense of smaller areas with unique colours.

riot.png

Next, let's try Color Quantizer with standard settings,  a two factor gradient priority, and 256 colours. Dithering was set to Shiau-Fan @75%. Slight banding in the lighter areas of the background, and the building and lips are again missing colours from the original. Much less grainy than Photoshop's version.

cq.png

Colour Quantizer features a quality mask brush, which allows us to safeguard smaller areas with unique colours from colour degradation. I painted a mask for the lips, the building and greenery in the background, the skin of the woman on the right in the background, the lighter area around the vent, and the forehead to preserve those areas' quality as much as possible.

I feel this result speaks for itself. There is slight banding visible in the lighter area of the wall on the right, but still much less pronounced compared to SfW's version. The colours are all there, especially the important ones for the makeup and the smooth facial tones of Kate. The shoulder's highlight is also preserved nicely. Even the woman on the right in the background looks spot on (which was yet another sore point in SfW's version).

CQ2.png

Arguably the best version. Far superior to Photoshop's failed effort.

Fourth, if you are still using GIF to optimize still images: STOP NOW. GIF is terrible in comparison to properly optimized and compressed PNG files. Only use GIF when small animated movies are your goal.

Here is a 512 colour version produced in Color Quantizer (Photoshop's SfW function lets us down once more, unfortunately: there is no option to reduce an image to 512 colours for PNG):

CQ3.png

This last version is visually (mostly) indistinguishable from the original, and clocks in at only 52kb.

Of course, if you are saving this as a still image, jpg should have been your choice in the first place, since it is a photo.

Conclusions:

- avoid Photoshop's "Save for Web" function if your intention is a quality colour reduction;

- avoid GIF for still images. Either use PNG or JPG. JPG works best for photos;

- avoid Photoshop and SfW if your intention is to optimize PNGs well. Sfw cannot save PNG files with reduced colours beyond 256 colours;

- fall back to external and/or online utilities to optimize PNG and GIF files. Color Quantizer and RIOT deliver better results than SfW. Or use online optimization tools to optimize animated GIFs (Optimize animated GIF). You can also optimize each frame in a tool such as CQ, and then import the individual frames into a animated GIF utility. Remember, each frame can save its own custom 256 colour palette;

- for optimum quality a quality mask tool, such as the one in CQ, is a very effective and efficient method to guarantee the best possible conversion;

- file sizes of png files created in external utilities almost always beat the ones generated in Photoshop and SfW;

- a better choice to export PNG files is Photoshop CC Generator. At least that one allows for 8bit PNG files with full transparency (another missing essential feature that SfW fails to provide).

Other resources (these refer to png, but are also effective for GIF optimization in Photoshop):

http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

PNG Optimization Guide: More Clever Techniques - Smashing Magazine

Color Quantizer: Color quantizer

RIOT standalone version (no installation required): http://download.criosweb.ro/download.php?sid=R

TOPICS
Import and export

Views

94.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 14, 2015 0
Most Valuable Participant ,
Mar 14, 2015

Copy link to clipboard

Copied

Could it be that your original image has  millions of colors and that your GIF image has only 255 colors.  If you uncheck transparency your Gif could have 256 colors.

JJMack

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2015 1
Mentor ,
Mar 14, 2015

Copy link to clipboard

Copied

First, JJMack is correct: lots of colours (around 32100) in this example do make it harder to convert without grain.

Second, the quality of the GIFs you produced in Save for Web (SfW) prior to the purchase of the new laptop were never any "better" - it merely means that the previous screen was unable to display the results at a decent enough quality to actually discern the differences between the original and the GIF version with reduced colours. Screen quality does matter.

Second, Photoshop's Save for Web colour reduction algorithms are quite old-fashioned, and (far) better methods are available. Not in Photoshop, however. For a good conversion you will have to look elsewhere.

Here is the original version @2x zoom (32101 colours):

original.png

Photoshop's version. The best visual quality I could achieve in SfW (diffusion dither at 81%, perceptual). Obvious banding issues, and a very grainy result.

ps.png

Next up: RIOT (Radical Image Optimization Tool). RIOT features a newer "NeuQuant neural-net" colour quantization algorithm. Notice how the gradients are quite nicely retained, although here and there some issues pop up (lips/makeup, building, arm highlight, and greenery are missing colour). Overall, though, the final result is much less grainy looking than Photoshop's effort. At the expense of smaller areas with unique colours.

riot.png

Next, let's try Color Quantizer with standard settings,  a two factor gradient priority, and 256 colours. Dithering was set to Shiau-Fan @75%. Slight banding in the lighter areas of the background, and the building and lips are again missing colours from the original. Much less grainy than Photoshop's version.

cq.png

Colour Quantizer features a quality mask brush, which allows us to safeguard smaller areas with unique colours from colour degradation. I painted a mask for the lips, the building and greenery in the background, the skin of the woman on the right in the background, the lighter area around the vent, and the forehead to preserve those areas' quality as much as possible.

I feel this result speaks for itself. There is slight banding visible in the lighter area of the wall on the right, but still much less pronounced compared to SfW's version. The colours are all there, especially the important ones for the makeup and the smooth facial tones of Kate. The shoulder's highlight is also preserved nicely. Even the woman on the right in the background looks spot on (which was yet another sore point in SfW's version).

CQ2.png

Arguably the best version. Far superior to Photoshop's failed effort.

Fourth, if you are still using GIF to optimize still images: STOP NOW. GIF is terrible in comparison to properly optimized and compressed PNG files. Only use GIF when small animated movies are your goal.

Here is a 512 colour version produced in Color Quantizer (Photoshop's SfW function lets us down once more, unfortunately: there is no option to reduce an image to 512 colours for PNG):

CQ3.png

This last version is visually (mostly) indistinguishable from the original, and clocks in at only 52kb.

Of course, if you are saving this as a still image, jpg should have been your choice in the first place, since it is a photo.

Conclusions:

- avoid Photoshop's "Save for Web" function if your intention is a quality colour reduction;

- avoid GIF for still images. Either use PNG or JPG. JPG works best for photos;

- avoid Photoshop and SfW if your intention is to optimize PNGs well. Sfw cannot save PNG files with reduced colours beyond 256 colours;

- fall back to external and/or online utilities to optimize PNG and GIF files. Color Quantizer and RIOT deliver better results than SfW. Or use online optimization tools to optimize animated GIFs (Optimize animated GIF). You can also optimize each frame in a tool such as CQ, and then import the individual frames into a animated GIF utility. Remember, each frame can save its own custom 256 colour palette;

- for optimum quality a quality mask tool, such as the one in CQ, is a very effective and efficient method to guarantee the best possible conversion;

- file sizes of png files created in external utilities almost always beat the ones generated in Photoshop and SfW;

- a better choice to export PNG files is Photoshop CC Generator. At least that one allows for 8bit PNG files with full transparency (another missing essential feature that SfW fails to provide).

Other resources (these refer to png, but are also effective for GIF optimization in Photoshop):

http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

PNG Optimization Guide: More Clever Techniques - Smashing Magazine

Color Quantizer: Color quantizer

RIOT standalone version (no installation required): http://download.criosweb.ro/download.php?sid=R

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2015 0
New Here ,
Mar 15, 2015

Copy link to clipboard

Copied

Thank you for your detailed help and explanations! I do realize the difference between PNG, JPEG, and GIF as I work with both animated giffing from videos and photography. However, my issue is that I was having no problems whatsoever with quality reduction on my old laptop via photoshop and making animated gifs. Actually, my animated gifs looked quite smooth and sharp while making them through photoshop. As soon as I switched to my new computer and bought photoshop, the quality reduction started happening on the new device. Perhaps it's something with my computer itself rather than photoshop.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 15, 2015 0
Most Valuable Participant ,
Mar 15, 2015

Copy link to clipboard

Copied

Most likely the quality of the LCD display.  LCD vary in resolution and technology image quality in a file is not different from machine to machine however the image rendered on a machine  display will vary between machine displays.   Vary in size, resolution sharpness and color.

JJMack

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 15, 2015 0
Adobe Community Professional ,
Aug 12, 2017

Copy link to clipboard

Copied

Herbert2001  wrote

[Some very useful stuff snipped]

That was worthy of a bookmark.  I shall came back and refer to it when the need next arises.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 12, 2017 0
New Here ,
Aug 11, 2017

Copy link to clipboard

Copied

The answer you are looking for (2 years late) you have the gif set to "optimized" (in the upper left corner). Set it to "original" and you'll be all set!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 11, 2017 5
New Here ,
Aug 11, 2017

Copy link to clipboard

Copied

The answer you are looking for (2 years late) you have the gif set to "optimized" (in the upper left corner). Set it to "original" and you'll be all set!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 11, 2017 2
Guide ,
Aug 11, 2017

Copy link to clipboard

Copied

klonkster  wrote

The answer you are looking for (2 years late) you have the gif set to "optimized" (in the upper left corner). Set it to "original" and you'll be all set!

No. That is incorrect. Your answer has nothing to do with the original question: "Original" will merely display the original (unoptimized) version.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 11, 2017 3
New Here ,
Aug 21, 2020

Copy link to clipboard

Copied

it worked for me

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 21, 2020 0
New Here ,
Oct 01, 2020

Copy link to clipboard

Copied

It worked for me too

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 0