Vefurinn er sjónræn miðill. Mikill meirihluti þess sjónrænu landslagi er takk fyrir myndskrár. Þó að nóg sé hægt með CSS og inline SVG, þurfa flestar síður enn myndskrár.
Að meðaltali voru myndirnar grein fyrir meira en helmingur af síðasta stærðarflokki síðasta árs og árstíðir myndastærðir aukast; það var 21% vöxtur í myndastærð árið 2014 eingöngu.
Á sama tíma heldur fjöldi og fjölbreytni af tækjum sem fá aðgang að vefnum áfram að vaxa. Upplausnir eru nú mismunandi hvar sem er á milli 72ppi (minnkandi algengt) og yfir 600ppi.
Að búa til mynd fyrir skjáinn sem nægir gæði fyrir hvaða tæki sem er, er einfalt: vista það á 1000ppi og kalla það dag. Myndin sem myndast verður skörpum á jafnvel hæstu hæðarbúnaði. En á meðan gæðin þín verða há, svo mun skráin þín líka. Með hleðslutími blaðsíðu a lykilatriði í UX Það er okkur skylt að tryggja að vefsvæði verði afhent notendum okkar strax. Þegar myndir eru af svo miklum gæðum að þeir taka tugi sekúndur til að hlaða niður á breiðbands tengingum, hvað þá farsíma tengingar, þá eru þau í raun ónothæf.
Markmiðið með móttækilegum myndum er því ekki að skila hágæða myndum á skjái sem geta sýnt það (sem við getum auðveldlega gert), markmiðið er að skila hágæða myndinni studd og ekkert meira.
Þessi handbók er hönnuð til að kenna þér hvað virkar, þar sem vandamálin og gildrurnar liggja enn og hvernig hægt er að nota móttækilegar myndir á vefsíðum í dag.
Mér finnst þörfin, þörf fyrir hraða
Af hverju skiptir hraði máli? Vissulega er enginn á 3G-tengingu lengur? Enginn notar upphringingu. Ef markmið viðskiptavinar þíns er lýðfræðilegt að búa í þéttbýli Manhattan, afhverju ættir þú að hugsa um dreifbýli Lesótó? Staðreyndin er, það er goðsögn að við erum öll á frábærum hratt breiðband, seld til okkar hjá fyrirtækjum sem njóta góðs af lönguninni fyrir sífellt vaxandi hraða.
Flestir eyða að minnsta kosti tveimur klukkustundum á hverjum degi á óæðri tengingu. Mér finnst oft að ég sé með flestum tíma til að fletta þegar pendling, þegar jafnvel áreiðanlegur 3G-tenging hljómar eins og einhver fjörugur draumur.
Í apríl Google tilkynnti þessi hreyfanlegur vináttu væri notuð sem röðun þáttur fyrir leit fram á tækjum sem það telur að vera "farsíma". Jafnvel fyrir það, hraði var þáttur í síðu röðun - bæði skýrt sem hluti af útreikningum Google og óbeint sem þáttur í stigatíðni þinni.
Í tveimur, sömu síðum, gæti aukalega 1Kb sleppt þér frá 3. stað á Google, í 4. eða 5. sæti. Það gæti jafnvel sleppt þér frá 10. til 11. - með öðrum orðum frá bls. 1 til bls. 2 - með öllum tengdum áhrifum á tekjur viðskiptavinarins.
Þarf þú raunverulega þessi mynd?
Mest bjartsýni myndin er, er engin mynd yfirleitt. Ef þú hefur fimm myndir á síðuna þína og þú sleppir einum, hefur þú vistað sjálfan þig 20%, kannski meira um vert, þú hefur vistað þér http-beiðni. Ef við losa allar myndir frá vefsvæðum okkar, gætum við bjargað okkur 100% og öllum fimm beiðnum http. Svo hvers vegna ekki að gera það?
Við sleppum ekki myndum af vefsvæðum okkar vegna þess að þeir hafa samskipti á skilvirkari hátt en texti til skamms tíma. Þeir skapa tilfinningalega tengingu sem vekur notendur inn í efni.
Við vitum það Notendur lesa ekki vefsíður . Mjög fáir lesa ítarlega efni á netinu. Myndir leyfa okkur að tengjast, miðla og styrkja vörumerki á brotum tíma sem textinn getur stjórnað.
Myndir geta verið stór og ómeðhöndluð til að hlaða niður, en þegar þau eru birt í vafranum eru þau mun skilvirkari en en texti til að koma á fót notendaviðskipti og styrkja vörumerkjaskilaboð.
Móttækilegar myndir hjálpa okkur að tryggja að tilfinningaleg tengsl myndanna byggja ekki glatast þegar óþolinmóð notandi smellir á bakka.
Hvað með SVG?
SVG (Scaleable Vector Graphics) er ein af sanna brautryðjandi tækni á vefnum. Það er svo langt undan ferlinum að flestir hönnuðir hafa enn ekki þekkt sanna möguleika sína.
SVG - eins og nafnið gefur til kynna - er vektor byggt. Þetta þýðir að SVG grafík er smíðað úr stigum, sjónum og fjarlægðum. SVG er líka - eins og nafnið gefur til kynna - sveigjanlegt, sem þýðir að það birtist jafn vel á 5k iMac eða Android smartphone án þess að tapa gæðum og engin breyting á skráarstærð.
Ef þú ert með íbúðarmynd, tákn, lógó, réttlátur óður í nokkuð sem hægt er að sýna sem SVG, þá er SVG leiðin til að fara.
Flestar myndir á vefnum eru punktamyndir. Almennt séð er hvernig punktamynd vinnur að lýsa hverri punkti einn í einu, liturinn hennar (í RGB - rauðum, grænum og bláum gildum) og í sumum tilvikum gagnsæi hennar. Ef þú hefur mynd að mæla 100px með 100px, þá hefur þú mynd með 10.000 punkta; ef hver pixla hefur 4 gildi til að lýsa því, þá hefur myndin 40.000 bita af gögnum sem tengjast henni. Hljómar eins og mikið er það ekki? Stundum er það minna en vektor grafík.
Íhuga 1px með 1px mynd; sem myndi þurfa 4 bita af gögnum til að skrá sem punktamynd (rautt, grænt, blátt og alfa gildi). Íhuga nú sama veldi pixla skráð sem vektor; sem myndi þurfa x, y, breidd og hæð rétthyrningsins, auk RGBA gildi.
Þeir eru grófur dæmi, en þau eru nákvæm. Oft er vektorútgáfa myndar - ef við eigum enn einn til okkar - meiri en skráarstærð samsvarandi punktamyndarinnar, og þá er punktamappa eina skynsamlega valið.
(Mis) með JavaScript
Eins og flest vandamál í lífinu (ef líf þitt er á netinu) er hægt að leysa móttækilegar myndir með JavaScript. Í raun fyrir nokkrum árum var JavaScript eina leiðin til að leysa málið. JavaScript getur prófað getu notanda umboðsmanns, ákvarðar hvers konar vafra það er og skrifaðu venjulegt HTML myndmerki sem inniheldur viðeigandi mynd.
Vefhönnuðir sem mótmæla því að nota JavaScript gerðu það oft vegna þess sumir slökkva á því . Hins vegar er þetta ekki raunin lengur, sérstaklega á farsímanum, en það eru nokkur viðvarandi mál: að skrifa mynd með JavaScript þýðir að myndin mun ekki flokka með leitarvélum, en það mun aðeins verða eftir handritið eins og hlaupið, til dæmis.
Stærsta málið með því að nota JavaScript er að það er misnotkun á algerlega tilgangi JavaScript. HTML geymir gögn, CSS annast kynningu, JavaScript annast virkni. Þegar við brjótast af þeim skipuðum hlutum, byrjum við að lenda í vandamálum sem krefjast þess að járnbrautir festa þá. Myndir eru gögn og ætti því að vera meðhöndluð af HTML.
Vandræði með vafra
Þar sem RWD var fyrst hugsað, hafa myndir verið stærsti hneyksli. En nú erum við að byrja að finna leiðir til að leysa hinar ýmsu vandamál. Tækni sem eru bardaga-hert og vel nóg til að vera talin bestu æfingar. Hollur verktaki hefur gefið upp tíma sinn til að vinna með WC3 fyrir opinbera lausnir, og nú eru í fyrsta skipti móttækilegar myndir raunhæfar.
Lykillinn að móttækilegum myndum er sú að þeir hafa verið hannaðar með fullan skilning á bilunum á vefnum. Gæta skal varúðar til að tryggja að móttækilegar myndlausnir brjóti ekki í bága við núverandi vafra þannig að jafnvel í vafrum sem styðja ekki móttækilegar myndir, mun kóðinn mistakast hljóður og ekki móttækilegur, sjálfgefin myndir verða birtar.
Í þessari grein munum við líta á tvær opinberar móttækilegar myndir HTML-þættir: srcset og mynd.
Sem stendur styðja Edge, Safari og iOS Safari aðeins undirsvæði af srcset forskriftinni. Firefox, Króm, Opera, Android vafra og væntanlegir útgáfur af Safari og iOS Safari styðja það að fullu. (Við munum ræða muninn hér að neðan.)
Á þessari stundu er myndarhlutinn að fullu studdur af Firefox, Chrome, Opera og Android Browser. Edge, Safari og iOS Safari styðja það ekki, og þeir hafa ekki tilkynnt tímasetningu til að framkvæma það.
Jafnvel meðal vafra sem styðja nýja kóða eru ósamræmi þar sem mismunandi vafraframleiðendur túlka W3C forskriftirnar á mismunandi vegu. Til dæmis, þegar þú tilgreinir myndbreyting frá litlum til stórum miðað við skoðunarstærð, munu nokkrar vélar skipta yfir í stóru myndina þegar sýnapallurinn er 1px stærri en valinn stærð litla myndarinnar, aðrir munu aðeins skipta yfir í stóra myndina þegar sjónarhornið studd af stóru myndinni er fullkomlega samsvörun.
Í stuttu máli eru vafrar skipt í tvo tjaldsvæði: þeir sem greiða fyrir hágæða myndum, þar sem hægt er, og þeim sem greiða fyrir minni niðurhalum þar sem hægt er. Vafraframleiðendur eru ennþá að drekka þetta út, að lokum er framkvæmd einhvers vinsælast - persónulega vona ég að það sé hið síðarnefnda, vegna þess að eins og fram kemur hér að framan er mikilvægt að notendaupplifun.
Núna er besti kosturinn fyrir vefhönnuðir að halda sig við forskriftina og ekki reyna að seinna giska á vafranum. Eftir allt saman er sjálfgefið reynsla í vafranum (hærri gæði eða hraðari niðurhal) hluti af því sem notandi velur sjálfgefinn vafra fyrir, þannig að ef notandinn er meðvituð um mismunandi aðferðir þá er vafravalið líklegt að notandinn vilji einnig .
Móttækileg mynd með bestu æfingum (2015)
Í gegnum sögu sögunnar höfum við notað eitt frumefni til að gefa til kynna mynd, img frumefni. Í HTML5 hefur img- þátturinn farið í lúmskur breyting í hlutverki sínu, ein sem er hannaður til að gera móttækilegar myndir: Img- þátturinn táknar ekki lengur mynd, það er nú staðgengill fyrir mynd.
Þessi greinarmunur er mikilvægur, því að meðan img- þáttur áður hélt eitt sett af myndgögnum - sé það punktamynd eða vektor - nú er mynd hægt að halda mörgum settum gögnum.
The img þáttur (að endurskapa fyrir hvaða non-merkjamál) lítur svona út:
Móttækilegur ímynd útgáfa af img frumefni lítur svona út:
Varla einhver breyting yfirleitt. Þegar þú horfir á þennan kóða tekur þú eftir einu mikilvægu hlutverki: Kóðinn er afturábak samhæfur. Ef vafrinn gerist eftir því skilur ekki srcset eiginleiki, það mun einfaldlega hunsa hana og gera myndina í samræmi við upprunalega 1993 forskriftina.
Hvað þetta þýðir, er að við getum nú notað móttækilegar myndir í merkingu okkar, án þess að þörf sé á að greina eiginleika.
Í nýjum móttækilegum img frumefni er src aðallega notað sem sjálfgefið mynd og fyrir vafra sem ekki viðurkenna srcset, en srcset inniheldur allar tiltækar hágæða snið fyrir þennan stað.
Þegar myndin kemur fram mun vafrinn ákvarða sjálfan sig hvaða myndaskrá er best.
Notkun srcset
Nú þegar við vitum að srcset mun mistakast hljóðlega í vafra sem styðja það ekki, þá erum við frjálst að bæta við auka mynd:
Í þessu tilviki mun allir vafrar sem styðja srcset birta mynd-b.jpg og allir vafrar sem styðja ekki srcset munu sýna mynd-a.jpg.
Það er mikilvægt að hafa í huga að vafrinn muni aðeins hlaða niður myndinni sem hann ákveður að birta, ekki er hægt að hlaða niður báðum myndum og velja þá einn.
Því miður er þetta ekki mjög langt, vegna þess að nema við sýnum srcset stuðning, þá er engin hagnýt umsókn um að skipta um myndir á grundvelli srcset stuðnings eingöngu.
Lausnin er að veita frekari upplýsingar í vafranum um hvaða mynd það ætti að velja. Til þess að gera það þurfum við að veita upplýsingar um annaðhvort pláss eða þéttleika pixla.
Notkun x-descriptor
The x-descriptor segir vafra hversu þétt punkta í myndinni eru.
Ef þú vilt til dæmis að gefa mynd í sjónhimnu með tvöfalt fjölda punkta sem staðlað mynd, þá ættir þú að tilgreina sjónhimnu myndina í srcset, fylgt eftir með bili og síðan leitarorðinu "2x".
Við höfum myndina okkar:
Til að bæta við sjónhimnuvalkosti fyrir vafrann, bætum við eftirfarandi srcset:
Í þessu tilviki eru þrjár mögulegar niðurstöður:
ef vafrinn styður ekki srcset mun það nota myndskrá sem er tilgreindur í src eiginleiki;
ef vafrinn styður srcset og hefur skjá sem getur tvöfalt upplausn, mun það nota myndina sem er tilgreind í srcset eiginleiki;
ef vafrinn styður srcset en hefur ekki háskerpuskjá, mun hann nota myndina sem tilgreind er í src eiginleiki (þegar ekki er sýnt "1x" mynd í srcset eiginleiki, þá er src eigindið talið vera þessi mynd valkostur).
Stuðningur við vafra er góð og batna hratt. Með einum eiginleiki sem við höfum leyst upp á móti móttækilegum myndum, segðu okkur!
Eitt síðasta hlutur að hafa í huga um x-descriptor: valið á hvaða mynd er að hlaða byggist á þéttleika pixla, þannig að ef notandi dýrar vafrann í 200% (í raun að halla myndastærðinni og tvöfalda þéttleika pixlanna) 2x myndin verður hlaðið. Þetta getur haft skaðleg áhrif á aðgengi - við viljum örugglega ekki sjá síður sem hleðsla hægar fyrir sjónskerta, einfaldlega vegna þess að þeir velja að stækka vafrann.
Notkun w-descriptor
The w-descriptor er svolítið lengra en x-descriptor.W-descriptor virkar með því að segja vafranum hversu mörg raunveruleg dílar eru á x-ásnum (breidd) tiltekins myndvalkostar.
Edge, Safari og iOS Safari styðja ekki w-descriptor þegar skrifað er, svo notagildi hennar er nokkuð minni.
Við skulum fara aftur í upprunalegu myndina okkar:
Ef þessi mynd er 1600 dílar á breidd og ef við viljum bæta við myndhimnu, eins og við gerðum með x-lýsingu hér að framan, myndum við tilgreina mynd í srcset eiginleikanum sem er 3200 punktar breiður:
Það er einn stór gotcha með w-descriptor: þó að src eigindin sé meðhöndluð sem sjálfgefið við að skilgreina myndir með x-descriptor, þá er það hunsað að öllu leyti af vöfrum sem styðja srcset ef þú notar w-descriptor. Þegar w-lýsirinn er notaður verðum við að tilgreina sjálfgefið með því að bæta við öðru srcset myndvalkosti með eigin w-lýsingu og skilja þau með kommu:
Sem leiðir okkur snyrtilega á ...
Notkun margra mynda
Að vera fær um að tilgreina hágæða upplausn fyrir vafrann rétt í HTML kóða okkar er ákaflega flott, en eins og þú hefur líklega giskað, verður jafnvel kælir þegar við tilgreinir margar myndir.
Markmiðið með móttækilegum myndum er að skila bestu gæðum myndarinnar sem hægt er að nota með því að nálgast tækið, en ekkert meira. Það er því ekki nægjanlegt að veita mynd af sjónhimnu, við þurfum að leggja fram myndir á til dæmis 1x, 1,5x, 2x, 2,5x og 3x.
Enn og aftur, hér er upprunalega myndataka okkar:
Hér er það með myndhneigð sem fylgir sem valkostur fyrir vafrann:
Hér er það, þetta skipti með auka valkosti í srcset, aðskilin með kommum:
Vegna þess að leitarorð þýðir mismunandi hluti fyrir mismunandi fólk, finnst mér ráðlegt að nefna myndirnar mínar í samræmi við x-lýsingu sem þau tilheyra, bæði sem persónulegt minniaðstoð og til að tryggja að mismunandi stærðir séu hreinar fyrir aðra liðsmenn:
Mundu að við eigum ekki að segja vafranum hvaða mynd er að sýna, við látum það vita hvaða valkostir eru í boði fyrir það og leyfa því að velja sér. Vafrinn mun aðeins hlaða niður einum af þessum myndum.
Eitt gotcha með margar myndir: tilgreinið ekki alltaf tvær myndir í srcset eiginleiki með samsvarandi x-lýsingu og w-descriptor, til dæmis:
Stærð eiginleiki er sérstaklega áhugavert viðbót við forskriftina, vegna þess að stærðarmerkið tekur gildi sitt miðað við sjónarhornið, ekki myndina.
Með því að nota vw (viewport width) gildi, tilgreinum við myndarsvæðið miðað við breidd vafrans - muna, að img þátturinn er nú í raun bara staðgengill, þannig að við tilgreinum ekki raunverulegan stærð myndarinnar, við tilgreinum Stærð staðhúss sem mun innihalda myndina.
100vw er 100% af útsýnisbreiðunni, 50vw er 50% af útsýnisbreiddinni, 25vw er 25% af breidd útsýnisins osfrv.
Ef við viljum setja img breiddina að helmingi vafransbreiddarinnar, þá viljum við nota:
Þetta er ekki sérstaklega gagnlegt fyrr en við sameina það við fjölmiðlafyrirspurnir ...
Notkun fjölmiðlafyrirsagnar
Stærð eiginleiki verður mun öflugri þegar við sameina það við fjölmiðlafyrirspurnir. Við getum aðskilið marga breiddarbreiðslur með kommum og sagt frá vafranum sem á að nota með því að nota CSS-stíl frá miðöldum.
Til dæmis, ímyndaðu þér að við viljum að myndin sé 80% af breiddum útsýnisins okkar á meirihluta tækjanna, en á litlum tækjum (eins og sími) með breidd 380px eða minna, viljum við ná sem mestu úr pláss í boði með því að bæta upp 100% af breiddinni, myndum við skrifa það svona:
Í kjölfar þessarar rökfræði mun hvaða vafra með útsýni af 380px eða minna stilla breidd myndarinnar í 100% af sjónarhóli. Allir aðrir vafrar munu valda því að fjölmiðlafyrirspurnin skili sér rangar og vafrinn mun fara yfir á næsta gildi stærðarmerkisins, sem í þessu tilfelli er 80vw.
Að jafnaði er ég óþægilegt að nota fjölmiðlafyrirspurnir í HTML. Rétt eins og móttækileg myndgögn tilheyra HTML (ekki JavaScript), eiga fjölmiðlafyrirspurnir tilheyra CSS (ekki HTML). Hins vegar er möguleiki fyrir þig ef þú þarft það.
Móttækileg mynd með bestu æfingum (2016?)
Ég veit ekki um þig, en ég er mjög spenntur af möguleikunum á srcset. Það er einföld lausn á erfiðu vandamáli og virðist skila öllu sem við þurfum.
En, eins og rútur, bíður þú 20 ár fyrir opinbera lausn á móttækilegum myndum, og þá birtast tveir í einu. Eins og heilbrigður eins og srcset eiginleiki img frumefnisins, höfum við einnig myndarþáttinn .
Myndin þáttur er annar staður, þó hefðbundinari. Það hefur verið hannað til að líkja eftir myndskeiðum og hljóðþáttum í HTML5, þannig að setningafræði hennar mun þekki flestum. Myndin er ætluð til notkunar þegar þörf er á meiri stjórn en srcset getur veitt.
Því miður hefur myndarhlutinn mun minna stuðning við vafra en srcset og það fellur ekki alltaf hljóður.
Notkun myndarþáttarins
Hérna er frumleg myndataka okkar:
Hér er myndin okkar hreiður innan myndarþáttar:
Við getum einnig tilgreint srcset fyrir img frumefni innan myndarþáttar :
Notkun frumefnisins
Myndþátturinn kemur ekki til lífs fyrr en við bætum við frumefni:
Þegar þú velur hvaða skrá til að nota, byrjar vafrinn við fyrsta frumefnisþáttinn og fer í gegnum þætti þangað til hann finnur einn þar sem fjölmiðla eiginleiki leysist við satt, þá mun það nota srcsetuppspretta frumefnisins .
Til dæmis gætum við tilgreint mismunandi myndir fyrir portrett og landslag snið:
Við getum einnig tilgreint margar myndir með x-descriptor og w-descriptor:
Eins og með notkun fjölmiðlafyrirsagnar í stærðaraðferðinni myndi ég spyrja viskuna um að stjórna myndarútgáfum byggt á stíl, í merkingu í stað stílblaðs. Hins vegar er möguleiki á að nota fjölmiðla eiginleika ef þú þarfnast hennar.
Notkun gerð
Myndarþátturinn kemur í raun inn þegar hún er notuð til að skipta út mismunandi gerðum mynda.
Ímyndaðu þér að við höfum staðlaða PNG-skrá, en við viljum nota WebP skrá, sem er yfirleitt 26% minni - muna móttækilegar myndir eru um að skila bestu myndgæði, í minnsta stærð - en aðeins stutt af Chrome, Opera og Android vafranum. Við verðum að nota tegundareiginleika til að ákvarða hvort WebP er studd:
Í þessu tilviki, vafrinn mun athuga hvort WebP mynd snið er stutt. Ef það er, mun það ákvarða hvort skjárinn hefur nóg pixlaþéttleika til að birta retina-image.webp myndina, ef ekki mun það birta image.webp myndina. Ef WebP er ekki studd vafrinn vafrar beint til img þáttarins og vinnur í gegnum srcset og src valkostina eins og við þekkjum nú þegar.
Tegundategundin þýðir að við getum veitt miklu minni myndsnið þar sem það styður, sem leiðir til minni skráarstærð.
Þekkt vandamál
IE9 hefur þekkt mál, sem kemur í veg fyrir að myndarþættirnir hljóti ekki að hljóða. Til þess að takast á við IE9 þarftu að losa IE9 að því að hugsa að frumefni séu hluti af myndbandseining :
< !—[if IE 9]>< ![endif]—>
Það er ljót lausn, en betri en engin lausn yfirleitt. Við getum aðeins vonað að útgáfan af Windows 10 muni flýta fyrir brot á IE9 því að meðan Edge styður ekki ennþá myndþáttinn styður það ekki á réttan hátt (með því að hunsa hana).
Það eru polyfills sem getur hjálpað þér að styðja myndarþáttinn á IE, en eigin val mitt er að forðast þau. Ég treysti plásturvandamálum með JavaScript, það hefur áhrif á árangur og leiðir til minni viðráðanlegu kóða.
Af þessum sökum mæli ég með að forðast myndarþáttinn fyrir núna. Nema þú ert að keyra í stórum stíl á ecommerce-síðu, er ólíklegt að auka sparnaður á niðurhals tíma sem WebP-sniðið býður upp á, þrátt fyrir óþægindi á því að klára merkið þitt með handritinu.
Þegar IE9 lækkar undir 1%, sem ætti að gerast á einhverjum tímapunkti á næsta ári, mun myndin þáttur verða hagkvæmur. Ef þú ert að lesa þetta árið 2016 ertu líklega góður að fara.
Búa til móttækilegar myndir
Ólíkt SVG, mæla ekki punktamyndar myndir. Stefna okkar til að meðhöndla þau, hvort sem við notum srcset eða myndarþáttinn , er að gefa upp aðra mynd byggð á getu vafrans. Til að takast á við það þurfum við að bjóða upp á margs konar myndastærðir.
Flestar myndvinnsluforrit hafa sjálfvirkt ferlið við að flytja út margar útgáfur af einni mynd. Það skiptir ekki máli hvaða forrit þú notar, að því tilskildu að þú endir með margar myndastærðir án þess að þurfa að breyta handvirkt og vista hver og einn.
Adobe Photoshop er í raun bitmap ritstjóri. Það er ekki gott val fyrir hönnun, en vinnsluvinnsla hennar er slétt og áreiðanlegt. Búa til margar ályktanir í Photoshop er tiltölulega einfalt:
Opnaðu myndina sem þú vilt búa til margar útgáfur af og settu hana á eigin lag.
Endurnefna lagið sem nafn skráarinnar sem þú vilt búa til (þ.mt eftirnafnið).
Veldu File> Generate> Image Assets og mappa með nýja myndinni þinni verður vistuð við hliðina á PSD.
Endurnefna lagið og tilgreindu hverja mynd sem þú vilt búa til fyrirfram með fyrirhuguðum kvarða. Þú þarft ekki að endurtaka skref 3, þegar þú endurnefna lagið verða myndin sjálfkrafa búin til.
Kredit fyrir myndina fer tilPhilip Collier.
Fyrir frekari upplýsingar um mynda myndir í Photoshop, sjá hér.
Byggt á þessum myndum getum við boðið fimm mismunandi valkosti í vafranum:
Niðurstaða
The img þáttur hefur komið langt í 20 ár. Eða til að vera nákvæmari, þá var img þátturinn ófullnægjandi í 18 ár, þá sprinted fyrir línuna á síðustu tveimur árum, að því marki að það er nú tiltölulega háþróað.
Það mikilvægasta er að við komum að lausninni (s).
Af þeim tveimur valkostum sem eru tiltækar, srcset og mynd, er fyrrum langstærsti stuðningur. Ef þú ert að byggja upp 95% af vefsvæðum þarna úti, þá er betri stuðningur og einfaldari framkvæmd srcset eiginleiki besti kosturinn þinn.
Ef þú ert að keyra stórt ecommerce-vefsvæði með þúsundum varaafurða getur aukaverkið að þjóna WebP sniðið verið þess virði, sérstaklega þar sem stuðningur við myndþáttinn eykst á næstu árum.
Stærsti veikleiki í núverandi valkostum er að vafrar geta ekki valið mynd á grundvelli hraða tengingarinnar. Við erum neydd til að treysta því að hæfari tæki eru einnig á betri tengingum.
Að lokum getum við loksins þjónað myndum af hæsta gæðaflokki nánast möguleg, með minnsta stærð. Það þýðir betri reynsla, í styttri tíma, sem getur aðeins verið eitthvað til að faðma.
Valin mynd notar,fjallmyndogtæki myndum Shutterstock.
