Floppy Disk "Minisites"

[Cobra!]

Recently, the Museum of Obsolete Media has release a Floppy Disk exhibition site that is small enough to fit on a single 1.44MB floppy disk.

I copied the files onto a real floppy disk, and sure enough, it works great! Only displays properly on some browsers, though. It's weird clicking a link and hearing the floppy drive go as it loads the next page.

It has inspired me to make my own floppy site, and it appears I'm not alone.

I think it'll be an interesting challenge to condense my site into 1.44MB. Is this something you guys would be interested in trying as well?

[manpaint]

This is no longer case after I made my Halloween shrine, but according to my archives, my Neocities website was 275 kb in size.

It would be interesting to see how much stuff I could cram in this version of the website while still being able to have the full thing on a floppy.

I guess you could probably get a lot of text-only page since html file are usually very small

[Memory]

Time to optimise some image palettes for you floppy kings and queens.

Taking a 240x240 image:

BMP, all colours - 168 KB
BMP, 256 c. - 57,3 KB
BMP, 128 c. - 57,3 KB
BMP, 64 c. - 57,3 KB
BMP, 32 c. - 57,3 KB
BMP, 16 c. - 28,2 KB
BMP, 8 c. - 28,2 KB
BMP, 4 c. - 28,2 KB

PNG, all colours - 66,1 KB
PNG, 256 c. - 54,2 KB
PNG, 128 c. - 44,8 KB
PNG, 64 c. - 35,5 KB
PNG, 32 c. - 27,6 KB
PNG, 16 c. - 20,8 KB
PNG, 8 c. - 14,5 KB
PNG, 4 c. - 9,0 KB

GIF with all colours doesn't exist
GIF, 256 c. - 67,6 KB
GIF, 128 c. - 55,4 KB
GIF, 64 c. - 42,1 KB
GIF, 32 c. - 30,7 KB
GIF, 16 c. - 21,7 KB
GIF, 8 c. - 14,6 KB
GIF, 4 c. - 8,9 KB

The image in the attachments shows, how little quality is lost when reducing the palette. And for the last three images, check the different modes of reducing the palette: normal (plain), pattern mode (crosses) and diffusion dithering (dots).

[purelyconstructive]

I am very interested in this topic, but I am coming at it from a slightly different direction...

I am working on a text-only database that will eventually have a lot of self-contained, step-by-step how-to guides on self-sufficiency (e.g.: homesteading, civil engineering, etc.). The smaller the size, the better, so as to make it as portable and as shareable as possible. Thanks to the suggestions of a friend, it will also be released on other protocols (e.g.: gopher, gemini, etc.) with a zero-clause BSD license, so as to make it completely free to anyone and everyone the world over.

This project was inspired by research into Ecology (particularly The Global Village Construction Set, FarmBot, Low-Tech Magazine's solar-powered website, and an electronic schematic made in ASCII art that I had come across a long time ago).

[manpaint]

I am very interested in this topic, but I am coming at it from a slightly different direction...

I am working on a text-only database that will eventually have a lot of self-contained, step-by-step how-to guides on self-sufficiency (e.g.: homesteading, civil engineering, etc.). The smaller the size, the better, so as to make it as portable and as shareable as possible. Thanks to the suggestions of a friend, it will also be released on other protocols (e.g.: gopher, gemini, etc.) with a zero-clause BSD license, so as to make it completely free to anyone and everyone the world over.

This project was inspired by research into Ecology (particularly The Global Village Construction Set, FarmBot, Low-Tech Magazine's solar-powered website, and an electronic schematic made in ASCII art that I had come across a long time ago).

Interesting idea. I sometime toy with the idea of doing something similar, but for computers stuff. It would be essentially an offline website with minimal CSS.

As you said, the smaller it is the better. Another idea of mine was to make something similar to wikihow but with SVG images instead (as this format would be smaller than jpg or png images).

[purelyconstructive]

Interesting idea. I sometime toy with the idea of doing something similar, but for computers stuff. It would be essentially an offline website with minimal CSS.

As you said, the smaller it is the better. Another idea of mine was to make something similar to wikihow but with SVG images instead (as this format would be smaller than jpg or png images).

Nice! Those sound like some fun projects. What kind of computer stuff did you have in mind?

If you already have a bunch of images, converting them into SVGs with Inkscape through the command line would probably make short work of it. If you are on Windows instead of GNU+Linux, there is a batch script called "InkscapeBatchConvert" that can do the same thing.

Testing out computer-related ASCII art circuit diagrams...

Code

            ONE-BIT MEMORY                  
 I    __               __              
 N-------| \  .-----------------------| \      O        
     |  )o--o            |  )o----o----U        
   ----|__/  |         -----|__/   |  T        
   |      |         |       |          
   |      |         ------\ /------          
   |      |             \/              
   |      |             /\              
   |      |         ------/ \------          
   |      |  __       |   __    |          
   |      ---| \      -----| \   |          
 S  |       |  )o-----.     |  )o-----          
 E---o--------------|__/    |---------|__/              
 T                                   
                    NAND GATE X 4           

