Optimizacija slika u pregledniku

jamit-image-optimizer

Frameworkski nezavisna i potpuno tipizirana biblioteka za optimizaciju slika prije uploada iz preglednika. Slike se lokalno skaliraju, kompresuju i konvertuju prije nego što stignu do same upload pipeline.

Zasnovano na browser File objektima, Web Workerima i WebAssemblyju, uz podršku za mješovite batch-eve datoteka, kontrolisanu paralelnu obradu, optimizaciju prema ciljanoj veličini i detaljne metapodatke obrade.

Pogledaj na npm-u Pogledaj na GitHubu Isprobaj demo

Zašto postoji

Optimizuj slike prije nego što upload počne

Velike slike povećavaju vrijeme uploada, potrošnju bandwidtha i potreban prostor za pohranu. jamit-image-optimizer dodaje poseban sloj za obradu slika ispred postojećeg upload procesa, bez preuzimanja kontrole nad samim uploadom.

Paket prima obične browser File objekte i vraća iste takve File objekte. Zbog toga ostaje kompatibilan sa FormData, signed URL-ovima, multipart uploadima i vlastitim backend API-jima.

File-to-File obrada

Browser File se proslijedi optimizeru i kao rezultat se dobije novi browser File koji se može direktno koristiti u postojećem upload procesu.

Lokalna obrada

Slike se dekodiraju, skaliraju i enkodiraju direktno u pregledniku. Sam paket ne šalje datoteke na eksterni servis.

Web Workeri

Zahtjevna obrada slika izvršava se izvan glavnog UI threada kako bi aplikacija ostala responzivna tokom optimizacije.

WebAssembly kodeci

JPEG, PNG i WebP obrada koristi browser-kompatibilne WebAssembly kodeke koji su uključeni u worker build paketa.

Mješoviti batch-evi datoteka

Slike i druge vrste datoteka mogu se obrađivati zajedno, dok se originalni redoslijed odabranih datoteka zadržava.

Optimizacija prema ciljanoj veličini

Za JPEG i WebP izlaz optimizer može tražiti odgovarajući nivo kvaliteta kada je potrebno približiti se određenoj ciljanoj veličini datoteke.

Kontrolisana paralelna obrada

Batch obrada ograničava broj aktivnih image workera kako bi se izbjeglo nepotrebno opterećenje procesora i memorije.

Prekid i status eventi

AbortSignal podrška i lifecycle callbackovi omogućavaju prekid aktivne obrade i prikaz korisnih statusa unutar korisničkog interfejsa.

Detaljni rezultati

Svaka obrada vraća metapodatke o originalu i rezultatu, uštedu veličine, podatke o kompresiji i vrijeme obrade.

Select files

Drop files here

Images are optimized locally. Other file types can remain unchanged in the same batch.

Choose files JPEG · PNG · WebP · native HEIC / HEIF where supported

Optimization settings

Output mode Auto keeps a converted output only when beneficial. Output format Used only in Format mode. Quality JPEG / WebP quality in percent. Target size

KiB

Clear the value to disable target-size optimization. Minimum quality Lower quality limit for target-size search. Max width

Leave empty to disable the width limit. Max height

Aspect ratio is preserved. Concurrency Maximum parallel image-processing jobs.

Klasifikacija

Ulaz se klasifikuje kao podržana slika, nepodržana slika ili passthrough datoteka koristeći MIME informacije i potpise datoteka gdje je to primjenjivo.

Dekodiranje

Podržane slike dekodiraju se unutar workera odgovarajućim kodekom ili putem nativnih browser funkcija.

Skaliranje

Opcionalna maksimalna širina i visina primjenjuju se uz zadržavanje omjera stranica i bez nepotrebnog povećavanja slike.

Enkodiranje

Slika se enkodira prema konfigurisanom output modu, formatu, kvalitetu i opcionoj strategiji ciljane veličine.

Finalizacija

Optimizer odlučuje da li generisani rezultat treba zamijeniti original i vraća finalni File zajedno sa detaljnim metapodacima.

pnpm

pnpm add jamit-image-optimizer

npm

npm install jamit-image-optimizer

Objavljeni paket ne zahtijeva dodatne runtime dependencies u aplikaciji koja ga koristi. Kodeci koje worker koristi već su uključeni u build paketa.

import { optimizeImage } from 'jamit-image-optimizer';

const result = await optimizeImage(file, {
  mode: 'auto',
  quality: 0.85,
  resize: {
    maxWidth: 1920,
    maxHeight: 1920,
  },
});

console.log(result.file);
console.log(result.savings.percent);

Nezavisno od uploada

Zadrži postojeću upload implementaciju

Optimizer sam ne šalje datoteke. Vraćeni File možeš koristiti sa FormData, fetch, Axios, signed URL-ovima, multipart uploadima ili vlastitom backend integracijom.

const result = await optimizeImage(file, {
  mode: 'auto',
});

const formData = new FormData();

formData.append('file', result.file);

await fetch('/upload', {
  method: 'POST',
  body: formData,
});

import { processFiles } from 'jamit-image-optimizer';

const result = await processFiles(files, {
  mode: 'auto',
  quality: 0.85,
  resize: {
    maxWidth: 1920,
    maxHeight: 1920,
  },
  concurrency: 2,
});

await uploadFiles(result.files);

const result = await processFiles([
  photo,
  contractPdf,
  screenshot,
  video,
]);

for (const item of result.items) {
  console.log({
    name: item.originalFile.name,
    kind: item.kind,
    outcome: item.outcome,
  });
}

original

Zadrži originalni format

