3 ms·
Josh ends up not actually advocating for spacer GIFs (the title is clickbait), but still mentions spacergif.org, and that took me down a rabbit hole. spacergif
by chrismorgan 6y ago
Josh ends up not actually advocating for spacer GIFs (the title is clickbait), but still mentions spacergif.org, and that took me down a rabbit hole.
spacergif.org statistics suggest it’s spending roughly 1.5–3KB of bandwidth on each request (I haven’t bothered to go too precise, and it’d be hard to do so anyway because the traffic includes requests to things other than the GIF also). Remember that a spacer GIF is 43 bytes. (This, incidentally, is a reason to prefer GIF to PNG even now that PNG is widely supported—a spacer PNG is 65 bytes, if I recall correctly.)
Just imagine if, instead of telling you to put this in:
<img src="https://img.spacergif.org/v1/spacer.gif" width="1" height="1">
They told you to put this in:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==" width="1" height="1">
Lighter, more robust, just as developer-friendly, cheaper for them to operate (but perhaps harder to get donations or other moneys out of), and actually privacy-friendly. On that last point, spacergif.org’s privacy policy is a horror show that says “we’ll take whatever we can get our grubby little hands on, and do absolutely whatever we like with it, except that we’ll pay lip service to the law”. Certainly it’s extremely GDPR-noncompliant.
- bastawhiz 6y agoNot to mention that you wouldn't be making HTTP requests on every page of your site to a third party with this privacy policy: https://spacergif.org/privacy/ https://spacergif.org/privacy/
- chrismorgan 6y agoI did mention that.
- jiri 6y agoI find spacer.gif or even this "inlined gif" solution much more elegant and straitforward - better than bothering with div/span element and correct styling. And Josh could easily implement that react component with gif!
- chrismorgan 6y agoThe spacer image is basically the same as this shorter and better thing: <span style="display:inline-block;width:1px;height:1px"></span>