Small-files

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:

• 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.

• 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

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

Keep your web pages light!

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?