Ako správne pracovať s médiami na webe.

Pre väčšinu bežných obrázkov odporúčame ako základ šírku približne 1280 px. Karty a náhľady často zvládnu 800 px, článok 1024 px, väčší hero 1600 až 1920 px. Rozmer 2560 px alebo viac používaj iba vtedy, keď ho konkrétny dizajn naozaj využije.

Pred nahratím skontroluj pomer strán, rozmery, dátovú veľkosť, formát, vizuálnu kvalitu, obsah a právo médium publikovať. Až potom nastupuje WordPress, kompresia, responzívne verzie, cache, CDN a vhodné úložisko.

Bežný telefón vytvorí fotografiu napríklad 6000 × 4000 px s veľkosťou 5 až 10 MB. Taký originál je vhodný na archív alebo tlač, ale pri zobrazenej šírke 800 až 1000 px návštevník väčšinu prenesených dát vôbec nevyužije.

Zbytočne veľký súbor treba nahrať, spracovať, ukladať, zálohovať, migrovať a distribuovať. HTTP Archive uvádza, že obrázky patria medzi najväčšie zložky dátového objemu moderných webov. Na mediánovej domovskej stránke v roku 2025 tvorili približne 911 kB na mobile a 1 058 kB na desktope.

Pri stránke s 20 fotografiami a iba piatimi viditeľnými po otvorení môže byť rozdiel medzi 1 MB a 25 MB dát rozdielom medzi okamžitou odozvou a čakaním dlhým niekoľko sekúnd. Core Web Vitals častejšie spĺňajú ľahšie stránky: HTTP Archive uvádza približne 70 % desktopových domovských stránok pod 1 MB oproti približne 38 % stránok s veľkosťou 5 MB a viac.

Obrázky, ktoré používateľ ešte nevidí, môžu využiť odložené načítanie, lazy loading. Nenahrádzajú však správne rozmery a malú dátovú veľkosť. Pri 5 000 obrázkoch po 5 MB vznikne približne 25 GB zdrojových súborov. Pri 200 kB je to približne 1 GB. WordPress zároveň vytvára odvodené veľkosti, a preto jeden upload neznamená iba jeden fyzický súbor.

Pomer strán určuje tvar obrázka. Pomer 16:9 môže byť 800 × 450 aj 1920 × 1080 px. Z dizajnu vždy vychádza správny pomer, z reálnej veľkosti komponentu správny počet pixelov. Malý obrázok umelo nezväčšuj. Pri zmene pomeru ho orež, nikdy ho nenaťahuj alebo nestláčaj.

Orientačne je do 100 kB výborné pre malé obrázky, 100 až 250 kB veľmi dobré pre väčšinu obsahu, 250 až 400 kB je v poriadku pri väčšej alebo detailnej fotografii. Nad 500 kB skontroluj dôvod, nad 1 MB optimalizuj a nad 2 MB bežný web bez konkrétneho dôvodu nezaťažuj.

JPEG je stále vhodný pre fotografie. WebP je praktický moderný formát pre fotografie, bannery a produkty. AVIF vie ponúknuť veľmi účinnú kompresiu a často je praktické nechať jeho tvorbu na optimalizačnej službe alebo image CDN. PNG používaj najmä pre screenshoty a ostrú grafiku. SVG je vhodné pre bezpečne spracované logá, ikony a diagramy.

PDF použi pre dokument so stálym rozložením, tlač alebo stiahnutie. Dôležitý obsah sprístupni aj ako HTML, ktoré sa ľahšie prispôsobí mobilu a asistívnym technológiám.

Exportuj zo zdrojového dokumentu s označiteľným a vyhľadateľným textom. Pri skenoch spusti OCR a skontroluj rozpoznaný text. Zachovaj čitateľnosť, funkčné odkazy a štruktúrne značky PDF: nadpisy, správne poradie čítania, jazyk dokumentu, alternatívne texty významových obrázkov a pri dlhších dokumentoch záložky.

Pre obrázky na obrazovke začni približne na 150 ppi pri výslednej veľkosti; jemné detaily môžu vyžadovať viac. Text a diagramy podľa možnosti zachovaj ako vektory. Vlož potrebné písma, primerane komprimuj a zapni Fast Web View pre postupné načítanie.

Pri krátkom dokumente cieli orientačne na 1–2 MB; nad 5 MB prever možnosti optimalizácie. Ide o praktické odporúčania, nie technickú normu ani pevný limit. Po kompresii skontroluj text, obrázky, odkazy aj prístupnosť.

