Serve a transparent GIF from NodeJS

transparent-gif.js

// Two ways to serve transparent GIF

var buf = new Buffer([
    0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, 0x01, 0x00, 
    0x80, 0x00, 0x00, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x2c, 
    0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0x02, 
    0x02, 0x44, 0x01, 0x00, 0x3b]);

res.send(buf, { 'Content-Type': 'image/gif' }, 200);

// --- OR ----

var buf = new Buffer(35);
buf.write("R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=", "base64");
res.send(buf, { 'Content-Type': 'image/gif' }, 200);

@chrisspiegl chrome, since not so long ago, started adding grey backgrounds to their image viewer. If you inspect the img tag, you'll see it adds these inline styles, one of them is a grey background:

-webkit-user-select: none;
margin: auto;
background-color: hsl(0, 0%, 90%);
transition: background-color 300ms;

@elhardoum Not sure where you got these from. I don't see those stylings in the most recent version of Chrome 98.0.4758.80.

When I inspect the img element they don't show up (even when ticking the Show all checkbox).

But the 35 byte one shows up as a white pixel and the 43 byte one is transparent and invisible on a black background.

@chrisspiegl my bad, didn't pay close attention - the image is shown on a website not the standard chrome image viewer page. I'll improve my answer, ty

@chrisspiegl solution worked like a charm. Displays perfectly transparent. Thanks