Optimizer zadržava izvorni format kada je za taj format dostupan encoder i primjenjuje resize ili kompresiju bez namjerne konverzije formata.

const result = await optimizeImage(file, {
  mode: 'original',
  quality: 0.8,
});

format

Zahtijevaj određeni format

Odaberi JPEG, PNG ili WebP kada aplikacija treba tačno određeni izlazni format umjesto zadržavanja originalnog formata.

const result = await optimizeImage(file, {
  mode: 'format',
  format: 'webp',
  quality: 0.85,
});

auto

Automatski odaberi korisniji rezultat

Auto mod provjerava WebP kao kandidata za optimizaciju i koristi ga samo kada generisani rezultat zaista donosi korist.

const result = await optimizeImage(file, {
  mode: 'auto',
  quality: 0.85,
});

Skaliraj bez promjene omjera stranica

Može se definisati maksimalna širina, maksimalna visina ili oboje. Slika se smanjuje unutar zadatih granica bez namjernog upscalinga.

const result = await optimizeImage(file, {
  resize: {
    maxWidth: 1920,
    maxHeight: 1920,
  },
});

Optimizuj prema ciljanoj veličini

Kod izlaznih formata zasnovanih na kvalitetu optimizer može koristiti ograničenu pretragu kvaliteta kako bi se približio željenoj veličini datoteke uz poštovanje definisanog minimalnog kvaliteta.

const result = await optimizeImage(file, {
  quality: 0.9,
  targetSize: 500 * 1024,
  minQuality: 0.5,
});

console.log(result.compression.targetReached);

Prati faze obrade

Lifecycle statusi poput dekodiranja, skaliranja, enkodiranja i finalizacije mogu se koristiti za prikaz smislenih stanja obrade u korisničkom interfejsu.

await optimizeImage(file, {
  onStatus(status) {
    console.log(status.stage);
  },
});

Prekini aktivnu obradu

AbortSignal omogućava zaustavljanje aktivne obrade. Aktivni workeri se prekidaju umjesto da nepotrebno nastave raditi u pozadini.

const controller = new AbortController();

const promise = processFiles(files, {
  concurrency: 2,
  signal: controller.signal,
});

controller.abort();

await promise;

HEIC / HEIF

Koristi nativno dekodiranje kada ga preglednik podržava

Podrška za HEIC i HEIF ulaz namjerno se oslanja na nativne mogućnosti dekodiranja preglednika i operativnog sistema. Paket ne uključuje vlastiti HEVC decoder.

Ako okruženje može dekodirati datoteku, ona se može konvertovati u podržani izlazni format kao što su WebP, JPEG ili PNG. Ako nativno dekodiranje nije dostupno, paket prijavljuje nepodržani codec path umjesto da simulira uspješnu obradu.

Zaštita resursa

Definiši jasna ograničenja obrade

Kompresovane slike nakon dekodiranja mogu zahtijevati znatno više memorije. Podesivi limiti za veličinu ulazne datoteke, broj piksela i dimenzije pomažu u sprečavanju neočekivano zahtjevne obrade u pregledniku.

const result = await optimizeImage(file, {
  limits: {
    maxInputBytes: 20 * 1024 * 1024,
    maxPixels: 12_000_000,
    maxDimension: 8192,
  },
});

Tipizirane greške

Obradi greške pomoću stabilnih error kodova

ImageOptimizerError pruža tipizirane error kodove za situacije kao što su neispravne opcije, nedostupni kodeci, nepodržani izlazni formati, prekoračenje resource limita, worker greške i prekinute operacije.

import {
  isImageOptimizerError,
  optimizeImage,
} from 'jamit-image-optimizer';

try {
  await optimizeImage(file);
} catch (error) {
  if (isImageOptimizerError(error)) {
    console.error(error.code);
    console.error(error.message);
  }
}

Frameworkski nezavisan

Koristi isti core u različitim frontend stackovima

Javni API je običan TypeScript i radi sa browser File objektima. Vue, Nuxt, React, Next.js, Svelte i Vanilla TypeScript aplikacije mogu koristiti isti paket bez framework-specifičnog adaptera.

Vanilla TypeScript
Vue
Nuxt
React
Next.js
Svelte

Lokalno po dizajnu

Optimizer ne uploaduje tvoje slike

Obrada slika odvija se lokalno u pregledniku sve dok aplikacija sama ne odluči šta će uraditi sa vraćenim File objektom.

jamit-image-optimizer ne šalje slike, nazive datoteka, metapodatke optimizacije niti telemetriju obrade na JamIT servis. Upload i analytics infrastruktura same aplikacije ostaju potpuno odvojeni od paketa.

File API
Web Workers
WebAssembly
JPEG / PNG / WebP
Native HEIC / HEIF where available

Status paketa

Objavljeno i spremno za integraciju

Prva javna verzija uključuje optimizaciju pojedinačnih slika, obradu mješovitih batch-eva datoteka, JPEG, PNG i WebP kodeke, resize i kontrolu kvaliteta, optimizaciju prema ciljanoj veličini, nativno HEIC/HEIF dekodiranje gdje je dostupno, kontrolisanu paralelnu obradu, Abort podršku i detaljne metapodatke rezultata.

Paket je objavljen na npm-u, a izvorni kod, testovi i razvojni playground dostupni su javno na GitHubu.

Objavljeno

Open Source

Pogledaj izvorni kod na GitHubu

Pregledaj implementaciju, browser testove, worker pipeline i javni API ili prijavi problem direktno u repozitoriju.

Otvori GitHub repozitorij