PB Image Compressor — hoe het werkt
De PB Image Compressor is een tool die we hebben gebouwd om grote beelden snel en gecontroleerd web-klaar te maken. Geen magie, geen shortcuts — gewoon een solide technische setup die doet wat ’ie moet doen. Hieronder leggen we uit hoe hij in elkaar zit en waarom we deze keuzes hebben gemaakt.
De technologie
Sharp.js — het hart van de compressor
Voor beeldverwerking gebruiken we Sharp, een snelle Node.js library gebaseerd op libvips. In de praktijk is dit meerdere keren sneller dan ImageMagick of GraphicsMagick, en vooral veel efficiënter met geheugen.
Sharp ondersteunt onder andere JPEG, PNG, WebP, AVIF en TIFF, en biedt alles wat je nodig hebt: resizen, croppen, roteren, verscherpen, blurren.
Waarom Sharp:
Snel — C++ core met Node.js bindings
Geheugenefficiënt — werkt met streams, geen zware buffers
Volledig — één API voor alle bewerkingen
mozJPEG — betere JPEG’s, kleiner bestand
Voor JPEG-output gebruiken we mozJPEG, de encoder van Mozilla. Die levert gemiddeld 10–15% kleinere bestanden op bij dezelfde visuele kwaliteit.
Onze standaardinstellingen:
{
quality: 85,
mozjpeg: true,
chromaSubsampling: '4:4:4',
trellisQuantisation: true,
overshootDeringing: true
}
Kort gezegd: maximale kleurinformatie, minimale artifacts, zonder zichtbaar kwaliteitsverlies.
Backend architectuur
Express API
De compressie draait via één POST-endpoint:
/api/image-compressor/compress
De flow is simpel en bewust lineair:
Multer ontvangt de upload (multipart/form-data)
Validatie checkt type en grootte (max. 15 MB)
Sharp verwerkt het beeld volledig in geheugen
Response stuurt de gecomprimeerde data terug
Alles in-memory
Belangrijk ontwerpbesluit: we schrijven nooit bestanden weg naar disk.
const inputBuffer = req.file.buffer;
const outputBuffer = await sharp(inputBuffer)
.jpeg({ quality: 85, mozjpeg: true })
.toBuffer();
Voordelen:
Privacy — niets blijft achter op de server
Snelheid — geen disk I/O
Schaalbaar — geen cleanup, geen tijdelijke opslag
Frontend
React + TypeScript
De frontend is gebouwd met React 18 en TypeScript. Geen over-engineering, wel type-veilig en voorspelbaar.
Drag & drop
Native HTML5 drag & drop, rechtstreeks gekoppeld aan de workflow:
const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (validateFile(file)) {
compressAndDownload(file);
}
};
Upload = start. Geen extra knoppen, geen stappen ertussen.
Volledig automatische flow
Upload start automatisch de compressie
Na validatie loopt alles door
Download begint vanzelf
Visuele feedback laat zien wanneer het klaar is
Zo min mogelijk nadenken, zo veel mogelijk doorwerken.
Live systeemlogs
Tijdens het proces tonen we real-time logs, zodat zichtbaar is wat er gebeurt:
const addLog = (message: string) => {
setDisplayedLogs(prev => [...prev, > ${message}]);
};
Transparant en handig bij testen of debuggen.
Data fetching met TanStack Query
Configuratie en server state lopen via TanStack Query:
useQuery({
queryKey: ["/api/image-compressor/config"],
staleTime: 1000 * 60 * 5
});
Slim gecached, weinig requests, stabiel gedrag.
CMS & configuratie
Database (Drizzle + PostgreSQL)
Instellingen worden opgeslagen in PostgreSQL via Drizzle ORM:
export const imageCompressorConfig = pgTable(
"image_compressor_config",
{
id: varchar("id").primaryKey(),
title: varchar("title", { length: 255 }),
description: text("description"),
maxFileSizeMb: integer("max_file_size_mb").default(15)
}
);
CMS-pagina
Via /cms/image-compressor kunnen labels, teksten en limieten aangepast worden. Opslaan = direct live. Geen deploy nodig.
Theming
Dark / light mode
De tool volgt het globale PB-thema en ondersteunt dark en light mode:
function getColors(isLight: boolean) {
return {
bg: isLight ? '#fdfcfb' : '#050505',
surface: isLight ? '#f4f2ef' : 'rgba(23,23,23,0.3)',
text: isLight ? '#1a1a1a' : '#e5e5e5'
};
}
Consistent, rustig, geen losse stijlen.
Performance
In productie zien we stabiel:
93–95% kleinere bestanden
< 2 seconden verwerking tot ±10 MB
Geen zichtbaar kwaliteitsverlies
Precies wat we wilden.
Tot slot
De PB Image Compressor is geen gimmick, maar een degelijke tool gebouwd op bewezen technologie. Sharp en mozJPEG doen het zware werk, React en TypeScript houden de frontend strak, en het in-memory ontwerp zorgt voor snelheid en privacy.
Wil je ’m proberen:
/image-compressor
Zonder uitleg nodig. Upload → klaar.
X Peet
