Kuidas kasutada SVG-d kohahoidjana ja muid piltide laadimise tehnikaid

Olen kirglik pildi jõudluse optimeerimise ja piltide kiire veebi laadimise pärast. Üks huvitavamaid uurimisvaldkondi on kohatäited: mida näidata, kui pilti pole veel laaditud.

Viimaste päevade jooksul olen kohanud mõnda laadimistehnikat, mis kasutavad SVG-d, ja tahaksin neid selles postituses kirjeldada.

Selles postituses käsitleme neid teemasid:

  • Ülevaade erinevat tüüpi kohatäitjatest
  • SVG-põhised kohatäited (servad, kujundid ja siluetid)
  • Protsessi automatiseerimine.

Ülevaade erinevat tüüpi kohatäitjatest

Varem olen kirjutanud kohahoidjatest ja piltide laisast koormusest ning rääkinud ka sellest. Piltide laisal laadimisel tasub mõelda, mida kohahoidjana renderdada, kuna sellel võib olla suur mõju kasutaja tajutavale toimivusele. Varem kirjeldasin mitut võimalust:

Mitu strateegiat pildi ala täitmiseks enne selle laadimist.

  • Pildi jaoks tühja koha hoidmine : Reageeriva kujundusega maailmas väldib see sisu hüppamist. Need paigutuse muudatused on halvad nii kasutaja kogemuse kui ka jõudluse seisukohalt. Brauser on sunnitud tegema paigutuse uuesti arvutusi iga kord, kui see võtab pildi mõõtmed, jättes sellele ruumi.
  • Kohatäide : Kujutage ette, et kuvame kasutaja profiilipilti. Võime soovida taustal kuvada siluetti. Seda näidatakse põhipildi laadimise ajal, aga ka siis, kui see taotlus ebaõnnestus või kui kasutaja ei määranud üldse ühtegi profiilipilti. Need pildid on tavaliselt vektoripõhised ja oma väikese suuruse tõttu sobivad hästi kandidaadiks.
  • Ühevärviline : võtke pildilt värv ja kasutage seda kohahoidja taustavärvina. See võib olla domineeriv värv, kõige elujõulisem ... Idee on selles, et see põhineb teie laaditaval pildil ja peaks aitama sujuvamalt üleminekut ühelt pildilt teisele laadida.
  • Hägune pilt : nimetatakse ka hägustamise tehnikaks. Te rendite pildi tillukese versiooni ja lähete siis täispildile. Esialgne pilt on väike nii pikslites kui ka kB-des. Artefaktide eemaldamiseks suurendatakse pilti ja hägustatakse pilti. Olen sellest varem kirjutanud teemal Kuidas keskmiselt pildi järkjärguline laadimine, WebP-i kasutamine pisipiltide eelvaadete loomiseks ja Veel näiteid Progressiivse pildi laadimise kohta.

Selgub, et on palju muid variatsioone ja paljud nutikad inimesed töötavad kohatäidete loomiseks välja muid tehnikaid.

Üks neist on täisvärvide asemel gradientide omamine. Gradiendid võimaldavad luua lõpliku pildi täpsema eelvaate, millel on väga vähe üldkulusid (kasuliku koormuse suurenemine).

Teine tehnika on pildil põhinevate SVG-de kasutamine, mis on hiljutiste katsete ja häkkimistega mõnevõrra haarduv.

SVG-põhised kohatäited

Me teame, et SVG-d sobivad ideaalselt vektorkujutiste jaoks. Enamasti soovime laadida bitikaardi, seega on küsimus selles, kuidas pilti vektoriseerida. Mõnes valikus kasutatakse servi, kujundeid ja alasid.

Ääred

Eelmises postituses selgitasin, kuidas teada saada pildi servad ja luua animatsioon. Minu esialgne eesmärk oli proovida joonistada piirkondi, vektoriseerides pilti, kuid ma ei teadnud, kuidas seda teha. Mõistsin, et servade kasutamine võib olla ka uuenduslik ja otsustasin neid animeerida, luues “joonistamise” efekti.

Piltide joonistamine servade tuvastamise ja SVG-animatsiooni abil

