Přejít k navigační liště

Zdroják » Webdesign » Vzpomínka na responzivní obrázky: Recenze knihy Image Performance

Vzpomínka na responzivní obrázky: Recenze knihy Image Performance

Články Webdesign

Posledních šest let byl Mat Marquis předseda W3C skupiny, která vytvořila standard pro responzivní obrázky na webu. Právě vyšla jeho e-kniha o tomto tématu, kterou on sám označuje za svou labutí píseň. Co všechno obsahuje a pro koho se hodí?

Nálepky:

Responzivní obrázky byly „moje“ téma roku 2014. Sepsal jsem článek, několikrát přednášel a vytvořil polyfill. Byl to totiž rok, kdy byl problém responzivních obrázků vyřešen. Tedy alespoň z pohledu specifikace, teoreticky.

Následující čtyři roky se vše zavádělo do praxe: prohlížeče specifikaci implementovaly a vývojáři se ji učili používat. A protože to šlo dobře, rozhodli se členové RICG (Responsive Issues Community Group, původně Responsive Images Community Group), že skupina splnila svůj účel a uzavřeli mailové fórum.

V ten samý den, nikoli náhodou, vyšla kniha předsedy zmíněné skupiny Mata Marquise nazvaná Image Performance. Vydalo ji známé nakladatelství A Book Apart v edici Briefs, tedy jako úzce zaměřenou odbornou publikaci a pouze elektronicky. Doufal jsem, že se jedná o završení mnoha let práce řady lidí, kteří společně posouvají web dál. Samozřejmě jsem si ji hned musel přečíst.

Formáty a komprese

První kapitola o formátech obrázků je zároveň předposlední. Ano, kniha má pouze dvě kapitoly, každou asi o 30 stranách. Ovšem už od začátku je zřejmé, že se nejedná o nudnou, technickou příručku. Autor píše velmi osobně a často přidává drobné vtípky.

Začíná popisem rozdílů mezi vektorem a rastrem. Poté postupně píše o formátech SVG, GIF, PNG a JPEG. U každého se dozvíme, jak vnitřně reprezentuje pixely. Na příkladech pak ukazuje GIF obrázek v různých barevných prostorech, downsampling v JPEG nebo artefakty vzniklé při kompresi.

A právě ve chvíli, kdy mi přišlo, že jsme se rozjeli a probrali povinné základy, že se ponoříme do JPEG komprese nebo si představíme formát WebP, kapitola náhle končí. Na WebP zbylo místo jen v posledním odstavci kapitoly.

Dobře, na třicet stran se toho asi víc nevejde. Zvlášť když pro názornost přidáte dvacet ilustrací. Já jsem si stejně knížku kupoval kvůli následující kapitole.

Responzivní obrázky

Začínáme docela vážně, parafrází Shakespeara. To se přeci jen hodí, protože celá druhá polovina knihy vesměs kopíruje kompozici klasického dramatu.

Samozřejmě v první části, expozici, se píše o historii obrázků a první pokusů o jejich responzivitu. Chválí se robustnost tagu <img>. Celkem detailně autor popisuje jejich naivní řešení responzivity při tvorbě portálu pro Boston Globe v roce 2011.

Popis čtyř z případů užití, které původně definovala RICG, tvoří hlavní část kapitoly. Přesně podle dramatické kompozice postupně stoupáme výš. S každým případem si ukážeme příklad, na kterém si odhalíme nový prvek specifikace.

Art direction nám poslouží pro představení elementu <picture> a definici zdrojů v prvcích <source>. Různé formáty obrázků se naučíme definovat pomocí atributu type (ano, WebP je opět zmíněno). Díky atributu srcset s X deskriptorem pro nás už nebude problém Retina rozlišení. A konečně, kombinace W descriptoru a atributu sizes pomůže s flexibilními obrázky.

Ukázka z knihy

Těsně před vrcholem, který tvoří úplný, monstrózní příklad na 41 řádků, nám autor ukáže některé kombinace a velmi polopaticky je popíše. Tohle bylo docela bolestivé čtení; pětiřádkový příklad je slovy převyprávěn v následujících třech odstavcích.

Peripetie, tedy obrat, nastává, když se dozvídáme, že tohle vlastně jako kodéři nebudeme v praxi psát ručně. Že se předpokládá integrace responzivních obrázků do CMS a použití pomocníků jako RespImageLint, kteří vše spočítají sami.

Závěr

Naučil jsem se něco nového technicky? Ne, i když jsem v to trochu doufal. Pokud už responzivní obrázky řešíte nebo dokonce používáte, kromě zákulisí a slepých uliček se nic nového nedozvíte.

Naopak jsem si rád přečetl úvod, „expozici“, druhé kapitoly a závěr. Snad v tom hraje roli nostalgická vzpomínka, protože oboje připomíná autorovu práci na standardu. Tvoří takové mini memoáry, které mě bavily.

Teď upřímně. Dva nebo tři vzpomínkové blogové zápisky by bývaly udělaly stejnou službu. Když si trochu připlatíte a koupíte si knihu Vzhůru do (responzivního) webdesignu od Martina Michálka, dozvíte se o responzivních obrázcích to samé s praktickými tipy navíc. A jako bonus si můžete přečíst o zbytku responzivního webdesignu. Do hloubky ohledně formátů a načítání v prohlížečích by mohla jít mnohem tlustší kniha High Performance Images, na kterou jsem slyšel dobré recenze, nebo výborný online svazek Essential Image Optimization.

Z optimistického závěru knihy bych si nakonec vypůjčil jednu statistiku: v roce 2018 se zvrátil trend a velikost přenesených obrázků klesá. Jak dodává autor: „Děláme to lépe.“

Údaje o knize

Název: Image Performance
Autor: Mat Marquis
Nakladatel: A Book Apart
Rok vydání: 2018
ISBN: 978-1-937557-77-5
Rozsah: 67 stran (PDF)
Formáty: MOBI, EPUB, PDF
Ukázky: abookapart.com/products/image-performance

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.