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?

  • Depends on how much you want to upscale it. A little bit is one thing, but if you want to upscale a lot, then even the best algorithms are going to make the picture's focus very soft... Feb 1 '11 at 23:30

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.


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:

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

Direct vs. Bicubic Upscaling

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.

  • It's not that detail degrades with a good upscaling algorithm (and both Perfect Resize and Blowup use very good algorithms), but that you can't put anything there that wasn't there to begin with. Line, curve and gradient continuations and smoothing can be excellent, but placement of edges is a best-guess approximation. I've managed 64" by 9' from a 4K-scanned 35mm slide (original scan 24MP) that were acceptable -- but it's still not what I would have gotten with a Heidelberg scan of an 8x10 chrome. The best guess can be surprisingly good, but it's just a guess -- math only gets you so far.
    – user2719
    Feb 2 '11 at 4:25
  • Oh -- by "acceptable" I mean for a corridor wall; the viewers couldn't get more than 8 feet away if they wanted to. That ain't bad, really, but I want to put the idea that "everything can be fixed in Photoshop" to rest, since at some point the "fixing" is the 'Shop artist drawing in things that weren't there to begin with. (I've done those "paintings based on an original photograph" too.)
    – user2719
    Feb 2 '11 at 4:52
  • Obviously you can't "put anything there that wasn't there to begin with"...that was not my point. My point is that it is possible to preserve what IS there, to at least the point of "acceptability", if not beyond. You can probably get about 200mp from a drum scan of an 8x10 chrome, sure...but how many of us have the option of lugging around such a beastly camera every day? As the old adage goes...good enough is good enough. I think we can do better than good enough with digital, and even though its not perfect, its damn good.
    – jrista
    Feb 2 '11 at 7:32
  • As for doing everything in photoshop...I never mentioned anything like that. I am a strong supporter of doing as much as you possibly can in camera first, and doing what remains in a tool like Photoshop. I don't see that as being any different than processing film, where you still have to do something in a dark room with chemicals and an enlarger to take your camera composition, make it several feet large, and put it on a wall.
    – jrista
    Feb 2 '11 at 7:36
  • is this work you've done in Photoshop or something similar or in Javascript on the browser?
    – Mike
    Feb 2 '11 at 23:28

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...

  • 1
    I turn your attention to this: timlum.com this is what i want to achieve - try resizing your browser :) Feb 2 '11 at 8:20
  • I trust you're talking about the green icon in the top right corner? If this is the case, this is a CSS trick where he's anchored the icon to the top right of the browser.
    – Mike
    Feb 2 '11 at 23:25
  • I think he's referring to the portrait that makes up the background Feb 3 '11 at 8:58
  • Ummm, I don't have a portrait making up the background... in Firefox or Internet Explorer. I'd say we're seeing different things.
    – Mike
    Feb 4 '11 at 11:51

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.

  • Hi Chillis, i'm aware of that plugin (it was the one i'm going to use) but i still need a high res image, so if someone is viewing my site on a 27" iMac, its not going to blur Feb 3 '11 at 15:03
  • well.. that would depend on the iphone model. If you have a iphone 4, then your resolution is already good enough (2592 by 1936) for a 27" (2560 by 1440 native resolution), assuming you shot landscape.
    – chills42
    Feb 3 '11 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.