Veel päevi kasutati ja toetati SVG-d. Mõni aeg pärast seda, kui hakkasime neid kasutama klassikalise… medium.com alternatiivina

Kujundid

SVG-d saab kasutada ka piltide alade joonistamiseks servade / ääriste asemel. Mõnes mõttes vektoriseerime kohamärgi loomiseks bitikaardi pildi.

Veel päevil üritasin kolmnurkadega midagi sarnast teha. Tulemust näete minu kõnelustes CSSConfis ja Render Confis.

Ülaltoodud koodnõel on 245 kolmnurgast koosneva SVG-põhise kohahoidja kontseptsiooni tõend. Kolmnurkade genereerimine põhineb Delaunay triangulatsioonil, kasutades Possani polüserverit. Nagu arvata oligi, mida rohkem SVG kolmnurki kasutab, seda suurem on faili suurus.

Primitive ja SQIP, SVG-põhine LQIP-tehnika

Tobias Baldauf on töötanud veel ühe madala kvaliteediga pildi kohahoidja tehnikaga, kasutades SVG-sid nimega SQIP. Enne SQIP-i süvenemist annan ülevaate Primitive'ist, raamatukogust, millel SQIP põhineb.

Ürgne on üsna põnev ja soovitan teil kindlasti see üle vaadata. See teisendab bitikaardi pildi kattuvatest kujunditest koosneva SVG-ks. Selle väike suurus muudab selle sobivaks otse lehele joondamiseks. Üks edasi-tagasi vähem ja sisukas kohatäide algses HTML-i kasulikus koormuses.

Primitiiv loob pildi, mis põhineb kujunditel nagu kolmnurgad, ristkülikud ja ringid (ja veel mõned). Igal sammul lisab see uue. Mida rohkem samme, seda tulemuseks olev pilt näeb algsele lähemale. Kui teie väljund on SVG, tähendab see ka väljundkoodi suurust.

Selleks, et mõista, kuidas primitiiv töötab, lasin selle läbi paar pilti. Ma lõin kunstiteosele SVG-d, kasutades 10 ja 100 kuju:

Kui kasutate pilte 10 kuju, hakkame algsest pildist aru saama. Pildi kohahoidjate kontekstis on võimalik kasutada seda SVG-d kohahoidjana. Tegelikult on 10 kujuga SVG kood tõesti väike, umbes 1030 baiti, mis väljundi SVGO kaudu edastades langeb ~ 640 baidini.

100 kujuga loodud pildid on ootuspäraselt suuremad, kaaludes SVGO järel ~ 5 kB (enne 8 kB). Neil on suur detailide tase ja endiselt väike kandevõime. Otsus selle kohta, mitu kolmnurka kasutada, sõltub suuresti pildi tüübist (nt kontrastsus, värvide hulk, keerukus) ja detailide tasemest.

Võimalik oleks luua cpeg-dssim-i sarnane skript, mis kohandab kasutatud kujundite hulka, kuni on täidetud struktuurse sarnasuse künnis (või halvimal juhul maksimaalne kuju).

Neid saadud SVG-sid saab suurepäraselt kasutada ka taustapiltidena. Olles piiratud suurusega ja vektoripõhine, on nad hea kandidaat kangelaskujutiste ja suure taustaga, mis muidu näitaksid artefakte.

SQIP

Tobiase enda sõnadega:

SQIP on katse leida tasakaal nende kahe äärmuse vahel: see kasutab Primitive'i abil SVG loomist, mis koosneb mitmest lihtsast kujust, mis ühtlustavad pildi sees olevad põhijooned, optimeerib SVGO abil SVG-d ja lisab sellele Gaussi hägususe filtri . Nii saadakse SVG kohatäide, mis kaalub vaid ~ 800–1000 baiti, näeb kõigil ekraanidel ühtlane ja pakub visuaalset vihjet tulevasele pildi sisule.

Tulemus sarnaneb hägususe tehnika jaoks väikese kohahoidja pildi kasutamisega (mida Medium ja muud saidid teevad). Erinevus seisneb selles, et bitikaardipildi (nt JPG või WebP) kasutamise asemel on kohatäide SVG.

