Image Converter Web App

Tautan Web App

Web App: https://image-converter-web-app-project.leonardwalujan.eu.org/

Tautan Repositori

GitHub: https://github.com/walujanle/image-converter-web-app

GitLab: https://gitlab.com/walujanle/image-converter-web-app

Tautan Unduh

Build File: https://links.leonardwalujan.eu.org/lw/image-converter-web-app-latest-build-file

Checksum Build File (SHA-256): https://links.leonardwalujan.eu.org/lw/image-converter-web-app-latest-build-file-checksum

Kode Sumber: https://links.leonardwalujan.eu.org/lw/image-converter-web-app-latest-source-code

Screenshot

1. 

2. 

3. 

4. 

Penjelasan Singkat

Image Converter Web App adalah aplikasi konversi gambar berbasis browser untuk memproses gambar dalam batch. Aplikasi ini memungkinkan pengguna memilih file gambar, mengatur opsi konversi, menjalankan proses konversi di browser, dan mengunduh hasilnya tanpa mengirim gambar ke upload API.

Pemrosesan gambarnya ditangani oleh package npm @walujanle/image-converter-wasm. Web app ini menjadi frontend host untuk package tersebut: menyediakan UI React, mode Simple dan Advanced, pengelolaan queue, orkestrasi worker, penyimpanan settings, preset, download, ZIP packaging, dan cache asset production.

Input yang didukung saat ini adalah JPEG, PNG, WebP, AVIF, HEIC, dan HEIF. Output yang tersedia adalah JPEG, PNG, WebP, dan AVIF. HEIC/HEIF hanya didukung sebagai input karena engine Rust/WASM saat ini tidak menyediakan encoding output HEIC.

Alasan Saya Membuat Project Ini

Saya membuat project ini untuk menerapkan workflow konversi gambar berbasis web yang pemrosesannya tetap berjalan lokal di perangkat pengguna sendiri. Bagian pentingnya bukan hanya membuat form dengan tombol convert, tetapi membuktikan bahwa frontend app dapat memanggil package npm Rust/WebAssembly buatan saya sendiri sambil tetap mengatur file handling, queue, settings, dan download di browser.

Project ini juga menjadi konsumen nyata untuk package WASM saya. Package tersebut menyediakan conversion engine, sedangkan web app ini memperlihatkan bagaimana engine itu digunakan dalam frontend sungguhan: file dipilih melalui browser, pekerjaan dikirim ke Web Worker, opsi konversi dipetakan ke API package, lalu output dikembalikan sebagai Blob yang bisa diunduh.

Saya ingin converter ini cukup fleksibel untuk dipakai dalam workflow nyata. Pengguna dapat mengatur format output, kualitas, mode lossless WebP, optimasi PNG, resize, crop, pelestarian metadata, aturan nama file, auto suffix, batch size, concurrency, preset, dan dataset list generation. Tujuannya bukan membuat layanan online converter berbasis server, tetapi membuat web app local-first yang memberi kontrol hasil konversi kepada pengguna.

Tech Stack yang Digunakan

• React 19 untuk antarmuka aplikasi.
• TypeScript 5.8 untuk kode aplikasi.
• Vite 8 untuk development dan production build.
• Bun untuk script dan package management.
• Zustand untuk state aplikasi yang terpisah per mode.
• Tailwind CSS 4 untuk styling.
• Web Workers untuk menjalankan konversi di luar main UI thread.
• @walujanle/image-converter-wasm untuk decode, crop, resize, encode, metadata handling, dan output dimensions.
• JSZip untuk ZIP download packaging.
• Generated service worker untuk production asset cache.
• Biome untuk linting.
• Vitest untuk testing.

Repository web app ini memakai lisensi AGPL-3.0-only, selaras dengan package WASM yang dikirim ke runtime browser.

Fitur

Konversi batch yang local-first

