hi all.

basically, i have a background image for a rock band's site of their EP cover. it was designed using photoshop, but what is the best way to display it as the background image for the website?

Jpeg?

but won't this affect the download time of the site?

Don't usually use images for backgrounds!

Many thanks

Well the three normal fomats are .jpg, .gif and .png - each file type has it's own uses, but all can be used as an image background wherever suitable.

 

Remember the bigger the file size the longer it will take to download, so make sure the site work without it.

Depends on the image itself, the size you're after, and the suitability of the fidelity of the output.

 

• Photo-like, very dynamic, with millions of colours and complexity = JPG

• Logo-like, with few (>256) colours, blocky graphics (or lo-fi dithered), with or without single-colour transparency, and for compatibility = GIF

• Logo-like, with a) blocky graphics (or lo-fi dithered) OR b) lossless 16-million colour photo-like graphics for archive quality, with or without alpha transparency, smaller than GIF but less compatible with older browsers = PNG

 

JPG is absolutely great for low-filesize photos, but very poor for displaying text or blocky logos (both in file-size and output quality). Using JPGs for text or blocky colours makes the colours bleed, lose clarity, bleach into other areas, and create noise, and often with a higher filesize.

 

GIFs are unusable for photos due to only 256 colours maximum, but they're great for anything up to 256 colours (dithered if required). Good for low-colour logos, or for faithfully reproducing text.

 

PNGs are heaps better than GIF as they offer >256 colours (at smaller filesizes than GIF) on one hand and 16Million colours (at significantly lower filesizes than BMP) on the other, depending on your requirements, but they suffer from compatibility problems across browsers. Older browsers (>IE6) can't natively display the alpha transparency layer (if used), creating unsightly blocky distortions, but even the more modern browsers display PNG colours differently due to gamma inconsistencies, so PNGs can't often be used to critically match other colours. They are otherwise great for everything that GIF offers, adding alpha transparency for modern browsers, and, with its other cap on, is ideal for data-compressed lossless 16-million colour images for archive purposes or maximum fidelity.

I would use a gif, and if that didnt work, a png, i don't really like jpg's to be honest...

thanks guys!

i'll have a play with the above ideas and see what works best.

cheers

Remember to use the "Save for the web" option and try reducing the quality - it can be surprising how small a file can be made and still be acceptable.