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:
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:
<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 |
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.