Vodič za početnike za responzivne slike u HTML-u

Responzivna slika je slika koja se prilagođava različitim karakteristikama uređaja. Kada se rade ispravno, responzivne slike mogu poboljšati performanse i korisničko iskustvo web-mjesta.

Ovaj članak istražuje kako pomoću HTML-a možete stvoriti responzivne slike srcset i element slike.

Zašto biste trebali koristiti responzivne slike?

Kada su softverski inženjeri stvarali web, nisu razmatrali kako će preglednici postupati s responzivnim slikama. Naposljetku, korisnici su webu pristupali samo s stolnih ili prijenosnih računala. Naravno, to danas nije istina.

Prema Statista, preko 90 posto globalne internetske populacije koristi se na internetu koristeći svoj mobilni telefon. Većina web stranica na internetu sadrži slike i te su slike jedna od metrika koja se koristi za mjerenje web performansi. Da biste poboljšali performanse, morate optimizirati svoje slike tako da ih učinite prilagodljivim.

Kako stvoriti responzivne slike u HTML-u

Reagirajućim slikama možete pristupiti iz dva kuta – posluživanjem iste slike različitih veličina ili posluživanjem različitih slika prema karakteristikama prikaza. Mogao bi koristiti ili. Ove dvije opcije različito obrađuju responzivne slike, ali sve prikazuju jednu sliku iz danih alternativa, ovisno o postavljenim pravilima.

Povezano: Kako svoju web stranicu učiniti responzivnom i interaktivnom uz CSS i JavaScript

Korištenje srcset

Standardno HTML vam omogućuje samo određivanje jedne slikovne datoteke. Ako želite prikazati drugu sliku ovisno o veličini uređaja, trebali biste je koristiti srcset.

Sintaksa:

srcset omogućuje vam pružanje dodatnih izvornih datoteka, a preglednik će odabrati sliku koja se čini optimalnom za tu veličinu slike.

 src="slatka-mačka.jpg"
 alt="Slatka mačka">

srcset sastoji se od tri dijela: naziva datoteke slike koji specificira put do izvorne slike, razmaka i intrinzične ili stvarne širine slike.

Korištenje srcset s veličinama

Problem s korištenjem srcset je da nemate kontrolu nad slikom koju će preglednik odabrati za prikaz. Kombinirajući srcset s veličine rješava ovaj problem. veličine definirati skup medijskih uvjeta koji upućuju na sliku s optimalnom veličinom.

Sada možete prepisati oznaku iznad kako slijedi.

sizes="(max-width: 600px) 480px,
 800px"
 src="slatka-mačka.jpg"
 alt="Slatka mačka">

veličine sastoji se od medijskog uvjeta, u ovom primjeru to je (max-width: 600px) koji predstavlja okvir za prikaz širina, razmak i širina utora (480px) koji određuju prostor koji će slika ispuniti ako je uvjet medija pravi.

Povezano: Kako koristiti medijske upite u HTML-u i CSS-u za izradu responzivnih web stranica

Ovdje će preglednik prvo provjeriti širinu uređaja i usporediti je sa stanjem medija. Ako je uvjet istinit, provjerit će širinu utora i učitati sliku iz srcset s istom širinom ili sljedećim većim.

Imajte na umu da također uključujete src koji omogućuje vraćanje slike u preglednike koji ne podržavaju srcset i veličine.

srcset također vam omogućuje posluživanje slika u različitim razlučivostima pomoću x-deskriptora.

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

U ovom primjeru, ako uređaj ima razlučivost od dva piksela uređaja po CSS-u ili više, preglednik će učitati sliku cute-cat-high1.jpg.

Hardverski i softverski pikseli

Problem s ovim rješenjem je taj što slike reagiraju samo u smislu gustoće piksela uređaja. Ovo je omjer hardverskih piksela i softverskih ili CSS piksela. Hardverski piksel je stvarna svjetlosna točka na zaslonu dok je softverski piksel ili CSS piksel mjerna jedinica. Gustoća piksela određuje razlučivost uređaja.

Kada renderirate responzivne slike, nemojte uzeti u obzir samo razlučivost; veličina zaslona je također važna. U suprotnom biste mogli nepotrebno učitavati velike slike ili slike koje su previše pikselirane.

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

Korištenje

je HTML element koji obavija nekoliko elemente koji sadrže različite izvorne datoteke i an element. Dok čini slike responzivnima posluživanjem različitih veličina iste slike, omogućuje stvarno promjenu prikazane slike.

Sintaksa:

Razmislite o situaciji u kojoj imate veliku pejzažnu sliku. Slika se prikazuje i izgleda proporcionalno na radnoj površini, ali se značajno smanjuje na mobilnom uređaju tako da elementi na slici postaju sićušni. Slika koja ne reagira pridonosi lošem korisničkom iskustvu. S možete reći svom pregledniku da se prebaci na portretnu sliku izbliza kada ste na mobilnom uređaju.

Kao u prvom pristupu, sadrži atribut medija koji možete koristiti za pružanje medijskog stanja. Na primjer, preglednik će prikazati "cute-cat-480w.jpg" ako je širina okvira za prikaz 639px ili manja. The srcset sadrži putanju slikovne datoteke koju želite prikazati i src određuje zadanu sliku.

Povezano: 7 novih CSS značajki za izradu responzivne web stranice

Zamjena za WebP format slike

Još jedna stvar koja dobro obrađuje pruža zamjenu za moderne formate slika kao što je WebP. WebP slike imaju visoke performanse, male su i nude brzo web iskustvo. Stoga možete odlučiti da ih koristite na svojim stranicama. Izazov s kojim se možete suočiti je taj što svi preglednici ne podržavaju WebP slike. S, nemate ovaj problem jer vaš preglednik može učitati alternativnu sliku ako ne podržava WebP.

Zašto stvarati responzivne slike u HTML-u, a ne u CSS-u?

CSS nudi robusne opcije za rukovanje responzivnim slikama. Pa zašto ga ne iskoristiti? Preglednik unaprijed učitava slike prije nego što analizira CSS. Dakle, prije nego što JavaScript vaše web-lokacije otkrije širinu okvira za prikaz kako bi napravio odgovarajuće promjene na slikama, izvorne su slike već unaprijed učitane. Zbog toga je bolje upravljati responzivnim slikama pomoću HTML-a.

Ciljajte na najbolju moguću kvalitetu slike

Vidjeli ste kako možete stvoriti responzivne slike u HTML-u pomoću > i u ovom članku. Posluživanje responzivnih slika obično uključuje razmatranje veličine slike i razlučivosti slike u odnosu na veličinu zaslona. Ako se napravi pogrešno, kvaliteta slike može patiti. Pazite da odaberete sliku koja pruža optimalnu upotrebljivost koristeći najmanje resursa.

Načela responzivnog web dizajna

Web dizajneri već godinama zagovaraju responzivni dizajn, ali što je to i kako može proizvesti vrhunske web stranice?

Pročitajte dalje

O autoru