Member Avatar for minimogul

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.

  • 3 Contributors
  • 5 Replies
  • 139 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by macgurl70
Member Avatar for rajarajan2017

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

Member Avatar for 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.

Member Avatar for macgurl70

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

PNG24.png 47.86 KB PNG8_Perceptual.png 21.55 KB PNG8_RetrictWeb.png 16.59 KB
Edited by macgurl70 because: needed to make the different option samples
Member Avatar for minimogul

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.

Member Avatar for macgurl70

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.