Na galériu nepotrebujete samostatný plugin. Prezentácia obrázkov je súčasťou knižnice blokov — a je to zámerné rozhodnutie. Galéria ako samostatný produkt znamená ďalšie nastavenia, ďalšie štýly a ďalšiu vec, ktorá sa pri aktualizácii pokazí.
Tento článok zhŕňa, čím obrázky na web dostanete, ako ich zobraziť a — čo je v praxi najdôležitejšie — ako sa postarať o to, aby web nespomalili.
Bloky, ktorými sa obrázky zobrazujú
- Obrázok — samostatná fotka s popisom, zaoblením a rozmermi.
- Vrstvené obrázky — fotky poskladané na seba. Sekcia tým pôsobí živšie než pravidelná mriežka.
- Kolotoč — posuvná galéria. Vhodná, keď je obrázkov veľa a nemajú zabrať pol stránky.
- Pred a po — dve fotky s posuvníkom. Pre remeslá, kozmetiku a rekonštrukcie je to najsilnejší argument, aký máte.
- Preklápacia karta — otočí sa a ukáže rub.
- Prehliadka log — značky a referencie, voliteľne s pomalým posunom.
- Stĺpce s obrázkami — klasická mriežka, ak chcete plnú kontrolu nad rozložením.
Všetky zdieľajú spoločné zväčšovanie po kliknutí. Návštevník sa teda nemusí učiť, ako sa galéria na vašom webe správa — správa sa všade rovnako a dá sa zavrieť aj klávesom.
Obrázky sú najväčšia časť stránky
Toto je vec, ktorú väčšina webov podcení. Text stránky má pár kilobajtov. Jedna fotka z mobilu má aj osem megabajtov — teda tisícnásobok. Rýchlosť webu je preto takmer výlučne otázka obrázkov, nie kódu.
Rátajte s tým, že návštevník je na mobilných dátach a nemá trpezlivosť. Stránka, ktorá sa načítava päť sekúnd, prichádza o veľkú časť ľudí ešte predtým, než čokoľvek uvidia.
Ako sa to rieši za vás
Správca webu má nástroj, ktorý problém rieši na tom najlepšom mieste — ešte pred nahratím:
- 🟢 Obrázok sa zmenší a prevedie do úsporného formátu priamo v prehliadači. Na server sa veľký originál vôbec nedostane. Nie je teda čo mazať a server sa nezaťažuje prevodom.
- Staršie prehliadače majú náhradnú cestu — obrázok sa zmenší v prehliadači a prevod dokončí server už na malom súbore. Veľký originál sa neuploadne v žiadnom prípade.
- Hromadné upratanie existujúcej knižnice — pre weby, ktoré sa migrovali s tisíckami starých fotiek. Originály sa odložia do chráneného priečinka, vy si výsledok pozriete a buď ich zmažete, alebo sa jedným kliknutím vrátite späť.
Ten posledný bod je dôležitejší, než sa zdá: hromadný zásah do knižnice médií je nezvratná operácia na weboch, ktoré ju robia bez zálohy. Tu je návrat súčasťou postupu.
Rozmery a odložené načítanie
- Obrázky mimo hornej časti stránky sa načítajú až vtedy, keď sa k nim návštevník doscrolluje. Šetrí to dáta aj čas.
- Hlavný obrázok v hornej časti sa načítava hneď. Odkladať ho by znamenalo prázdnu stránku v prvej sekunde.
- Každý obrázok má uvedené rozmery. Vďaka tomu si stránka nechá miesto vopred a obsah pod obrázkom nepodskakuje pri načítaní. Poskakujúce rozloženie je najotravnejšia chyba na mobile a zároveň jedna z tých, ktoré si autor na rýchlom počítači nikdy nevšimne.
Popis obrázka
Popis (alternatívny text) je veta, ktorá obrázok opisuje pre toho, kto ho nevidí — pre nevidiaceho návštevníka a pre vyhľadávač. Nie je to titulok a nie je to názov súboru.
- Píšte, čo na obrázku je, nie kľúčové slová. „Cukrárka zdobí tortu v prevádzke“ je dobrý popis.
- Čisto dekoratívny obrázok môže mať popis prázdny — je to správnejšie než ho vypĺňať nasilu.
- Kontrola obsahu vás upozorní, keď obrázok popis nemá. Je to jedna z troch najčastejších výčitiek pri každom článku.
Poriadok v knižnici médií
- Súbory pomenúvajte pred nahratím. „IMG_4821.jpg“ vám o rok nepovie nič a v knižnici s tisíckou položiek to už neopravíte.
- Nenahrávajte tú istú fotku znova. Vloženie z knižnice je rýchlejšie a nezaberá miesto dvakrát.
- Fotky v tlačovej kvalite na web nepatria. Ak ich potrebujete archivovať, majte ich mimo webu.
- Pred väčším upratovaním si spravte zálohu. Zmazaný obrázok použitý na piatich stránkach vytvorí päť dier.
Video
Video je obrázok umocnený — jedna minúta záznamu má viac dát než celá fotogaléria. Preto sa prehrávač spúšťa až vtedy, keď je na obrazovke, a nezaťažuje načítanie stránky.
Ak video predávate alebo patrí členom, existuje aj chránené doručenie: prehráva sa za prihlásením a bez tlačidla na stiahnutie. To isté platí pre materiály kurzov a pre digitálne produkty.
Ako to zapadá do ekosystému
- Bloky obsahujú aj samotné vzory galérií, takže hotovú sekciu vložíte a len vymeníte fotky.
- Správca webu rieši prevod a upratanie knižnice.
- SEO upozorní na chýbajúce popisy a berie obrázky do štruktúrovaných údajov produktov a článkov.
- Kurzy a digitálne produkty doručujú médiá chránene.
- Zálohy — knižnica médií býva najväčšia časť webu; pri nastavovaní záloh s tým rátajte.
Na čo si dať pozor
- Nenahrávajte fotky priamo z fotoaparátu. Aj s prevodom platí, že rozumný rozmer je vaša práca.
- Skontrolujte rýchlosť po pridaní veľkej galérie. Dvadsať fotiek na jednej stránke je veľa aj po optimalizácii.
- Nepoužívajte obrázok tam, kde stačí text. Text v obrázku sa nedá vyhľadať, nedá sa prečítať čítačkou a nedá sa preložiť.
- Popisy dopĺňajte priebežne. Spätne to nikto neurobí.
- Pred hromadným zásahom si spravte zálohu, aj keď má nástroj návrat.
- Kontrolujte na mobile. Galéria, ktorá na monitore vyzerá vzdušne, môže mať na telefóne tri obrázky vedľa seba.