Odstráň interné komentáre, nepotrebné prílohy a citlivé metadáta. Citlivý obsah odstráň skutočnou redakciou a následne over výsledok; vizuálne prekrytie nestačí.

Zvoľ zrozumiteľný názov, napríklad prirucka-media.pdf, a odkaz „Stiahnuť príručku (PDF, 1,4 MB)“. Dokument over na mobile aj počítači vrátane čítania, vyhľadávania a ovládania klávesnicou.

Dokumentácia: W3C: techniky pre PDF, Adobe: kontrola prístupnosti, Adobe: optimalizácia PDF, Adobe: redakcia citlivého obsahu.

WordPress pri nahratí bežne vytvorí viacero ďalších veľkostí. Ďalšie varianty môžu pridávať témy, WooCommerce alebo FluentCart, galérie, page buildery a pluginy. Prehliadač si potom pomocou responzívnych obrázkov vyberie vhodný súbor podľa zariadenia a priestoru.

Pluginy a optimalizácia obrázkov

Ide najmä o pluginy, teda doplnky, ktoré sa inštalujú priamo do WordPressu. Niektoré pritom využívajú aj externé cloudové služby. Ich výber, inštaláciu a nastavenie zvyčajne rieši správca webu. Pri bežnom pridávaní článkov a obrázkov ich autor obsahu väčšinou nemusí nastavovať.

Nepotrebuješ všetky uvedené pluginy. Viaceré riešia rovnakú úlohu, preto sa vyberá vhodné riešenie podľa potrieb a aktuálneho nastavenia webu. Táto príručka predstavuje všeobecné možnosti; konkrétny výber pre tvoj projekt treba posúdiť samostatne.

Optimalizačný plugin nenahrádza prípravu zdrojového súboru. Je druhou vrstvou, ktorá môže vytvoriť ďalšie veľkosti, WebP alebo AVIF, lazy loading a CDN doručenie. ShortPixel sa hodí na kompresiu, resize, WebP, AVIF a hromadnú optimalizáciu. Optimole je cloudové riešenie s adaptívnymi rozmermi, lazy loadingom, CDN a možným offloadom. EWWW Image Optimizer podporuje lokálnu optimalizáciu, kontrolu náhľadov, WebP a cloudové Easy IO. Ďalšie etablované riešenia sú Imagify, Smush, Converter for Media, CompressX a TinyPNG.

Čo je cache?

Cache, čítaj „keš“, je dočasne uložený pripravený obsah. Pri cache stránok vo WordPresse sa uloží hotová verzia stránky, aby ju WordPress nemusel pri každej návšteve vytvárať odznova. Stránka sa tak môže načítať rýchlejšie a server má menej práce.

Po zmene obsahu treba cache obnoviť alebo vymazať, aby návštevníci videli aktuálnu verziu. Správne nastavený plugin to zvyčajne robí automaticky. Cache dopĺňa optimalizáciu obrázkov. Samotné veľké súbory nezmenšuje.

Ďalšie druhy cache a pluginy

Okrem cache stránok, page cache, rozlišujeme aj browser cache, object cache, server cache a CDN alebo edge cache. FlyingPress je silná voľba pre Nginx a Apache, LiteSpeed Cache pre LiteSpeed servery. ZiziCache je európske riešenie s page cache, Redis, Memcached, Cloudflare integráciou a inteligentnou invalidáciou.

Čo je CDN?

CDN znižuje latenciu, zrýchľuje doručenie statických súborov a znižuje zaťaženie pôvodného servera. Príklady sú Cloudflare, bunny.net a QUIC.cloud.

Storage je miesto, kde súbor fyzicky existuje. CDN ho doručuje. Image CDN ho vie podľa potreby upravovať. Video platforma navyše rieši transcoding, rôzne bitrate, adaptívny streaming, prehrávač a analytiku. Uložiť MP4 do object storage nie je automaticky profesionálne video streamovanie.

Pri väčšej Knižnici médií možno použiť media offload do Amazon S3, Cloudflare R2, Backblaze B2, DigitalOcean Spaces alebo Google Cloud Storage. WordPress ostáva aplikáciou, no objemné súbory nemusia byť na rovnakom disku. Pri 500 videách po 500 MB ide už približne o 250 GB.

