B͇͗ḛ̟ͪc̗̏̉o͉͉̎̍ͮm̲͎̩͒̇e̺͑͗ͨ̿̎ ͕̮ͪͬ̌a͇͇̟ͤ̃̈́͂͛ ̤̟̼͇̖̤͑C̖̫̼̻̠̤̄̓ò͓̭͉̳̫̎̈ͭ̃ͅm̬̩̦̠̍̃̽̈͐ͮp̦ͣ̊̓ŕ̫͈͉̭̏̄̀̽ͬ̈́ě̘̞̬̠͓͍̻̹̞͔ͧ̍͐ͧͤ́̈ͬs̖̤̦̦̯̖̳̞͎̬ͩ̄͛̅̅̐̋̅ṣ̖͉͓̥͓̖̮̤͔͖͆͒ͮḯ̭̳̍̑̃̿͆o͈̦̱͎̺͓͖̦̹͋̍ͥ͊̓̉̓̆n͎̻͙̝̫̖̉ ̣̯̦̹͚̍ͫ̎̈̽͑ͯ̀S̪̼̖̟̲͐o̱̊ͯ̎͛ͥr͕̀ͫ̒c̟͍̼͓͙͋̒e͈̟̞͌̾̑̚r͍̥ͧ̍e̝̍̋̚r̠̆̚

This dovetails with Jeff Huang's This Page is Designed to Last: A Manifesto for Preserving Content on the Web. Optimized sites are more likely to survive as 🪦 tombstones 🪦.

Generally, the main culprit for bloat is images. I usually mess around with a few different formats until I find the one that is best for the task, but broadly speaking, .webp is a good choice for images that have specific utility on a website and optimized .png is usually a good choice for images others might use (like non-animated buttons). I have tried many image compression utilities and TinyPNG gives the best results.

The most graphic-intensive page I have, by far, is my 88x31 archive. When I need to unwind I go on button sprees and hoover up any buttons I find in the NeoCities activity feed. Despite the size convention, the actual files run a wide range of sizes and dimensions and and include things like:

• Massive source images that are resized to 88x31 via CSS/HTML
• .pngs that simply need to be optimized
• Animated .gifs with dozens (hundreds, even) of frames

The first two are easy to resolve. There are many programs, suck as Imagemagick, that allow batch resizing images, and the remaining larger .pngs are promptly stuffed into TinyPNG. An example of command line batch image resizing:

> magick mogrify -resize 88x31 *.jpg 

When those two are taken into account, all the remaining large buttons tend to be animated .gifs. For example, amiya.gif was originally 697kb but after resizing and optimization I was able to reduce it to 29k. For this I used Gifsicle, batch gif-editing program that has been ported to Windows. Gifsicle actually has 3 levels of optimization, flagged by -O2 and -O3 respectively. The following did tremendous work:

> gifsicle --batch --optimize -O3 --colors 256 --resize 88x31 *.gif

I also messed around with FFMPEG to convert the animations to other formats. Converting vomitboyz.gif (originally 561kb) to .webm results in a size of 127kb, which is a significant reduction but .webm is a lesser-known format that only plays in the browser. It's also not supported for NeoCities free accounts. I was ultimately able to get this .gif down to 284kb, which seems like a decent compromise.

My next experiment was to isolate static .gifs from animated .gifs to see if the static gifs would benefit from a different file format. Exiftool provided a handy solution

> exiftool -if "$FrameCount > 0" -directory=Animated *.gif
> magick mogrify -format gif *.png

Because I'm clearly out of my mind, I also experimented with conversions to .png, .jpg, and .webp. The latter ended up being the smallest. The problem with .webp is it is primarily viewed in the browser. Since NeoCities buttons are intended to be shared amongs webmasters I felt this format might be confusing to those newer to website design, even though it is supported by NeoCities.

By the end of all this I'd reduced Neocitizens from 27.5 MB to 10 MB and confirmed for myself that optimized .png is broadly the best format for non-animated buttons.

Minimizing Text?

I'm fairly lukewarm on CSS and HTML minimizers because they reduce readability. In the grand scheme of things, the typical .css isn't big enough to matter (most of mine are 1 to 2kb) anyway. Still, a little html-tidy couldn't hurt.

One thing I am big on is utilizing the web's infinite vertical space and reducing number of separate pages to maintain. This is part of what drove me away from Static Site Generators. I think something like Zonelets provides a good middle ground in providing a familiar blog format without a lot of redundnacies and extra pages.