Pengguna dapat menambahkan gambar ke queue dan mengonversinya dalam batch. Source repository ini tidak menyediakan upload API, dan alur konversinya dirancang untuk file lokal browser dan download melalui browser.

Format yang didukung

Input yang didukung adalah JPEG, PNG, WebP, AVIF, HEIC, dan HEIF. Output yang didukung adalah JPEG, PNG, WebP, dan AVIF. GIF, BMP, TIFF, dan RAW belum menjadi bagian dari kontrak web app saat ini.

Simple dan Advanced mode

Simple mode berfokus pada opsi umum: format output, preset kualitas untuk format lossy, optimasi PNG, queue, conversion, cancellation, dan download.

Advanced mode membuka panel konversi penuh, image queue, batch actions, dan preset manager. Mode ini memuat resize, crop, transformasi nama file, auto suffix, dataset list generation, batch size, dan kontrol output yang lebih detail.

State terpisah per mode

Simple mode dan Advanced mode memiliki queue dan persisted settings masing-masing. Perpindahan mode tidak memakai queue yang sama secara tidak sengaja.

Konversi berbasis worker

Aplikasi memakai worker pool. Job konversi dikirim ke dedicated Web Worker, lalu worker tersebut memanggil @walujanle/image-converter-wasm. Ini menjaga pekerjaan berat konversi agar tidak berjalan langsung di main UI thread.

Background engine warmup

Setelah halaman dimuat, aplikasi melakukan warmup converter worker agar WASM engine lebih siap sebelum konversi pertama. UI menampilkan toast kecil untuk status warmup/cache, dan konversi tetap dapat melakukan initialization on demand jika warmup background gagal.

Production asset cache

Production build menghasilkan service worker. Service worker ini melakukan precache untuk JavaScript, CSS, worker, dan WASM asset yang sudah memiliki hash, lalu menghapus cache lama ketika nama file build berubah. Tujuannya adalah membuat kunjungan berikutnya lebih cepat tanpa hardcode versi cache manual.

Memory guard

Sebelum konversi, aplikasi memperkirakan penggunaan memori browser. File yang terlihat tidak aman untuk memori browser akan ditolak sebelum masuk ke worker conversion. Batas ukuran file saat ini adalah 256 MB, dan input resize dibatasi sampai 7680 px.

Filename dan dataset output

Aplikasi dapat membersihkan nama output, mengganti extension, menambahkan prefix, menjalankan find/replace, menghindari tabrakan nama file, dan menambahkan auto suffix berdasarkan dimensi output serta kualitas. Dataset list generation membuat dataset_log.txt; ketika fitur ini aktif, download non-individual akan dipaketkan sebagai ZIP agar file log ikut terunduh bersama gambar.

Presets

Pengguna dapat menyimpan, menerapkan, mengimpor, dan mengekspor preset konversi. Preset import divalidasi sebelum settings diterima.

Metadata preservation

Pelestarian metadata bersifat opt-in melalui app settings. Ketika aktif, opsi tersebut diteruskan ke package WASM. Cakupannya bergantung pada format output, dan metadata AVIF lebih terbatas dibanding JPEG, PNG, dan WebP.

Cara Kerja

Aplikasi dimulai dengan membuat WorkerPool. Request warmup background menginisialisasi satu converter worker dan memanggil fungsi init() dari package WASM. Pada production, aplikasi juga mendaftarkan generated service worker untuk app cache.

Ketika pengguna memilih file, aplikasi memvalidasi ukuran file, declared MIME type, binary signature, dan brand ISO BMFF untuk AVIF serta HEIC/HEIF. Aplikasi tidak hanya percaya pada extension filename atau File.type dari browser.

Saat konversi dimulai, useConverter() mengambil snapshot dari mode aktif, queue aktif, dan settings aktif. Hook ini membangun nama output, memeriksa estimasi memori, lalu mengirim pekerjaan ke concurrency queue. Worker pool membuat conversion worker secara dinamis sampai batas yang dikonfigurasi.

