{"id":6046,"date":"2026-07-12T10:01:11","date_gmt":"2026-07-12T08:01:11","guid":{"rendered":"https:\/\/branike.com\/prirucka\/galeria-prehlad\/"},"modified":"2026-07-31T20:40:35","modified_gmt":"2026-07-31T18:40:35","slug":"galeria-prehlad","status":"publish","type":"kb_article","link":"https:\/\/branike.com\/prirucka\/galeria-prehlad\/","title":{"rendered":"Gal\u00e9ria a m\u00e9dia"},"content":{"rendered":"\n<p class=\"wp-block-branike-text\">Na gal\u00e9riu nepotrebujete samostatn\u00fd plugin. Prezent\u00e1cia obr\u00e1zkov je <strong>s\u00fa\u010das\u0165ou kni\u017enice blokov<\/strong> \u2014 a je to z\u00e1mern\u00e9 rozhodnutie. Gal\u00e9ria ako samostatn\u00fd produkt znamen\u00e1 \u010fal\u0161ie nastavenia, \u010fal\u0161ie \u0161t\u00fdly a \u010fal\u0161iu vec, ktor\u00e1 sa pri aktualiz\u00e1cii pokaz\u00ed.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Tento \u010dl\u00e1nok zh\u0155\u0148a, \u010d\u00edm obr\u00e1zky na web dostanete, ako ich zobrazi\u0165 a \u2014 \u010do je v praxi najd\u00f4le\u017eitej\u0161ie \u2014 <strong>ako sa postara\u0165 o to, aby web nespomalili<\/strong>.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Bloky, ktor\u00fdmi sa obr\u00e1zky zobrazuj\u00fa<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Obr\u00e1zok<\/strong> \u2014 samostatn\u00e1 fotka s popisom, zaoblen\u00edm a rozmermi.<\/li>\n\n\n<li><strong>Vrstven\u00e9 obr\u00e1zky<\/strong> \u2014 fotky poskladan\u00e9 na seba. Sekcia t\u00fdm p\u00f4sob\u00ed \u017eiv\u0161ie ne\u017e pravideln\u00e1 mrie\u017eka.<\/li>\n\n\n<li><strong>Koloto\u010d<\/strong> \u2014 posuvn\u00e1 gal\u00e9ria. Vhodn\u00e1, ke\u010f je obr\u00e1zkov ve\u013ea a nemaj\u00fa zabra\u0165 pol str\u00e1nky.<\/li>\n\n\n<li><strong>Pred a po<\/strong> \u2014 dve fotky s posuvn\u00edkom. Pre remesl\u00e1, kozmetiku a rekon\u0161trukcie je to najsilnej\u0161\u00ed argument, ak\u00fd m\u00e1te.<\/li>\n\n\n<li><strong>Prekl\u00e1pacia karta<\/strong> \u2014 oto\u010d\u00ed sa a uk\u00e1\u017ee rub.<\/li>\n\n\n<li><strong>Prehliadka log<\/strong> \u2014 zna\u010dky a referencie, volite\u013ene s pomal\u00fdm posunom.<\/li>\n\n\n<li><strong>St\u013apce s obr\u00e1zkami<\/strong> \u2014 klasick\u00e1 mrie\u017eka, ak chcete pln\u00fa kontrolu nad rozlo\u017een\u00edm.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">V\u0161etky zdie\u013eaj\u00fa <strong>spolo\u010dn\u00e9 zv\u00e4\u010d\u0161ovanie po kliknut\u00ed<\/strong>. N\u00e1v\u0161tevn\u00edk sa teda nemus\u00ed u\u010di\u0165, ako sa gal\u00e9ria na va\u0161om webe spr\u00e1va \u2014 spr\u00e1va sa v\u0161ade rovnako a d\u00e1 sa zavrie\u0165 aj kl\u00e1vesom.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Obr\u00e1zky s\u00fa najv\u00e4\u010d\u0161ia \u010das\u0165 str\u00e1nky<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Toto je vec, ktor\u00fa v\u00e4\u010d\u0161ina webov podcen\u00ed. Text str\u00e1nky m\u00e1 p\u00e1r kilobajtov. Jedna fotka z mobilu m\u00e1 aj osem megabajtov \u2014 teda tis\u00edcn\u00e1sobok. R\u00fdchlos\u0165 webu je preto takmer v\u00fdlu\u010dne ot\u00e1zka obr\u00e1zkov, nie k\u00f3du.<\/p>\n\n\n<p class=\"wp-block-branike-text\">R\u00e1tajte s t\u00fdm, \u017ee n\u00e1v\u0161tevn\u00edk je na mobiln\u00fdch d\u00e1tach a nem\u00e1 trpezlivos\u0165. Str\u00e1nka, ktor\u00e1 sa na\u010d\u00edtava p\u00e4\u0165 sek\u00fand, prich\u00e1dza o ve\u013ek\u00fa \u010das\u0165 \u013eud\u00ed e\u0161te predt\u00fdm, ne\u017e \u010doko\u013evek uvidia.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Ako sa to rie\u0161i za v\u00e1s<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Spr\u00e1vca webu m\u00e1 n\u00e1stroj, ktor\u00fd probl\u00e9m rie\u0161i na tom najlep\u0161om mieste \u2014 <strong>e\u0161te pred nahrat\u00edm<\/strong>:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li>\ud83d\udfe2 <strong>Obr\u00e1zok sa zmen\u0161\u00ed a prevedie do \u00fasporn\u00e9ho form\u00e1tu priamo v prehliada\u010di.<\/strong> Na server sa ve\u013ek\u00fd origin\u00e1l <strong>v\u00f4bec nedostane<\/strong>. Nie je teda \u010do maza\u0165 a server sa neza\u0165a\u017euje prevodom.<\/li>\n\n\n<li><strong>Star\u0161ie prehliada\u010de maj\u00fa n\u00e1hradn\u00fa cestu<\/strong> \u2014 obr\u00e1zok sa zmen\u0161\u00ed v prehliada\u010di a prevod dokon\u010d\u00ed server u\u017e na malom s\u00fabore. Ve\u013ek\u00fd origin\u00e1l sa neuploadne v \u017eiadnom pr\u00edpade.<\/li>\n\n\n<li><strong>Hromadn\u00e9 upratanie existuj\u00facej kni\u017enice<\/strong> \u2014 pre weby, ktor\u00e9 sa migrovali s tis\u00edckami star\u00fdch fotiek. Origin\u00e1ly sa odlo\u017eia do chr\u00e1nen\u00e9ho prie\u010dinka, vy si v\u00fdsledok pozriete a bu\u010f ich zma\u017eete, alebo sa jedn\u00fdm kliknut\u00edm vr\u00e1tite sp\u00e4\u0165.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-branike-text\">Ten posledn\u00fd bod je d\u00f4le\u017eitej\u0161\u00ed, ne\u017e sa zd\u00e1: hromadn\u00fd z\u00e1sah do kni\u017enice m\u00e9di\u00ed je nezvratn\u00e1 oper\u00e1cia na weboch, ktor\u00e9 ju robia bez z\u00e1lohy. Tu je n\u00e1vrat s\u00fa\u010das\u0165ou postupu.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Rozmery a odlo\u017een\u00e9 na\u010d\u00edtanie<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Obr\u00e1zky mimo hornej \u010dasti str\u00e1nky sa na\u010d\u00edtaj\u00fa a\u017e vtedy, ke\u010f sa k nim n\u00e1v\u0161tevn\u00edk doscrolluje.<\/strong> \u0160etr\u00ed to d\u00e1ta aj \u010das.<\/li>\n\n\n<li><strong>Hlavn\u00fd obr\u00e1zok v hornej \u010dasti sa na\u010d\u00edtava hne\u010f.<\/strong> Odklada\u0165 ho by znamenalo pr\u00e1zdnu str\u00e1nku v prvej sekunde.<\/li>\n\n\n<li><strong>Ka\u017ed\u00fd obr\u00e1zok m\u00e1 uveden\u00e9 rozmery.<\/strong> V\u010faka tomu si str\u00e1nka nech\u00e1 miesto vopred a obsah pod obr\u00e1zkom <strong>nepodskakuje<\/strong> pri na\u010d\u00edtan\u00ed. Poskakuj\u00face rozlo\u017eenie je najotravnej\u0161ia chyba na mobile a z\u00e1rove\u0148 jedna z t\u00fdch, ktor\u00e9 si autor na r\u00fdchlom po\u010d\u00edta\u010di nikdy nev\u0161imne.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Popis obr\u00e1zka<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Popis (alternat\u00edvny text) je veta, ktor\u00e1 obr\u00e1zok opisuje pre toho, kto ho nevid\u00ed \u2014 pre nevidiaceho n\u00e1v\u0161tevn\u00edka a pre vyh\u013ead\u00e1va\u010d. Nie je to titulok a nie je to n\u00e1zov s\u00faboru.<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>P\u00ed\u0161te, \u010do na obr\u00e1zku je<\/strong>, nie k\u013e\u00fa\u010dov\u00e9 slov\u00e1. \u201eCukr\u00e1rka zdob\u00ed tortu v prev\u00e1dzke&#8220; je dobr\u00fd popis.<\/li>\n\n\n<li><strong>\u010cisto dekorat\u00edvny obr\u00e1zok<\/strong> m\u00f4\u017ee ma\u0165 popis pr\u00e1zdny \u2014 je to spr\u00e1vnej\u0161ie ne\u017e ho vyp\u013a\u0148a\u0165 nasilu.<\/li>\n\n\n<li><strong>Kontrola obsahu v\u00e1s upozorn\u00ed<\/strong>, ke\u010f obr\u00e1zok popis nem\u00e1. Je to jedna z troch naj\u010dastej\u0161\u00edch v\u00fd\u010ditiek pri ka\u017edom \u010dl\u00e1nku.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Poriadok v kni\u017enici m\u00e9di\u00ed<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>S\u00fabory pomen\u00favajte pred nahrat\u00edm.<\/strong> \u201eIMG_4821.jpg&#8220; v\u00e1m o rok nepovie ni\u010d a v kni\u017enici s tis\u00edckou polo\u017eiek to u\u017e neoprav\u00edte.<\/li>\n\n\n<li><strong>Nenahr\u00e1vajte t\u00fa ist\u00fa fotku znova.<\/strong> Vlo\u017eenie z kni\u017enice je r\u00fdchlej\u0161ie a nezaber\u00e1 miesto dvakr\u00e1t.<\/li>\n\n\n<li><strong>Fotky v tla\u010dovej kvalite na web nepatria.<\/strong> Ak ich potrebujete archivova\u0165, majte ich mimo webu.<\/li>\n\n\n<li><strong>Pred v\u00e4\u010d\u0161\u00edm upratovan\u00edm si spravte z\u00e1lohu.<\/strong> Zmazan\u00fd obr\u00e1zok pou\u017eit\u00fd na piatich str\u00e1nkach vytvor\u00ed p\u00e4\u0165 dier.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Video<\/h2>\n\n\n<p class=\"wp-block-branike-text\">Video je obr\u00e1zok umocnen\u00fd \u2014 jedna min\u00fata z\u00e1znamu m\u00e1 viac d\u00e1t ne\u017e cel\u00e1 fotogal\u00e9ria. Preto sa prehr\u00e1va\u010d sp\u00fa\u0161\u0165a a\u017e vtedy, ke\u010f je na obrazovke, a neza\u0165a\u017euje na\u010d\u00edtanie str\u00e1nky.<\/p>\n\n\n<p class=\"wp-block-branike-text\">Ak video pred\u00e1vate alebo patr\u00ed \u010dlenom, existuje aj <strong>chr\u00e1nen\u00e9 doru\u010denie<\/strong>: prehr\u00e1va sa za prihl\u00e1sen\u00edm a bez tla\u010didla na stiahnutie. To ist\u00e9 plat\u00ed pre materi\u00e1ly kurzov a pre digit\u00e1lne produkty.<\/p>\n\n\n<h2 class=\"wp-block-branike-heading\">Ako to zapad\u00e1 do ekosyst\u00e9mu<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Bloky<\/strong> obsahuj\u00fa aj samotn\u00e9 vzory gal\u00e9ri\u00ed, tak\u017ee hotov\u00fa sekciu vlo\u017e\u00edte a len vymen\u00edte fotky.<\/li>\n\n\n<li><strong>Spr\u00e1vca webu<\/strong> rie\u0161i prevod a upratanie kni\u017enice.<\/li>\n\n\n<li><strong>SEO<\/strong> upozorn\u00ed na ch\u00fdbaj\u00face popisy a berie obr\u00e1zky do \u0161trukt\u00farovan\u00fdch \u00fadajov produktov a \u010dl\u00e1nkov.<\/li>\n\n\n<li><strong>Kurzy a digit\u00e1lne produkty<\/strong> doru\u010duj\u00fa m\u00e9di\u00e1 chr\u00e1nene.<\/li>\n\n\n<li><strong>Z\u00e1lohy<\/strong> \u2014 kni\u017enica m\u00e9di\u00ed b\u00fdva najv\u00e4\u010d\u0161ia \u010das\u0165 webu; pri nastavovan\u00ed z\u00e1loh s t\u00fdm r\u00e1tajte.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">Na \u010do si da\u0165 pozor<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Nenahr\u00e1vajte fotky priamo z fotoapar\u00e1tu.<\/strong> Aj s prevodom plat\u00ed, \u017ee rozumn\u00fd rozmer je va\u0161a pr\u00e1ca.<\/li>\n\n\n<li><strong>Skontrolujte r\u00fdchlos\u0165 po pridan\u00ed ve\u013ekej gal\u00e9rie.<\/strong> Dvadsa\u0165 fotiek na jednej str\u00e1nke je ve\u013ea aj po optimaliz\u00e1cii.<\/li>\n\n\n<li><strong>Nepou\u017e\u00edvajte obr\u00e1zok tam, kde sta\u010d\u00ed text.<\/strong> Text v obr\u00e1zku sa ned\u00e1 vyh\u013eada\u0165, ned\u00e1 sa pre\u010d\u00edta\u0165 \u010d\u00edta\u010dkou a <strong>ned\u00e1 sa prelo\u017ei\u0165<\/strong>.<\/li>\n\n\n<li><strong>Popisy dop\u013a\u0148ajte priebe\u017ene.<\/strong> Sp\u00e4tne to nikto neurob\u00ed.<\/li>\n\n\n<li><strong>Pred hromadn\u00fdm z\u00e1sahom si spravte z\u00e1lohu<\/strong>, aj ke\u010f m\u00e1 n\u00e1stroj n\u00e1vrat.<\/li>\n\n\n<li><strong>Kontrolujte na mobile.<\/strong> Gal\u00e9ria, ktor\u00e1 na monitore vyzer\u00e1 vzdu\u0161ne, m\u00f4\u017ee ma\u0165 na telef\u00f3ne tri obr\u00e1zky ved\u013ea seba.<\/li>\n\n<\/ul>\n\n\n<h2 class=\"wp-block-branike-heading\">\u010ealej<\/h2>\n\n\n<ul class=\"wp-block-list\">\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/posts-vypis\/\">V\u00fdpis \u010dl\u00e1nkov a pr\u00edspevkov<\/a><\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/obsahove-bloky\/\">Obsahov\u00e9 bloky (alert, accordion, kroky\u2026)<\/a><\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/sprievodca-blocks\/\">Kompletn\u00fd sprievodca: Branike Blocks<\/a><\/li>\n\n\n<li><a href=\"https:\/\/branike.com\/prirucka\/ako-nastavit-seo\/\">Ako nastavi\u0165 SEO \u010dl\u00e1nku alebo produktu<\/a><\/li>\n\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Modern\u00e9 gal\u00e9rie obr\u00e1zkov s d\u00f4razom na r\u00fdchlos\u0165 a pr\u00edstupnos\u0165.<\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","meta":{"_bkb_access":"public","_bkb_min_tier":"basic","_bkb_teaser":"","_bkb_featured":false,"_bt_container":"","_bt_sidebar":"","_bt_show_title":"","footnotes":"","_bseo_title":"","_bseo_description":"Modul Gal\u00e9ria zobrazuje obr\u00e1zky v modern\u00fdch mrie\u017ekach a lightboxoch s d\u00f4razom na r\u00fdchlos\u0165 (lazy-load, spr\u00e1vne rozmery) a pr\u00edstupnos\u0165. Zapad\u00e1 do dizajnu a blokov","_bseo_noindex":"","_bseo_nofollow":"","_bseo_canonical":"","_bseo_og_title":"","_bseo_og_description":"","_bseo_og_image_id":0,"_bseo_og_image_url":"","_bseo_focus_keyword":""},"kb_category":[41],"kb_tag":[],"class_list":["post-6046","kb_article","type-kb_article","status-publish","hentry","kb_category-media"],"_links":{"self":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article"}],"about":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/types\/kb_article"}],"author":[{"embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6046\/revisions"}],"predecessor-version":[{"id":6704,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6046\/revisions\/6704"}],"wp:attachment":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/media?parent=6046"}],"wp:term":[{"taxonomy":"kb_category","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_category?post=6046"},{"taxonomy":"kb_tag","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_tag?post=6046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}