{"id":6135,"date":"2019-12-06T10:02:31","date_gmt":"2019-12-06T09:02:31","guid":{"rendered":"https:\/\/igloonet.cz\/blog\/?p=6135"},"modified":"2020-07-10T09:02:06","modified_gmt":"2020-07-10T07:02:06","slug":"zrychlujeme-web-2","status":"publish","type":"post","link":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/","title":{"rendered":"Zrychlujeme web \u2013 Jak na&nbsp;obr\u00e1zky?"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>Hur\u00e1, slevy! Nad\u0161en\u011b otv\u00edr\u00e1te seznam produkt\u016f, ale ten se nena\u010d\u00edt\u00e1 a&nbsp;nena\u010d\u00edt\u00e1\u2026 V&nbsp;\u010dem ud\u011blal program\u00e1tor chybu? Poj\u010fme si uk\u00e1zat, na&nbsp;co d\u00e1t u&nbsp;obr\u00e1zk\u016f pozor a&nbsp;jak v\u00e1m m\u016f\u017ee jednoduch\u00e1 zm\u011bna na\u010d\u00edt\u00e1n\u00ed zrychlit web.<\/p>\n<p><!--more--><\/p>\n<p>V\u00edtejte u&nbsp;druh\u00e9ho d\u00edlu igloonet\u00edho seri\u00e1lu o&nbsp;zrychlen\u00ed webu. <a href=\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-1\/\">U\u017e jsem v\u00e1m vysv\u011btlil, pro\u010d je rychlost webu d\u016fle\u017eit\u00e1 a&nbsp;jak ji m\u011b\u0159it<\/a>, v&nbsp;tomhle \u010dl\u00e1nku se bl\u00ed\u017ee pod\u00edv\u00e1me na&nbsp;obr\u00e1zky. Prozrad\u00edm v\u00e1m, jak\u00e9 form\u00e1ty byste m\u011bli kde pou\u017e\u00edvat a&nbsp;jak nasadit odlo\u017een\u00e9 na\u010d\u00edt\u00e1n\u00ed neboli lazyloading \u2013 je p\u0159ece zbyte\u010dn\u00e9 zpomalovat str\u00e1nky na\u010d\u00edt\u00e1n\u00edm prvku, kter\u00fd je n\u011bkde \u00fapln\u011b dole. Lazyloading je pro zrychlen\u00ed webu zcela kl\u00ed\u010dov\u00fd, a&nbsp;m\u011bla by to b\u00fdt jedna z&nbsp;prvn\u00edch v\u011bc\u00ed, kterou nasadit.<\/p>\n<p>Pokud v\u00e1m moje rady p\u0159ijdou u\u017eite\u010dn\u00e9, nenechte si uj\u00edt&nbsp;dal\u0161\u00ed:<\/p>\n<ul>\n<li><a href=\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-3\/\">Jak pracovat s&nbsp;webov\u00fdmi fonty<\/a><\/li>\n<li><a href=\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-4\/\">CSS a&nbsp;JavaScripty.<\/a><\/li>\n<\/ul>\n<p>Ne\u017e za\u010dneme, budete pot\u0159ebovat <b>protokol HTTP\/2<\/b> - na&nbsp;verzi jedna v\u00e1m nebude fungovat spousta optimalizac\u00ed, o&nbsp;kter\u00fdch budu ps\u00e1t. Nav\u00edc umo\u017e\u0148uje paraleln\u00ed stahov\u00e1n\u00ed. S&nbsp;jeho nasazen\u00edm v\u00e1m bohu\u017eel neporad\u00edm, nejlep\u0161\u00ed bude obr\u00e1tit se na&nbsp;sv\u00e9ho administr\u00e1tora.<\/p>\n<h2>Zmen\u0161en\u00ed datov\u00e9 velikosti<\/h2>\n<p>Ka\u017ed\u00fd prvek na&nbsp;webov\u00fdch str\u00e1nk\u00e1ch (obr\u00e1zek, JavaScript, CSS styl\u2026) m\u00e1 n\u011bjakou datovou velikost. \u010c\u00edm v\u00edc dat bude n\u00e1v\u0161t\u011bvn\u00edk stahovat, t\u00edm pomaleji mu web samoz\u0159ejm\u011b pojede. Zamyslete se proto, jak\u00e9 obr\u00e1zky ke&nbsp;sv\u00fdm produkt\u016fm nahr\u00e1v\u00e1te a&nbsp;zda hned nespou\u0161t\u00edte zbyte\u010dn\u00e1 vyskakovac\u00ed okna. Nutno podotknout, \u017ee&nbsp;velikost souboru nen\u00ed jedin\u00fd ukazatel rychlosti. Stejn\u011b velk\u00fd obr\u00e1zek a&nbsp;JavaScript se sice st\u00e1hnou stejn\u011b rychle, ale u\u017e se nebudou vykon\u00e1vat stejnou dobu. Obr\u00e1zek se po sta\u017een\u00ed vykresl\u00ed, JavaScript se mus\u00ed je\u0161t\u011b p\u0159e\u010d\u00edst, vykonat, a&nbsp;nav\u00edc blokuje dal\u0161\u00ed \u010d\u00e1sti str\u00e1nky.<\/p>\n<p><img srcset=\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/11\/pasted-image-0-150x150.png 150w, https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/11\/pasted-image-0-300x194.png 300w, https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/11\/pasted-image-0-1024x662.png 1024w, https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/11\/pasted-image-0.png 1600w\" sizes=\"(min-width: 1024px) 1600px, (min-width: 300px) 1024px, (min-width: 150px) 300px, 150px\" class=\"size-full wp-image-6146 aligncenter\" alt width=\"1600\" height=\"1034\"><\/p>\n<p>Na webu <a href=\"https:\/\/www.doktorkladivo.cz\/\">doktorkladivo.cz<\/a> m\u016f\u017eete narazit na&nbsp;tyto datov\u00e9 form\u00e1ty:<\/p>\n<ul>\n<li>Produktov\u00e9 i&nbsp;statick\u00e9 obr\u00e1zky;<\/li>\n<li>CSS styly, JavaScripty a&nbsp;p\u00edsma (webov\u00e9 fonty).<\/li>\n<\/ul>\n<p>V tomhle \u010dl\u00e1nku v\u00e1m podrobn\u011bji vysv\u011btl\u00edm probl\u00e9my kolem obr\u00e1zk\u016f, na&nbsp;zbytek se pod\u00edv\u00e1me p\u0159\u00ed\u0161t\u011b.<\/p>\n<h2>Obr\u00e1zky<\/h2>\n<p>Zvl\u00e1\u0161\u0165 u&nbsp;e\u2011shop\u016f plat\u00ed, \u017ee&nbsp;hodn\u011b obr\u00e1zk\u016f znamen\u00e1 hodn\u011b dat. Serv\u00edrujte je proto ve&nbsp;spr\u00e1vn\u00e9m form\u00e1tu a&nbsp;v&nbsp;co nejmen\u0161\u00ed datov\u00e9 velikosti. Nejroz\u0161\u00ed\u0159en\u011bj\u0161\u00ed jsou:<\/p>\n<ul>\n<li>GIF \u2013 pouze pro animovan\u00e9 obr\u00e1zky.<\/li>\n<li>JPG \u2013 ide\u00e1ln\u00ed form\u00e1t pro fotky a&nbsp;dal\u0161\u00ed nevektorov\u00e9 rozs\u00e1hle obr\u00e1zky. U&nbsp;v\u011bt\u0161\u00edch obr\u00e1zk\u016f m\u016f\u017eete vyu\u017e\u00edt jeho dobrou kompresi a&nbsp;zobrazov\u00e1n\u00ed v&nbsp;progresivn\u00edm m\u00f3du (viz&nbsp;n\u00ed\u017ee).<\/li>\n<li>PNG \u2013 nejv\u011bt\u0161\u00ed p\u0159ednost\u00ed PNG je mo\u017enost pr\u016fhlednosti. U&nbsp;v\u011bt\u0161\u00edch obr\u00e1zk\u016f m\u00e1 zbyte\u010dn\u011b velkou datovou velikost, doporu\u010duji proto doplnit pozad\u00ed a&nbsp;pou\u017e\u00edt sp\u00ed\u0161e&nbsp;JPG.<\/li>\n<li>SVG \u2013 vektorov\u00fd form\u00e1t, kter\u00fd p\u0159i zv\u011bt\u0161ov\u00e1n\u00ed a&nbsp;zmen\u0161ov\u00e1n\u00ed rozm\u011br\u016f nepodl\u00e9h\u00e1 ztr\u00e1t\u011b kvality. Hod\u00ed se pro jednoduch\u00e1 loga a&nbsp;ikonky.<\/li>\n<li>WebP - form\u00e1t nov\u00e9 generace, kter\u00fd zat\u00edm nen\u00ed podporovan\u00fd v\u0161emi prohl\u00ed\u017ee\u010di (v&nbsp;dob\u011b psan\u00ed \u010dl\u00e1nku ho neum\u00ed Safari), ale je v&nbsp;po\u0159\u00e1dku pou\u017eiteln\u00fd. Kombinuje v\u00fdhody GIFu (animace), JPG (velikost) a&nbsp;PNG (pr\u016fhlednost). Oproti p\u016fvodn\u00edm form\u00e1t\u016fm dosahuje o&nbsp;30-35&nbsp;% men\u0161\u00ed velikosti.<\/li>\n<\/ul>\n<p>WebP se zap\u00ed\u0161e pomoc\u00ed picture tagu. Pokud ho prohl\u00ed\u017ee\u010d um\u00ed, pou\u017eije prvn\u00ed \u0159\u00e1dek. Pokud ne, p\u0159esko\u010d\u00ed a&nbsp;st\u00e1hne JPEG.<\/p>\n<pre> <picture>\n  <source srcset=\"image.webp\" type=\"image\/webp\">\n  <img decoding=\"async\" src=\"image.jpg\" alt=\"...\">\n<\/picture><\/pre>\n<p>V ide\u00e1ln\u00edm p\u0159\u00edpad\u011b by m\u011blo administra\u010dn\u00ed rozhran\u00ed obr\u00e1zek automaticky zpracovat, aby byl pro n\u00e1v\u0161t\u011bvn\u00edky co nejlep\u0161\u00ed (nap\u0159\u00edklad pro produktov\u00e9 fotky by m\u011blo zvolit kombinaci JPG\/WebP). Pokud to va\u0161e rozhran\u00ed neum\u00ed, mus\u00edte si form\u00e1ty hl\u00eddat sami.<\/p>\n<p>Ke zmen\u0161ov\u00e1n\u00ed datov\u00e9 velikosti obr\u00e1zk\u016f pou\u017e\u00edv\u00e1m tyto slu\u017eby pro bezztr\u00e1tovou kompresi:<\/p>\n<ul>\n<li><a href=\"https:\/\/tinypng.com\/\">Tinypng<\/a> - on\u2011line aplikace na&nbsp;zmen\u0161en\u00ed JPG a&nbsp;PNG obr\u00e1zk\u016f;<\/li>\n<li><a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\">SVGOMG<\/a> - on\u2011line aplikace na&nbsp;zmen\u0161en\u00ed SVG obr\u00e1zku bez zbyte\u010dn\u00e9ho balastu v&nbsp;k\u00f3du.<\/li>\n<\/ul>\n<p>Pro komprimaci obr\u00e1zku nahran\u00fdch p\u0159es administraci m\u016f\u017eete pou\u017e\u00edt tyto knihovny, jde sp\u00ed\u0161 o&nbsp;\u010d\u00e1st pro backend v\u00fdvoj\u00e1\u0159e:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/mozilla\/mozjpeg\">JPG<\/a><\/li>\n<li><a href=\"https:\/\/pngquant.org\/\">PNG<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/svg\/svgo\">SVG<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/speed\/webp\">WebP<\/a><\/li>\n<\/ul>\n<p>U e\u2011shopu Doktor Kladivo jsem u&nbsp;statick\u00fdch obr\u00e1zk\u016f dos\u00e1hli zmen\u0161en\u00ed z&nbsp;<b>1112&nbsp;kB <\/b>na <b>834&nbsp;kB<\/b>, tedy o&nbsp;<b>25&nbsp;%. <\/b>Nemus\u00ed se to zd\u00e1t jako moc, obr\u00e1zky toti\u017e v&nbsp;minulosti u\u017e jednou kompres\u00ed pro\u0161ly. Z&nbsp;na\u0161\u00ed strany v\u0161ak \u0161lo o&nbsp;kompresi bez ztr\u00e1ty kvality, jde tedy o&nbsp;dobr\u00fd v\u00fdsledek. N\u011bkter\u00e9 obr\u00e1zky jsme z&nbsp;form\u00e1tu PNG p\u0159evedli na&nbsp;JPG, co\u017e je datov\u011b men\u0161\u00ed form\u00e1t. Vyu\u017eili jsme tak\u00e9 funkci progresivn\u00edho na\u010d\u00edt\u00e1n\u00ed \u2013 obr\u00e1zek se ihned na\u010dte v&nbsp;hor\u0161\u00ed kvalit\u011b, a&nbsp;postupn\u011b se \u201ezlep\u0161uje.\u201c U\u017eivatelsk\u00fd pro\u017eitek je mnohem lep\u0161\u00ed ne\u017e u&nbsp;klasick\u00e9ho na\u010d\u00edt\u00e1n\u00ed po \u0159\u00e1dc\u00edch.<\/p>\n<p><img srcset=\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/11\/pasted-image-0-1-1-150x150.png 150w, https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/11\/pasted-image-0-1-1-300x273.png 300w, https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/11\/pasted-image-0-1-1.png 805w\" sizes=\"(min-width: 300px) 805px, (min-width: 150px) 300px, 150px\" class=\"wp-image-6147 aligncenter\" alt width=\"490\" height=\"446\"><\/p>\n<h2>Lazyloading obr\u00e1zku a&nbsp;blok\u016f<\/h2>\n<p>Nejv\u011bt\u0161\u00ed zrychlen\u00ed webu v\u00e1m u&nbsp;obr\u00e1zk\u016f p\u0159inese lazyloading. Z\u00e1kladn\u00ed my\u0161lenka je jednoduch\u00e1: \u201ePro\u010d na\u010d\u00edtat n\u011bco, co u\u017eivatel je\u0161t\u011b nevid\u00ed?\u201c Na&nbsp;webu se toti\u017e b\u011b\u017en\u011b na\u010d\u00edt\u00e1 \u00fapln\u011b v\u0161e, zbyte\u010dn\u011b tak stahujeme data na&nbsp;pozad\u00ed a&nbsp;\u201ezpomalujeme\u201c si str\u00e1nku. Poj\u010fme si uk\u00e1zat, jak odlo\u017eit na\u010d\u00edt\u00e1n\u00ed n\u011bkter\u00fdch prvk\u016f na&nbsp;pozd\u011bji, a&nbsp;t\u00edm zrychlit celkov\u00e9 na\u010d\u00edt\u00e1n\u00ed, proto\u017ee obr\u00e1zky produkt\u016f nemaj\u00ed \u00fapln\u011b nejmen\u0161\u00ed velikost a&nbsp;je jich&nbsp;hodn\u011b.<\/p>\n<p>Pro tzv. lazyload jsem vybrali JavaScript knihovnu s&nbsp;n\u00e1zvem <a href=\"https:\/\/github.com\/verlok\/lazyload\">lazyload od&nbsp;u\u017eivatele verlok<\/a>. Je napsan\u00e1 v&nbsp;\u010dist\u00e9m JavaScriptu a&nbsp;vyu\u017e\u00edv\u00e1 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\">IntersectionObserver API<\/a> (asynchronn\u011b hl\u00edd\u00e1, jestli se bl\u00ed\u017e\u00edme okrajem str\u00e1nky k&nbsp;ur\u010dit\u00e9mu bloku), tak\u017ee m\u00e1me p\u0159\u00edmo podporu od&nbsp;prohl\u00ed\u017ee\u010d\u016f za minimum hw n\u00e1rok\u016f.<\/p>\n<p>Plugin ve&nbsp;v\u00fdchoz\u00edm stavu v\u0161e lazyloaduje, z\u00e1pis obr\u00e1zku v&nbsp;k\u00f3du tak m\u016f\u017ee vypadat u\u017e takhle jednodu\u0161e:<\/p>\n<pre> <img decoding=\"async\" src=\"lazy.jpg\" alt=\"A lazy image\"><\/pre>\n<p>Na projektu pou\u017e\u00edv\u00e1me Latte od&nbsp;Nette frameworku, n\u00e1\u0161 z\u00e1pis proto vypad\u00e1 takhle:<\/p>\n<pre><img decoding=\"async\" class=\"unveil\" src=\"{$product->imageUrl}\" alt=\"{$product->title}\"><noscript>\n    <img decoding=\"async\" src=\"{$product->imageUrl}\" alt=\"{$product->title}\">\n<\/noscript><\/pre>\n<p><strong>Class unveil<\/strong> tam m\u00e1me z&nbsp;d\u016fvodu, abychom mohli \u0159\u00edct, kter\u00e9 obr\u00e1zky chceme lazyloadovat. Unveil = ano, chci lazyload. Tag <b>noscript <\/b>zaji\u0161\u0165uje, aby se v&nbsp;p\u0159\u00edpad\u011b vypnut\u00e9ho (\u010di nefunk\u010dn\u00edho) JavaScriptu obr\u00e1zek n\u00e1v\u0161t\u011bvn\u00edkovi zobrazil, z\u00e1rove\u0148 funguje jako n\u00e1hrada za p\u016fvodn\u00ed obr\u00e1zek pro vyhled\u00e1va\u010de. <span style=\"font-size: 1rem;\">Cel\u00fd skript funguje na&nbsp;jednoduch\u00e9m principu. Pokud se bl\u00ed\u017e\u00edme k&nbsp;lazyload obr\u00e1zku, data z&nbsp;data\u2011src vlo\u017e\u00ed do&nbsp;src, p\u0159i\u0159ad\u00ed k&nbsp;n\u011bmu adekv\u00e1tn\u00ed class, a&nbsp;t\u00edm ho zobraz\u00ed.<\/span><\/p>\n<p>V praxi jsme museli proj\u00edt cel\u00e9 str\u00e1nky Doktora Kladiva a&nbsp;v\u0161ude upravit vypisov\u00e1n\u00ed obr\u00e1zk\u016f. Byla to fu\u0161ka, ale v\u00fdsledek stoj\u00ed za to. Lazyloadem jsme zna\u010dn\u011b urychlili na\u010dten\u00ed str\u00e1nky a&nbsp;nepot\u0159ebn\u00e9 prvky jsme odlo\u017eili na&nbsp;pozd\u011bji, tak\u017ee se web m\u016f\u017ee pln\u011b v\u011bnovat vykreslen\u00ed viditeln\u00fdch prvk\u016f.<\/p>\n<p>Do CSS mus\u00edme je\u0161t\u011b p\u0159idat z\u00e1pis, kter\u00fd nebude p\u0159i vypl\u00e9m JS v&nbsp;prohl\u00ed\u017ee\u010di&nbsp; zobrazovat obr\u00e1zky p\u0159ipraven\u00e9 na&nbsp;lazyload, ale vyp\u00ed\u0161e jen ty v&nbsp;noscript tagu. Logicky bysme pak nic nevid\u011bli.<\/p>\n<pre>.no-js {\n  .unveil {\n    display: none;\n  }\n}\n<\/pre>\n<p>CSS na&nbsp;lazyload obr\u00e1zku i&nbsp;s&nbsp;koment\u00e1\u0159i:<\/p>\n<pre>img {\n  width: auto;\n  max-width: 100%;\n\n  &amp;:not([src]) { \/\/ nezobrazovat obr\u00e1zek, pokud nem\u00e1 src\n    visibility: hidden;\n  }\n\n  &amp;.unveil { \/\/ nezobrazovat obr\u00e1zek, pokud se nena\u010detl\n    opacity: 0;\n    transition: opacity 1s; \/\/lehk\u00e1 animace, aby se obr\u00e1zek na\u010detl pozvoln\u011b\n  }\n\n  &amp;.initial,\n  &amp;.loaded,\n  &amp;.error {\n    opacity: 1; \/\/ zobrazit obr\u00e1zek, pokud se na\u010dte a nebo vyhod\u00ed chybu\n  }\n}\n<\/pre>\n<p>Cel\u00fd lazyloading spust\u00edte jednoduch\u00fdm skriptem. P\u0159ed koncem HTML tagu sta\u010d\u00ed napsat:<\/p>\n<pre><script>\n\twindow.lazyLoadOptions = { elements_selector: \".unveil\" };\n\twindow.addEventListener('LazyLoad::Initialized', function (event) {\n\t\twindow.lazyLoadInstance = event.detail.instance;\n\t}, false);\n<\/script>\n<script src=\"{versionedFile '\/js\/vendor\/lazyload.min.js'}\" async><\/script> \/\/pripojena lazyload knihovna\n<\/pre>\n<p>Pokud pou\u017eijete n\u011bjak\u00fd fltr (nap\u0159. u&nbsp;v\u00fdpisu produkt\u016f) a&nbsp;p\u0159ekresl\u00ed se t\u00edm seznam v\u00fdsledk\u016f, nezapome\u0148te znovu zavolat lazyload, jinak se nov\u00e9 obr\u00e1zky nezobraz\u00ed.<\/p>\n<pre>if (typeof lazyLoadInstance === \"object\") {\n    lazyLoadInstance.update(); \/\/zavolej znovu lazyload funkci\n}\n<\/pre>\n<p>Na Kladivu jsme se rozhodli lazyloadovat i&nbsp;prvky jako r\u016fzn\u00e9 slider koloto\u010de a&nbsp;bloky, kter\u00e9 jsou n\u00ed\u017ee na&nbsp;webu. K&nbsp;tomu jsme si napsali jednoduchou funkci s&nbsp;pomoci Intersection Observer API.<\/p>\n<pre><script>\nif(!!window.IntersectionObserver) {\n const options = {\n  rootMargin: \"300px\",\n  threshold: 1.0\n };\n var io = new IntersectionObserver(function (entries) {\n  entries.forEach(function (entry) {\n   if (entry.intersectionRatio > 0.9) {\n    entry.target.classList.add('lazyload--loaded');\n    io.unobserve(entry.target);\n   }\n  });\n }, options);\n\n const targetElements = document.querySelectorAll(\".lazyload\");\n for (var i = 0; i < targetElements.length; i++) {\n  io.observe(targetElements[i]);\n }\n} else {\n const targetElements = document.querySelectorAll(\".lazyload\");\n for (var i = 0; i < targetElements.length; i++) {\n  targetElements[i].classList.add('lazyload--loaded');\n }\n}\n<\/script>\n<\/pre>\n<p>Hned prvn\u00ed prvn\u00ed podm\u00ednka <code>(if)<\/code> rozhodne, jestli prohl\u00ed\u017ee\u010d um\u00ed IntersectionObserver. Pokud ne, blok\u016fm ihned p\u0159i\u0159ad\u00ed class <code>lazyload--loaded<\/code>, a&nbsp;t\u00edm je zobraz\u00ed. Pokud prohl\u00ed\u017ee\u010d IntersectionObserver um\u00ed, tak v\u0161em blok\u016fm s&nbsp;class <code>lazyload<\/code> \u0159\u00edk\u00e1, aby \u010dekali, a\u017e se okraj str\u00e1nky p\u0159ibl\u00ed\u017e\u00ed na nastavenou vzd\u00e1lenost (v na\u0161em p\u0159\u00edpad\u011b 300&nbsp;px), a&nbsp;teprve pot\u00e9 p\u0159i\u0159ad\u00ed v\u00fd\u0161e zm\u00edn\u011bnou class.<\/p>\n<p>Do CSS jsme je\u0161t\u011b museli dodat:<\/p>\n<pre>.lazyload &gt; div { \/\/ z pocatku je blok skryty\n  display: none;\n  opacity: 0;\n  transition: opacity 1s;\n}\n\n.lazyload--loaded &gt; div { \/\/ pokud priradime classu, tak zobrazime\n  display: block;\n  opacity: 1;\n  transition: opacity 1s;\n}\n\n.no-js {\n  .lazyload &gt; div { \/\/ pokud je v prohl\u00ed\u017ee\u010di vypl\u00fd JS, rovnou zobrazit blok\n    display: block;\n    opacity: 1;\n  }\n}\n<\/pre>\n<h3>Poskakov\u00e1n\u00ed obsahu a&nbsp;obr\u00e1zk\u016f<\/h3>\n<p>Pro \u00faplnost je\u0161t\u011b zm\u00edn\u00edm problematiku poskakov\u00e1n\u00ed obsahu. Kdy\u017e prohl\u00ed\u017ee\u010d stahuje obr\u00e1zky, v\u011bt\u0161inou nev\u00ed, jak budou velk\u00e9. Proto se po sta\u017een\u00ed cel\u00fd obsah posune (posko\u010d\u00ed), aby se obr\u00e1zek na dan\u00e9 m\u00edsto vlezl. Doporu\u010duji na to myslet p\u0159edem, a&nbsp;jasn\u011b vymezit, kde se m\u00e1 zobrazit. Jedn\u00e1 se o&nbsp;takzvan\u00fd padding-bottom trik - jestli se o&nbsp;n\u011bm chcete do\u010d\u00edst v\u00edce, odk\u00e1\u017eu v\u00e1s na skv\u011bl\u00fd&nbsp; <a href=\"https:\/\/www.vzhurudolu.cz\/prirucka\/padding-trik\">\u010dl\u00e1nek od pana Mich\u00e1lka<\/a>, kter\u00fd tuto problematiku detailn\u011bji \u0159e\u0161\u00ed.<\/p>\n<p>Pokud v\u00e1s k&nbsp;obr\u00e1zk\u016fm na frontendu zaj\u00edm\u00e1 n\u011bco dal\u0161\u00edho, nechte mi koment\u00e1\u0159. V&nbsp;dal\u0161\u00edch d\u00edlech se pod\u00edv\u00e1me na <a href=\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-3\/\">webov\u00e9 fonty<\/a>, <a href=\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-4\/\">stahov\u00e1n\u00ed CSS soubor\u016f a&nbsp;JavaScripty.<\/a><\/p>\n\n\t\t<script>var e = {type:\"double\", dml:\"83663\", fc1:\"500865e1b35dfa8f\",fc2:\"6ff518beca7cae5c\", dt:\"13486\" , returnUrl:\"https:\/\/igloonet.cz\/blog\" , autosuggest:true, fromEmail:\"marketing@igloonet.cz\", fromName:\"igloonet \"};window.e7c7afidg=e;s=document.getElementsByTagName(\"script\")[0];qc=document.createElement(\"script\");qc.src=\"\/\/static.mailkit.eu\/_system\/subform.js\";qc.setAttribute(\"dvar\", \"e7c7afidg\");s.parentNode.insertBefore(qc,s);<\/script>\t\t\n\t\t<div class=\"mailkit_instance\">\n\t\t\t<form method=\"POST\" data-id=\"e7c7afidg\" class=\"newsletter-form\" id=\"newsletter-form\">\n\t\t\t    <div class=\"hr-wrap\"><hr><\/div>\n\t            <h2>Chyst\u00e1me pokra\u010dov\u00e1n\u00ed<\/h2>\n\t            <p>Nenechte si uj\u00edt pokra\u010dov\u00e1n\u00ed \u010dl\u00e1nku a&nbsp;dal\u0161\u00ed novinky a&nbsp;tipy. Zadejte sv\u016fj e-mail, a&nbsp;u\u017e v\u00e1m nic neunikne.<\/p>\n\t\t\t\t\n\t\t\t\t<div class=\"newsletter-form__email\">\n\t                <div class=\"newsletter-form__input-group\">\n\t                    <label for=\"first_name_inline\">K\u0159estn\u00ed jm\u00e9no<\/label><input type=\"text\" name=\"first_name\" id=\"first_name_inline\" value required>\n\t                <\/div>\n\t\t\t\t    \n\t\t\t\t    <div class=\"newsletter-form__input-group\">\n\t\t\t\t\t    <label for=\"email_inline\">E-mail<\/label><input type=\"text\" name=\"email\" id=\"email_inline\" value required>\n\t\t\t\t    <\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t<div class=\"mailkit_submit newsletter-form__button--wrapper\">\n\t\t\t\t    <button type=\"submit\" class=\"newsletter-form__button\" id=\"newsletter-form__button\">P\u0159ihl\u00e1sit<\/button>\n\t\t\t\t    <input type=\"hidden\" name=\"_do\" value=\"newsletterForm-submit\">\n\t\t\t\t<\/div>\n                                <div><br>Odesl\u00e1n\u00edm formul\u00e1\u0159e souhlas\u00edte se <a href=\"\/ochrana-osobnich-udaju\">zpracov\u00e1n\u00edm osobn\u00edch \u00fadaj\u016f<\/a>.<\/div>\n\t\t\t<\/form>\n\t\t<\/div>\n\t\t\n\t\t<div class=\"newsletter-form__alert\" id=\"newsletter-form__alert\">\n\t\t\tByl v\u00e1m odesl\u00e1n potvrzovac\u00ed e-mail.&nbsp;<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>Hur\u00e1, slevy! Nad\u0161en\u011b otv\u00edr\u00e1te seznam produkt\u016f, ale ten se nena\u010d\u00edt\u00e1 a&nbsp;nena\u010d\u00edt\u00e1\u2026 V&nbsp;\u010dem ud\u011blal program\u00e1tor chybu? Poj\u010fme si uk\u00e1zat, na&nbsp;co d\u00e1t u&nbsp;obr\u00e1zk\u016f pozor a&nbsp;jak v\u00e1m m\u016f\u017ee jednoduch\u00e1 zm\u011bna na\u010d\u00edt\u00e1n\u00ed zrychlit web.<\/p>\n","protected":false},"author":42,"featured_media":6725,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":""},"categories":[71],"tags":[176,248,247,246],"class_list":["post-6135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vyvoj","tag-frontend","tag-lazyloading","tag-obrazky","tag-zrychleni-webu"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Zrychlujeme web \u2013 Jak na obr\u00e1zky? | igloonet blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/\" \/>\n<meta property=\"og:locale\" content=\"cs_CZ\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nejpou\u017e\u00edvan\u011bj\u0161\u00ed form\u00e1ty a lazyloading\" \/>\n<meta property=\"og:description\" content=\"Hur\u00e1, slevy! Nad\u0161en\u011b otv\u00edr\u00e1te seznam produkt\u016f, ale ten se nena\u010d\u00edt\u00e1 a nena\u010d\u00edt\u00e1... V \u010dem ud\u011blal program\u00e1tor chybu? Poj\u010fme si uk\u00e1zat, na co d\u00e1t u obr\u00e1zk\u016f pozor a jak v\u00e1m m\u016f\u017ee jednoduch\u00e1 zm\u011bna na\u010d\u00edt\u00e1n\u00ed zrychlit web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/\" \/>\n<meta property=\"og:site_name\" content=\"igloonet blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/igloonet\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-06T09:02:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-10T07:02:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/12\/13.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Luk\u00e1\u0161 Pto\u0161ek\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Nejpou\u017e\u00edvan\u011bj\u0161\u00ed form\u00e1ty a lazyloading\" \/>\n<meta name=\"twitter:description\" content=\"Hur\u00e1, slevy! Nad\u0161en\u011b otv\u00edr\u00e1te seznam produkt\u016f, ale ten se nena\u010d\u00edt\u00e1 a nena\u010d\u00edt\u00e1... V \u010dem ud\u011blal program\u00e1tor chybu? Poj\u010fme si uk\u00e1zat, na co d\u00e1t u obr\u00e1zk\u016f pozor a jak v\u00e1m m\u016f\u017ee jednoduch\u00e1 zm\u011bna na\u010d\u00edt\u00e1n\u00ed zrychlit web.\" \/>\n<meta name=\"twitter:creator\" content=\"@igloonet\" \/>\n<meta name=\"twitter:site\" content=\"@igloonet\" \/>\n<meta name=\"twitter:label1\" content=\"Napsal(a)\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luk\u00e1\u0161 Pto\u0161ek\" \/>\n\t<meta name=\"twitter:label2\" content=\"Odhadovan\u00e1 doba \u010dten\u00ed\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/\"},\"author\":{\"name\":\"Luk\u00e1\u0161 Pto\u0161ek\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/a812735f33c06a10323ebc76473770a6\"},\"headline\":\"Zrychlujeme web \u2013 Jak na&nbsp;obr\u00e1zky?\",\"datePublished\":\"2019-12-06T09:02:31+00:00\",\"dateModified\":\"2020-07-10T07:02:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/\"},\"wordCount\":1622,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/12\/13.png\",\"keywords\":[\"frontend\",\"lazyloading\",\"obr\u00e1zky\",\"zrychlen\u00ed webu\"],\"articleSection\":[\"V\u00fdvoj\"],\"inLanguage\":\"cs\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/\",\"url\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/\",\"name\":\"Zrychlujeme web \u2013 Jak na obr\u00e1zky? | igloonet blog\",\"isPartOf\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/12\/13.png\",\"datePublished\":\"2019-12-06T09:02:31+00:00\",\"dateModified\":\"2020-07-10T07:02:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#breadcrumb\"},\"inLanguage\":\"cs\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"cs\",\"@id\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#primaryimage\",\"url\":\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/12\/13.png\",\"contentUrl\":\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/12\/13.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"V\u00fdvoj\",\"item\":\"https:\/\/igloonet.cz\/blog\/rubriky\/vyvoj\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Zrychlujeme web \u2013 Jak na&nbsp;obr\u00e1zky?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#website\",\"url\":\"https:\/\/igloonet.cz\/blog\/\",\"name\":\"igloonet blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/igloonet.cz\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cs\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#organization\",\"name\":\"igloonet\",\"url\":\"https:\/\/igloonet.cz\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png\",\"contentUrl\":\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png\",\"width\":650,\"height\":465,\"caption\":\"igloonet\"},\"image\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/igloonet\",\"https:\/\/x.com\/igloonet\",\"https:\/\/instagram.com\/igloonet\/\",\"https:\/\/www.linkedin.com\/company\/igloonet\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/a812735f33c06a10323ebc76473770a6\",\"name\":\"Luk\u00e1\u0161 Pto\u0161ek\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2854b00258f0cdf1aa6b521b4f6452238187e8c09bbbf7460685c9bb74a09566?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2854b00258f0cdf1aa6b521b4f6452238187e8c09bbbf7460685c9bb74a09566?s=96&d=retro&r=g\",\"caption\":\"Luk\u00e1\u0161 Pto\u0161ek\"},\"url\":\"https:\/\/igloonet.cz\/blog\/author\/ptosek\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Zrychlujeme web \u2013 Jak na obr\u00e1zky? | igloonet blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/","og_locale":"cs_CZ","og_type":"article","og_title":"Nejpou\u017e\u00edvan\u011bj\u0161\u00ed form\u00e1ty a lazyloading","og_description":"Hur\u00e1, slevy! Nad\u0161en\u011b otv\u00edr\u00e1te seznam produkt\u016f, ale ten se nena\u010d\u00edt\u00e1 a nena\u010d\u00edt\u00e1... V \u010dem ud\u011blal program\u00e1tor chybu? Poj\u010fme si uk\u00e1zat, na co d\u00e1t u obr\u00e1zk\u016f pozor a jak v\u00e1m m\u016f\u017ee jednoduch\u00e1 zm\u011bna na\u010d\u00edt\u00e1n\u00ed zrychlit web.","og_url":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/","og_site_name":"igloonet blog","article_publisher":"https:\/\/www.facebook.com\/igloonet","article_published_time":"2019-12-06T09:02:31+00:00","article_modified_time":"2020-07-10T07:02:06+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/12\/13.png","type":"image\/png"}],"author":"Luk\u00e1\u0161 Pto\u0161ek","twitter_card":"summary_large_image","twitter_title":"Nejpou\u017e\u00edvan\u011bj\u0161\u00ed form\u00e1ty a lazyloading","twitter_description":"Hur\u00e1, slevy! Nad\u0161en\u011b otv\u00edr\u00e1te seznam produkt\u016f, ale ten se nena\u010d\u00edt\u00e1 a nena\u010d\u00edt\u00e1... V \u010dem ud\u011blal program\u00e1tor chybu? Poj\u010fme si uk\u00e1zat, na co d\u00e1t u obr\u00e1zk\u016f pozor a jak v\u00e1m m\u016f\u017ee jednoduch\u00e1 zm\u011bna na\u010d\u00edt\u00e1n\u00ed zrychlit web.","twitter_creator":"@igloonet","twitter_site":"@igloonet","twitter_misc":{"Napsal(a)":"Luk\u00e1\u0161 Pto\u0161ek","Odhadovan\u00e1 doba \u010dten\u00ed":"9 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#article","isPartOf":{"@id":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/"},"author":{"name":"Luk\u00e1\u0161 Pto\u0161ek","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/a812735f33c06a10323ebc76473770a6"},"headline":"Zrychlujeme web \u2013 Jak na&nbsp;obr\u00e1zky?","datePublished":"2019-12-06T09:02:31+00:00","dateModified":"2020-07-10T07:02:06+00:00","mainEntityOfPage":{"@id":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/"},"wordCount":1622,"commentCount":0,"publisher":{"@id":"https:\/\/igloonet.cz\/blog\/#organization"},"image":{"@id":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#primaryimage"},"thumbnailUrl":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/12\/13.png","keywords":["frontend","lazyloading","obr\u00e1zky","zrychlen\u00ed webu"],"articleSection":["V\u00fdvoj"],"inLanguage":"cs","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/","url":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/","name":"Zrychlujeme web \u2013 Jak na obr\u00e1zky? | igloonet blog","isPartOf":{"@id":"https:\/\/igloonet.cz\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#primaryimage"},"image":{"@id":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#primaryimage"},"thumbnailUrl":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/12\/13.png","datePublished":"2019-12-06T09:02:31+00:00","dateModified":"2020-07-10T07:02:06+00:00","breadcrumb":{"@id":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#breadcrumb"},"inLanguage":"cs","potentialAction":[{"@type":"ReadAction","target":["https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/"]}]},{"@type":"ImageObject","inLanguage":"cs","@id":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#primaryimage","url":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/12\/13.png","contentUrl":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2019\/12\/13.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/igloonet.cz\/blog\/zrychlujeme-web-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"V\u00fdvoj","item":"https:\/\/igloonet.cz\/blog\/rubriky\/vyvoj\/"},{"@type":"ListItem","position":2,"name":"Zrychlujeme web \u2013 Jak na&nbsp;obr\u00e1zky?"}]},{"@type":"WebSite","@id":"https:\/\/igloonet.cz\/blog\/#website","url":"https:\/\/igloonet.cz\/blog\/","name":"igloonet blog","description":"","publisher":{"@id":"https:\/\/igloonet.cz\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/igloonet.cz\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cs"},{"@type":"Organization","@id":"https:\/\/igloonet.cz\/blog\/#organization","name":"igloonet","url":"https:\/\/igloonet.cz\/blog\/","logo":{"@type":"ImageObject","inLanguage":"cs","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png","contentUrl":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png","width":650,"height":465,"caption":"igloonet"},"image":{"@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/igloonet","https:\/\/x.com\/igloonet","https:\/\/instagram.com\/igloonet\/","https:\/\/www.linkedin.com\/company\/igloonet"]},{"@type":"Person","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/a812735f33c06a10323ebc76473770a6","name":"Luk\u00e1\u0161 Pto\u0161ek","image":{"@type":"ImageObject","inLanguage":"cs","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2854b00258f0cdf1aa6b521b4f6452238187e8c09bbbf7460685c9bb74a09566?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2854b00258f0cdf1aa6b521b4f6452238187e8c09bbbf7460685c9bb74a09566?s=96&d=retro&r=g","caption":"Luk\u00e1\u0161 Pto\u0161ek"},"url":"https:\/\/igloonet.cz\/blog\/author\/ptosek\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts\/6135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/comments?post=6135"}],"version-history":[{"count":36,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts\/6135\/revisions"}],"predecessor-version":[{"id":6710,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts\/6135\/revisions\/6710"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/media\/6725"}],"wp:attachment":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/media?parent=6135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/categories?post=6135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/tags?post=6135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}