It would be fun to make some diagrams like this for every part of Ben Eater's 8-bit computer.

[manpaint]

Interesting idea. I sometime toy with the idea of doing something similar, but for computers stuff. It would be essentially an offline website with minimal CSS.

As you said, the smaller it is the better. Another idea of mine was to make something similar to wikihow but with SVG images instead (as this format would be smaller than jpg or png images).

Nice! Those sound like some fun projects. What kind of computer stuff did you have in mind?

If you already have a bunch of images, converting them into SVGs with Inkscape through the command line would probably make short work of it. If you are on Windows instead of GNU+Linux, there is a batch script that can do the same thing.

I was thinking about some power-user stuff like commands documentation and whatnot. I don't have any image yet because this still just an idea.

The command you sent me to convert image in SVG is interesting but I doubt it's efficiency. As it is an automated process - I'd assume it is prone to error and can create a lot of weird stuff.

Afterall redrawing images in SVG format is a profession, so I highly doubt it's easily automatable using the command line. It might work for simpler images though.

[purelyconstructive]

I'm sorry. I've been meaning to come back to this, but I've been quite busy lately...

The command you sent me to convert image in SVG is interesting but I doubt it's efficiency. As it is an automated process - I'd assume it is prone to error and can create a lot of weird stuff.

Afterall redrawing images in SVG format is a profession, so I highly doubt it's easily automatable using the command line. It might work for simpler images though.

Right. It depends on both the characteristics of the source images and the results desired.

The "Trace Bitmap" option within Inkscape is surprisingly good at "vectorizing" photos, so long as the lighting is consistent and there are no harsh shadows. This can be a helpful starting point for making WikiHow-like art as it reduces it into a series of flat colors and shapes that are easy to change because they are turned into "paths".

Sometimes, I increase the number of "scans" within the "Trace" to get a vector that captures a lot of detail. Then, I "ungroup" the result, remove many of the extra layers, recolor the ones that are left as necessary, and perhaps, draw an outline around them to make it pop. There is some artistry involved, but I would definitely use automation if I had to make hundreds of diagrams of a similar style as it could shave off many of the steps in the above process. It could also help to prepare photos so that they yield a better "Trace" that requires less editing.

Normally, one would use the "export to SVG" command with --action commands (or --verb commands in older versions of Inkscape). These can be combined in a string to do a series of tasks until we get a result that we want, or at least be close enough to be useful.

The "Trace Bitmap" option is an exception though. It uses an embedded tool (Potrace) that is easier to use through the command line separately from Inkscape. However, there is also a fork of Inkscape that allows one to use "Trace Bitmap" as an --action command, but I think it is only available on Windows.

I need to make a lot of graphics that are both small and sharp for some personal projects, so I've been trying to look into processes like this more. I have a feeling that Autotrace might work well. If I find or write any related scripts I will share them here.

[manpaint]

I'm sorry. I've been meaning to come back to this, but I've been quite busy lately...

The command you sent me to convert image in SVG is interesting but I doubt it's efficiency. As it is an automated process - I'd assume it is prone to error and can create a lot of weird stuff.

Afterall redrawing images in SVG format is a profession, so I highly doubt it's easily automatable using the command line. It might work for simpler images though.

Right. It depends on both the characteristics of the source images and the results desired.

The "Trace Bitmap" option within Inkscape is surprisingly good at "vectorizing" photos, so long as the lighting is consistent and there are no harsh shadows. This can be a helpful starting point for making WikiHow-like art as it reduces it into a series of flat colors and shapes that are easy to change because they are turned into "paths".

Sometimes, I increase the number of "scans" within the "Trace" to get a vector that captures a lot of detail. Then, I "ungroup" the result, remove many of the extra layers, recolor the ones that are left as necessary, and perhaps, draw an outline around them to make it pop. There is some artistry involved, but I would definitely use automation if I had to make hundreds of diagrams of a similar style as it could shave off many of the steps in the above process. It could also help to prepare photos so that they yield a better "Trace" that requires less editing.

