Upscale iPhone taken photograph

Question

I have taken a photo with my iPhone which i would love to use a my website background using jQuery to stretch it dynamically. However its obviously a fairly low resolution. Is there anything i can do in Photoshop or something, to upscale the resolution at all?

Answer 1

There are a number of resizing plugins for Photoshop that doa much better job of guessing at the missing detail than Photoshop does (OnOne Perfect Resize and Alien Skin Blowup are two examples), but while they can give you a bit larger image that's smooth, they can't really make up for data that isn't there. Amazing as they are, they're best for already really good images that need to be printed very large but will be viewed from a distance -- they just make the image a little smoother at the target size.

Answer 2

A background image on a website doesn't really need to be larger than 1024 x 768. You're designing for the lowest common denominator.

And don't forget that the web browser has to suck down every byte you put up there.

For a reference, I searched for "web design recommendations screen size" (without the double quotes).

So... if the image you took is already 1024 x 768, you probably don't need to touch it...

Answer 3

I kind of dispute all the answers and comments about this subject, not just here, but on most forum discussions that cover this topic. I've done some fairly extensive work lately on digital upscaling, and when approached correctly, you can achieve some considerable upscaling without too much blurring, sometimes by as much as 20x or more. In my work on "Iterative Bicubic Scaling", I've been able to take 12mp images from my Canon Rebel XSi (450D) up to some 200mp or more, print sizes of 55x44@300PPI or more. In more extreme experiments, I've scaled and image up to 96x72" @ 600PPI, an ungodly 2.4 gigapixels (not recommended for home use.) Now, obviously, the more information you start with, the farther you can push an upscale, so if you are only starting with 3mp worth of image information, you probably won't be able to achieve a beautifully detailed 55" print. You should be able to scale up by a fair amount, however, using an iterative bicubic technique.

The key factor in upscaling is the quality of information being scaled, and the amount it is being scaled by. You can obviously take a single 3mp image and scale it strait up to say a 100mp image, however regardless of the algorithm you use, you are going to end up with a pretty blurry result. This is because you are fabricating some 90% of the resulting image content, and blurring over the original content as it gets incorporated into the final image. Instead of scaling up in a single step, do it in many, much smaller steps. Scale up with a bicubic filter by 3-5% at a time until you reach, or more likely surpass, your target size. If you pass your target size, scale back once. In each iteration, you'll be fabricating less than 20% of the final image data, preserving more accurate image information at each step, which will ultimately produce a more accurate final image. I have a detailed writeup with visual examples here:

• Emprical Study: Extreme digital upscaling

I believe the camera on an iPhone is around 3mp, maybe 5mp. You probably won't be able to scale up to 55" print size, however you should be able to scale up to 8x10, 11x14, or 13x19 size without too much degredation of detail. If the final scaled image does not contain quite enough detail clarity, you can always apply a light unsharp mask to improve those fine details.

Here is a sample demonstrating the detail preserved with Iterative Bicubic upscaling compared to Direct Bicubic upscaling, when blowing up a 12.2mp original image (14x9" native print size @ 300ppi) to a 77.7mp image (36x24" print size @ 300ppi):

Wait two seconds for the animated GIF above to switch from direct bicubic to iterative bicubic, for comparison. The improved detail and sharpness with the iterative approach should be clear as day. It should be noted that no sharpening of any kind was used on either version.

Answer 4

As you mentioned in a comment to Mike, you're looking at in-browser scaling.

The Jquery Backstretch plugin is designed to do exactly what you are looking for.

From the Backstretch page:

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.