Setiap worker menerima byte file dan settings konversi. Worker memetakan settings web app ke bentuk public options milik @walujanle/image-converter-wasm, lalu memanggil convertImageWithInfo(...). Package WASM menangani decode gambar, optional crop, optional resize, encoding, metadata handling, dan dimensi output akhir.

Ketika konversi selesai, worker mengembalikan Blob, dimensi, format output, dan durasi. UI menyimpannya sebagai converted artifact. Pengguna dapat mengunduh file individual langsung dari queue, mengunduh file yang sudah selesai, atau mengunduh ZIP ketika ada banyak output atau ketika dataset list generation aktif.

Cancellation dibuat defensif. Task yang masih berada di queue dapat dibatalkan sebelum mulai, active worker work dijaga agar tidak menulis update UI yang sudah stale, dan worker dapat di-restart setelah cancellation atau warmup timeout.

Catatan Privasi dan Keamanan

Aplikasi ini dirancang sebagai frontend local-first. Repository ini tidak memiliki upload API, cookies, atau first-party analytics code. File dipilih dari sesi browser pengguna, diproses melalui browser worker, lalu diunduh kembali melalui Blob URL.

Validasi tetap penting karena pemrosesan lokal tetap bisa terganggu oleh file yang malformed atau terlalu besar. Aplikasi memeriksa accepted MIME type, content signature, ISO BMFF brand, ukuran file, crop settings, resize settings, batch size, ukuran preset import, dan settings lain sebelum menerima pekerjaan.

Metadata diperlakukan hati-hati karena EXIF, XMP, IPTC, dan ICC dapat berisi lokasi GPS, informasi kamera, nama author, timestamp, dan editing history. Metadata preservation dimatikan secara default dan harus diaktifkan sendiri oleh pengguna.

File production headers menyertakan security dan caching headers untuk host yang mendukung static _headers, termasuk HSTS, Referrer-Policy, Permissions-Policy, nosniff, frame denial, COOP, COEP, CORP, immutable asset caching, dan no-store untuk file service worker.

Catatan Build dan Development

Repository ini adalah aplikasi web, bukan package npm. Aplikasi ini memakai package npm @walujanle/image-converter-wasm sebagai runtime dependency.

Command development yang umum:

bun install
bun run dev
bun run lint
bun run typecheck
bun run test
bun run test:coverage
bun run audit
bun run build

Source project mendokumentasikan state stable terbaru sebagai 1.0.3 - Stable Version. Baseline validasi terbaru yang tercatat di repository adalah 21 test file dan 276 test passing, dengan lint, typecheck, coverage, audit, dan production build juga passing.

Batasan

• Konversi dibatasi oleh memori browser, sehingga file besar dapat ditolak sebelum konversi.
• Separate chunked streaming conversion dinonaktifkan; konversi memakai worker pipeline setelah memory check.
• HEIC/HEIF hanya input. Output HEIC tidak tersedia.
• GIF, BMP, TIFF, dan RAW belum menjadi bagian dari kontrak input web app saat ini.
• Output AVIF memiliki metadata preservation yang lebih terbatas dibanding JPEG, PNG, dan WebP.
• Resize controls tersedia di Advanced mode dan batas maksimal input resize adalah 7680 px.
• Dataset numbering hanya berlaku pada generated dataset list file, bukan pada nama file output individual.
• Full WCAG conformance masih membutuhkan manual assistive technology testing dan accessibility check eksternal di luar test suite saat ini.
• Legal compliance dan sertifikasi keamanan production bergantung pada deployment serta operational controls, bukan hanya source code.

Lisensi

Image Converter Web App dirilis dengan lisensi AGPL-3.0-only.

Aplikasi ini mendistribusikan dan menjalankan @walujanle/image-converter-wasm di browser, dan engine package tersebut juga berlisensi AGPL-3.0-only. Lisensi yang sama menjaga web app dan runtime WASM yang dikirim ke browser tetap selaras.