Skip to main content

afrigov is an open-source project. It is not a government website and is not affiliated with any government.

Previewing neutral core Change

afrigov Web toolkit for government

Images

Point it at a folder of photographs. It makes each one at the sizes phones, tablets and desktops need, saves them as WebP, removes the camera's location data, and prints the HTML to paste. 

npx afrigov-images ./event-photos --out ./site/images

It needs Node 20 or newer, and runs on your own computer: the photographs are not sent anywhere.

Why

Images are most of a government page's weight, and the reader pays for every megabyte, usually from a prepaid phone bundle. A photograph straight from a camera is 3 to 8 MB. Shown on a phone, it needs about 50 KB.

Image tools for developers ask which sizes, format and quality you want. This one decides for you, using afrigov's limits for each kind of image, so a web team with a folder of photographs gets the right result without learning any of it.

A real example

The heaviest image on a ministry's home page:

cardiovascular-care.png  3.1 MB, 2384 × 1054
  3 copies as WebP: 15 KB, 37 KB, 66 KB  within the limit

  <img
    src="cardiovascular-care-960.webp"
    srcset="cardiovascular-care-480.webp 480w, cardiovascular-care-960.webp 960w, cardiovascular-care-1600.webp 1600w"
    sizes="100vw"
    width="1600"
    height="707"
    alt=""
    decoding="async"
  />

A phone now downloads 15 KB where it used to download 3.1 MB.

Kinds of image

Choose with --kind. Each kind has the sizes a page needs and a limit for the largest copy. The reasons behind the limits are on the Images page under Styles.

Kind For Sizes made At most
hero Hero or cover photograph 480, 960, 1600 wide 150 KB
wide Beside text, or in a news article. The default 480, 800 wide 80 KB
card Card picture or video still 320, 640 wide 40 KB
portrait Portrait 240, 480 wide 40 KB
thumb List thumbnail 120, 240 wide 15 KB
flyer Event flyer 400, 800 wide 120 KB
logo Logo or mark 56, 112 tall 20 KB

What it does to each image

  1. Turns it the right way up, using the way the camera was held.
  2. Makes each size, never larger than the original.
  3. Saves it as WebP, starting at quality 75. If the largest copy is over the limit, it lowers the quality in steps, down to 50. If it is still over, it says so.
  4. Removes the camera data, including where the photograph was taken. A government site should not publish a staff member's home by accident.
  5. Prints the HTML, so each screen downloads only the size it needs and the page does not jump while it loads.

You write the alt text: what the picture shows, or nothing if it is decoration. A tool cannot know that.

Options

Option What it does
--out <folder> Where to write the copies. Required
--kind <kind> Which kind of image, wide by default
--quality <n> The quality to start from, 1 to 100, 75 by default
--keep-metadata Keep the camera and location data
--json The results as JSON

It reads JPEG, PNG, WebP, AVIF, TIFF and GIF. iPhone photographs in HEIC format need converting first. Give it files, or folders, which it reads one level deep.

Find the heavy images first

Audit reports a live page's weight on a phone and names each image that is heavier than it needs to be. Run Audit to find them, and this to fix them.

Source and the library: afrigov-images on GitHub. Package: afrigov-images on npm.