Rokasgrāmata iesācējiem adaptīviem attēliem HTML formātā

Responsīvs attēls ir attēls, kas pielāgojas dažādām ierīces īpašībām. Ja tas tiek darīts pareizi, adaptīvi attēli var uzlabot vietnes veiktspēju un lietotāja pieredzi.

Šajā rakstā ir apskatīts, kā varat izveidot adaptīvus attēlus HTML, izmantojot srcset un attēla elements.

Kāpēc jums vajadzētu izmantot atsaucīgus attēlus?

Kad programmatūras inženieri veidoja tīmekli, viņi nedomāja, kā pārlūkprogrammas apstrādās atsaucīgus attēlus. Galu galā lietotāji tīmeklim piekļuva tikai no galddatoriem vai klēpjdatoriem. Protams, šodien tā nav taisnība.

Saskaņā ar Statistika, vairāk nekā 90 procenti pasaules interneta lietotāju izmanto savu mobilo tālruni. Lielākajā daļā interneta lapu ir attēli, un šie attēli ir viens no rādītājiem, ko izmanto tīmekļa veiktspējas mērīšanai. Lai uzlabotu veiktspēju, jums ir jāoptimizē attēli, padarot tos atsaucīgus.

Kā izveidot atsaucīgus attēlus HTML

Varat tuvoties reaģējošiem attēliem no diviem leņķiem — vai nu piedāvājot vienu un to pašu attēlu ar dažādu izmēru, vai arī dažādus attēlus atbilstoši displeja īpašībām. Jūs varētu izmantot vai. Šīs divas opcijas reaģējošos attēlus apstrādā atšķirīgi, taču tās visas parāda vienu attēlu no norādītajām alternatīvām atkarībā no kārtulu kopas.

Saistīts: Kā padarīt savu vietni atsaucīgu un interaktīvu, izmantojot CSS un JavaScript

Izmantojot srcset

Standarts HTML ļauj norādīt tikai vienu attēla failu. Ja vēlaties parādīt citu attēlu atkarībā no ierīces izmēra, izmantojiet srcset.

Sintakse:

srcset ļauj nodrošināt papildu avota failus, un pārlūkprogramma izvēlēsies attēlu, kas šķiet optimāls šim attēla izmēram.

 src="cute-cat.jpg"
 alt="Jauks kaķis">

srcset sastāv no trim daļām: attēla faila nosaukums, kas norāda ceļu uz avota attēlu, atstarpes un attēla patiesais vai reālais platums.

Izmantojot srcset Ar izmēriem

Problēma ar lietošanu srcset ir tas, ka jūs nevarat kontrolēt, kādu attēlu pārlūkprogramma izvēlēsies parādīt. Apvienojot srcset ar izmēriem atrisina šo problēmu. izmēriem definējiet multivides nosacījumu kopu, kas norāda uz attēla optimālo izmēru.

Tagad varat pārrakstīt atzīmējiet iepriekš šādi.

sizes="(maksimālais platums: 600 pikseļi) 480 pikseļi,
 800 pikseļi"
 src="cute-cat.jpg"
 alt="Jauks kaķis">

izmēriem sastāv no multivides nosacījuma, šajā piemērā tas (maksimālais platums: 600 pikseļi) apzīmē skatvietas platums, atstarpe un slota platums (480 pikseļi), kas norāda vietu, kuru attēls aizpildīs, ja multivides nosacījums ir taisnība.

Saistīts: Kā izmantot multivides vaicājumus HTML un CSS, lai izveidotu atsaucīgas vietnes

Šeit pārlūkprogramma vispirms pārbaudīs ierīces platumu un salīdzinās to ar multivides stāvokli. Ja nosacījums ir patiess, tas pārbaudīs slota platumu un ielādēs attēlu no srcset ar tādu pašu platumu vai nākamo lielāku.

Ņemiet vērā, ka jūs arī iekļaujat src kas nodrošina attēla atgriešanos pārlūkprogrammās, kuras neatbalsta srcset un izmēriem.

srcset ļauj arī pasniegt attēlus dažādās izšķirtspējās, izmantojot x-deskriptorus.

 src="cute-cat-low.jpg"
 alt="Jauks kaķis">

Šajā piemērā, ja ierīces izšķirtspēja ir divi ierīces pikseļi uz CSS vai vairāk, pārlūkprogramma ielādēs cute-cat-high1.jpg attēlu.

