stellarnodegrid4.cyou

Step-by-Step BPGconv Tutorial for Web Developers

Written by

ge9mHxiUqTAm

in

Optimizing Your Workflow: Automating Batch Conversion with BPGconv

Automating batch image conversion with BPGconv can save time, reduce file sizes, and maintain high image quality across your projects. This guide shows a practical, step-by-step workflow to set up a reliable, automated pipeline using BPGconv, shell scripting, and optional tools for Windows, macOS, and Linux.

What is BPGconv (quick)

BPGconv is a command-line tool for converting images to/from the Better Portable Graphics (BPG) format, which offers superior compression compared to JPEG while preserving visual quality.

Goals

  • Convert large numbers of images to BPG efficiently.
  • Preserve quality and metadata where needed.
  • Integrate conversion into existing build/deployment workflows.
  • Support cross-platform batch processing and error handling.

Prerequisites

  • BPGconv installed (download/build from its repository or binary).
  • Basic shell scripting knowledge (bash, PowerShell, or batch).
  • Optional: ImageMagick or ffmpeg for preprocessing (resize, format normalization), and a task runner (Make, npm scripts, or CI system).

Basic single-command usage

Convert a single image:

bpgconv -o output.bpg input.png

Common options:

  • -q <0-51> — quality (lower = smaller file; typical: 20–35).
  • -f — output format if supported.
  • -m — preserve metadata (if available).

Batch conversion using bash (Linux/macOS)

Create a script convert_batch.sh:

bash
#!/usr/bin/env bashset -euo pipefail INPUT_DIR=“./images”OUTPUT_DIR=“./bpg_output”QUALITY=28mkdir -p “\(OUTPUT_DIR" shopt -s nullglobfor src in "\)INPUT_DIR”/.{jpg,jpeg,png,tiff}; do base=\((basename "\)src”) name=“${base%.}” out=”\(OUTPUT_DIR/\){name}.bpg” if bpgconv -q “\(QUALITY" -o "\)out” “\(src"; then echo "Converted: \)src -> \(out" else echo "Failed: \)src” >&2 fidone

Make executable and run:

chmod +x convert_batch.sh./convert_batch.sh

Batch conversion using PowerShell (Windows)

Create Convert-Batch.ps1:

