Kako se koristi SVG kao rezervirač mjesta i ostale tehnike učitavanja slika

Generiranje SVG datoteka iz slika može se koristiti za rezervirana mjesta. Nastavi čitati!

Strah sam za optimizacijom performansi slike i ubrzavanjem učitavanja slika na webu. Jedno od najzanimljivijih područja istraživanja su mjesta na mjestu: što pokazati kad se slika još nije učitala.

Posljednjih dana naišao sam na neke tehnike utovara koje koriste SVG i želio bih ih opisati u ovom postu.

U ovom postu ćemo proći kroz sljedeće teme:

  • Pregled različitih vrsta rezervi
  • Držači mjesta utemeljeni na SVG (rubovi, oblici i siluete)
  • Automatizacija procesa.

Pregled različitih vrsta rezervi

U prošlosti sam pisao o držačima mjesta i lijenim slikama, a također govorio o tome. Kada radite lijeno učitavanje slika, dobra je ideja razmisliti o tome što prikazati kao rezervirano mjesto, jer to može imati veliki utjecaj na performanse korisnika koje doživljavaju. U prošlosti sam opisao nekoliko opcija:

Nekoliko strategija za popunjavanje područja slike prije nego što se učita.

  • Održavanje prostora praznim za sliku: U svijetu prilagodljivog dizajna to sprečava da sadržaj skače okolo. Te promjene izgleda loše su sa stajališta korisnika, ali i performansi. Preglednik je primoran izrađivati ​​raspored proračuna svaki put kada utvrdi dimenzije slike, ostavljajući prostora za to.
  • Zamjena mjesta: Zamislite da prikazujemo sliku profila korisnika. Možda ćemo htjeti prikazati siluetu u pozadini. To se prikazuje dok je glavna slika učitana, ali i kad taj zahtjev nije uspio ili kada korisnik uopće nije postavio nijednu sliku profila. Ove su slike obično vektorske, a zbog svoje male veličine dobar su kandidat za umetanje.
  • Čvrsta boja: uzmite boju sa slike i upotrijebite je kao boju pozadine za rezerviranje mjesta. Ovo može biti dominantna boja, najživopisnija ... Ideja je da se temelji na slici koju učitavate i da bi trebala pomoći da prijelaz između slike ne bude uglađen.
  • Zamagljena slika: Zove se i tehnika zamagljivanja. Prikažete sićušnu verziju slike, a zatim prelazite na potpunu. Početna slika je malena i u pikselima i u kB-ima. Za uklanjanje artefakata slika se povećava i zamagljuje. O tome sam već pisao o tome kako se Medium progresivno učitava slika, koristeći WebP za stvaranje sitnih slika za pregled i Više primjera progresivnog učitavanja slika.

Ispada da postoje mnoge druge inačice i puno pametnih ljudi razvija druge tehnike za stvaranje mjesta.

Jedan od njih je gradijent umjesto punih boja. Nagibi mogu stvoriti precizniji pregled konačne slike, s vrlo malim nadoknadom (povećanje korisnog opterećenja).

Korištenje gradijenata kao pozadine. Snimak zaslona iz programa Gradify, koji više nije online. Šifra na GitHub-u.

Druga tehnika je korištenje SVG-ova zasnovanih na slici, čime se dobiva određena vuka nedavnim eksperimentima i hakovanjima.

Držači mjesta utemeljeni na SVG-u

Znamo da su SVG idealni za vektorske slike. U većini slučajeva želimo učitati bitmap, pa je pitanje kako vektorirati sliku. Neke opcije koriste rubove, oblike i područja.

Rubovi

U prethodnom postu objasnio sam kako saznati rubove slike i stvoriti animaciju. Moj prvotni cilj bio je pokušati nacrtati regije, vektorizirajući sliku, ali nisam znao kako to učiniti. Shvatio sam da korištenje rubova može biti inovativno i odlučio sam ih animirati stvarajući efekt „crtanja“.

oblici

SVG se također može koristiti za crtanje područja sa slike umjesto rubova / obruba. Na neki način bi vektorizirali bitmap sliku da bismo stvorili rezervirano mjesto.

U dane kad sam pokušao napraviti nešto slično s trokutima. Rezultat možete vidjeti u mojim razgovorima na CSSConf i Render Conf.

Gornji kodek dokaz je koncepta SVG temeljenog rezerviranog mjesta koji se sastoji od 245 trokuta. Generacija trokuta temelji se na Delaunayevoj trokutanju pomoću Possanovog polisara. Kao što se očekivalo, što više trokuta koristi SVG, to je veća veličina datoteke.

Primitivni i SQIP, SVG-bazirana LQIP tehnika

Tobias Baldauf je radio na još jednoj niskokvalitetnoj tehnici zadržavanja slike pomoću SVG-ova pod nazivom SQIP. Prije kopanja u samom SQIP-u dat ću pregled Primitiva, knjižnice na kojoj se temelji SQIP.

Primitivno je prilično fascinantno i svakako vam preporučujem da to provjerite. Pretvara bitnu sliku u SVG sastavljen od oblika koji se preklapaju. Njegova mala veličina čini ga pogodnim za umetanje ravno u stranicu. Jedan manje povratni kurs i smisleni rezervirani rezervi unutar početnog HTML korisnog opterećenja.

Primitivni stvara sliku koja se temelji na oblicima poput trokuta, pravokutnika i krugova (i nekoliko drugih). U svakom koraku dodaje novi. Što je više koraka, rezultirajuća slika izgleda bliže izvornoj. Ako je vaš izlaz SVG, to također znači da će veličina izlaznog koda biti veća.

