Web Design Workshop 17 – Resizing Large Background Image

Web Design Workshop 17 follows Workshop 16 where we discussed scrolling content over fixed backgrounds. Using large images and pictures as backgrounds, we need to pay particular attention to the concerned file size.

Large Background Image Marble Stadium

For the purpose of this exercise let’s use a photograph of the Marble Stadium which has been constructed for the 1896 Olympics in Athens.

The original file is quite large with 2048 x 1536 pixels. This is the dimension we want to load to the Semiomantics XO as background image to allow visitors using resolutions up to 2048 to have a background in one piece.

A picture of this dimension comes usually with 3.5 to 4.5 MB from the camera to the computer.

Download Background Image

Download the image HERE. It is already reduced to about 800 KB, which is still much too big to serve as a background.

Save to disk and decompress the file.

Edit the image in Gimp or Photoshop

First let’s give it a long shut and save with 20% quality settings, and all other parameters optimized for smallest file output:

With Photoshop you get a similar result:

With both above settings you end up with a weight of about 105 KB.

Compare the details:

Sample from 800 KB picture:

Sample from 105 KB Image:

How about reducing further? Yes, we can!

Use a blur filter such as Gauss set to 2.5 and you end up with 62 KB only; see the detail:

Of course this blur and reduction of quality may be extreme; however a blur factor of 0.5 to 1.00 could make sense as blur optically sends the background back and helps to put more emphasis on the foreground (your content) provided your content images are sharp …:-).

Example: Blur 2.0 but 30% quality output:

Wow, this his is a lean 79 KB! Click a few times on the pic till you get full size.

Apply the Background to the Site

Let’s load the image to our image folder in the Semiomantics XO theme folder and adapt the style sheet.

My image is called marble1300.jpg and I want it to be fixed so that the content can scroll over it:

body {
background: #000000 url(images/marble1300.jpg) repeat-x;
background-attachment: fixed;
margin: 0 auto;
font-size: 14px;
padding: 0;
}

This is what I get on my 1680 x 1050 resolution monitor (click to view in overlay):

[singlepic id=217 w=480 h=320 mode=watermark float=]

As I would like to see more of the stadium and place my site “into” the stadium, I cut off 250 pixels about from the top of the image whic reduces the image size by a few pixels and I reload it to get my final result:

[singlepic id=218 w=480 h=320 mode=web20 float=]

Background Image size 2048 x 1300 pixels and 76.1 KB, that’s over 10 times lighter than the original.

Have a look at the site for as long as these background settings are loaded HERE.

Ycademy Web Design Workshop

Join tonight’s Ycademy Web Design Workshop for your customized implementation.