Small-files: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
==How to compress images?==
==Intro==


What is data compression? It's a way to encode information in such way, that is uses less bytes to store it.
'''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/


General useful references:
==Images==


* [https://kokorobot.ca/site/image_optimization.html Ways to optimize images for the web, by Rekka Bellum]
What is data compression? It's a way to encode information in such way, that is uses less bytes to store it.
* [https://github.com/lowtechmag/solar/wiki/Solar-Web-Design How to Build a Low-tech Website: Design Techniques and Process]


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 21: 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://kokorobot.ca/site/image_optimization.html Ways to optimize images for the web, by Rekka Bellum (using Imagemagicks's mogrify)]
* [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 29: 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.]


==How to compress audio?==
==Audio==
{{:Prototypology/Transcodology-2}}
{{:Prototypology/Transcodology-2}}


==How to compress video?==
==Video==
{{:Prototypology/Transcodology-3}}
{{:Prototypology/Transcodology-3}}


==Keep your web pages light!==
==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 77: 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)?

Aspoon.jpg

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.

Dithering

Audio

Why compressing audio?

  • Which formats can be used on a web page?

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:

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


Video

Which compression should be used should be used?

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

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

Command line tools

Discussion points

See also

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=Small-files&oldid=332355"