Medzi decentralizované alebo distribuované možnosti patria IPFS, Filecoin, Storj a Arweave. IPFS vyžaduje pri dlhodobej dostupnosti pinning. Filecoin pridáva ekonomickú a kryptografickú vrstvu pre overovanie uloženia. Storj ponúka distribuované object storage s kompatibilitou S3. Arweave je zamerané na dlhodobé až permanentné uloženie, preto nie je vhodné pre obsah, pri ktorom môže byť nutné neskoršie odstránenie.

Pre väčší objem videa nepoužívaj bežný WordPress hosting ako streamingový server. YouTube, Vimeo, Cloudflare Stream, Bunny Stream alebo Livepeer riešia uloženie, transcoding, kvality, adaptívne prehrávanie, CDN aj prehrávač.

Fluent produkty nepoužívajú jeden univerzálny model ukladania médií. Pri malom objeme môže postačovať lokálne WordPress úložisko, pri rastúcom objeme mnohé produkty priamo podporujú alebo odporúčajú externý storage. Aplikačné dáta môžu zostať vo WordPresse, ale rastúce médiá nemusia byť na tom istom fyzickom serveri.

FluentCommunity a video

FluentCommunity lokálne používa priestor pod wp-content/uploads, podporuje však Amazon S3, Cloudflare R2 a BunnyCDN storage.

Pri feed obrázkoch vie podľa konfigurácie zmenšovať a konvertovať do WebP. Secure File URLs umožňujú obmedzené podpísané odkazy na chránené súbory.

Pri kurzoch a väčšom videu WPManageNinja odporúča dedikovaný video hosting, napríklad YouTube alebo Vimeo. Konkrétny Media Preset má prednosť pred všeobecným základom 1280 px, príkladom je Course Welcome Banner s odporúčaním 1680 × 600 px.

FluentSupport

FluentSupport spravuje prílohy ticketov a umožňuje obmedziť typy, veľkosť aj počet súborov. Pri tisícoch ticketov dávajú zmysel Drive, Dropbox, Cloudflare R2 alebo Amazon S3.

Fluent Forms

Fluent Forms vie zbierať obrázky a dokumenty a pri veľkom množstve uploadov podporuje cez Cloud Storage Manager Drive, Dropbox, S3, R2 a OneDrive.

FluentCRM

FluentCRM nie je mediálne úložisko: obrázky v e-mailoch majú byť malé, optimalizované a dostupné cez rýchlu HTTPS URL.

FluentCart

FluentCart pri digitálnych produktoch podporuje Local Storage, Amazon S3 a Cloudflare R2.

FluentBoards

FluentBoards podporuje prílohy pri úlohách a S3 aj R2.

Malému webu stačí Media Library, optimalizačný plugin a cache. Rastúci firemný web pridá CDN. Komunita, support alebo veľké formuláre potrebujú object storage. Veľké video patrí na externú streamingovú platformu.

Pri exporte JPEG alebo WebP začni orientačne kvalitou 75 až 85 %. Súbor vždy skontroluj, vizuálne porovnaj a vyber najmenší variant, ktorý stále plní svoj účel. Pri screenshotoch sú dôležité ostré písmo a drobné detaily, preto je vhodný PNG alebo bezstratový WebP. DPI je najmä údaj pre tlač. Na webe rozhodujú pixely, veľkosť súboru, formát a kvalita.

Významový obrázok potrebuje alternatívny text opisujúci jeho účel. Dekoratívny obrázok má mať prázdny alternatívny text. Ak obrázok funguje ako odkaz alebo tlačidlo, alternatíva má opísať jeho funkciu.

Pred publikovaním skontroluj licenciu, právo použitia, požadované uvedenie autora a súhlasy ľudí na fotografii. Zo screenshotov odstráň osobné údaje, e-maily, telefónne čísla, objednávky, interné URL, API kľúče, heslá a ďalšie citlivé údaje. Pri permanentných decentralizovaných úložiskách je táto kontrola obzvlášť dôležitá.

Odporúčania vychádzajú zo štandardov a dokumentácie W3C pre prístupnosť, WHATWG pre HTML a responzívne obrázky, WordPress Developer Resources, Google web.dev, MDN Web Docs, HTTP Archive, Online Media Masters a z aktuálnej dokumentácie WPManageNinja a Fluent produktov. Praktické čísla 1280 px a 50 až 250 kB sú redakčné odporúčania, nie formálna norma W3C alebo WordPressu.