Adaptyvūs vaizdai: `srcset` ir `picture` elementų įsisavinimas globalioms svetainėms

Šiuolaikinėje globalizuotoje skaitmeninėje erdvėje itin svarbu užtikrinti sklandžią vartotojo patirtį visuose įrenginiuose ir esant bet kokioms tinklo sąlygoms. Adaptyvūs vaizdai atlieka lemiamą vaidmenį siekiant šio tikslo, pateikdami tinkamo dydžio ir optimizuotus atvaizdus, atsižvelgiant į vartotojo įrenginio ekrano dydį, skiriamąją gebą ir tinklo galimybes. Šiame straipsnyje pateikiamas išsamus vadovas, kaip įvaldyti adaptyvius vaizdus naudojant srcset atributą ir <picture> elementą, suteikiant jums galimybę kurti našias ir vartotojui patogias svetaines globaliai auditorijai.

Kodėl adaptyvūs vaizdai yra svarbūs globalioms svetainėms

To pačio didelio vaizdo pateikimas tiek didelės raiškos stalinio kompiuterio ekranui, tiek mažo pralaidumo mobiliajam įrenginiui yra neefektyvus ir kenkia vartotojo patirčiai. Štai kodėl adaptyvūs vaizdai yra būtini globalioms svetainėms:

• Pagerintas puslapio įkrovimo greitis: Mažesni vaizdai įkeliami greičiau, sutrumpinant puslapio įkrovimo laiką ir gerinant bendrą svetainės našumą. Tai ypač svarbu vartotojams regionuose su lėtesniu interneto ryšiu.
• Sumažintas duomenų srauto suvartojimas: Pateikdami mažesnius vaizdus mobiliesiems įrenginiams, sumažinate duomenų srauto suvartojimą vartotojams su ribotais duomenų planais, taip taupydami jų pinigus ir gerindami patirtį.
• Pagerinta vartotojo patirtis: Vaizdų optimizavimas skirtingiems ekranų dydžiams ir raiškoms užtikrina vizualiai patrauklią ir nuoseklią vartotojo patirtį visuose įrenginiuose.
• Pagerintas SEO: Paieškos sistemos teikia pirmenybę svetainėms su greitu įkrovimo laiku ir optimizuota vartotojo patirtimi. Adaptyvūs vaizdai gali prisidėti prie geresnių paieškos sistemų reitingų.
• Prieinamumas: Optimizuoti vaizdai gali pagerinti svetainės prieinamumą vartotojams su regėjimo negalia, ypač kai naudojami kartu su tinkamu alt tekstu.

Kaip suprasti `srcset` atributą

srcset atributas leidžia nurodyti vaizdų šaltinių sąrašą su atitinkamais pločiais ar pikselių tankiais. Naršyklė tada pasirenka tinkamiausią vaizdą, atsižvelgdama į įrenginio ekrano dydį ir skiriamąją gebą.

Sintaksė ir naudojimas

Pagrindinė srcset atributo sintaksė yra tokia:

<img src="image.jpg" srcset="image-small.jpg 320w, image-medium.jpg 640w, image-large.jpg 1024w" alt="Pavyzdinis paveikslėlis">

Šiame pavyzdyje srcset atributas nurodo tris vaizdų šaltinius:

• image-small.jpg: Ekranams, kurių plotis yra 320 pikselių ar mažesnis.
• image-medium.jpg: Ekranams, kurių plotis yra 640 pikselių ar mažesnis.
• image-large.jpg: Ekranams, kurių plotis yra 1024 pikselių ar mažesnis.

w deskriptorius nurodo vaizdo plotį pikseliais. Naršyklė apskaičiuoja pikselių tankį (devicePixelRatio) ir nustato, kurį vaizdą atsisiųsti. Naršyklės, kurios nepalaiko srcset, grįš prie `src` atributo.

Naudojant `x` deskriptorius pikselių tankiui

Arba galite naudoti x deskriptorių, norėdami nurodyti vaizdo pikselių tankį. Tai ypač naudinga didelės raiškos ekranams (pvz., Retina ekranams).

<img src="image.jpg" srcset="image.jpg 1x, image-2x.jpg 2x" alt="Pavyzdinis paveikslėlis">

Šiame pavyzdyje:

• image.jpg: Ekranams, kurių pikselių tankis yra 1x (standartinė raiška).
• image-2x.jpg: Ekranams, kurių pikselių tankis yra 2x (didelė raiška).

Geriausios praktikos naudojant `srcset`