Da bih shvatio kako Primitiv djeluje, provukao sam ga kroz nekoliko slika. Stvorio sam SVG-ove za umjetničko djelo pomoću 10 oblika i 100 oblika:

Obradite ovu sliku pomoću primitivnih, pomoću 10 oblika i 100 oblika.Obradite ovu sliku pomoću primitivnih, pomoću 10 oblika i 100 oblika.

Kada koristimo slike u 10 oblika počinjemo shvaćati originalnu sliku. U kontekstu rezervi rezervi slike, ovaj SVG može se upotrijebiti kao rezervirani. Zapravo je kôd za SVG s 10 oblika stvarno mali, oko 1030 bajta, što se spušta na ~ 640 bajta prilikom prolaska izlaza kroz SVGO.

              

Slike generirane u 100 oblika veće su, kako se i očekivalo, težine oko 5kB nakon SVGO (prije 8kB). Imaju sjajnu razinu detalja s još malim korisnim opterećenjem. Odluka o korištenju trokuta uvelike će ovisiti o vrsti slike (npr. Kontrast, količina boja, složenost) i razini detalja.

Bilo bi moguće stvoriti skriptu sličnu cpeg-dssim koja podešava količinu korištenih oblika sve dok se ne dosegne prag strukturne sličnosti (ili maksimalni broj oblika u najgorem slučaju).

Ovi rezultirajući SVG-ovi odlično se koriste i kao pozadinske slike. Budući da imaju ograničenje veličine i vektora, dobar su kandidat za slike heroja i veliku pozadinu koja bi inače pokazala artefakte.

SQIP

Tobiasovim riječima:

SQIP je pokušaj pronalaženja ravnoteže između ove dvije krajnosti: koristi Primitive za generiranje SVG-a koji se sastoji od nekoliko jednostavnih oblika koji približavaju glavne značajke vidljive unutar slike, optimizira SVG pomoću SVGO-a i dodaje mu filtar Gaussian Blur. , To stvara SVG rezerviranog mjesta koji teži samo ~ 800-1000 bajtova, izgleda glatko na svim ekranima i pruža vizualni znak sadržaja slike koji dolazi.

Rezultat je sličan korištenju sićušne slike rezerviranog mjesta za tehniku ​​zamućenja (što rade Medium i ostale web stranice). Razlika je u tome što umjesto korištenja bitmap slike, npr. JPG ili WebP, rezervirano mjesto je SVG.

Ako pokrenemo SQIP na izvornim slikama, dobit ćemo ovo:

Izlazne slike pomoću prve SQIP slike i druge slike.

Izlazni SVG iznosi ~ 900 bajtova, a inspekcijom koda možemo uočiti filtar feGaussianBlur primijenjen na grupu oblika:

    < put fill = "# 817c70" d = "M0 0h2000v2000H0z" />           

SQIP također može prikazati slikovnu oznaku s kodiranom Bazom 64 SVG sadržaja:

Dodaj opisni alt tekst

siluete

Upravo smo gledali kako SVG-ovi koriste rubove i primitivne oblike. Druga je mogućnost vektorirati slike „ući u trag“. Mikael Ainalem podijelio je kôd prije nekoliko dana pokazujući kako koristiti dvobojnu siluetu kao mjesto rezerviranja. Rezultat je zaista lijep:

SVG-ovi su u ovom slučaju crtani ručno, ali je tehnika brzo rodila integracije s alatima za automatizaciju procesa.

  • Gatsby, generator statičkih stranica pomoću React-a sada podržava te praćene SVG-ove. Koristi JS PORT od potrace za vektorizaciju slika.
  • Craft 3 CMS, koji je također dodao podršku siluetama. Koristi PHP port potrace.
  • image-trace-loader, webpack loader koji koristi potrace za obradu slika.

Zanimljivo je vidjeti i usporedbu rezultata između Emilovog utovarivača web paketa (na temelju potrace) i Mikaelovih nacrtanih SVG-ova.

Pretpostavljam da izlaz koji generira potrace koristi zadane opcije. Međutim, moguće ih je podebljati. Provjerite mogućnosti za utovar slika-tragača, koje su prilično one koje su prebačene u potragu.

Sažetak

Vidjeli smo različite alate i tehnike za generiranje SVG-ova iz slika i njihovu upotrebu kao rezerviranja mjesta. Na isti način na koji je WebP fantastičan format za sličice, SVG je također zanimljiv format za korištenje u rezervi. Možemo kontrolirati razinu detalja (a samim tim i veličinu), to je vrlo stisljivo i lako se manipulira s CSS-om i JS-om.

Dodatni resursi

Ovaj se post popeo na vrh Hacker News. Vrlo sam zahvalna na tome, kao i na svim vezama do drugih izvora koji su podijeljeni u komentarima na toj stranici. Evo nekoliko njih!

  • Geometrize je luka primitiva napisana u Haxeu. Postoji i JS implementacija koju možete isprobati izravno na svom pregledniku.
  • Primitive.js, što je luka Primitive u JS. Također, primitive.nextgen, koji je port aplikacije Primitive za radnu površinu pomoću Primitive.js i Electron-a.
  • Postoji nekoliko Twitter računa na kojima možete vidjeti primjere slika generiranih pomoću Primitive i Geometrize. Provjerite @PrimitivePic i @Geometrizer.
  • imagetracerjs, to je traktor rasterskih slika i vektorizator napisan u JavaScriptu. Postoje i portovi za Javu i Android.
  • Canvas-Graphics, djelomična implementacija JS Canvas API-ja u PHP-u oko GD-a.

Vezane objave

Ako ste uživali u ovom postu, pogledajte ove druge postove o tehnikama učitavanja slika koje sam napisao:

Više mojih članaka možete pročitati na jmperezperez.com.