Kako koristiti SVG kao rezervirano mjesto i ostale tehnike učitavanja slika

Programiranje

Zaljubljen sam u optimizaciju performansi slike i brzu učitavanje slika na webu. Jedno od najzanimljivijih područja istraživanja su rezervirana mjesta: što pokazati kad se slika još nije učitala.

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

U ovom postu proći ćemo kroz ove teme:

  • Pregled različitih vrsta rezerviranih mjesta
  • Držači rezervirani na osnovi SVG-a (rubovi, oblici i siluete)
  • Automatizacija procesa.

Pregled različitih vrsta rezerviranih mjesta

U prošlosti sam pisao o rezerviranim mjestima i lijenom opterećenju slika, a također sam o tome govorio. Kada vršite lijeno učitavanje slika, dobro je razmisliti što prikazati kao rezervirano mjesto, jer to može imati velik utjecaj na percepciju korisnikovih performansi. U prošlosti sam opisao nekoliko mogućnosti:

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

  • Održavanje praznog prostora za sliku : u svijetu responzivnog dizajna to sprječava poskakivanje sadržaja. Te promjene izgleda loše su s gledišta korisničkog iskustva, ali i zbog izvedbe. Preglednik je prisiljen raditi izračune za ponovni izračun svaki put kada dohvati dimenzije slike, ostavljajući joj prostor.
  • Rezervirano mjesto : Zamislite da prikazujemo sliku profila korisnika. Možda bismo željeli prikazati siluetu u pozadini. To se prikazuje dok se učitava glavna slika, ali i kada taj zahtjev nije uspio ili kada korisnik uopće nije postavio sliku profila. Te se slike obično temelje na vektorima i zbog svoje male veličine dobar su kandidat za postavljanje.
  • Jednobojna : Uzmite boju sa slike i upotrijebite je kao pozadinsku boju rezerviranog mjesta. Ovo može biti dominantna boja, najživlja ... Ideja je da se temelji na slici koju učitavate i da bi trebala pomoći u lakšem prijelazu između slike koja se ne učitava.
  • Mutna slika : Naziva se i tehnikom zamućenja. Prikažete malu verziju slike, a zatim prelazite na cijelu. Početna slika je sićušna i u pikselima i u kBs. Za uklanjanje artefakata slika se uvećava i zamućuje. O ovome sam već napisao o tome kako Medium radi progresivno učitavanje slika, upotrebi WebP-a za stvaranje sitnih slika pregleda i još primjera progresivnog učitavanja slika.

Ispostavilo se da postoje mnoge druge varijacije i puno pametnih ljudi razvija druge tehnike za stvaranje rezerviranih mjesta.

Jedan od njih je gradijent umjesto punih boja. Gradijenti mogu stvoriti precizniji pregled konačne slike, s vrlo malo režije (povećanje korisnog tereta).

Druga tehnika je korištenje SVG-ova temeljenih na slici, što donekle pridonosi nedavnim eksperimentima i hakovanjima.

Rezervirana mjesta sa sjedištem u SVG-u

Znamo da su SVG-ovi idealni za vektorske slike. U većini slučajeva želimo učitati bitmapu, pa je pitanje kako vektorizirati sliku. Neke mogućnosti koriste rubove, oblike i područja.

Rubovi

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

Crtanje slika pomoću detekcije ruba i SVG animacije

U davna vremena SVG se jedva koristio i podržavao. Neko vrijeme nakon što smo ih počeli koristiti kao alternativu klasičnom ... medium.com

Oblici

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

Nekada sam pokušavao nešto slično napraviti s trokutićima. Rezultat možete vidjeti u mojim razgovorima na CSSConf i Render Conf.

Gore navedeni kodni kod dokaz je koncepta rezerviranog mjesta zasnovanog na SVG-u koji se sastoji od 245 trokuta. Generiranje trokuta temelji se na Delaunayevoj triangulaciji koristeći Possanov poliserver. Kao što se očekivalo, što više trokuta SVG koristi, to je veća veličina datoteke.

Primitiv i SQIP, LQIP tehnika temeljena na SVG-u

Tobias Baldauf radio je na drugoj tehnici nekvalitetnog rezerviranog materijala pomoću SVG-a pod nazivom SQIP. Prije kopanja u samom SQIP-u dat ću pregled Primitive, knjižnice na kojoj se temelji SQIP.

Primitive je prilično fascinantno i svakako vam preporučam da to provjerite. Bitmapsku sliku pretvara u SVG sastavljen od preklapajućih oblika. Njegova mala veličina čini ga prikladnim za umetanje ravno u stranicu. Jedno povratno putovanje manje i značajno rezervirano mjesto unutar početnog HTML korisnog tereta.