• Pateikite numatytąjį vaizdą: Visada įtraukite src atributą, kad pateiktumėte atsarginį vaizdą naršyklėms, kurios nepalaiko srcset.
• Naudokite tinkamus vaizdų dydžius: Generuokite vaizdus su tinkamais dydžiais skirtingoms ekrano raiškoms. Venkite pateikti pernelyg didelius vaizdus.
• Optimizuokite vaizdus: Suspauskite vaizdus, kad sumažintumėte failo dydį neprarandant vaizdo kokybės. Gali padėti įrankiai, tokie kaip TinyPNG ar ImageOptim.
• Apsvarstykite meninę kryptį: Kai kuriems vaizdams galbūt norėsite apkarpyti ar pritaikyti kompoziciją skirtingiems ekrano dydžiams. Tai leidžia padaryti <picture> elementas (aptariamas toliau).
• Kruopščiai testuokite: Išbandykite savo adaptyvius vaizdus skirtinguose įrenginiuose ir naršyklėse, kad įsitikintumėte, jog jie rodomi teisingai.

Pavyzdys: Adaptyvus vaizdas kelionių tinklaraščiui

Tarkime, turite kelionių tinklaraštį, kuriame pristatomi nuostabūs peizažai iš viso pasaulio. Norite užtikrinti, kad jūsų vaizdai puikiai atrodytų visuose įrenginiuose, nuo išmaniųjų telefonų iki didelių stacionarių kompiuterių monitorių.

<img
  src="andes-mountains-small.jpg"
  srcset="
    andes-mountains-small.jpg 320w,
    andes-mountains-medium.jpg 640w,
    andes-mountains-large.jpg 1200w,
    andes-mountains-xlarge.jpg 2000w
  "
  alt="Andų kalnai, Pietų Amerika" /
>

Šis kodas pateikia keturias vaizdo versijas, leidžiančias naršyklei pasirinkti tinkamiausią pagal vartotojo ekrano plotį.

`<picture>` elemento galia

<picture> elementas suteikia dar didesnę kontrolę ties adaptyviais vaizdais, leidžiant nurodyti skirtingus vaizdų šaltinius pagal medijos užklausas. Tai ypač naudinga meninei krypčiai ir skirtingų vaizdų formatų pateikimui skirtingoms naršyklėms.

Sintaksė ir naudojimas

<picture> elementas susideda iš vieno ar daugiau <source> elementų ir vieno <img> elemento. <source> elementai nurodo skirtingus vaizdų šaltinius su atitinkamomis medijos užklausomis, o <img> elementas veikia kaip atsarginis variantas naršyklėms, kurios nepalaiko <picture> elemento.

<picture>
  <source media="(max-width: 600px)" srcset="image-small.jpg">
  <source media="(max-width: 1200px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="Pavyzdinis paveikslėlis">
</picture>

Šiame pavyzdyje:

• Jei ekrano plotis yra 600 pikselių ar mažesnis, bus rodomas image-small.jpg vaizdas.
• Jei ekrano plotis yra 1200 pikselių ar mažesnis, bus rodomas image-medium.jpg vaizdas.
• Kitu atveju bus rodomas image-large.jpg vaizdas.

Meninė kryptis su `<picture>` elementu

Meninė kryptis apima vaizdo vizualinio pateikimo pritaikymą skirtingiems ekrano dydžiams. Pavyzdžiui, galbūt norėsite skirtingai apkirpti vaizdą mobiliesiems įrenginiams, kad sutelktumėte dėmesį į svarbiausius elementus.

<picture>
  <source media="(max-width: 600px)" srcset="image-mobile.jpg">
  <img src="image-desktop.jpg" alt="Pavyzdinis paveikslėlis">
</picture>

Šiuo atveju image-mobile.jpg gali būti apkirpta image-desktop.jpg versija, optimizuota mažesniems ekranams.

Skirtingų vaizdų formatų pateikimas

<picture> elementas taip pat gali būti naudojamas skirtingiems vaizdų formatams pateikti, atsižvelgiant į naršyklės palaikymą. Pavyzdžiui, galite pateikti WebP formato vaizdus naršyklėms, kurios juos palaiko, ir JPEG vaizdus toms, kurios nepalaiko.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Pavyzdinis paveikslėlis">
</picture>

type atributas nurodo vaizdo MIME tipą. Naršyklė naudos <source> elementą tik tuo atveju, jei palaiko nurodytą MIME tipą. WebP siūlo geresnį suspaudimą, palyginti su JPEG ir PNG, todėl failų dydžiai yra mažesni ir įkrovimo laikas greitesnis. Tačiau senesnės naršyklės gali jo nepalaikyti, todėl atsarginis variantas yra labai svarbus.

Pastabos dėl globalaus prieinamumo

