Png files are looking grainy on my site. I want them to look crisp and very detailed. I want to make a (300)(900)px header to showcase some pics.I don't know why they look so terrible after I safe them form photoshop and illustrator.

7 Years
Discussion Span
Last Post by macgurl70

are you saving as a png-8 or a png-24 when using the "Save for web" option? The png-24 will look much better.


here are some examples

First is a PNG-8 saved with Perceptual color option
Second is a PNG-8 saved with the Restrictive (Web) color option
The third is a PNG-24

Edited by macgurl70: needed to make the different option samples

Attachments PNG24.png 47.86 KB PNG8_Perceptual.png 21.55 KB PNG8_RetrictWeb.png 16.59 KB

Thanks for your response I can see the difference between the three but doesnt png get any clearer than that?Should I use a jpg instead?Thanks in advance.


No, it's as clear as it will be - and you have to keep in mind that if you have an image that has too high of a resolution it will take longer to download and your visitors are not going to see enough difference to justify the wait time.

If you are wanting to show extremely detailed examples, it would be best to have the png (or jpg) files be a thumbnail and then they can click on the thumbnail for the high resolution image. This way your website still downloads quickly and you get to show them the high quality images and they don't have to be frustrated with waiting on the site to download. :)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.