Archive for October, 2009

The dangers of double resizing

Sunday, October 25th, 2009

Amazon have made a bit of an mess of building their thumbnails. On their homepage I was greeted with these:

51PVI7LcjDL._SL123_PIsitb-sticker-arrow-sm,TopRight,8,-14_OU02_51VA3NskorL._SL123_PIsitb-sticker-arrow-sm,TopRight,8,-14_OU02_

The moiré pattern of blurriness is an artifact – evidence of the fact that these "Look inside" thumbnails are caused by resizing already thumbnailed images – probably the thumbnail of the book cover without the "Look inside" banner. To avoid this on your sites, you need to build thumbnails from a sufficiently high-resolution image – ideally a high-resolution original. In practice, it can be faster and less memory-hungry to thumbnail from a medium-sized image, and this will generally not show visible artifacts. Of course, if you've already got a high-resolution image loaded into memory, you can side-step all of the quality issues by building all of the thumbnails you might need from it at once. Note also that you need to resize down enough to hide any JPEG compression artifacts.

To understand how the tell-tale moiré pattern comes about, let's imagine the source and destination pixel grids:

amazon-grids

When we overlay them you can see the moiré pattern appearing.

amazon-moire

Where the grid intersections are aligned, one source pixel maps fairly closely to a destination pixel, which makes that spot in the thumbnail crisp. But as you move away from those spots and the error builds up, the grid intersections disalign, and one source pixel is smeared over four destination pixels. That makes for a blurry spot.

Answers.com double-click

Friday, October 16th, 2009

A few weeks ago I mentioned word-selection by double-click.

I have discovered that Answers.com improves on this with a rather nifty hidden feature: if you double click on any word on the page it will immediately look that word up in Answers.com using AJAX!

This looks very innovative to me. Using the rich Javascript API to augment the browser's existing functionality is very pleasant, but here the product is a dictionary/reference site that is totally cross-linked! Poor old Wikipedia seems rather limited by comparison (though, to be fair, there are massive advantages to conventional links. This technique is not a replacement for that).