Zmenšení fotky sníží počet pixelů. Ořez rozhodne, co v rámu zůstane. Webová šablona s object-fit: cover soubor ořízne sama — a často uřízne obličej, etiketku nebo produkt, pokud export není připravený na poměr místa. Z menšího JPEG ještě neplyne, že fotka v článku ukáže to, co jste fotili.

Dvě různé operace, jeden soubor

Zmenšení (resize) mění šířku a výšku v pixelech. Poměr stran zůstává, pokud ho sami nezměníte. Soubor je lehčí, načte se rychleji, ostrost na běžném monitoru stačí. Kompozice je stejná: nahoře nebe, dole boty, uprostřed obličej.

Ořez (crop) mění kompozici. Vybírá obdélník uvnitř snímku. Pixelů může ubýt, ale hlavní je, co z obrazu zmizí. Portrét na výšku v širokém banneru bez ořezu nesedí. Široký záběr v čtvercovém náhledu bez ořezu taky ne. MDN u vlastnosti object-fit popisuje hodnotu cover přímo: objekt si drží poměr stran, vyplní box a přebytek se ořízne. To není „chyba šablony“. To je definice CSS.

V redakci se obě operace pletou, protože obě se v editoru jmenují „upravit velikost“. Výsledek je jiný. Zmenšená fotka 4000 px na 1200 px pořád ukáže celý záběr. Oříznutá fotka 1200 × 675 z téhož souboru ukáže jen prostřední pruh. Když šablona featured image čeká 16:9 a vy do ní vložíte 3:2 z telefonu, prohlížeč ten pruh uřízne za vás — obvykle ze středu, pokud nenastavíte object-position.

Kde šablona ořezává, i když vy „jen zmenšujete“

Na webu se fotka neukáže v nativním poměru, pokud jí šablona dá pevný box. Hero banner, náhled v seznamu článků, karta produktu, avatar, Open Graph. Každé místo má jiný obdélník. Jeden export 1200 px na šířku v poměru 3:2 v hero 16:9 přijde o horní a dolní okraj. V čtvercové mřížce přijde o boky. Zmenšení na 1200 px ten konflikt neřeší. Řeší ho ořez na poměr, který dané místo opravdu má.

Poměr 16:9 sedí na video a na sociální náhled, v těle článku ale často uřízne to, na čem záleží — rozebírali jsme to v textu proč 16:9 na webu nestačí. Tady jde o krok před poměrem: jestli vůbec vyříznete hlavní motiv, nebo necháte CSS, ať ho uřízne naslepo. CSS ořez neví, kde je obličej. Ví jen box a object-position, výchozí je střed.

Barva je jiná vrstva. Šedý snímek z telefonu po ztrátě profilu Display P3 ořezem nespravíte. Nejdřív export do sRGB, potom kompozice; postup je v článku proč fotka z telefonu na webu vypadá šedě. Ořez šedou fotku jen zmenší na jiný obdélník.

Prakticky: jeden originál, ořez podle místa

1. Originál nechte originálem. RAW, HEIC nebo plný JPEG archivujte. Na web z něj dělejte kopie.
2. Zjistěte poměr místa. Featured image v šabloně, tělo článku, karta v katalogu. Nestačí „široká fotka“. Potřebujete poměr boxu, ne dojem z monitoru.
3. Ořežte na ten poměr. V editoru vyřízněte obličej, produkt nebo nápis tak, aby po ořezu zůstal v rámu. Nespoléhejte na střed.
4. Teprve potom zmenšete. Na článek obvykle stačí šířka kolem 1200 px. Zmenšení po ořezu, ne před ním: jinak maříte pixely, které vzápětí uříznete.
5. Pojmenujte výstupy. clanek-16x9.jpg, clanek-4x3.jpg, nahled-1x1.jpg. Jeden soubor pro tři boxy znamená, že dva z nich ořežou špatně.

Když šablona ořezává CSS a vy nemáte tři exporty, nastavte aspoň object-position na motiv: object-position: 50% 20% drží obličej výš než střed. To je nouzové řešení. Čistší je soubor, který už má správný poměr. CSS ořez totiž pořád stahuje celý soubor — včetně pixelů, které návštěvník nikdy neuvidí. Ořez v editoru ty pixely ze souboru opravdu odstraní.

Co z pouhého zmenšení ještě neplyne

• Neplyne z něj, že featured image ukáže obličej. Šablona s cover uřízne okraje podle boxu, ne podle motivu.
• Neplyne z něj ostrost na retina displeji, pokud zmenšíte pod dvojnásobek šířky boxu a pak to CSS zase natáhne. To je jiná vrstva než ořez.
• Neplyne z něj, že jeden soubor obslouží článek, kartu i Open Graph. Tři poměry, tři ořezy.
• Neplyne z něj správná barva. Ořez a zmenšení profil Display P3 nespraví.
• Neplyne z něj, že „optimalizátor“ v CMS ořez zachová. Plugin často znovu enkóduje a šablona ořízne znovu.

Mobilní náhled není důkaz ořezu

Telefonní displej je úzký. Široký 16:9 na něm vypadá jako vysoký pruh, 4:3 skoro jako čtverec. To, že „na mobilu to sedí“, ještě neříká, co uřízne desktopový hero. Ověřujte ořez v šířce, ve které šablona box opravdu kreslí. V prohlížeči stačí zúžit okno na 360 px a znovu ho roztáhnout přes 1200 px. Když obličej na úzkém displeji drží a na širokém zmizí, šablona ořezává shora a zdola — a soubor na to není připravený.

Stejně klamný je náhled v knihovně médií. WordPress ukáže celý soubor. Návštěvník uvidí jen to, co z něj CSS vyřízne. Stáhněte živou stránku, ne náhled v administraci. Pokud v živém hero chybí nápis na obalu, ořez je v šabloně, ne v „rozmazaném JPEG“.

Ořez má i datový důsledek. Soubor 4000 × 3000 zmenšený na 1200 × 900 pořád nese celý záběr. Soubor 1200 × 675 z téhož záběru nese jen pruh. Druhý je menší nejen počtem pixelů, ale i tím, že v něm není nebe, které šablona stejně schová. Pro LCP hero dává smysl poslat ten druhý. Pro článek, kde má zůstat kontext, dává smysl 4:3. Z jednoho zmenšení obojí neuděláte.

Kontrola před nahráním

Otevřete náhled článku v šířce mobilu i desktopu. Jestli v hero chybí hlava nebo etiketka, ořez v souboru nesedí na box. Nestahujte ostrost ani sytost. Vraťte se k originálu a vyřízněte jiný obdélník. Až potom znovu zmenšete a uložte JPEG nebo WebP.

Webová fotka potřebuje ořez, protože web není galerie v plném poměru fotoaparátu. Je to sada rámečků. Zmenšení do rámečku fotku jen nacpe. Ořez rozhodne, co z ní čtenář uvidí.

Obrázek u článku je ilustrační stock. Nezobrazuje konkrétní značku webu ani čitelné UI editoru.

Zdroje

• MDN: object-fit (hodnota cover vyplní box a přebytek ořízne, poměr stran zachová) – https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
• MDN: Styling replaced elements (object-fit a object-position) – https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Images/Replaced_element_properties