Príručka pre začiatočníkov k responzívnym obrázkom v HTML

Responzívny obrázok je obrázok, ktorý sa prispôsobuje rôznym charakteristikám zariadenia. Ak sa to urobí správne, responzívne obrázky môžu zlepšiť výkon a používateľskú skúsenosť s webom.

Tento článok skúma, ako môžete vytvárať responzívne obrázky v HTML pomocou srcset a obrazový prvok.

Prečo by ste mali používať responzívne obrázky?

Keď softvéroví inžinieri vytvárali web, nezvažovali, ako budú prehliadače spracovávať responzívne obrázky. Koniec koncov, používatelia pristupovali na web iba zo stolných počítačov alebo prenosných počítačov. Dnes to už samozrejme nie je pravda.

Podľa Statista, viac ako 90 percent svetovej internetovej populácie používa svoj mobilný telefón. Väčšina webových stránok na internete obsahuje obrázky a tieto obrázky sú jednou z metrík používaných na meranie výkonnosti webu. Ak chcete zlepšiť výkon, musíte optimalizovať svoje obrázky tak, aby boli responzívne.

Ako vytvoriť responzívne obrázky v HTML

K responzívnym obrázkom môžete pristupovať z dvoch uhlov – buď naservírovaním rovnakého obrázka s rôznymi veľkosťami, alebo poskytnutím rôznych obrázkov podľa charakteristík zobrazenia. Mohli by ste použiť alebo. Tieto dve možnosti spracovávajú responzívne obrázky odlišne, ale všetky zobrazujú jeden obrázok z daných alternatív v závislosti od nastavených pravidiel.

Súvisiace: Ako zabezpečiť, aby bol váš web responzívny a interaktívny pomocou CSS a JavaScriptu

Použitie srcset

Štandart HTML vám umožňuje zadať iba jeden súbor obrázka. Ak chcete zobraziť iný obrázok v závislosti od veľkosti zariadenia, mali by ste použiť srcset.

Syntax:

srcset umožňuje poskytnúť ďalšie zdrojové súbory a prehliadač vyberie obrázok, ktorý sa zdá byť optimálny pre danú veľkosť obrázka.

 src="cute-cat.jpg"
 alt="Roztomilá mačka">

srcset pozostáva z troch častí: Názov súboru obrázka, ktorý špecifikuje cestu k zdrojovému obrázku, medzeru a vnútornú alebo skutočnú šírku obrázka.

Použitie srcset s veľkosťami

Problém s používaním srcset je, že nemáte kontrolu nad tým, aký obrázok sa prehliadač vyberie na zobrazenie. Kombinovanie srcset s veľkosti rieši tento problém. veľkosti definujte súbor podmienok médií, ktoré naznačujú, že obraz má optimálnu veľkosť.

Teraz môžete prepísať štítok vyššie nasledovne.

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

veľkosti pozostáva z podmienky média, v tomto príklade je to (maximálna šírka: 600 pixelov), ktorá predstavuje oblasť zobrazenia šírka, medzera a šírka slotu (480 pixelov) určujúce priestor, ktorý obrázok vyplní, ak je to v stave média pravda.

Súvisiace: Ako používať mediálne dotazy v HTML a CSS na vytváranie responzívnych webových stránok

Tu prehliadač najskôr skontroluje šírku zariadenia a porovná ju so stavom média. Ak je podmienka pravdivá, skontroluje šírku slotu a načíta obrázok z srcset s rovnakou šírkou alebo najbližšou väčšou.

Všimnite si, že zahŕňate aj src ktorý poskytuje obrázok tak, aby sa vrátil do prehliadačov, ktoré ho nepodporujú srcset a veľkosti.

srcset tiež vám umožňuje zobrazovať obrázky v rôznych rozlíšeniach pomocou x-deskriptorov.

 src="cute-cat-low.jpg"
 alt="Roztomilá mačka">

V tomto príklade, ak má zariadenie rozlíšenie dva pixely zariadenia na CSS alebo viac, prehliadač načíta obrázok cute-cat-high1.jpg.

