Small-files: Difference between revisions
(Created page with "==How to compress images?== Useful references: * [https://kokorobot.ca/site/image_optimization.html Ways to optimize images for the web, by Rekka Bellum] * [https://github.com/lowtechmag/solar/wiki/Solar-Web-Design How to Build a Low-tech Website: Design Techniques and Process] ===Image resizing=== 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 d...") |
No edit summary |
||
| (11 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
==How to compress images?== | ==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. | |||
General useful references: | |||
* [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] | ||
* [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] | ||
And if you are curious to learn how image files are encoded, have a look at the following links: | |||
* [https://yasoob.me/posts/understanding-and-writing-jpeg-decoder-in-python/ Understanding and Decoding a JPEG Image using Python] | |||
* [https://parametric.press/issue-01/unraveling-the-jpeg/ Unraveling the JPEG (with live examples)] | |||
===Image file types=== | |||
* [https://www.jotform.com/blog/everything-you-need-to-know-about-image-compression/ How to choose between GIF, JPEG, or PNG?] | |||
===Image resizing=== | ===Image resizing=== | ||
| Line 39: | Line 50: | ||
* [https://smallfile.ca/ SMALL FILE MEDIA FESTIVAL] | * [https://smallfile.ca/ SMALL FILE MEDIA FESTIVAL] | ||
* [https://thephotographersgallery.org.uk/whats-on/open-call-small-file-photo-festival Open Call: Small File Photo Festival] | * [https://thephotographersgallery.org.uk/whats-on/open-call-small-file-photo-festival Open Call: Small File Photo Festival] | ||
* [http://en.wikipedia.org/wiki/Demoscene demoscene]: [https://www.pouet.net/faq.php pouet.net], [https://www.demoscene.info/ demoscene.info], [http://viznut.fi/en/ viznut], ... | * [http://en.wikipedia.org/wiki/Demoscene demoscene]: [https://www.pouet.net/faq.php pouet.net], [https://www.scene.org/ scene.org], [https://www.demoscene.info/ demoscene.info], [http://viznut.fi/en/ viznut], ... | ||
* [https://taper.badquar.to/9/about.html Taper #9: "each poem—the HTML on the page after the header—could be no more than a tiny 2KB (2048 bytes)"] | * [https://taper.badquar.to/9/about.html Taper #9: "each poem—the HTML on the page after the header—could be no more than a tiny 2KB (2048 bytes)"] | ||
* [[Jpegloop| Michael prototyping a Jpeg loop in Python using Imagemagick]] | * [[Jpegloop| Michael prototyping a Jpeg loop in Python using Imagemagick]] | ||
===Command line tools=== | |||
* [https://imagemagick.org/script/mogrify.php Mogrify] (part of imagemagick) | |||
* [https://pmt.sourceforge.io/pngcrush/ pngcrush] | |||
* [https://www.lcdf.org/gifsicle/ gifslice] | |||
* [https://jpegclub.org/jpegtran/ jpegtran] | |||
===Discussion points=== | ===Discussion points=== | ||
* https://merveilles.town/@neauoire/109015104990420443 | * https://merveilles.town/@neauoire/109015104990420443 | ||
* [https://damaged.bleu255.com/Low-Tech/ dithering discussed in the damaged earth catalog] | |||
* https://www.vw.ca/carbonneutralnet/en/ | * https://www.vw.ca/carbonneutralnet/en/ | ||
* https://formafantasma.com/website | * https://formafantasma.com/website | ||
* [https://www.simplethread.com/why-your-website-should-not-use-dithered-images/ Why Your Website Should Not Use Dithered Images?] | |||
===See also=== | |||
* [[Prototyping 2013-11-05 (Lens Based Media)|prototyping class on video compression]] | |||
Latest revision as of 15:10, 6 June 2024
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.
General useful references:
- Ways to optimize images for the web, by Rekka Bellum
- 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:
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.
- Green Hacks: Optimising images for web - Rekka Bellum (using Gimp)
- Ways to optimize images for the web, by Rekka Bellum (using Imagemagicks's mogrify)
- Imagemagick's mogrify
Dithering
Keep your web pages light!
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?