Billy Billy - 3 years ago 82
CSS Question

Advice on using this image as a background

I'm building a website for a musician she has a large image she wants to use as the background. Each page will have a different image. Even compressed the image is 1mb which isn't ideal. What is the best way of getting this done. I'll show the image below.

The way too large image

I can't degrade the image too much because its a main focus of each page. Basically its this image with all the content on top of it.

Answer Source

You have these tools:

  1. Choose an appropriate image size. That image is >4000pixels tall, which is far larger than most computer screens; there's no advantage to sending a larger file than can be displayed (browser scaling will actually degrade the image compared to sending an appropriately-sized image in the first place.) The largest screen size currently in common use is 1920x1080; I'd reduce the image size to those dimensions at most.

  2. Choose an appropriate file format. There've been a couple suggestions to use GIFs -- for photographic images like you're dealing with, that would be a poor choice: GIF is best suited for limited-palette images (only 256 unique colors can be used in any one image), ideally with large areas of the same color. Experiment with different levels of PNG or JPG compression until you find an acceptable size-to-quality ratio.

  3. Strip out unnecessary data. There are tools to remove unneeded EXIF data from jpegs (Photoshop's "Save for Web" will do this as well). Image optimizers such as pngoptim can also give good results.

  4. Consider whether putting content on top of a busy photographic image makes your content readable or the photograph attractive. Perhaps you can persuade the client to switch to a more usable design, and wind up with a less bandwidth-heavy one in the process.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download