Normally, one would use the "export to SVG" command with --action commands (or --verb commands in older versions of Inkscape). These can be combined in a string to do a series of tasks until we get a result that we want, or at least be close enough to be useful.

The "Trace Bitmap" option is an exception though. It uses an embedded tool (Potrace) that is easier to use through the command line separately from Inkscape. However, there is also a fork of Inkscape that allows one to use "Trace Bitmap" as an --action command, but I think it is only available on Windows.

I need to make a lot of graphics that are both small and sharp for some personal projects, so I've been trying to look into processes like this more. I have a feeling that Autotrace might work well. If I find or write any related scripts I will share them here.

There is a tool similsr to this in Adobe Illustrator - the only problem is that even if you get a good result, you get a very complex SVG image that can end up having a bigger file size than the original image.

That being said, Inkscape has to have a different implementation (since Illustrator is proprietary), so perphaps it is more efficient in that regard.

I Will try to run some tests and I will report back.

[manpaint]

I'm sorry. I've been meaning to come back to this, but I've been quite busy lately...
I need to make a lot of graphics that are both small and sharp for some personal projects, so I've been trying to look into processes like this more. I have a feeling that Autotrace might work well. If I find or write any related scripts I will share them here.

I investigated the process of converting image to SVG and came to a few conclusion. I did not test the "quality" - of the outputted exported image as this is dependent of the source image. I was more interested in the technical side of thing.

So here's my conclusions:

1) SVG is not automatically better than PNG images as far as file size is concerned. This especially true for small SVG images - if you export them to PNG, it will be smaller.

The true utility of SVG appereas to be it's cleanliness and display at high dimensions. An SVG image can be very large while still remaining with a small file size.

2) There is something very wrong with how Inkscape exports SVG files.

In order to measure the efficiency, I scaled up a vector image from Club Penguin (see attachment). As I expected, both Illustrator and Inkscape where able to retrace it properly, but there is a massive file size difference between those programs:

Original SVG image                   132 kb
Illustrator output after retracing a PNG equivalent   140 kb
Inkscape output after retracing a PNG equivalent    1,02 Mb

As you can see there is a massive file size difference. Adobe Illustrator is able to reduce the SVG to it's simplest expression but Inkscape completeky fails at this and output a 1 mb image.

I tried to multiple options in Inkscape, but it was to no avail. It seems that Adobe Illustrator is simply superior in this regard.

My full research is available in the attachment.

To conclude, I think it might be best to avoid SVG files in minimalist sites unless you need a very big and complex image. A 8-bit png can probably do the job in most case - with an added bonus if it's in grayscale.

[purelyconstructive]

Thank you for taking the time to test it out! The side-by-side comparisons that you and Gans have done are incredibly useful. I appreciate it.

My workflow already follows your first conclusion (i.e.: build as SVG, export as PNG). I don't normally optimize my PNGs, but I should start making a habit of it.

Your second conclusion is surprising. There are general steps that one can take to reduce the size of SVGs (e.g.: "simplify" redundant "nodes" that are generated during the "trace bitmap" operation with CTRL + L), but that is still a huge difference! Hmmm...I wonder what it is adding to inflate the size so much...

I think saving as an "Inkscape SVG" leaves extra file information behind (e.g.: the program settings used when making it). I haven't tested how much it differs from saving it as a "Plain SVG", or how much both of those differ from their SVGZ compressed versions yet though.

Generally, one wouldn't use SVGs within a webpage beyond small, repetitive elements. However, the fact that they are XML files means that they can be represented as pure text and modified within a text editor. This is where they shine!

[manpaint]

I think saving as an "Inkscape SVG" leaves extra file information behind (e.g.: the program settings used when making it). I haven't tested how much it differs from saving it as a "Plain SVG", or how much both of those differ from their SVGZ compressed versions yet though.

I tried the multiple variant of SVG found in Inkscape (except svg, since that seems to just be a svg in a zip file and thus not usable by most webhost/browsers).

The difference was minimal, if there was one at all. Still very far from the optimal file size sadly.

[Cobra!]

Seems they've started doing this challenge on Gemini, too. (HTTP link)

I think it's a lot easier on Gemini because of how simpler that protocol is, but it's still cool to see!