Įgyvendinant adaptyvius vaizdus globaliai, nepamirškite atsižvelgti į vartotojus su negalia. Tinkamo `alt` teksto pateikimas yra labai svarbus vartotojams su regėjimo sutrikimais. Įsitikinkite, kad `alt` tekstas tiksliai apibūdina vaizdo turinį ir perteikia tą pačią informaciją kaip ir pats vaizdas. Sudėtingiems vaizdams apsvarstykite galimybę pateikti ilgą aprašymą naudojant `aria-describedby` atributą.

Tarptautiniai pavyzdžiai ir naudojimo atvejai

Štai keletas pavyzdžių, kaip adaptyvūs vaizdai gali būti efektyviai naudojami globaliame kontekste:

• Elektroninės prekybos svetainė: Elektroninės prekybos svetainė, prekiaujanti produktais tarptautiniu mastu, gali naudoti adaptyvius vaizdus, kad pateiktų aukštos kokybės produktų nuotraukas vartotojams su greitu interneto ryšiu ir mažesnės raiškos vaizdus vartotojams su lėtesniu ryšiu. Tai užtikrina nuoseklią apsipirkimo patirtį visiems vartotojams, nepriklausomai nuo jų buvimo vietos ar interneto greičio. Skirtinguose kultūriniuose kontekstuose gali prireikti šiek tiek skirtingų produktų vaizdų stilių, o <picture> elementas gali padėti tai pasiekti. Pavyzdžiui, produkto nuotrauka, kurioje modelis dėvi tradicinius drabužius, tam tikruose regionuose gali būti aktualesnė.
• Naujienų svetainė: Naujienų svetainė gali naudoti adaptyvius vaizdus, kad greitai pateiktų karščiausių naujienų nuotraukas vartotojams mobiliuosiuose įrenginiuose. Tai ypač svarbu vietovėse su ribotu pralaidumu, kur vartotojai gali skaityti naujienas savo išmaniuosiuose telefonuose. Taip pat labai svarbu optimizuoti vaizdus skirtingoms kalboms. Pavyzdžiui, jei naujienų svetainė palaiko kelias kalbas, vaizdai turėtų būti optimizuoti kiekvienos kalbos specifiniams simbolių rinkiniams ir išdėstymo reikalavimams.
• Švietimo platforma: Švietimo platforma, siūlanti kursus keliomis kalbomis, gali naudoti adaptyvius vaizdus, kad rodytų diagramas ir iliustracijas tinkamo dydžio ir raiškos skirtingiems įrenginiams. Tai užtikrina, kad studentai galėtų efektyviai naudotis kursų medžiaga, nepriklausomai nuo jų įrenginio ar vietos. Vektorinės grafikos (SVG) naudojimas diagramoms, kai tik įmanoma, taip pat gali prisidėti prie geresnio mastelio keitimo ir kokybės.
• Turizmo svetainė: Svetainė, reklamuojanti turizmą įvairiose šalyse, gali labai pasinaudoti adaptyviais vaizdais. Aukštos raiškos lankytinų vietų ir peizažų nuotraukos pritraukia vartotojus ir parodo skirtingų vietų grožį. Šių vaizdų optimizavimas skirtingiems įrenginiams ir ryšio greičiams užtikrina, kad vartotojai visame pasaulyje galėtų mėgautis svetainės vizualiniu turiniu nepatirdami pernelyg ilgo įkrovimo laiko. Rinkdamiesi ir pateikdami vaizdus, atsižvelkite į kultūrinius jautrumus. Pavyzdžiui, vaizdai, kuriuose vaizduojami vietiniai papročiai, turėtų būti pagarbūs ir tikslūs.

Adaptyvių vaizdų įgyvendinimas: Žingsnis po žingsnio vadovas

1. Suplanuokite savo vaizdus: Nustatykite skirtingus vaizdų dydžius ir formatus, kurių jums reikės skirtingiems ekranų dydžiams ir raiškoms. Apsvarstykite meninę kryptį ir naršyklių palaikymą.
2. Generuokite vaizdus: Naudokite vaizdų redagavimo programinę įrangą arba internetinius įrankius, kad sugeneruotumėte reikiamus vaizdų dydžius ir formatus.
3. Įdiekite `srcset` arba `<picture>`: Pridėkite srcset atributą arba <picture> elementą į savo HTML kodą, nurodydami atitinkamus vaizdų šaltinius ir medijos užklausas.
4. Optimizuokite vaizdus: Suspauskite vaizdus, kad sumažintumėte failo dydį neprarandant vaizdo kokybės.
5. Kruopščiai testuokite: Išbandykite savo adaptyvius vaizdus skirtinguose įrenginiuose ir naršyklėse, kad įsitikintumėte, jog jie rodomi teisingai. Naudokite naršyklės kūrėjo įrankius, kad patikrintumėte įkeliamus vaizdus ir įsitikintumėte, kad kiekvienam ekrano dydžiui ir pikselių tankiui pateikiami teisingi vaizdai.
6. Stebėkite našumą: Naudokite svetainės našumo stebėjimo įrankius, kad sektumėte adaptyvių vaizdų poveikį puslapio įkrovimo greičiui ir vartotojo patirčiai. Įrankiai, tokie kaip Google PageSpeed Insights ir WebPageTest, gali suteikti vertingų įžvalgų.

