Picture Infrastructure |
January 15th, 2015 |
| blog, pictures, tech |
<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.
Comment via: substack