Small-files: Difference between revisions
Tag: Reverted |
(→Intro) |
||
| (13 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
== | ==Intro== | ||
'''Why spend a day on compression and small files?''' | |||
Environmental damage: water usage of our computational cloud infrastructures | |||
Storage capacities: <code>df -h</code> | |||
Hardware (older devices/regime of staying-always-up-to-date): <code>top</code>/<code>htop</code>, task manager (Windows) / activity monitor (Mac) | |||
Pedagogy: hex editors, material understanding of digital files | |||
Subcultures: demo scene | |||
'''Why is this image 530.3 KB (on my system)?''' | |||
[[File:Aspoon.jpg|50px]] | |||
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: | And if you are curious to learn how image files are encoded, have a look at the following links: | ||
| Line 22: | Line 51: | ||
Decrease the file size of an images by saving them with specific settings: <code>quality</code>, <code>smoothing</code>, <code>progressive loading</code>, <code>no exif data</code>, <code>color sub-sampling</code>. You can do this in Gimp, Imagemagick or Photoshop. | Decrease the file size of an images by saving them with specific settings: <code>quality</code>, <code>smoothing</code>, <code>progressive loading</code>, <code>no exif data</code>, <code>color sub-sampling</code>. You can do this in Gimp, Imagemagick or Photoshop. | ||
* [https://www.youtube.com/watch?v=cfrB4Gvpj8c Green Hacks: Optimising images for web - Rekka Bellum (using Gimp)] | * [https://kokorobot.ca/site/image_optimization.html Ways to optimize images for the web, by Rekka Bellum] | ||
* [https://www.youtube.com/watch?v=cfrB4Gvpj8c Green Hacks: Optimising images for web - Rekka Bellum (using Gimp) [video]] | |||
* [https://imagemagick.org/script/mogrify.php Imagemagick's mogrify] | * [https://imagemagick.org/script/mogrify.php Imagemagick's mogrify] | ||
* [https://github.com/lowtechmag/solar/wiki/Solar-Web-Design How to Build a Low-tech Website: Design Techniques and Process] | |||
===Dithering=== | ===Dithering=== | ||
| Line 30: | Line 60: | ||
* [https://github.com/hbldh/hitherdither hitherdither: A package implementing dithering algorithms that can be used with PIL/Pillow.] | * [https://github.com/hbldh/hitherdither hitherdither: A package implementing dithering algorithms that can be used with PIL/Pillow.] | ||
== | ==Audio== | ||
{{:Prototypology/Transcodology-2}} | |||
==Video== | |||
{{:Prototypology/Transcodology-3}} | |||
==Web pages== | |||
===References=== | |||
* https://w3c.github.io/sustainableweb-wsg/ | |||
* [https://github.com/lowtechmag/solar/wiki/Solar-Web-Design 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=== | ===Check the size of a web page=== | ||
| Line 72: | Line 115: | ||
* [[Prototyping 2013-11-05 (Lens Based Media)|prototyping class on video compression]] | * [[Prototyping 2013-11-05 (Lens Based Media)|prototyping class on video compression]] | ||
[[Category:Workbooks]] | |||
Latest revision as of 12:49, 4 May 2026
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, material understanding of digital files
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:
Image file types
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
Audio
Why compressing audio?
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
- Open the file with audacity
- Click on [File] -> [Export]
- Select [Export as MP3]
- Select [Export as OGG]
- Select [Export Audio ...] for opus
- In the new window that open you can select different format optins.
- select a name for the new file
- Click on [Save]
Further readings
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
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
CSS 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
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?