...

View Full Version : Website's Image Sizes and Formats



Azzaboi
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:

jenius
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

Apostropartheid
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.

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

http://azzaboi.weebly.com/
http://azzaboi.weebly.com/files/theme/logo.png

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

abduraooft
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/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum