Website Image Quality

[ponyboy]

Hello everyone,

I have a question about game images on your websites. I have just uploaded a couple new images to my website regarding my game I'm working on, Dungeons of Darkness. The thing is, when I resize the screen shots I take from within my game using Paint Shop Pro, the quality is less than ideal. For an example, look at my site here. (http://www.arealitystudios.com/). You'll notice these smaller images are not very good quality when resized to fit within the page. If you click on the actual screenshot you can the quality of the unchanged image.

My questions is, how can I resize these screenshots down to a good size for use on the website, without losing so much quality. I'm using a .png format but it doesn't seem like any other formats give any better quality. Since I am graphically handicapped, I wondering what some of you more experienced developers do for this.

Thanks in advance for any advice you can offer.

[jetro]

Resize the image down as truecolor rgb image and make sure you use best available interpolation method when you're resizing ("bicubic" in photoshop for example). It looks like you are resizing with "nearest neighbor" method.

After you have resized the image, you can then save space by converting it to paletted image (experiment with how much colors is enough to keep the image look nice) and saving as PNG. Then as last step later optimize the PNG image with tools like pngcrush or pngout.

[cliffski]

paintshop pro has an annoying bug, that means if you play about with file color depths it forgets to default the resize method to the best possible, and you get stuck with 'pixel resize'. Just learn to always check the resize method before hitting ok :D

[Qitsune]

Did you already fix it? it looks fine to me.

[ponyboy]

Thanks for the advice guys. I'll give it a try and see how it goes.

@Qitsune - No I haven't changed anything yet. Not sure why it would look differently to you? Maybe screen resolution?

[Uesugi]

Yeah, it looks like you're resizing them after changing them to an indexed color image, instead of before.

And that girl chose the wrong skintight outfit to wear into the Dungeons of Darkness. ;)

[ponyboy]

Thanks for the help guys. The screens look much better now.

[Didier]

For what it's worth:
In Paintshop Pro resize using the 'Smart Size' option.

If that isn't available, you should first increase the color debth to '16 million colors' and then the 'smart size' option will be available and your resized images will look much better ;)

[ponyboy]

For what it's worth:
In Paintshop Pro resize using the 'Smart Size' option.

If that isn't available, you should first increase the color debth to '16 million colors' and then the 'smart size' option will be available and your resized images will look much better

This is exactly how I did it too. It worked like a charm.