How to Access and Use the Image Optimizers on css-ig.net

Updated

css-ig.net is a small collection of experimental image optimization tools for web images. The homepage lists three entries — pingo, beeim, and pinga — and you start by picking the one that matches your format and workflow: pingo for PNG, JPEG, WebP, and APNG; beeim for PNG only; pinga if you want a graphical interface rather than a command-line tool. Each tool is a separate project, so "using css-ig.net" really means choosing one of these three and following its own instructions.

What each tool on the homepage does

Tool Formats supported Interface Notes from the site
pingo PNG, JPEG, WebP, APNG Not stated on the page Described as an experimental lossless and lossy optimizer that transforms image data for the web
beeim PNG Not stated on the page Described as an experimental lossless and lossy processor that transforms image data for the web
pinga PNG, JPEG, APNG GUI Described as an easy-to-use GUI, experimental image optimizer for web image data

Two things are worth reading carefully here. First, all three are labeled experimental, so treat them as tools to test on copies of your images rather than as drop-in replacements for a production pipeline. Second, the format lists differ: if your assets are WebP, only pingo covers them among the three; if they are PNG, all three apply.

Choosing between pingo, beeim, and pinga

The decision comes down to two questions.

Do you want a GUI or a command-line workflow? The site only identifies pinga as a GUI. If you prefer clicking through settings instead of scripting, pinga is the entry point the homepage points you toward. For pingo and beeim, the page does not state an interface, so check each project's own documentation before assuming how you drive it.

Which formats are you optimizing? Use the table above. WebP narrows you to pingo. A PNG-only job leaves all three open, and then interface preference or output quality decides it.

If you are unsure, a reasonable starting order is: pinga for a first hands-on look at what the optimizers do to your images, then pingo if you need WebP or want to compare lossless versus lossy results across more formats.

Lossless vs. lossy, since all three offer both

The homepage describes pingo and beeim as offering both lossless and lossy modes, and pinga as an optimizer without specifying which. In practice:

  • Lossless rewrites the file so it decodes to exactly the same pixels, just in fewer bytes. Safe when image fidelity is non-negotiable.
  • Lossy discards some data to shrink further, trading visible or invisible quality for size.

Because these are experimental tools, the practical approach is to run both modes on a sample of your real images and compare file size against visual result before committing. The site itself does not publish benchmark numbers on this page, so your own test is the evidence you have.

A concrete first run

  1. Open css-ig.net and note the three entries: pingo, beeim, pinga.
  2. Pick your tool using the format and interface criteria above.
  3. Follow that tool's own page or repository for installation and invocation — the homepage only introduces the tools, it does not document their flags or menus.
  4. Work on copies of your images, not originals, given the experimental status.
  5. Compare output size and visual quality for both lossless and lossy settings on a representative sample.
  6. Only then apply the settings you validated to a wider batch.

Common sticking points

  • Expecting one unified tool. css-ig.net is an index of three separate projects, not a single app with a shared interface.
  • Assuming a GUI everywhere. Only pinga is described as a GUI; do not expect the same experience from pingo or beeim.
  • Skipping the format check. Picking beeim for a WebP file will not work — it is PNG-only.
  • Treating experimental as production-ready. The site's own wording flags all three as experimental, so validate before relying on them.