Daugiau nei pagrindai: Pažangios technikos

• Atidėtas įkėlimas (angl. Lazy Loading): Įdiekite atidėtą įkėlimą, kad atidėtumėte vaizdų įkėlimą, kol jie nebus matomi peržiūros srityje. Tai gali žymiai pagerinti pradinį puslapio įkrovimo laiką. Bibliotekos, tokios kaip lazysizes, gali supaprastinti atidėto įkėlimo įgyvendinimą.
• Turinio pristatymo tinklai (CDN): Naudokite CDN, kad paskirstytumėte savo vaizdus keliuose serveriuose visame pasaulyje. Tai sumažina delsą ir pagerina vaizdų pristatymo greitį vartotojams skirtingose geografinėse vietovėse. Populiarūs pasirinkimai yra tokios paslaugos kaip Cloudflare ir Amazon CloudFront.
• Automatizuotas vaizdų optimizavimas: Apsvarstykite galimybę naudoti automatizuotas vaizdų optimizavimo paslaugas, kurios automatiškai keičia dydį, suspaudžia ir konvertuoja vaizdus į optimalų formatą skirtingiems įrenginiams ir naršyklėms. Šios paslaugos gali supaprastinti vaizdų optimizavimo procesą ir užtikrinti, kad jūsų vaizdai visada būtų optimizuoti našumui. Pavyzdžiai yra Cloudinary ir imgix.
• Kliento užuominos (angl. Client Hints): Kliento užuominos yra HTTP užklausų antraštės, kurios teikia informaciją serveriui apie vartotojo įrenginio ir tinklo sąlygas. Tai leidžia serveriui dinamiškai generuoti ir pateikti optimizuotus vaizdus, atsižvelgiant į kliento galimybes. Nors dar nėra visuotinai palaikomos, kliento užuominos siūlo perspektyvų požiūrį į adaptyvius vaizdus.

Dažniausiai daromos klaidos, kurių reikia vengti

• Per didelių vaizdų pateikimas: Tai yra dažniausia klaida. Visada keiskite dydį ir suspauskite vaizdus iki tinkamo dydžio skirtingiems įrenginiams.
• `alt` atributo pamiršimas: `alt` atributas yra būtinas prieinamumui ir SEO. Visada pateikite aprašomąjį `alt` tekstą savo vaizdams.
• Neteisingas `srcset` ir `<picture>` naudojimas: Įsitikinkite, kad suprantate šių atributų ir elementų sintaksę bei naudojimą.
• Vaizdų optimizavimo ignoravimas: Optimizavus vaizdus galima žymiai sumažinti failo dydį neprarandant vaizdo kokybės.
• Testavimo neatlikimas: Visada išbandykite savo adaptyvius vaizdus skirtinguose įrenginiuose ir naršyklėse, kad įsitikintumėte, jog jie rodomi teisingai.
• Globalios perspektyvos stoka: Neatsižvelgimas į skirtingą tinklo greitį ir įrenginių galimybes skirtinguose regionuose gali lemti neoptimalią vartotojo patirtį didelei jūsų auditorijos daliai.

Išvada

Adaptyvūs vaizdai yra esminis šiuolaikinio interneto svetainių kūrimo komponentas, užtikrinantis optimalų našumą ir vartotojo patirtį visuose įrenginiuose ir esant bet kokioms tinklo sąlygoms. Įvaldę srcset atributą ir <picture> elementą, galite kurti našias ir vartotojui patogias svetaines, pritaikytas globaliai auditorijai. Nepamirškite teikti pirmenybės vaizdų optimizavimui, prieinamumui ir kruopščiam testavimui, kad suteiktumėte tikrai sklandžią ir įtraukiančią patirtį visiems vartotojams, nepriklausomai nuo jų buvimo vietos ar įrenginio. Pritaikydami šias technikas, galite kurti svetaines, kurios yra ne tik vizualiai patrauklios, bet ir našios bei prieinamos, taip prisidedant prie teigiamos vartotojo patirties visame pasaulyje.