Simple image layout algorithm (Re: Perl Advocacy and company logos)

Andy Wardley abw at wardley.org
Thu Feb 28 10:33:50 GMT 2008


Greg McCarroll wrote:
> spiral design based on size - or as joel pointed out an optimal space using
> algorithm - anyway with the best will in the world that is currently SEP).

I have studied this matter in some depth and surmised that the optimal
layout algorithm for displaying a large number of images on a browser of
unknown window size, with maximum pussy-per-pixel[*] coverage is:

   1) Sort all images according to height.  Shortest first, tallest last.

   2) Sort those with equal heights according to width.  Display as widest
      first, then narrowest, then second widest, second narrowest, and so
      on (i.e. alternate shift/pop from the start/end of the list)

Sorting them height-first reduces screen space lost by having tall images
next to short ones:

    +------+  wasted  +----+
    |      |   space  |    |
    |      | +------+ |    |
    |      | |      | |    |
    +------+ +------+ +----+

And alternating widths reduces that lost by trailing whitespace on lines.

    +------------+ More Wasted
    |        wide| space that
    |         pic| isn't quite
    |            | big enough
    |            | for the next
    +------------+ image
vs
    +------------+ +-----+
    |            | | thin|
    |            | |  pic|
    |            | |     |
    |            | |     |
    +------------+ +-----+

Losing whitespace becomes more of a problem as the images approach and exceed
half the screen size.  But I don't imagine that'll be too much of a problem
for logos.

A

[*] pictures of cute kittens, of course.... what else?


More information about the london.pm mailing list