A Big Image Embed Applet

Tech Pitch:

Give the URL to a tall/wide/awkwardly-sized image, and it returns the HTML for an iFrame of that image cropped to dimensions you set and panning/zooming via JavaScript.

Lay Pitch:

Put big images in small places.

Make Your Own!


A wide panorama of Hong Kong, centered:

A tall giraffe, positioned at the top:

Click to engage/disengage. Scroll to zoom. Double-click to reset.


Paste the URL to your image in the Image URL input. Make sure it's legit and works by first trying to load it in your browser. It ought to look something like .

Next, select the size of the embed you want. The dropdown has a handful of default options, or you can select "Custom" to specify your own dimensions.

By default, images will place themselves in the center. If you've got one whose emphasis is in a different direction (top, right, bottom, left) click the Options dropdown and change the Default Position.



The obvious dilemma here is that images are served up in their default resolution and any manipulation is done superficially by your browser. A 3mb image will load as 3mb. This may not be a problem for you, but it is something to consider.

In other words, properly compress your images and size them down to the highest resolution you think your users may care to see.

Graceful-ish Degradation and Browser Support

Browsers with both iFrames and JavaScript enabled will see everything working normally. Those with iFrames and no JavaScript will see the image centered and unscaled, bound by the iFrame. Those without iFrames (either with or without JavaScript) will see the image, proportionally resized to the iFrames's width and linking to the original image URL.

Tested and working in Firefox, Safari, Chrome, and IE6+, using Windows and OSX (where applicable).

Code, Bits, and Cogs

Appreciative nods to Google's Ajax APIs and Font Directory and Cached Commons.

Roadmap Features Possibly