Make your images better

[Kristofor]

Hi everyone.

 

This is just a tip on your images and what files you should use.

 

Jpeg are great files for your header or anywhere on your site because they are really small and they support many colours. However these are only the best to use if you like haveing solid background colours. Remeber Jpeg are not transparent.

 

Gifs however are really good for yours site because of their small size and they are transparent if you want them to be. Also you can make them animated. However these are really bad for higher quality pictures as they only support 256 colour. This makes some of your images look dodgey.

 

However there is an alternative.

 

Png are a wonderful thing. They boast high quality colour and they are transparent. They also have a small file size. So instead of of using Jpeg or Gif, try Png they will make your site much better and are fully compatible with most browsers now and it has been compatible since version 4 of html and will work with oscommerce. So try Png it might make your site look a whole heap better and that really cant be bad can it.

 

Thanks

 

kristofor

[Cerberus]

For more information on the PNG format, visit http://www.libpng.org/pub/png/ :)

[hqsupply]

PNG are great with relatively small images, however be warned that low-bandwith users have to wait a bit longer for these types of images to load if they get fairly big.

 

I would suggest, once you establish your color scheme, fill the background of your GIF files with your web page's background color.

 

For something like a Logo that appears on different backgrounds at different times on your pages, PNG is a great way to go.

 

JPG... These get rather splotchy when you save them. If you are making new graphic bits (like the corners of info boxes) deffinatly use GIF. Set it to 2 or 8 color and the graphic bits will download almost immediatly--that is of course if your graphic bits are flat colors. I generally restric JPG to photos and product pictures only.

 

Lastly, I'll make a personal stylistic suggestion, on your store graphics (Like logos and large designs you use to give you site it's 'look')... If you can keep them as mostly solid shapes, solid colored text etc, you can save them as 8-16 color GIF files--Even if they appear very large, they will save much smaller than JPG files and retain a sharp and clean look. Plus you dont have to worry about losing any sales due to a snoozing 56k modem =)

 

~Tom

[Guest]

My only added advice would be that sometimes there are exceptions to every rule. I always use Photoshop or Fireworks which gives me the ability to view multiple 'export' settings on screen at the same time. Then you can pick which final image format looks the best for any given size.

 

I'm not a big fan of PNG. GIF usually ends up being smaller for 8-bit color, and JPEG usually ends up being smaller for high-res color. The only benefit to PNG is that it supports alpha-channel blending which makes transparancy images looks a lot better (with no need on changing the MATTE color if your background changes dramatically). Transparent GIFs with lots of antialiasing don't always look so good on multiple different colors. Unfortunately, only IE6 really supports PNG alpha-channel blending, and does a poor job at that. NS7 might work better now, I haven't tested that one yet.

 

My personal image rule is to use GIF for thumbnail size images with under 64 colors and for ALL images with less than 8 colors. Everythign else is a JPEG, but there are always exceptions :)