88x31 Buttons

The 88x31 is a standard format for internet buttons. They're a kind of banner ad for a website that anyone can make. Quite often they're gifs and may be animated.

Etiquette and Protocol

Buttons can be hotlinked or rehosted, depending on the owner's preference. There are benefits and drawbacks to both. The roles below are described as "owner" and "webmaster". The owner puts their button on the source website (source-website.com), the webmaster is the person using that button on their new site (new-website.com).

When rehosting, the webmaster will surround the button with a link which redirects back to the original site. Hosting a button for another website is a good thing, because it actively promotes users to browse to that website.

Hotlinked

When the webmaster use's the owner's website hosting for the button on their own site. i.e.

<img src="source-website.com/88x31.gif"/>
		

• + Can be changed and updated by the owner
• ~ On Neocities loading images counts as a page view, so this may or may not be beneficial to the owner
• - May cause lag on the new site while elements are waiting to load from many sites (this can be circumnavigated with loading="lazy"
• - The host website may go down, leaving the new website with a broken image

Rehosted

The webmaster saves the button from the source site and rehosts it on their own server. This was typical of the old web where bandwidth and server hosting was limited and costly, unlike free modern site hosts like Neocities where bandwidth is unlimited. i.e.

<img src="new-website.com/88x31.gif"/>
		

• + Does not take from the bandwidth of the original site
• + Images won't lag or go down
• ~ Images may link to dead websites without indicating that they're dead (by displaying a broken image)
• - Images don't update, and may show a broken, WIP, or outdated image

Image format

The image format is allegedly from Geocities where the Geocities button would appear at the bottom of the page. Why 88x31? Nobody really seems to know, but the guess is that it was an arbitrary sizing that fit nicely into an existing standard.

Typically the format is a .gif, which allows for animation and is usually a small file size. It has the benefit of losslessly storing pixelart graphics and up to 256 colours.

The HTML

<a href="https://source-website.com" title="Source Website">
  <img alt="Source Website" loading="lazy" src="https://source-website.com/source_website_88x31.gif"/>
</a>

Hosting Your Own

Whether you ask people to rehost or hotlink your button, you should probably keep your buttons in one place with a consistent name. That way, when you want to update your button you can just save over the existing one. Site managers like wordpress where your content is prefixed with the current date are no good for this, because they'll generate a new URL every time.

An example file structure might be:

source-website.com
↪ mybutton.gif
 
https://source-website.com/mybutton.gif

Or maybe:

source-website.com
↪ assets
 ↪ site-assets
  ↪ coolButton88x31.gif

https://source-website.com/assets/site-assets/coolButton88x31.gif