Změnit velikost obrázků _

Jak funguje změna velikosti obrázků v prohlížeči

Každá změna velikosti je krátký pipeline běžící zcela v JavaScriptu. Není stažena žádná codec knihovna a není zapojen žádný server. Vlastní Canvas API prohlížeče dekóduje soubor, překreslí jej v cílové velikosti a překóduje v paměti, pak vám předá Blob, který stránka může zobrazit nebo zabalit do ZIP. Protože každý krok žije uvnitř sandboxu záložky, původní soubory se nikdy nedostanou do sítě.

1. Načte každý nahraný soubor jako Blob a vytvoří objektové URL, aby jej prohlížeč mohl dekódovat lokálně, aniž by kopíroval bajty na server nebo na disk.
2. Spočítá cílové rozměry podle zvoleného režimu — limit nejdelší strany, přesná šířka a výška nebo procentuální měřítko. Zámek poměru stran udržuje proporce správné, když upravujete jediné pole.
3. Vytvoří offscreen Canvas v cílové velikosti a zavolá ctx.drawImage(source, 0, 0, width, height) pro překreslení dekódovaných pixelů. Prohlížeč zpracuje interpolaci, která vyhladí škálovaný výsledek.
4. Zavolá canvas.toBlob pro překódování do zdrojového formátu. PNG zůstává bezztrátový, JPEG a WebP se překódují ve vysoké kvalitě. Poté stránka zobrazí kartu před/po a nabídne stažení jednotlivého obrázku nebo jediný ZIP sestavený v paměti pomocí fflate.

Proč měnit velikost obrázků?

• Předimenzované obrázky jsou nejčastější příčinou pomalých stránek. Telefonní fotografie 4000×3000 vložená přímo do layoutu širokého 600 pixelů posílá zhruba 40krát více pixelů, než obrazovka dokáže zobrazit. Omezení nejdelší strany na 1600 px před nahráním výrazně snižuje váhu stránky a zlepšuje Core Web Vitals LCP.
• Nahrávací formuláře vynucují přísné rozměry. Avatary, portály pro ID fotografie, výpisy na tržištích a OG sociální karty vyžadují konkrétní velikosti: 1200×630 pro Open Graph náhled, 512×512 pro ikonu aplikace, 150×150 pro náhled. Trefte číslo přesně a přeskočíte cyklus odmítnutých nahrání.
• E-mailové a chatovací nástroje tiše rekomprimují cokoli velkého, což může zničit čistý screenshot. Změna velikosti na rozumnou šířku vlastními silami udržuje výsledek předvídatelný místo přenechání cizímu ztrátovému pipeline.
• Konzistence dávky je důležitá pro galerie a katalogy. Prohnání složky fotek smíšených velikostí jediným cílem 800×800 znamená, že každá karta sedí v mřížce, bez jediného obřího obrázku rozbíjejícího layout.

Běžná použití

Změna velikosti přichází na řadu, kdykoli zdrojové rozměry a očekávání cíle nesouhlasí. Tři vzorce se objevují znovu a znovu.

• Příprava produktových fotografií pro Shopify nebo WooCommerce. Složka 4000 pixelových originálů z foťáku se omezí na 1600 px nejdelší strany, aby storefront načítal rychle, zatímco poměr stran zůstává nedotčen, takže nic nevypadá nataženě.
• Generování sociálních a aplikovaných assetů z jednoho master souboru. Nastavte přesných 1200×630 pro Open Graph kartu, pak 512×512 pro ikonu aplikace, exportujte každé několika kliknutími bez otevírání těžkého editoru.
• Zmenšení dávky QA nebo support screenshotů před připojením k ticketu. Škálování složky 50 snímků na 50 % typicky zmenší velikost archivu zhruba o tři čtvrtiny, než putuje do bug trackeru.

Příklad: 4000 px fotografie na 1600 px webový obrázek