Hardvérové ​​a softvérové ​​pixely

Problém s týmto riešením je, že obrázky reagujú iba z hľadiska hustoty pixelov zariadenia. Toto je pomer hardvérových pixelov k softvérovým alebo CSS pixelom. Hardvérový pixel je skutočný bod svetla na obrazovke, zatiaľ čo softvérový pixel alebo CSS pixel je mernou jednotkou. Hustota pixelov určuje rozlíšenie zariadenia.

Pri vykresľovaní responzívnych obrázkov nezohľadňujte len rozlíšenie; dôležitá je aj veľkosť displeja. V opačnom prípade môžete zbytočne načítať veľké obrázky alebo obrázky, ktoré sú príliš pixilované.

 src="cute-cat-low.jpg"
 alt="Roztomilá mačka">

Použitím

je prvok HTML, ktorý zahaľuje niekoľko prvky obsahujúce rôzne zdrojové súbory a prvok. Zatiaľ čo robí obrázky responzívnymi poskytovaním rôznych veľkostí toho istého obrázka, umožňuje skutočne zmeniť zobrazený obrázok.

Syntax:

Zvážte situáciu, keď máte veľký obrázok na šírku. Obrázok sa zobrazuje a vyzerá proporcionálne na pracovnej ploche, ale na mobilných zariadeniach sa výrazne zmenšuje, takže prvky na obrázku sú malé. Neresponzívny obrázok prispieva k zlej používateľskej skúsenosti. S môžete svojmu prehliadaču prikázať, aby sa v mobile prepol na detailný obrázok na výšku.

Rovnako ako v prvom prístupe, obsahuje atribút média, ktorý môžete použiť na poskytnutie stavu média. Prehliadač napríklad zobrazí „cute-cat-480w.jpg“, ak je šírka zobrazovanej oblasti 639 pixelov alebo menej. The srcset obsahuje cestu k súboru obrázka, ktorý chcete zobraziť, a src určuje predvolený obrázok.

Súvisiace: 7 nových funkcií CSS na vytvorenie responzívneho webu

Záložný formát pre WebP Image Format

Ďalšia vec, že dobre zvláda a poskytuje záložné riešenie pre moderné obrazové formáty, ako je WebP. Obrázky WebP majú vysoký výkon, sú malé a ponúkajú rýchly webový zážitok. Môžete sa teda rozhodnúť, či ich použijete na svojich stránkach. Problém, s ktorým sa môžete stretnúť, je, že nie všetky prehliadače podporujú obrázky WebP. S, tento problém sa nevyskytuje, pretože váš prehliadač môže načítať alternatívny obrázok, ak nepodporuje WebP.

Prečo vytvárať responzívne obrázky v HTML a nie v CSS?

CSS ponúka robustné možnosti spracovania responzívnych obrázkov. Tak prečo to nevyužiť? Prehliadač vopred načíta obrázky pred analýzou CSS. Takže predtým, ako JavaScript vášho webu zistí šírku zobrazovanej oblasti, aby vykonal príslušné zmeny v obrázkoch, pôvodné obrázky už boli vopred načítané. Vďaka tomu je lepšie spracovávať responzívne obrázky pomocou HTML.

Zamerajte sa na najlepšiu možnú kvalitu obrazu

Videli ste, ako môžete vytvárať responzívne obrázky v HTML pomocou > a v tomto článku. Poskytovanie responzívnych obrázkov zvyčajne zahŕňa zváženie veľkosti obrázka a rozlíšenia obrázka vo vzťahu k veľkosti displeja. Ak sa to urobí nesprávne, kvalita obrazu môže utrpieť. Uistite sa, že ste vybrali obrázok, ktorý poskytuje optimálnu použiteľnosť s použitím najmenšieho množstva zdrojov.

Princípy responzívneho webového dizajnu

Weboví dizajnéri už roky presadzujú responzívny dizajn, ale čo to je a ako dokáže vytvoriť vynikajúce webové stránky?

Prečítajte si ďalej

O autorovi