Small-files: Difference between revisions
| Line 36: | Line 36: | ||
* [https://github.com/lowtechmag/solar/wiki/Solar-Web-Design How to Build a Low-tech Website: Design Techniques and Process] | * [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=== | ||
Revision as of 13:36, 10 April 2026
How to compress 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
How to compress 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
How to compress 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
Keep your web pages light!
References
- 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?