Aparatūras un programmatūras pikseļi

Šī risinājuma problēma ir tāda, ka attēli reaģē tikai uz ierīces pikseļu blīvumu. Šī ir aparatūras pikseļu attiecība pret programmatūras vai CSS pikseļiem. Aparatūras pikselis ir faktiskais gaismas punkts uz ekrāna, savukārt programmatūras pikselis vai CSS pikselis ir mērvienība. Pikseļu blīvums nosaka ierīces izšķirtspēju.

Renderējot atsaucīgus attēlus, ņemiet vērā ne tikai izšķirtspēju; svarīgs ir arī displeja izmērs. Pretējā gadījumā jūs varat nevajadzīgi ielādēt lielus attēlus vai attēlus, kas ir pārāk pikselēti.

 src="cute-cat-low.jpg"
 alt="Jauks kaķis">

Izmantojot

ir HTML elements, kas iesaiņo vairākus elementi, kas satur dažādus avota failus un elements. Kamēr padara attēlus atsaucīgus, apkalpojot viena un tā paša attēla dažāda izmēra, ļauj faktiski mainīt parādīto attēlu.

Sintakse:

Apsveriet situāciju, kad jums ir liels ainavas attēls. Attēls tiek parādīts un izskatās proporcionāls uz darbvirsmas, taču mobilajā ierīcē tas ievērojami samazinās, tādējādi attēla elementi kļūst niecīgi. Nereaģējošais attēls veicina sliktu lietotāja pieredzi. Ar mobilajā ierīcē varat norādīt pārlūkprogrammai pārslēgties uz portreta tuvplāna attēlu.

Tāpat kā pirmajā pieejā, satur multivides atribūtu, ko varat izmantot, lai nodrošinātu multivides nosacījumu. Piemēram, pārlūkprogramma parādīs “cute-cat-480w.jpg”, ja skata loga platums ir 639 pikseļi vai mazāks. The srcset satur attēla faila ceļu, kuru vēlaties parādīt, un src norāda noklusējuma attēlu.

Saistīts: 7 jaunas CSS funkcijas, lai izveidotu atsaucīgu vietni

Atkāpšanās no WebP attēla formāta

Vēl viena lieta, ka labi tiek galā ar atkāpšanos no mūsdienu attēlu formātiem, piemēram, WebP. WebP attēliem ir augsta veiktspēja, tie ir mazi un nodrošina ātru tīmekļa pieredzi. Tāpēc varat izlemt, vai tos izmantot savās vietnēs. Problēma, ar kuru jūs varētu saskarties, ir tāda, ka ne visas pārlūkprogrammas atbalsta WebP attēlus. Ar, šī problēma nav sastopama, jo jūsu pārlūkprogramma var ielādēt alternatīvu attēlu, ja tā neatbalsta WebP.

Kāpēc izveidot atsaucīgus attēlus HTML, nevis CSS?

CSS piedāvā spēcīgas opcijas reaģējošu attēlu apstrādei. Tātad, kāpēc to neizmantot? Pārlūkprogramma iepriekš ielādē attēlus, pirms tā parsē CSS. Tātad, pirms jūsu vietnes JavaScript nosaka skata loga platumu, lai veiktu atbilstošas ​​izmaiņas attēlos, sākotnējie attēli jau ir iepriekš ielādēti. Šī iemesla dēļ adaptīvos attēlus labāk apstrādāt, izmantojot HTML.

Mērķējiet pēc iespējas labākas attēla kvalitātes

Jūs esat redzējis, kā varat izveidot atsaucīgus attēlus HTML, izmantojot > un šajā rakstā. Adaptīvu attēlu rādīšana parasti ietver attēla lieluma un attēla izšķirtspējas apsvēršanu, jo tie ir saistīti ar displeja izmēru. Ja tas tiek izdarīts nepareizi, attēla kvalitāte var ciest. Noteikti izvēlieties attēlu, kas nodrošina optimālu lietojamību, izmantojot vismazākos resursus.

Adaptīva tīmekļa dizaina principi

Tīmekļa dizaineri jau gadiem ilgi ir aizstāvējuši adaptīvo dizainu, bet kas tas ir un kā tas var radīt izcilas tīmekļa lapas?

Lasiet Tālāk

Par autoru