Transparent gifs. I hear you sigh as your mind wanders back in time, to days long gone, when there where only 2 browsers and both of them had layout quirks that demanded the use of transparent 1×1 pixels gifs. every. where.

The return of the GIF

GIF was huge in the early days of the web. It was the one format that could be used to send images over slow connections and still have an acceptable page load time. It could do animations! And most of all, as web developers, we used them to artificially inflate our table cells so IE and Netscape would leave them as we intended them.

Then, some company claimed ownership of the format and people called for the banning of GIFs from the internet. Browsers grew up and the 1×1 transparent GIF faded away…

Or not?

I have this one use case for transparent GIFs that I haven’t been able to solve without them and I actually find I need it more often then one might think.

Dealing with unreliable image aspect ratios

Often, I have a fluent layout which rests on some user supplied image (an avatar image, a logo etc) being a certain aspect ratio. I can then for example set the width of the image as 80% and the height will grow and shrink accordingly as the img tag maintains the aspect ratio of the source image. This in turn ensures that the (height of) the layout behaves as expected.

But problems start to happen when the image is the wrong aspect ratio or doesn’t load for some reason. The browser does not know the aspect ratio of the source image or uses the wrong aspect ratio. Result: a broken layout.

We can set width and height manually, overriding the source image aspect ratio, but the problem is that we can only do this for fixed size images. We can’t set the width to 80 percent, because how do we know what height to set? We’d need complex script code to do the maths for us.

But I’ve found that if I create a transparent gif with the correct aspect ratio, use that as the image src and set the actual image as the background, the browser nicely maintains the desired aspect ratio, even if the target image has the wrong aspect ratio or does not load at all. Exactly what we need!

11 transparent gifs

So I went about and created 11 transparent gifs, to cover the base aspect ratios:

• 1×1.gif
• 1×2.gif
• 1×3.gif
• 1×4.gif
• 2×1.gif
• 2×3.gif
• 3×1.gif
• 3×2.gif
• 3×4.gif
• 4×1.gif
• 4×3.gif

Just pick the gif that matches your (possibly missing or wrong aspect ratio) background image and use it as the src for the img element. Then set the actual image as the background, play around with background-* properties for the optimal effect and presto! Another hard job done.

Using data uri to reduce latency

Loading images just to force some aspect ratio is something performance-minded web developers frown upon. But there is good news! We can actually completely bypass the loading of the images by using data URIs instead. A data URI is a special type of URI that contains the data being pointed to in the URI itself! This works very well for small payloads because we can bypass the HTTP call completely this way. And they can be used everywhere you can also use a normal URL.

This is what the data URI of 1×1.gif looks like:

data:image/gif;base64,R0lGODlhAQABAIAAAGdwtWdwtSH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Copy-paste that URI into the src of an img element, then load the real image as the background image, like so:

<img style="background-image: url(/some-square-image.jpg)"
    src="data:image/gif;base64,R0lGODlhAgADAIAAAP///////yH5BAEKAAEALAAAAAACAAMAAAICjF8AOw==" />

Then play around with setting the width of the image and marvel as the browser scales the height to maintain a 1×1 aspect ratio.

So, without further ado, here are the 11 data URIs corresponding to our 11 transparent GIFs:

1×1

data:image/gif;base64,R0lGODlhAQABAIAAAGdwtWdwtSH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

1×2

data:image/gif;base64,R0lGODlhAQACAIAAAGdwtWdwtSH5BAEKAAEALAAAAAABAAIAAAICTAoAOw==

1×3

data:image/gif;base64,R0lGODlhAQADAIAAAGdwtWdwtSH5BAEKAAEALAAAAAABAAMAAAICjAsAOw==

1×4

data:image/gif;base64,R0lGODlhAQADAIAAAGdwtWdwtSH5BAEKAAEALAAAAAABAAMAAAICjAsAOw==

2×1

data:image/gif;base64,R0lGODlhAgABAIAAAGdwtWdwtSH5BAEKAAEALAAAAAACAAEAAAICTAoAOw==

2×3

data:image/gif;base64,R0lGODlhAgADAIAAAP///////yH5BAEKAAEALAAAAAACAAMAAAICjF8AOw==

3×1

data:image/gif;base64,R0lGODlhAwABAIAAAGdwtWdwtSH5BAEKAAEALAAAAAADAAEAAAICjAsAOw==

3×2

data:image/gif;base64,R0lGODlhAwACAIAAAGdwtWdwtSH5BAEKAAEALAAAAAADAAIAAAICjF8AOw==

3×4

data:image/gif;base64,R0lGODlhAwAEAIAAAGdwtWdwtSH5BAEKAAEALAAAAAADAAQAAAIDjI9WADs=

4×1

data:image/gif;base64,R0lGODlhBAABAIAAAGdwtWdwtSH5BAEKAAEALAAAAAAEAAEAAAICjFMAOw==

4×3

data:image/gif;base64,R0lGODlhBAADAIAAAGdwtWdwtSH5BAEKAAEALAAAAAAEAAMAAAIDjI9WADs=

 

Do you remember the days of old when the transparent gif was the cornerstone of web development (sort of)? Glad those days are gone or yearning to play with transparent gifs once again? Share your views in the comments below.