HDR guru Trey Ratcliff of Stuck in Customs has just released a new iPad app called Stuck On Earth that lets you travel the world through photographs. In addition to being a gorgeous way to view travel photos, the app serves as a high-tech travel guide, allowing users build and plan “trips” (collecting photos into groups).
Read the rest of this entry »

Today at Google I/O, Sports Illustrated editor Terry McDonell showcased this demo of the HTML5 version of the magazine. Last December, SI released a mockup video of how their online version would look as an app, but this version is based on the web and can be viewed with laptop and tablet browsers. It looks like a print magazine layout, with fantastic spreads, photos, and fonts, but it also has a lot of unique multimedia features that are incorporated into the design.

In the presentation, McDonell said:

“The idea is really very simple: combine the best of the web with the best of the magazine, like the sports photography, which is deep, deep in Sports Illustrated’s DNA.”

SI’s really giving photography a great plug: the demo issue also has a behind-the-scenes portrait shoot with Shaq, and there’s an expanded photo gallery option for readers to see more shoots than the ones included in the main design. Even the interactive demo ad is photo-related, showing a faux camera brand with interchangeable lenses.

This web design really opens up the doors for visual and multimedia storytelling, and is an exciting way to make an interactive publication accessible (not to mention SEO-friendly) to the entire World Wide Web.

Let us know what you think about SI’s new magazine format in the comments.

Everyone wants sharp images when they post their photographs online. After all, who wants to look at a blurry photograph? (Unless it’s intentional, of course). What many people don’t realize, however, is that displaying your images incorrectly in HTML can have a big negative impact on image quality.

Here is the main rule of thumb you should always remember: never, ever do image resizing using HTML.

For example, lets say I have the following 620px photograph:

The image is pretty sharp right? Now, lets say I want to display the same image as a 500px wide photo. The wrong way to do this would be to change the width=”620″ attribute in HTML to width=”500″. Here’s what would result if I did the resizing this way through HTML:

That’s the exact same image file. I simply copy-and-pasted the HTML, and changed the width from 620 to 500. This means the browser actually loaded the same 620px image, and then reprocessed it to display a 500px image to the viewer. Notice how the photograph instantly loses much of the sharpness it had when displayed in its actual dimensions.

To further illustrate my point, here is the same photo displayed at 500px. However, instead of telling HTML to shrink the large version, I used Photoshop to resize it down to 500px.

You can hover your mouse over this last image to compare it to the browser-resized version. If you’re using a browser that renders it correctly, try hovering over this link to see how other less-capable browsers render the same image (you might have to wait a couple seconds for the image to load). That’s a pretty big difference, huh?

The lesson to be learned is that you should always display your images in their exact dimensions. Even a single pixel difference can cause the photograph to become noticeably more blurry in most browsers.

Finally, another reason why you shouldn’t leave resizing to your browser is that the original, full-sized image is loaded anyway, regardless of what size you’re displaying the image at. This means that if you have a large, 1 megabyte, 1024×682 photograph that you’re displaying at 500px in width, the whole 1 megabyte image is downloaded by the visitor before the browser resizes it down to 500px.

Some of you might have thought that using larger, higher-resolution photographs and having them resized in HTML produces higher quality images, since there’s more information or detail in the file. It doesn’t. For best image quality and fastest loading time for your visitors, always resize your images to the desired size prior to uploading!

Update: I’ve added a second link under the mouse-hover comparison for those who are using more capable browsers. If you don’t see any difference in hovering over the image, try hovering over the new link to see how other browsers render the image.

Update 2: Just for your info: This doesn’t apply to uploading full-sized images to photo sharing services like Flickr or SmugMug. These services take your large resolution photograph, and reprocess it into multiple images of various sizes. Thus, when you’re viewing the 500px image on Flickr, it’s actually a 500px image that Flickr resized and sharpened using your original large image.