Picture Infrastructure

January 15th, 2015
blog, pictures, tech
Every year I go back over the pictures I have and put up a selection of them under jefftk.com/pictures. For the first eight years or so this was just a simple list of thumbnails linking to larger versions of the images:
  <a href="family_dinner.jpg">
    <img src="family_dinner-tn.jpg"></a>
  <a href="alex_jeff_alice_rick_music.jpg">
    <img src="alex_jeff_alice_rick_music-tn.jpg"></a>
  <a href="davy_alex.jpg">
    <img src="davy_alex-tn.jpg"></a>
Clicking on a picture, viewing it, and clicking back is kind of annoying, so I added a lightbox view last year. This year I wanted a better experience on my phone, so I rewrote the lightbox code to handle phones. [1]

Over time the thumbnails got bigger and bigger as ideas about acceptable bandwidth have changed:

year height
2005 96px
2006 96px
2007 96px
2008 96px
2009 96px
2010 128px
2011 200px
2012 300px
2013 300px
2014 400px
At this point the 96px thumbnails are awkwardly small, so I've now gone back over all the years to bring thumbnails up to size and add the mobile-suporting changes I had made for 2014. I've also added srcset support for 2x displays:

   sed 's~img src="\([^"]*\)-tn.jpg"~
          img src="\1-tn.jpg"
              srcset="\1-tn.jpg 1x, \1-2x.jpg 2x"~'

(Historical consistency was very helpful here.)


[1] Code is on github.

Comment via: substack

Recent posts on blogs I like:

Food Fridays: The Joy of Vegan Baking

My secret to delicious vegan baking is the book The Joy of Vegan Baking.

via Thing of Things December 26, 2025

Opinionated takes on parenting

This post is a collection of parenting takes that sometimes go through my head, based on my experience raising our two boys (5 and 2 years old). All of this is based on my experience and might not apply to others (see the law of equal and opposite advice)…

via Victoria Krakovna December 16, 2025

How to Make a Christmas Wreath

Yesterday, I made a Christmas wreath. Here's how to make one. First, find an evergreen tree near your house. Clip off a few branches from the tree. Try to have as many leaves or needles on the branches as possible. Next, bring them home. What I usu…

via Anna Wise's Blog Posts December 6, 2025

more     (via openring)