Web Design Workshop 17 Resizing Large Background Image

Web Design Work­shop 17 fol­lows Work­shop 16 where we dis­cussed scrolling con­tent over fixed back­grounds. Using large images and pic­tures as back­grounds, we need to pay par­tic­u­lar atten­tion to the con­cerned file size.

For the pur­pose of this exer­cise let’s use a pho­to­graph of the Mar­ble Sta­dium which has been con­structed for the 1896 Olympics in Athens.

Mar­ble Sta­dium Athens

The orig­i­nal file is quite large with 2048 x 1536 pix­els. This is the dimen­sion we want to load to the Semi­oman­tics XO as back­ground image to allow vis­i­tors using res­o­lu­tions up to 2048 to have a back­ground in one piece.

A pic­ture of this dimen­sion comes usu­ally with 3.5 to 4.5 MB from the cam­era to the computer.

Down­load 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 decom­press the file.

First let’s give it a long shut and save with 20% qual­ity set­tings, and all other para­me­ters opti­mized for small­est file output:

Gimp Set­tings

With Pho­to­shop you get a sim­i­lar result:

Pho­to­shop Settings

With both above set­tings you end up with a weight of about 105 KB.

Com­pare the details:

Sam­ple from 800 KB picture:

Sam­ple Mar­ble Stadium

Sam­ple from 105 KB Image:

Sam­ple 1 Mar­ble Stadium

How about reduc­ing fur­ther? Yes, we can!

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

Gauss­ian Blur

Of course this blur and reduc­tion of qual­ity may be extreme; how­ever a blur fac­tor of 0.5 to 1.00 could make sense as blur opti­cally sends the back­ground back and helps to put more empha­sis on the fore­ground (your con­tent) pro­vided your con­tent images are sharp …:-).

Exam­ple: Blur 2.0 but 30% qual­ity 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.

Let’s load the image to our image folder in the Semi­oman­tics XO theme folder and adapt the style sheet.

My image is called marble1300.jpg and I want it to be fixed so that the con­tent 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 res­o­lu­tion mon­i­tor (click to view in overlay):

[sin­glepic id=217 w=480 h=320 mode=watermark float=]

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

[sin­glepic id=218 w=480 h=320 mode=web20 float=]

Back­ground Image size 2048 x 1300 pix­els and 76.1 KB, that’s over 10 times lighter than the original.

Have a look at the site for as long as these back­ground set­tings are loaded HERE.

Join tonight’s Ycad­emy Web Design Work­shop for your cus­tomized implementation.

• large back­ground images
• web design workshop
• sta­dion screen 2048×1536
• large back­ground
• Large back­ground image
• scrolling back­ground image
• sta­dium blur
• big size desigh background
• large back­ground images for web design
• back­grounds stadium

Related posts:

1. Web Design Work­shop 16 — Scroll over Background
2. Web Design Work­shop 11 Background
3. Design Graphic Background
4. Web Design Back­ground Graphics
5. Web Design Work­shop 12 Block­quotes and Pullquotes

Tags: Background Attachment, Background CSS, Design, Risize Background Image, Web Design, Web Design Workshop, WordPress, Ycademy, Yorgo Nestoridis

This entry was posted on October 6, 2009 at 1:26 pm and is filed under Blog Master Class, Design, Trainings Coaching and Seminars, Web Design, Web Design Workshop, WordPress, Ycademy, Yorgo Nestoridis, YORGOO Daily Mail. You can follow any responses to this entry through the RSS 2.0 feed.