powershell
Param( [string]\(InputDir = ".\images", [string]\)OutputDir = “.\bpgoutput”, [int]\(Quality = 28) New-Item -ItemType Directory -Force -Path \)OutputDir | Out-Null Get-ChildItem -Path \(InputDir -Include.jpg,*.jpeg,*.png,*.tiff -File | ForEach-Object { \)src = $.FullName \(name = [System.IO.Path]::GetFileNameWithoutExtension(\)src) \(out = Join-Path \)OutputDir “\(name.bpg" \)cmd = “bpgconv -q \(Quality -o `"\)out"”\(src`"" \)res = cmd /c \(cmd if (\)LASTEXITCODE -eq 0) { Write-Output “Converted: \(src -> \)out” } else { Write-Error “Failed: \(src" }}</code></pre></div></div><p>Run:</p><div><div></div><div><div><button disabled="" title="Download file" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M8.375 0C8.72 0 9 .28 9 .625v9.366l2.933-2.933a.625.625 0 0 1 .884.884l-2.94 2.94c-.83.83-2.175.83-3.005 0l-2.939-2.94a.625.625 0 0 1 .884-.884L7.75 9.991V.625C7.75.28 8.03 0 8.375 0m-4.75 13.75a.625.625 0 1 0 0 1.25h9.75a.625.625 0 1 0 0-1.25z"></path></svg></button><button disabled="" title="Copy Code" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M11.049 5c.648 0 1.267.273 1.705.751l1.64 1.79.035.041c.368.42.571.961.571 1.521v4.585A2.31 2.31 0 0 1 12.688 16H8.311A2.31 2.31 0 0 1 6 13.688V7.312A2.31 2.31 0 0 1 8.313 5zM9.938-.125c.834 0 1.552.496 1.877 1.208a4 4 0 0 1 3.155 3.42c.082.652-.777.968-1.22.484a2.75 2.75 0 0 0-1.806-2.57A2.06 2.06 0 0 1 9.937 4H6.063a2.06 2.06 0 0 1-2.007-1.584A2.75 2.75 0 0 0 2.25 5v7a2.75 2.75 0 0 0 2.66 2.748q.054.17.123.334c.167.392-.09.937-.514.889l-.144-.02A4 4 0 0 1 1 12V5c0-1.93 1.367-3.54 3.185-3.917A2.06 2.06 0 0 1 6.063-.125zM8.312 6.25c-.586 0-1.062.476-1.062 1.063v6.375c0 .586.476 1.062 1.063 1.062h4.374c.587 0 1.063-.476 1.063-1.062V9.25h-1.875a1.125 1.125 0 0 1-1.125-1.125V6.25zM12 8h1.118L12 6.778zM6.063 1.125a.813.813 0 0 0 0 1.625h3.875a.813.813 0 0 0 0-1.625z"></path></svg></button></div></div><div><pre><code>powershell -ExecutionPolicy Bypass -File .\Convert-Batch.ps1</code></pre></div></div><h3>Preprocessing steps (optional)</h3><ul><li>Normalize formats with ImageMagick: resize, strip profiles, convert CMYK→RGB.</li><li>Example:</li></ul><div><div></div><div><div><button disabled="" title="Download file" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M8.375 0C8.72 0 9 .28 9 .625v9.366l2.933-2.933a.625.625 0 0 1 .884.884l-2.94 2.94c-.83.83-2.175.83-3.005 0l-2.939-2.94a.625.625 0 0 1 .884-.884L7.75 9.991V.625C7.75.28 8.03 0 8.375 0m-4.75 13.75a.625.625 0 1 0 0 1.25h9.75a.625.625 0 1 0 0-1.25z"></path></svg></button><button disabled="" title="Copy Code" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M11.049 5c.648 0 1.267.273 1.705.751l1.64 1.79.035.041c.368.42.571.961.571 1.521v4.585A2.31 2.31 0 0 1 12.688 16H8.311A2.31 2.31 0 0 1 6 13.688V7.312A2.31 2.31 0 0 1 8.313 5zM9.938-.125c.834 0 1.552.496 1.877 1.208a4 4 0 0 1 3.155 3.42c.082.652-.777.968-1.22.484a2.75 2.75 0 0 0-1.806-2.57A2.06 2.06 0 0 1 9.937 4H6.063a2.06 2.06 0 0 1-2.007-1.584A2.75 2.75 0 0 0 2.25 5v7a2.75 2.75 0 0 0 2.66 2.748q.054.17.123.334c.167.392-.09.937-.514.889l-.144-.02A4 4 0 0 1 1 12V5c0-1.93 1.367-3.54 3.185-3.917A2.06 2.06 0 0 1 6.063-.125zM8.312 6.25c-.586 0-1.062.476-1.062 1.063v6.375c0 .586.476 1.062 1.063 1.062h4.374c.587 0 1.063-.476 1.063-1.062V9.25h-1.875a1.125 1.125 0 0 1-1.125-1.125V6.25zM12 8h1.118L12 6.778zM6.063 1.125a.813.813 0 0 0 0 1.625h3.875a.813.813 0 0 0 0-1.625z"></path></svg></button></div></div><div><pre><code>magick convert input.jpg -resize 1920x1080\> -strip -colorspace sRGB tmp.pngbpgconv -q 28 -o output.bpg tmp.pngrm tmp.png</code></pre></div></div><h3>Parallel processing for speed</h3><ul><li>GNU Parallel:</li></ul><div><div></div><div><div><button disabled="" title="Download file" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M8.375 0C8.72 0 9 .28 9 .625v9.366l2.933-2.933a.625.625 0 0 1 .884.884l-2.94 2.94c-.83.83-2.175.83-3.005 0l-2.939-2.94a.625.625 0 0 1 .884-.884L7.75 9.991V.625C7.75.28 8.03 0 8.375 0m-4.75 13.75a.625.625 0 1 0 0 1.25h9.75a.625.625 0 1 0 0-1.25z"></path></svg></button><button disabled="" title="Copy Code" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M11.049 5c.648 0 1.267.273 1.705.751l1.64 1.79.035.041c.368.42.571.961.571 1.521v4.585A2.31 2.31 0 0 1 12.688 16H8.311A2.31 2.31 0 0 1 6 13.688V7.312A2.31 2.31 0 0 1 8.313 5zM9.938-.125c.834 0 1.552.496 1.877 1.208a4 4 0 0 1 3.155 3.42c.082.652-.777.968-1.22.484a2.75 2.75 0 0 0-1.806-2.57A2.06 2.06 0 0 1 9.937 4H6.063a2.06 2.06 0 0 1-2.007-1.584A2.75 2.75 0 0 0 2.25 5v7a2.75 2.75 0 0 0 2.66 2.748q.054.17.123.334c.167.392-.09.937-.514.889l-.144-.02A4 4 0 0 1 1 12V5c0-1.93 1.367-3.54 3.185-3.917A2.06 2.06 0 0 1 6.063-.125zM8.312 6.25c-.586 0-1.062.476-1.062 1.063v6.375c0 .586.476 1.062 1.063 1.062h4.374c.587 0 1.063-.476 1.063-1.062V9.25h-1.875a1.125 1.125 0 0 1-1.125-1.125V6.25zM12 8h1.118L12 6.778zM6.063 1.125a.813.813 0 0 0 0 1.625h3.875a.813.813 0 0 0 0-1.625z"></path></svg></button></div></div><div><pre><code>ls images/*.{jpg,jpeg,png} | parallel -j 8 'bpgconv -q 28 -o bpg_output/{/.}.bpg {}'</code></pre></div></div><ul><li>xargs:</li></ul><div><div></div><div><div><button disabled="" title="Download file" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M8.375 0C8.72 0 9 .28 9 .625v9.366l2.933-2.933a.625.625 0 0 1 .884.884l-2.94 2.94c-.83.83-2.175.83-3.005 0l-2.939-2.94a.625.625 0 0 1 .884-.884L7.75 9.991V.625C7.75.28 8.03 0 8.375 0m-4.75 13.75a.625.625 0 1 0 0 1.25h9.75a.625.625 0 1 0 0-1.25z"></path></svg></button><button disabled="" title="Copy Code" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M11.049 5c.648 0 1.267.273 1.705.751l1.64 1.79.035.041c.368.42.571.961.571 1.521v4.585A2.31 2.31 0 0 1 12.688 16H8.311A2.31 2.31 0 0 1 6 13.688V7.312A2.31 2.31 0 0 1 8.313 5zM9.938-.125c.834 0 1.552.496 1.877 1.208a4 4 0 0 1 3.155 3.42c.082.652-.777.968-1.22.484a2.75 2.75 0 0 0-1.806-2.57A2.06 2.06 0 0 1 9.937 4H6.063a2.06 2.06 0 0 1-2.007-1.584A2.75 2.75 0 0 0 2.25 5v7a2.75 2.75 0 0 0 2.66 2.748q.054.17.123.334c.167.392-.09.937-.514.889l-.144-.02A4 4 0 0 1 1 12V5c0-1.93 1.367-3.54 3.185-3.917A2.06 2.06 0 0 1 6.063-.125zM8.312 6.25c-.586 0-1.062.476-1.062 1.063v6.375c0 .586.476 1.062 1.063 1.062h4.374c.587 0 1.063-.476 1.063-1.062V9.25h-1.875a1.125 1.125 0 0 1-1.125-1.125V6.25zM12 8h1.118L12 6.778zM6.063 1.125a.813.813 0 0 0 0 1.625h3.875a.813.813 0 0 0 0-1.625z"></path></svg></button></div></div><div><pre><code>find images -type f \( -iname "*.jpg" -o -iname "*.png" \) -print0 | xargs -0 -n1 -P8 -I{} bpgconv -q 28 -o bpg_output/\)(basename {} .jpg).bpg {}

Integrating into CI/CD

  • Add conversion step to build pipeline (GitHub Actions example):
yaml
- name: Convert images to BPG run: | sudo apt-get install -y bpgconv ./convert_batch.sh
  • Cache output artifacts or upload to CDN/storage.

Error handling & logging

  • Log successes/failures to a file.
  • Retry transient failures.
  • Validate outputs (check file exists and size > 0).

Quality and size tuning

  • Test several -q values on representative images; measure SSIM/PSNR vs. file size.
  • Typical starting point: quality 24–32. Lower for thumbnails, higher for photography.

Metadata and licensing

  • Preserve EXIF/IPTC when needed using -m or by copying metadata via Image

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts