{"id":5587,"date":"2020-05-10T19:40:32","date_gmt":"2020-05-10T19:40:32","guid":{"rendered":"https:\/\/musilda.cz\/?p=5587"},"modified":"2020-05-10T19:40:32","modified_gmt":"2020-05-10T19:40:32","slug":"spravne-pouziti-nahledoveho-obrazku-v-sablone-s-ohledem-na-rychlost-webu","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/spravne-pouziti-nahledoveho-obrazku-v-sablone-s-ohledem-na-rychlost-webu\/","title":{"rendered":"Spr\u00e1vn\u00e9 pou\u017eit\u00ed n\u00e1hledov\u00e9ho obr\u00e1zku v \u0161ablon\u011b s ohledem na rychlost webu"},"content":{"rendered":"\n

Rychlost webu je d\u016fle\u017eit\u00e1 a ka\u017ed\u00e1 mali\u010dkost jej m\u016f\u017ee brzdit. U n\u00e1hledov\u00fdch obr\u00e1zk\u016f je to je\u0161t\u011b markantn\u011bj\u0161\u00ed, proto\u017ee jich je na str\u00e1nce v\u011bt\u0161\u00ed mno\u017estv\u00ed. Spr\u00e1vn\u00e9 zobrazen\u00ed je tedy pom\u011brn\u011b d\u016fle\u017eit\u00e9. <\/p>\n\n\n\n

Z\u00e1kladem rychlosti rychl\u00e9ho na\u010d\u00edt\u00e1n\u00ed webu, je jeho velikost. Na pomal\u00fdch p\u0159ipojen\u00edch se po\u010d\u00edtaj\u00ed ka\u017ed\u00e1 zbyte\u010dn\u011b na\u010dten\u00e1 data a pr\u00e1v\u011b u obr\u00e1zk\u016f se d\u011bl\u00e1 nejv\u00edce chyb. <\/p>\n\n\n\n

Mo\u017en\u00e1 se v\u00e1m to bude zd\u00e1t jako mali\u010dkost, ale velmi d\u016fle\u017eit\u00e9 jsou spr\u00e1vn\u00e9 rozm\u011bry obr\u00e1zk\u016f. Pokud je m\u00edsto pro obr\u00e1zek \u0161ablon\u011b na desktopu 350px \u0161irok\u00e9, m\u011bl by b\u00fdt obr\u00e1zek \u0161irok\u00fd 350px. <\/p>\n\n\n\n

Jen\u017ee, kdy\u017e zmen\u0161\u00edte \u0161\u00ed\u0159ku okna a responsivn\u00ed web se v\u00e1m srovn\u00e1 do zobrazen\u00ed pro tablet, nebo mobil, \u0161\u00ed\u0159ka pro obr\u00e1zek je najednou pot\u0159ebn\u00e1 430px. <\/p>\n\n\n\n

Tak\u017ee do \u0161ablony naserv\u00edrujeme obr\u00e1zek \u0161irok\u00fd 430, na desktopu si to prohl\u00ed\u017ee\u010d s\u00e1m zmen\u0161\u00ed. <\/p>\n\n\n\n

Jen\u017ee si zmen\u0161\u00ed pouze zobrazen\u00ed, datov\u00e1 velikost z\u016fstane stejn\u00e1. A Lighthouse hned za\u010dne vypisovat:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ono se to nezd\u00e1, ale pokud t\u011bch obr\u00e1zk\u016f m\u00e1te na str\u00e1nce t\u0159eba deset a na ka\u017ed\u00e9m d\u00edky spr\u00e1vn\u00e9 velikosti u\u0161et\u0159\u00edte n\u011bkolik kB, v celkov\u00e9m sou\u010dtu to bude zn\u00e1t. <\/p>\n\n\n\n

Jak z toho ven?<\/h2>\n\n\n\n

P\u0159esn\u011b jak p\u00ed\u0161e Lighthouse – pou\u017eijte obr\u00e1zky odpov\u00eddaj\u00edc\u00edch rozm\u011br\u016f. <\/p>\n\n\n\n

Jen\u017ee jak, kdy\u017e pot\u0159ebuji m\u00edt na mobil obr\u00e1zek \u0161irok\u00fd 430px a na desktop 350px? <\/p>\n\n\n\n

WordPress m\u00e1 ji\u017e od verze 4.4. (co\u017e je mimochodem mysl\u00edm konec roku 2015) responzivn\u00ed obr\u00e1zky. To znamen\u00e1, \u017ee v html tagu img pou\u017e\u00edv\u00e1 atribut srcset. <\/p>\n\n\n\n

Tak\u017ee, kdy\u017e k\u00f3dujete \u0161ablonu, sta\u010d\u00ed pou\u017e\u00edt funkci get_post_thumbnail() a dostanete cel\u00fd img tag i s t\u0159\u00eddami a atributerm srcset. <\/p>\n\n\n\n

Bohu\u017eel ne v\u017edy se to z n\u011bjak\u00e9ho d\u016fvodu hod\u00ed. Tak\u017ee se v \u0161ablon\u00e1ch pak setk\u00e1te se z\u00edsk\u00e1v\u00e1n\u00edm id obr\u00e1zku, bu\u010f pomoc\u00ed get_post_thumbnail_id(), nebo z n\u011bjak\u00e9ho custom fieldu. <\/p>\n\n\n\n

Pak ji\u017e jen zavol\u00e1te wp_get_attachment_image_src, nebo wp_get_attachment_image_url a do \u0161ablony vyp\u00ed\u0161ete obr\u00e1zek:<\/p>\n\n\n\n

echo '<img src=\"'.wp_get_attachment_image_url($img_id).'\" alt=\"Alt obr\u00e1zku\" \/>';<\/code><\/pre>\n\n\n\n
A jsme u toho probl\u00e9mu. <\/p>\n\n\n\n
Pokud chcete vypisovat do \u0161ablony n\u00e1hledov\u00e9 obr\u00e1zky a m\u00edt kontrolu nad k\u00f3dem img tagu, mus\u00edte pou\u017e\u00edt funkci wp_get_attachment_image_url().<\/p>\n\n\n\n
Bohu\u017eel to ale nesm\u00ed vypadat takto:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Tady je v k\u00f3du pou\u017eit\u00e1 funkce wp_get_attachment_image + id obr\u00e1zku a velikost n\u00e1hledu. Tak\u017ee dostanete tohle:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Co\u017e je \u0161patn\u011b i t\u0159eba u hlediska SEO a p\u0159\u00edstupnosti, proto\u017ee ten obr\u00e1zek nem\u00e1 alt. <\/p>\n\n\n\n
Funkce wp_get_attachment_image() p\u0159ij\u00edm\u00e1 v posledn\u00edm argumentu pole vlastnost\u00ed, mezi nimi\u017e je i alt a srcset. Ale ten srcset mus\u00edte n\u011bjak z\u00edskat. <\/p>\n\n\n\n
Funkce wp_get_attachment_image_srcset a wp_get_attachment_image_sizes<\/h2>\n\n\n\n
WordPress m\u00e1 od zmi\u0148ovan\u00e9 verze 4.4 k dispozici nov\u00e9 funkce pro obr\u00e1zky a mezi nimi jsou wp_get_attachment_image_srcset a wp_get_attachment_image_sizes. Pro spr\u00e1vn\u011b vy\u0159e\u0161en\u00e9 responzivn\u00e9 obr\u00e1zky je pot\u0159ebujete ob\u011b. <\/p>\n\n\n\n
Bu\u010f je po\u0161lete do wp_get_attachment_image jako pole atribut\u016f, nebo to hezky rozlo\u017e\u00edte p\u0159\u00edmo do tagu img:<\/p>\n\n\n\n
<img src=\"<?php echo wp_get_attachment_image_url( $attachment_id, 'medium' ) ?>\"\n     srcset=\"<?php echo wp_get_attachment_image_srcset( $attachment_id, 'medium' ) ?>\"\n     sizes=\"<?php echo wp_get_attachment_image_sizes( $attachment_id, 'medium' ) ?>\" \/><\/code><\/pre>\n\n\n\n
V obou p\u0159\u00edpadech dostanete spr\u00e1vn\u00fd v\u00fdsledek, jako t\u0159eba u obr\u00e1zku v jednom z posledn\u00edch \u010dl\u00e1nk\u016f:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Zde je html k\u00f3d, kde je vid\u011bt srcset i sizes. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
V\u00fdsledkem je lep\u0161\u00ed skore na Lighthouse a odpov\u00eddaj\u00edc\u00ed velikosti obr\u00e1zk\u016f pro r\u016fzn\u00e1 za\u0159\u00edzen\u00ed a \u0161\u00ed\u0159e oken prohl\u00ed\u017ee\u010de. Krom\u011b lep\u0161\u00edho sk\u00f3re tak\u00e9 zlep\u0161\u00edte rychlost na\u010d\u00edt\u00e1n\u00ed webu.<\/p>\n\n\n\n
Chcete si zrychlit web, nebo v\u00e1s zaj\u00edm\u00e1 t\u00e9ma zlep\u0161ov\u00e1n\u00ed na\u010d\u00edt\u00e1n\u00ed webu? Z\u00fa\u010dastn\u011bte se webin\u00e1\u0159e na toto t\u00e9ma, kde budu t\u00e9ma obr\u00e1zku ve WordPressu rozeb\u00edrat podrobn\u011bji.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Rychlost webu je d\u016fle\u017eit\u00e1 a ka\u017ed\u00e1 mali\u010dkost jej m\u016f\u017ee brzdit. U n\u00e1hledov\u00fdch obr\u00e1zk\u016f je to je\u0161t\u011b markantn\u011bj\u0161\u00ed, proto\u017ee jich je na str\u00e1nce v\u011bt\u0161\u00ed mno\u017estv\u00ed. Spr\u00e1vn\u00e9 zobrazen\u00ed je tedy pom\u011brn\u011b d\u016fle\u017eit\u00e9. Z\u00e1kladem rychlosti rychl\u00e9ho na\u010d\u00edt\u00e1n\u00ed webu, je jeho velikost. Na pomal\u00fdch p\u0159ipojen\u00edch se po\u010d\u00edtaj\u00ed ka\u017ed\u00e1 zbyte\u010dn\u011b na\u010dten\u00e1 data a pr\u00e1v\u011b u obr\u00e1zk\u016f se d\u011bl\u00e1 nejv\u00edce chyb.<\/p>\n","protected":false},"author":1,"featured_media":8665,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[54,30],"tags":[],"class_list":["post-5587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rychlost","category-wordpress"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/5587"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=5587"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/5587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8665"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=5587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=5587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=5587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}