Průvodce pro začátečníky responzivními obrázky v HTML

Responzivní obrázek je obrázek, který se přizpůsobuje různým charakteristikám zařízení. Při správném provedení mohou responzivní obrázky zlepšit výkon a uživatelský dojem z webu.

Tento článek zkoumá, jak můžete vytvořit responzivní obrázky v HTML pomocí srcset a prvek obrázku.

Proč byste měli používat responzivní obrázky?

Když softwaroví inženýři vytvářeli web, neuvažovali o tom, jak si prohlížeče poradí s responzivními obrázky. Koneckonců, uživatelé přistupovali na web pouze ze stolních počítačů nebo notebooků. Dnes to samozřejmě není pravda.

Podle Statista, více než 90 procent celosvětové internetové populace používá svůj mobilní telefon. Většina webových stránek na internetu obsahuje obrázky a tyto obrázky jsou jednou z metrik používaných k měření výkonnosti webu. Chcete-li zlepšit výkon, musíte optimalizovat obrázky tak, aby byly responzivní.

Jak vytvářet responzivní obrázky v HTML

K responzivním obrázkům můžete přistupovat ze dvou úhlů – buď zobrazením stejného obrázku s různými velikostmi, nebo zobrazením různých obrázků podle vlastností zobrazení. Mohl bys použít nebo. Tyto dvě možnosti zacházejí s responzivními obrázky odlišně, ale všechny zobrazují jeden obrázek z daných alternativ v závislosti na nastavených pravidlech.

Příbuzný: Jak zajistit, aby byl váš web responzivní a interaktivní pomocí CSS a JavaScriptu

Pomocí srcset

Standardní HTML umožňuje zadat pouze jeden soubor obrázku. Pokud chcete zobrazit jiný obrázek v závislosti na velikosti zařízení, měli byste použít srcset.

Syntax:

srcset umožňuje poskytnout další zdrojové soubory a prohlížeč vybere obrázek, který se zdá být optimální pro danou velikost obrázku.

 src="roztomilá-kočka.jpg"
 alt="Roztomilá kočka">

srcset se skládá ze tří částí: Název souboru obrázku, který určuje cestu ke zdrojovému obrázku, mezeru a vnitřní nebo skutečnou šířku obrázku.

Použití srcset S velikostmi

Problém s používáním srcset je, že nemáte žádnou kontrolu nad tím, jaký obrázek prohlížeč vybere k zobrazení. Kombinování srcset s velikosti řeší tento problém. velikosti definovat sadu podmínek média, které naznačují obraz s optimální velikostí.

Nyní můžete přepsat tag výše takto.

size="(max-width: 600px) 480px,
 800px"
 src="roztomilá-kočka.jpg"
 alt="Roztomilá kočka">

velikosti se skládá z podmínky média, v tomto příkladu je to (max-width: 600px), která představuje zobrazovanou oblast šířka, mezera a šířka slotu (480px) určující prostor, který obraz zaplní, pokud je stav média skutečný.

Příbuzný: Jak používat dotazy na média v HTML a CSS k vytváření responzivních webů

Zde prohlížeč nejprve zkontroluje šířku zařízení a porovná ji se stavem média. Pokud je podmínka pravdivá, zkontroluje šířku slotu a načte obrázek z srcset se stejnou šířkou nebo nejbližší větší.

Všimněte si, že zahrnujete také src který poskytuje obrázek, aby se vrátil do prohlížečů, které nepodporují srcset a velikosti.

srcset také umožňuje zobrazovat obrázky v různých rozlišeních pomocí x-deskriptorů.

 src="roztomilá-kočka-nízká.jpg"
 alt="Roztomilá kočka">

V tomto příkladu, pokud má zařízení rozlišení dva pixely zařízení na CSS nebo více, prohlížeč načte obrázek cute-cat-high1.jpg.

Hardwarové a softwarové pixely

Problém s tímto řešením je, že obrázky reagují pouze z hlediska hustoty pixelů zařízení. Toto je poměr pixelů hardwaru k pixelům softwaru nebo CSS. Hardwarový pixel je skutečný světelný bod na obrazovce, zatímco softwarový pixel nebo CSS pixel je měrnou jednotkou. Hustota pixelů určuje rozlišení zařízení.

Při vykreslování responzivních obrázků neberte v úvahu pouze rozlišení; důležitá je také velikost displeje. V opačném případě můžete skončit zbytečně načítáním velkých obrázků nebo obrázků, které jsou příliš pixilované.

 src="roztomilá-kočka-nízká.jpg"
 alt="Roztomilá kočka">

Použitím

je prvek HTML, který zabaluje několik prvky obsahující různé zdrojové soubory a an živel. Zatímco činí obrázky responzivními tím, že zobrazuje různé velikosti stejného obrázku, umožňuje skutečně změnit zobrazený obrázek.

Syntax:

Zvažte situaci, kdy máte velký obrázek na šířku. Obrázek se zobrazuje a vypadá proporcionálně na počítači, ale na mobilu se výrazně zmenšuje, takže prvky na obrázku jsou malé. Neresponzivní obrázek přispívá ke špatné uživatelské zkušenosti. S můžete svému prohlížeči přikázat, aby se v mobilu přepnul na obrázek zblízka.

Stejně jako v prvním přístupu, obsahuje atribut média, který můžete použít k zadání stavu média. Prohlížeč například zobrazí „cute-cat-480w.jpg“, pokud je šířka zobrazované oblasti 639 pixelů nebo méně. The srcset obsahuje cestu k souboru obrázku, který chcete zobrazit, a src určuje výchozí obrázek.

Příbuzný: 7 nových funkcí CSS pro vytvoření responzivního webu

Záložní formát obrázku WebP

Další věc, že zvládá dobře a poskytuje záložní řešení pro moderní obrazové formáty, jako je WebP. Obrázky WebP mají vysoký výkon, jsou malé a nabízejí rychlý web. Můžete se tedy rozhodnout, zda je na svých stránkách použijete. Problém, se kterým se můžete setkat, je, že ne všechny prohlížeče podporují obrázky WebP. S, tento problém nezaznamenáte, protože váš prohlížeč může načíst alternativní obrázek, pokud nepodporuje WebP.

Proč vytvářet responzivní obrázky v HTML a ne v CSS?

CSS nabízí robustní možnosti pro práci s responzivními obrázky. Tak proč toho nevyužít? Prohlížeč předem načte obrázky před analýzou CSS. Než tedy JavaScript vašeho webu zjistí šířku zobrazované oblasti, aby provedl příslušné změny na obrázcích, původní obrázky již byly předem načteny. Díky tomu je lepší zpracovávat responzivní obrázky pomocí HTML.

Zaměřte se na nejlepší možnou kvalitu obrazu

Viděli jste, jak můžete vytvářet responzivní obrázky v HTML pomocí > a v tomto článku. Poskytování responzivních obrázků obvykle zahrnuje zvážení velikosti obrázku a rozlišení obrázku ve vztahu k velikosti zobrazení. Pokud se to udělá špatně, může to utrpět kvalita obrazu. Ujistěte se, že jste vybrali obrázek, který poskytuje optimální použitelnost při použití co nejmenšího počtu zdrojů.

Principy responzivního webdesignu

Weboví designéři již léta prosazují responzivní design, ale co to je a jak může vytvářet vynikající webové stránky?

Přečtěte si další

O autorovi