How do I compose an image for use as a browser background or wallpaper on a widescreen monitor?

Question

I want to use some of my images for the background of a web page in my browser and for computer desktop wallpaper on my widescreen notebook.

When I use a (landscape oriented) picture as is (in a simple web page), the browser scales it to fill the width and centers it. This causes a lot of the top and bottom of the picture to be cropped.

If I resize the image in any way while maintaining the aspect ratio, it makes no difference. I had to resize it to 1600x700 without maintaining the aspect ratio to get most of my subject to fit vertically. That stretched the image so far horizontally as to be unusable.

It doesn't seem like there's any way to fix this.

What I want to know is how should I compose new photographs so that they will be usable for this purpose?

My first thought is to zoom out on the subject so the part I want fills around half of the height and then crop the picture vertically later. (With my current camera and a newer one, there should be plenty of pixels to support this.) This sounds like it would be hard to get the initial picture right, especially when the tendency is to fill the viewfinder/screen with the desired image.

Maybe my cameras or other similar ones can shoot in widescreen (16:9) to start with. I'd still have to resize it, but much less (because the browser window is wider than 16:9).

I'm relatively new to photography and just learning digital image manipulation. My older point and shoot digital camera takes images that are 3024x1184. (I also have a newer, higher end, point and shoot with much higher resolution and a number of manual settings.)

Right now, I do my digital work on Linux with gimp and imagemagick, but I also run Windows 7 and I have a copy of Lightroom that I have not installed yet.

As much as possible, I'd like an answer of "what" to do and not just "how" because I don't own Photoshop.

I read some things about bicubic scaling and about a liquid-scaling plugin for gimp, but they were a bit over my head.

Answer 1

First, you should be aware that most wide screen laptops are not 16:9 - they are made with the screen shorter to reduce size and cost, for example, you said your monitor is 1600x700 - you don't need too much math to work out this is 16:7 and not 16:9.

Now that we got that out of the way it's actually easy to make a picture into a desktop background:

1. First, be aware you will need to crop the image when you shoot it, the simplest option is to leave plenty of space on all 4 edges and let the OS do the work for you -on windows you set the tiling mode to "Crop to fit" (exact name changes between versions) and everything just works, you linux desktop should have a similar setting.

2. If you want to crop the image yourself just scale it down in GIMP so the width of the picture is the same as the width of the screen and then crop it to fit the height.

Here's a diagram that will give you an idea how much space you need to leave when shooting:

Blue frame is 4:3 aspect ratio common in point&shoot camera

Red frame is 3:2 used in DSLRs and film cameras

Black area is 16:9

Yellow area is 16:7 (your screen)

Answer 2

Though you didn't bring up the issue of clutter, personally I feel that a wallpaper should not have too much detail behind the icons, if any.

In this Windows "Dangerous Creatures" wallpaper, the bokehed background on the left allows the desktop icons to be easily seen.

At the same time, the lion on the right gazing to the left draws the eye towards the icons (provided that no icons cover the lion) and provides visual interest.

Additionally, there is enough background around the lion's head that it remains effective even after cropping to fit other aspect ratios.