Kui käivitame SQIP originaalpiltide vastu, saame selle:

Väljund SVG on ~ 900 baiti ja koodi kontrollides näeme feGaussianBlurkujundite rühmale rakendatud filtrit:

SQIP suudab väljastada ka pildimärgendi, mille kodeeritud on SVG sisu Base 64:

Siluetid

Me vaatasime lihtsalt SVG-de kasutamist servade ja primitiivsete kujundite jaoks. Teine võimalus on piltide vektoriseerimine nende „jälgimiseks“. Mikael Ainalem jagas mõni päev tagasi koodinõela, mis näitas, kuidas kasutada kahevärvilist siluetti kohahoidjana. Tulemus on tõesti ilus:

Sel juhul olid SVG-d käsitsi joonistatud, kuid tehnika sünnitas kiiresti protsessi automatiseerimise tööriistadega integreerimise.

  • Reacti kasutav staatilise saidi generaator Gatsby toetab neid jälitatavaid SVG-sid nüüd. Piltide vektoriseerimiseks kasutab potrace'i JS-PORT.
  • Craft 3 CMS, mis lisas tuge ka siluettidele. See kasutab potrace'i PHP-porti.
  • image-trace-loader - veebipaketi laadur, mis kasutab piltide töötlemiseks potrace'i.

Samuti on huvitav näha väljundi võrdlust Emili veebipakilaaduri (põhineb potrace’il) ja Mikaeli käsitsi joonistatud SVG-de vahel.

Eeldan, et potrace'i genereeritud väljund kasutab vaikevalikuid. Siiski on võimalik neid näpistada. Kontrollige suvandeid image-trace-loader, mis on potrace'ile üle antud.

Kokkuvõte

Oleme näinud erinevaid tööriistu ja tehnikaid SVG-de loomiseks piltidest ja nende kohahoidjatena kasutamiseks. Samamoodi on WebP fantastiline pisipiltide vorming, on SVG ka huvitav vorming, mida kasutada kohahoidjates. Saame kontrollida detailide taset (ja seega ka suurust), see on väga tihendatav ning CSS-i ja JS-iga hõlpsasti manipuleeritav.

Lisaressursid

See postitus pääses Hacker Newsi tippu. Olen selle eest väga tänulik ja kõigi selle lehe kommentaarides jagatud linkide eest teistele ressurssidele. Siin on mõned neist!

  • Geometrize on Haxe'is kirjutatud ürgseisu sadam. Samuti on olemas JS-i rakendus, mida saate proovida otse oma brauseris.
  • Primitive.js, mis on JS-i primitiivne sadam. Samuti primitive.nextgen, mis on Primitive töölaua rakenduse port, mis kasutab Primitive.js ja Electron.
  • Seal on paar Twitteri kontot, kus näete näiteid Primitive ja Geometrize abil loodud piltidest. Vaadake @PrimitivePic ja @Geometrizer.
  • imagetracerjs, mis on JavaScripti abil kirjutatud rasterkujutiste jälgija ja vektorisaator. Samuti on porte Java ja Android jaoks.
  • Canvas-Graphics, JS Canvas API osaline juurutamine PHP-s GD ümber.

Seonduvad postitused

Kui teile on see postitus meeldinud, vaadake neid teisi postitusi, mille olen piltide laadimise tehnikate kohta kirjutanud:

Kuidas keskmine laadib pildi järk-järgult

Hiljuti sirvisin Mediumis postitust ja märkasin kena pildi laadimise efekti. Kõigepealt laadige väike udune pilt ... medium.com Veebikülje kasutamine pisikeste eelvaate piltide loomiseks

Pärast pildi optimeerimise teemat vaatan põhjalikumalt Facebooki tehnikat eelvaate loomiseks ... medium.com Veel näiteid progressiivse pildi laadimise kohta

Eelmises postituses lahkasin tehnikat, mida Medium kasutas piltide kuvamiseks, üleminekul uduselt pildilt lõplikule… medium.com

Rohkem minu artikleid saate lugeda saidilt jmperezperez.com.