Small-files

Intro

Why spend a day on compression and small files?

Environmental damage: water usage of our computational cloud infrastructures

Storage capacities: df -h

Hardware (older devices/regime of staying-always-up-to-date): top/htop, task manager (Windows) / activity monitor (Mac)

Pedagogy: hex editors

Subcultures: demo scene

Why is this image 530.3 KB (on my system)?

Download Aspoon.jpg.

Open a hex editor (such as Bless) and open Aspoon.jpg.

Count the nr of bytes CTRL+A.

0x817a8 (hex)
530344 (dec)

https://www.rapidtables.com/convert/number/hex-to-decimal.html?x=817A8

What is file compression?

Different file types, different compression algorithms.

https://parametric.press/issue-01/unraveling-the-jpeg/

Images

What is data compression? It's a way to encode information in such way, that is uses less bytes to store it.

And if you are curious to learn how image files are encoded, have a look at the following links:

• Understanding and Decoding a JPEG Image using Python
• Unraveling the JPEG (with live examples)

Image file types

• How to choose between GIF, JPEG, or PNG?

Image resizing

Decrease the file size of an images by saving them with specific settings: quality, smoothing, progressive loading, no exif data, color sub-sampling. You can do this in Gimp, Imagemagick or Photoshop.

• Ways to optimize images for the web, by Rekka Bellum
• Green Hacks: Optimising images for web - Rekka Bellum (using Gimp) [video]
• Imagemagick's mogrify
• How to Build a Low-tech Website: Design Techniques and Process

Dithering

• hitherdither: A package implementing dithering algorithms that can be used with PIL/Pillow.

Audio

Why compressing audio?

• Which formats can be used on a web page?
  • mp3
  • ogg
  • opus

The fancy and hard way

Uses FFmpeg. FFmpeg is a powerful, open-source tool for decoding, encoding, and manipulating multimedia files.

ffmpeg -i input.wav -b:a 128k output.mp3

• the option "-i" is the input file
• the option "-b:a" specifies the bit rate. its in kilobit per seconds. more bit less information is lost. possible option could be:
  • 96k
  • 112k
  • 128k
  • 160k
  • 192k
  • 256k
  • 320k
• the last argument is the output file. with the format(.mp3) you define the compression format. options for audio would be:
  • mp3
  • ogg (or oga) https://www.xiph.org/ogg/
  • opus https://opus-codec.org/

The easy way

Use audacity :D

1. Open the file with audacity
2. Click on [File] -> [Export]
   1. Select [Export as MP3]
   2. Select [Export as OGG]
   3. Select [Export Audio ...] for opus
3. In the new window that open you can select different format optins.
4. select a name for the new file
5. Click on [Save]

Further readings

• Audio compression artifacts
• Interview with Jonathan Sterne

Video

Which compression should be used should be used?

• h264 is one of the recommended video compression codecs by Mozilla

The fancy and hard way

ffmpeg -i input.mov -c:v libx264 -c:a aac -movflags +faststart  output.mp4

• the option "-i" is the input file
• the option "-c:v" is the video codec you use. in this case h264
• the otpion "-c:a" is for the audio codec
• the option "-movflags +faststart " is for web optimisation

The easy way

By using a software called HandBrake - The open source video transcoder

• In HandBrake click on [Open source] and select the file you would like to transcode.
• Select the preset.
• For the web dont forget to select [Web optimized]

Further links

• old wiki page about video compression
• Reference: I'm sitting in a room by Alvin Lucier

Web pages

References

• https://w3c.github.io/sustainableweb-wsg/
• How to Build a Low-tech Website: Design Techniques and Process
• https://smolweb.org/
• https://codeberg.org/thgie/awesome-small-web-publishing

Check the size of a web page

Right-click on inspect and click on network.

Lazy loading

• MDN page on loading="lazy"
• Browser-level image lazy loading for the web

CSS sprites

• https://github.com/lowtechmag/solar/wiki/Solar-Web-Design#image-sprites

Links

Small files as a feature

• SMALL FILE MEDIA FESTIVAL
• Open Call: Small File Photo Festival
• demoscene: pouet.net, scene.org, demoscene.info, viznut, ...
• Taper #9: "each poem—the HTML on the page after the header—could be no more than a tiny 2KB (2048 bytes)"
• Michael prototyping a Jpeg loop in Python using Imagemagick

Command line tools

• Mogrify (part of imagemagick)
• pngcrush
• gifslice
• jpegtran

Discussion points

• https://merveilles.town/@neauoire/109015104990420443
• dithering discussed in the damaged earth catalog
• https://www.vw.ca/carbonneutralnet/en/
• https://formafantasma.com/website
• Why Your Website Should Not Use Dithered Images?

See also

• prototyping class on video compression