Web Design Workshop 17 Resizing Large Background Image

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.

Marble Stadium 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:

Gimp Settings

With Photoshop you get a similar result:

Photoshop Settings

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

Compare the details:

Sample from 800 KB picture:

Sample Marble Stadium

Sample from 105 KB Image:

Sample 1 Marble Stadium

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:

Gaussian Blur

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:

30 pct with 2.0 Blur

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

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:

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.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.

If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.