Image pipeline

(1)

As a curious reader of ecobytes articles and info,

I expect a consistent style across images, in tune with the eco:bytes ideology of decentralisation, smallness and DIY

So that I know I'm surfing merrily within the cozy confines of ecobytes.net.

(2)

As a reader with a slow connection,

I need images to load fast, but I may want to see a picture in high color and spatial resolution

So that I can browse quickly until I find the detail I want to investigate.

(3)

As an author,

I want to upload a single picture file and not bother with resolutions

so that I can focus on intent, not Implementation.

— Nice tweaks here: https://solar.lowtechmagazine.com/2023/06/rebuilding-a-solar-powered-website/

• When I open the site, pictures are loaded loaded once they become visible
• Pictures usually have few colors and are dithered
• Monochromous pictures may have color gradients (like the beautiful books from the Packpapier Verlag Osnabrück)
• Each picture

  • honors my DPI

  • has at least the width of the column it is stretch out into

    Note that big screens have larger absolute column widths due to fluid layout; a picture where 400px is enough to fill its margin on a phone screen may need to be 500px wide on a laptop screen

• Each image builds several representations:
  1. Custom palette, Dithered: in 1x and 2x for all breakpoints of the fluid scale
  2. High-quality (ca. 80%) Jpeg in 1x for some typical full-screen resolutions
• Dithered images
  • can be 16-color with a perceptually uniform pallette or monochrome
  • may be scaled up to 50% above source resolution