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.

Recommended Answers

All 5 Replies

Member Avatar for rajarajan2017

Use the save as web feature in photoshop and save the png with transparency.

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

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. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.