Optimalizace JPEG fotografií pro realitní weby. Jak mít krásné interiéry bez pomalého načítání?
Realitní fotografie musí být krásná. Zároveň se stránka musí načíst dřív, než zájemce ztratí trpělivost a stránku opustí (tomu se říká bounce rate). Požadavky na krásu a rychlost jdou zdánlivě jdou proti sobě, ale ve skutečnosti jde oba bez kompromisů vyvážit. Základem je správná optimalizace JPEG.
Proč jsou realitní fotky problém samy o sobě?
Váš fotograf přijde na focení, odejde s fotkami ve vysokém rozlišení a pošle vám ZIP plný souborů o velikosti 8 až 15 MB za kus. To je možná v pořádku pro tisk nebo archiv, ale na webu je každý megabyte navíc zbytečná zátěž. Moderní prohlížeče sice zvládají hodně, ale fyzikální zákony přenosu dat nezměníte. Pokud má stránka s nabídkou bytu na úvodním slidu fotku o velikosti 6 MB, načítání bude pomalé i na dobré síti.
Problém je ale hlubší než jen velikost souboru. Realitní weby mají obvykle galerií desítky fotek na jednu nemovitost. Násobte 12 fotek krát 4 MB a dostanete se přes 48 MB na jednu stránku. Google to vidí, měří a promítá do hodnocení stránky.
Jakou kvalitu JPEG ve skutečnosti potřebujete?
JPEG funguje na škále komprese od 0 do 100. Většina fotografů exportuje na hodnotu 90 až 100, protože to vypadá nejlépe v náhledu na jejich monitoru. Na webu je to zbytečné.
Pro realitní fotografie funguje hodnota kvality mezi 75 a 82 skvěle. Při takovém nastavení lidské oko rozdíl prakticky nerozpozná, ale soubor je dvakrát až třikrát menší. Zkuste si to sami. Exportujte jednu fotku na kvalitu 85 a druhou na 75 a prohlédněte si je na běžné obrazovce. Rozdíl budete hledat velmi dlouho.
Pozor si dávejte u detailních záběrů materiálů. Třeba dřevěná podlaha, kamenná pracovní deska nebo strukturovaná tapeta. Tam komprese zanechává viditelné artefakty dříve než u záběrů celých místností. Pro tyto fotky si nastavte kvalitu o 5 až 8 bodů výš.
Rozměry jsou stejně důležité jako komprese
Výstup z moderního fotoaparátu mívá rozlišení 6000 × 4000 pixelů a víc. Na realitním webu to nikdo nepotřebuje. Šířka 1920 nebo 2400 pixelů je pro hlavní fotku naprosto dostačující. Galerie s náhledy pak stačí v šířce 800 pixelů.
Pokud posíláte na web původní soubory bez změny rozměrů, platíte zbytečně velkou daň v přenesených datech. Zmenšení rozměrů z 6000 na 2000 pixelů při zachování stejné kvality JPEG sníží velikost souboru o 70 procent bez jakékoli vizuální ztráty. To je úprava, která stojí deset minut práce a výsledek pocítíte okamžitě.
Nástroje, které práci odvedou za vás
Na ruční exporty zapomeňte ve chvíli, kdy máte pravidelný přísun nemovitostí. Potřebujete automatizaci.
MozJPEG je open-source encoder, který produkuje menší soubory než standardní JPEG komprese při stejné vizuální kvalitě. Integruje se do různých nástrojů, jeho výstupy jsou konzistentně lepší a je zdarma.
Squoosh od Google je webová aplikace, ve které porovnáte originál s optimalizovanou verzí side-by-side přímo v prohlížeči. Skvělé na první kalibraci toho, jaká úroveň komprese vám ještě vyhovuje.
Sharp je Node.js knihovna pro vývojáře, která zvládne hromadnou konverzi, změnu rozměrů i kompresi v jednom skriptu. Pokud váš web běží na WordPressu, pluginy Imagify nebo ShortPixel odvádějí podobnou práci bez nutnosti psát kód.
Pro realitní agentury s vyšším objemem zakázek dává smysl CDN s automatickou optimalizací obrázků, Cloudflare Polish nebo Imgix. Nahrajete originál, CDN ho sama ořeže, zkomprimuje a dodá návštěvníkovi ve správném formátu pro jeho zařízení.
Progresivní JPEG a proč ho používat?
Standardní JPEG se načítá odshora dolů, řádek po řádku. Progresivní JPEG se zobrazí nejdříve rozmazaně v plném rozměru a postupně se zostřuje. Výsledek je psychologicky příjemnější. Uživatel vidí fotku okamžitě, i když ještě není ostrá, a nestresuje ho prázdná plocha.
Pro realitní weby je to přímo ideální řešení. Kupující dostane okamžitý dojem z prostoru, aniž by čekal na plné načtení. Progresivní export nastavíte v Photoshopu, Lightroomu i ve zmíněném MozJPEGu jednou volbou.
Metadata, která zbytečně nafukují soubory
Každá fotka z fotoaparátu v sobě nese EXIF data. Například GPS souřadnice, model fotoaparátu, čas focení, nastavení clony a ISO. Pro web to nepotřebujete. Tato metadata přidávají desítky až stovky kilobajtů na soubor a při hromadném exportu se to sečte.
Nástroje jako ExifTool, ImageOptim nebo zmíněný Sharp umí metadata při exportu automaticky odstranit. Jedinou výjimkou bývá barevný profil sRGB, který zachovávejte vždy. Bez něj mohou barvy na různých obrazovkách vypadat odlišně.
Jak to celé propojit do funkčního procesu?
Nejjednodušší workflow vypadá takto: fotograf odevzdá surové soubory, vy je přes Lightroom nebo hromadný skript zmenšíte na maximální šířku 2400 pixelů, nastavíte kvalitu JPEG na 78 až 82, zapnete progresivní export a smažete EXIF metadata. Výsledné soubory pak nahrajete na web nebo přes CDN.
Celý proces trvá pouhé minuty, a výsledkem je stránka, která se načte rychle, vypadá profesionálně a neztrácí potenciální zájemce dříve, než vůbec doscrollují k popisu nemovitosti.
Rychlost načítání je součást prvního dojmu
Realitní web soupeří s portály jako Sreality nebo Bezrealitky, kde jsou obrázky optimalizované průmyslově. Pomalá galerie na vlastním webu agentury odradí přesně ty lidi, kteří přišli přes organické vyhledávání a mají o nemovitost reálný zájem. Technická péče o fotografie tak není žádný vývojářský detail, ale součást toho, jak celá agentura působí na první pohled.
