View Full Version : Website's Image Sizes and Formats

02-16-2010, 08:06 AM
Hi, I'm quite new with web development and was wondering about keeping the speed up on a website loaded with images.

What varies formats should be used for what? Like gif, png, jpg or tif, etc? Like is one better over another or does it depend on if theres tranparency or something.

Also what is the best way of reducing image size without the lose of quality?

Thanks for helping out a noob :thumbsup:

02-18-2010, 04:16 PM
Hey Azzaboi -

My general rule is as follows:

- When you have any transparency (background showing through) anywhere in your image, use PNG
- When you do not, use jpg exported at "very high quality" - this retains quality but compressed the file size a lot.
- Always use "export for web and devices" on photoshop.

Pretty simple, but it works! Other tips - don't use super large images, alternatively try to find a way to tile images in the x or y direction. In addition, it often helps to use CSS sprites for your buttons - google this for more info

02-18-2010, 08:37 PM
I disagree.

When you have a graphic with solid colors (under 256 colors) use PNG-8
If you have a complex graphic (256+ colors), use PNG-24 (PNG-32 without transparency in Photoshop)
If you have a complex graphic with transparency, use PNG-32.
If you have a photograph, use JPEG with an appropriate quality setting.

02-19-2010, 08:49 AM
Thx for the replies, I guess it's different depending on what your doing but jpg are best for photos and I'm using png format mostly for the graphics and transparency.

I'm losing a lot of quality in my logo (semi-transparent) if I compress for the web, the size I got it down to is 35kb keeping quality as a png, is that okay, it's the largest image? The others are all 10kb or under now :)


02-19-2010, 02:51 PM
Try saving as a PNG-8 with transparency and see whether it gives a good-quality file.

02-19-2010, 03:13 PM
Make use of fireworks to save an image as png8 with alpha transparency, see http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/