4000×3000 fotografie rovnou z telefonu je běžný soubor, který je mnohem větší, než jakýkoli webový layout potřebuje. Je to spravedlivý benchmark úspor při změně velikosti.

Přetáhněte fotografii do nahrávací zóny, ponechte režim na Omezit nejdelší stranu a nastavte hodnotu na 1600. Canvas pipeline překreslí obrázek v 1600×1200 se zachovaným poměrem stran, pak jej překóduje v původním formátu. Výstupní karta zobrazí nové rozměry a velikost souboru, která u typického JPEG klesne z několika megabajtů na pár set kilobajtů. Klikněte na Stáhnout na kartě pro stažení jednoho souboru nebo klikněte na Stáhnout .zip, pokud jste měnili velikost několika obrázků najednou. Celý proces od přetažení po stažení trvá zlomek vteřiny a nespotřebovává žádnou šířku pásma po načtení stránky.

Jaké režimy změny velikosti jsou k dispozici?

Tři. Omezit nejdelší stranu omezí delší z šířky nebo výšky na pixelovou hodnotu a škáluje druhou stranu, což je bezpečný výchozí režim, protože nikdy nedeformuje. Přesná šířka × výška umožňuje zadat obě čísla se zámkem poměru stran, který přepočítá druhé pole z poměru zdroje při úpravě prvního — zámek vypněte, když formulář vyžaduje přesnou neproporcionální velikost. Škálovat podle procent násobí oba rozměry jediným faktorem, užitečné pro půlení nebo zdvojnásobení celé dávky najednou. Šest předvoleb jedním kliknutím (1920×1080 až po 150×150 náhled) pokrývá nejběžnější cíle.

Probíhá to na mém zařízení?

Ano, plně. Stránka používá nativní Canvas API prohlížeče a Web File API k dekódování, překreslení a překódování každého obrázku v paměti. Žádná data obrázku nejsou odeslána na server, neprobíhá dočasné nahrávání ani cloudová komunikace. Můžete si to ověřit: otevřete DevTools, přepněte na panel Network a spusťte změnu velikosti. Jediné odchozí požadavky, které uvidíte, jsou počáteční načtení stránky a reklamní volání. Nic ve tvaru obrázku neopouští záložku, což je důvod, proč je to bezpečné pro skeny ID, lékařské snímky a další materiál, který byste nikdy nechtěli nahrávat.

Sníží změna velikosti kvalitu?

Zmenšování obrázku (downscaling) vypadá výborně — prohlížeč průměruje zdrojové pixely do menšího počtu pixelů, takže detaily zůstávají ostré a soubor je mnohem menší. Zvětšování nad rozlišení zdroje (upscaling) nemůže vytvořit detaily, které nebyly zachyceny, takže malý obrázek zvětšený bude vypadat měkce; to je limit každého nástroje, nejen tohoto. Výstup zachovává zdrojový formát: PNG zůstává bezztrátový, zatímco JPEG a WebP se překódují při vysokém nastavení kvality, takže viditelný rozdíl od originálu je těžko postřehnutelný.

Které formáty souborů podporuje?

Na vstupu je přijímán jakýkoli formát, který prohlížeč dokáže dekódovat: PNG, JPEG, WebP, GIF a BMP pokrývají téměř každý soubor, který telefon, foťák nebo screenshot nástroj vytvoří. Výstup zachovává zdrojový formát tam, kde Canvas kodér podporuje přímý převod — PNG, JPEG a WebP. GIF a BMP, které Canvas API dokáže dekódovat, ale ne překódovat, jsou uloženy jako bezztrátový PNG. Název souboru se změněnou velikostí zahrnuje nové rozměry (například photo-1600x1200.jpg), takže dávka zůstává snadno tříditelná.

Přetáhněte své obrázky, vyberte velikost, změňte. Vše běží ve vaší záložce. Žádné nahrávání, žádný účet, žádné čekání na frontu serveru.