Primitiv generira sliku na temelju oblika poput trokuta, pravokutnika i krugova (i nekoliko drugih). U svakom koraku dodaje novi. Što 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 razumio kako Primitive djeluje, prošao sam ga kroz nekoliko slika. Generirao sam SVG-ove za umjetničko djelo koristeći 10 oblika i 100 oblika:

Kada koristimo 10 oblika slika, počinjemo shvaćati izvornu sliku. U kontekstu rezerviranih mjesta za potencijal postoji mogućnost upotrebe ovog SVG-a kao rezerviranog mjesta. Zapravo, kod za SVG s 10 oblika je stvarno mali, oko 1030 bajtova, što se spušta na ~ 640 bajtova prilikom prolaska izlaza kroz SVGO.

Slike generirane sa 100 oblika veće su, očekivano, s težinom od ~ 5 kB nakon SVGO (prije 8 kB). Imaju izvrsnu razinu detalja uz još uvijek malu korisnu nosivost. 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 prilagođava količinu korištenih oblika sve dok se ne dostigne prag strukturne sličnosti (ili maksimalni broj oblika u najgorem slučaju).

Ovi rezultirajući SVG-ovi izvrsni su i za upotrebu kao pozadinske slike. Budući da su ograničeni na veličinu i temelje se na vektorima, dobar su kandidat za herojske slike i velike pozadine koje bi inače pokazivale artefakte.

SQIP

Tobiasovim riječima:

SQIP je pokušaj pronalaska 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 Gaussian Blur filter . To stvara rezervirano mjesto SVG koje teži samo ~ 800–1000 bajtova, izgleda glatko na svim zaslonima i pruža vizualni znak sadržaja koji dolazi.

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

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

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

SQIP također može iznijeti oznaku slike s kodiranim SVG sadržajem Base 64:

Siluete

Upravo smo pogledali upotrebu SVG-ova za rubove i primitivne oblike. Druga je mogućnost vektorizirati slike koje ih "prate". Mikael Ainalem prije nekoliko je dana podijelio kodeks koji pokazuje kako koristiti dvobojnu siluetu kao rezervirano mjesto. Rezultat je zaista lijep:

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

  • Gatsby, statički generator web stranica koji koristi React, sada podržava ove trasirane SVG-ove. Koristi JS PORT potrace za vektorizaciju slika.
  • Craft 3 CMS, koji je također dodao podršku za siluete. Koristi PHP port potrace.
  • image-trace-loader, učitavač Webpack-a koji koristi potrace za obradu slika.

Također je zanimljivo vidjeti usporedbu rezultata između Emilovog učitavača webpack-a (na temelju potrace) i Mikaelovih ručno nacrtanih SVG-ova.

Pretpostavljam da izlaz koji generira potrace koristi zadane opcije. Međutim, moguće ih je podesiti. Provjerite opcije za image-trace-loader, koje su uglavnom one prenesene na potrace.

Sažetak

Vidjeli smo različite alate i tehnike kako generirati SVG-ove iz slika i koristiti ih kao rezervirana mjesta. Na isti način na koji je WebP fantastičan format za sličice, SVG je također zanimljiv format za upotrebu u rezerviranim mjestima. Možemo kontrolirati razinu detalja (a time i veličinu), vrlo je stisljiv i njime se lako upravlja s CSS-om i JS-om.

Dodatni resursi

Ovaj je post dospio na vrh stranice Hacker News. Jako sam zahvalan na tome i na svim vezama do drugih resursa koji su podijeljeni u komentarima na toj stranici. Evo nekoliko njih!

  • Geometrize je luka Primitive napisana na Haxeu. Postoji i JS implementacija koju možete isprobati izravno u svom pregledniku.
  • Primitive.js, koji je luka Primitive u JS-u. Također, primitive.nextgen, koji je priključak Primitive desktop aplikacije koja koristi Primitive.js i Electron.
  • Postoji nekoliko Twitter računa na kojima možete vidjeti primjere slika generiranih pomoću Primitive i Geometrize. Pogledajte @PrimitivePic i @Geometrizer.
  • imagetracerjs, a to je raster za praćenje i vektorizacija rasterskih slika napisan na JavaScript-u. Tu su i priključci za Javu i Android.
  • Canvas-Graphics, djelomična implementacija JS Canvas API-ja u PHP-u oko GD-a.

Povezane objave

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

Kako Medium radi progresivno učitavanje slike

Nedavno sam pregledavao post na Mediumu i primijetio sam lijep efekt učitavanja slike. Prvo učitajte malu mutnu sliku ... medium.com Pomoću WebP-a stvorite male slike za pregled

Slijedeći temu optimizacije slike, dublje ću se upoznati s Facebook-ovom tehnikom za stvaranje pregleda ... medium.com Još primjera progresivnog učitavanja slika

U prošlom postu raščlanio sam tehniku ​​koju je Medium koristio za prikaz slika, prelazeći s mutne slike na konačnu ... medium.com

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