Az SVG használata helyőrzőként és egyéb képbetöltési technikák

Szenvedélyesen kezelem a képteljesítmény optimalizálását és a képek gyors betöltését az interneten. Az egyik legérdekesebb kutatási terület a helyőrző: mit kell mutatni, ha a kép még nem töltődött be.

Az elmúlt napokban találkoztam néhány olyan betöltési technikával, amelyek SVG-t használnak, és szeretném leírni őket ebben a bejegyzésben.

Ebben a bejegyzésben ezeket a témákat fogjuk áttekinteni:

  • A különböző helyőrzők áttekintése
  • SVG-alapú helyőrzők (élek, formák és sziluettek)
  • A folyamat automatizálása.

A különböző helyőrzők áttekintése

Korábban írtam a helyőrzőkről és a képek lusta terheléséről, és beszéltem is róla. Lusta képek betöltése során érdemes átgondolni, mit kell helyőrzőként megjeleníteni, mivel ez nagy hatással lehet a felhasználó észlelt teljesítményére. Korábban több lehetőséget ismertettem:

Számos stratégia tölti be a kép területét, mielőtt betöltené.

  • A kép üres helyének megőrzése : A reszponzív tervezés világában ez megakadályozza a tartalom ugrálását. Ezek az elrendezésbeli változások rosszak a felhasználói tapasztalatok szempontjából, de a teljesítmény szempontjából is. A böngésző kénytelen elrendezés-újraszámításokat végezni minden alkalommal, amikor lekéri a kép méreteit, így helyet hagyva neki.
  • Helyőrző : Képzelje el, hogy a felhasználó profilképét jelenítjük meg. Érdemes egy sziluettet megjeleníteni a háttérben. Ez akkor jelenik meg, amikor a fő kép betöltődik, de akkor is, ha a kérés nem sikerült, vagy amikor a felhasználó egyáltalán nem állított be profilképet. Ezek a képek általában vektoralapúak, és kis méretük miatt jó jelölteket kell behúzni.
  • Egyszínű : Vegye ki a kép színét, és használja azt a helyőrző háttérszíneként. Ez lehet a domináns szín, a legélénkebb ... Az elképzelés az, hogy a betöltött képen alapul, és segít abban, hogy a kép nélküli kép és a kép közötti átmenet egyenletesebb legyen.
  • Homályos kép : Blur-up technikának is nevezik. A kép apró változatát rendereli, majd áttér a teljesre. A kezdeti kép pixelben és kB-ban is apró. A műtárgyak eltávolításához a kép felnagyul és elmosódik. Korábban írtam erről: A Medium hogyan hajtja végre a progresszív képbetöltést, a WebP használatával apró előnézeti képek létrehozására és további példákra a Progresszív képbetöltésről.

Kiderült, hogy sok más variáció létezik, és sok okos ember más technikákat fejleszt a helyőrzők létrehozására.

Az egyik a színátmenetek helyett az egyszínű színek. A színátmenetek pontosabb előnézetet készíthetnek a végső képről, nagyon kevés rezsivel (a terhelés növekedése).

Egy másik technika az SVG-k használata a kép alapján, amely a legújabb kísérletekkel és feltörésekkel némi tapadást mutat.

SVG-alapú helyőrzők

Tudjuk, hogy az SVG-k ideálisak a vektoros képekhez. A legtöbb esetben egy bitképet akarunk betölteni, ezért a kérdés az, hogyan lehet képet vektorosítani. Néhány lehetőség éleket, alakzatokat és területeket használ.

Élek

Egy előző bejegyzésemben elmagyaráztam, hogyan lehet megismerni egy kép éleit és létrehozni egy animációt. A kezdeti célom az volt, hogy megpróbáljam megrajzolni a régiókat, vektorizálva a képet, de nem tudtam, hogyan kell ezt csinálni. Rájöttem, hogy az élek használata innovatív is lehet, és úgy döntöttem, hogy animálom őket egy „rajz” effektus létrehozásával.

Képek rajzolása élfelismeréssel és SVG animációval

A napokban az SVG-t alig használták és támogatták. Nem sokkal azután, hogy elkezdtük használni a klasszikus… medium.com alternatívájaként

Alakzatok

Az SVG arra is használható, hogy élek / szegélyek helyett területeket rajzoljon a képből. Bizonyos szempontból vektorosítanánk egy bittérképes képet egy helyőrző létrehozásához.

A napokban próbáltam valami hasonlót csinálni háromszögekkel. Az eredményt láthatja a CSSConf és a Render Conf.

A fenti kódtű egy 245 háromszögből álló SVG-alapú helyőrző koncepciójának bizonyítéka. A háromszögek előállítása Delaunay háromszögelésen alapul, Possan poliszerverén keresztül. Ahogy az várható volt, minél több háromszöget használ az SVG, annál nagyobb a fájlméret.

Primitive és SQIP, SVG alapú LQIP technika

Tobias Baldauf az SQIP nevű SVG-k használatával egy másik, alacsony minőségű képmegőrző technikán dolgozik. Mielőtt beleásnám magát az SQIP-be, áttekintést adok a Primitive-ről, egy könyvtárról, amelyen az SQIP alapul.

A Primitive nagyon lenyűgöző, és mindenképpen ajánlom, hogy nézze meg. Átalakítja a bitkép képet átfedő alakzatokból álló SVG-vé. Kis mérete miatt egyenesen az oldalba illeszthető. Egy kevesebb oda-vissza út és egy tartalmas helyőrző a kezdeti HTML hasznos terhelésen belül.

A primitív képeket hoz létre olyan alakzatok alapján, mint a háromszögek, téglalapok és körök (és néhány más). Minden lépésben hozzáad egy újat. Minél több lépés, a kép közelebb néz ki az eredetihez. Ha a kimenet SVG, ez azt is jelenti, hogy a kimeneti kód mérete nagyobb lesz.

Annak érdekében, hogy megértsem a primitív működését, végigvittem rajta pár képet. SVG-ket készítettem a grafikához 10 és 100 forma felhasználásával:

Ha 10 alakzatot használ a kép, akkor kezdjük megérteni az eredeti képet. A kép helyőrzőivel összefüggésben lehetőség van arra, hogy ezt az SVG-t helyőrzőként használja. Valójában a 10 formájú SVG kódja nagyon kicsi, körülbelül 1030 bájt, ami ~ 640 bájtra csökken, amikor a kimenetet átengedi az SVGO-n.

A 100 alakkal létrehozott képek a várakozásoknak megfelelően nagyobbak, az SVGO után ~ 5kB súlyúak (előtte 8kB). Nagy részletességgel rendelkeznek, még mindig kis haszonnal. Az a döntés, hogy hány háromszöget kell használni, nagyban függ a kép típusától (pl. Kontraszt, színmennyiség, összetettség) és a részletesség szintjétől.

Lehetőség lenne létrehozni a cpeg-dssim-hez hasonló szkriptet, amely addig módosítja a felhasznált alakzatok mennyiségét, amíg el nem éri a strukturális hasonlósági küszöböt (vagy a legrosszabb esetben az alakzatok maximális számát).

Ezek a kapott SVG-k kiválóan használhatók háttérképként is. Méretkorlátozottak és vektor-alapúak, ezért jó jelöltek olyan hős képekhez és nagy háttérhez, amelyek egyébként műtárgyakat mutatnának.

SQIP

Tóbiás saját szavaival:

Az SQIP arra törekszik, hogy egyensúlyt találjon e két szélsőség között: a Primitive segítségével létrehoz egy SVG-t, amely több egyszerű formából áll, amelyek közelítik a kép belsejében látható főbb jellemzőket, optimalizálja az SVG-t az SVGO segítségével, és hozzáad egy Gaussian Blur szűrőt . Ez egy SVG helyőrzőt eredményez, amelynek tömege mindössze ~ 800–1000 bájt, sima megjelenésű minden képernyőn, és vizuális utat nyújt a kép tartalmához.

Az eredmény hasonló az apró helyőrző kép használatához az elmosódás technikájához (mit csinál a Medium és más webhelyek). A különbség az, hogy ahelyett, hogy bitképet használna, pl. JPG vagy WebP, a helyőrző SVG.

Ha az SQIP-et futtatjuk az eredeti képek ellen, akkor ezt kapjuk:

A kimeneti SVG ~ 900 bájt, és a kódot megvizsgálva kiszúrhatjuk az feGaussianBluralakzatok csoportjára alkalmazott szűrőt:

Az SQIP képes egy képcímke kiadására is, az SVG tartalom Base 64 kódolásával:

Sziluettek

Csak áttekintettük az SVG-k használatát élek és primitív alakzatok számára. Egy másik lehetőség a képek vektorosítása a „nyomon követésükre”. Mikael Ainalem néhány napja megosztott egy kódtollat, amely megmutatta, hogyan lehet helyettesítőként használni a 2 színű sziluettet. Az eredmény nagyon szép:

Az SVG-ket ebben az esetben kézzel rajzolták, de a technika gyorsan elősegítette az integráció eszközeit a folyamat automatizálásához.

  • A Reacst használó statikus helygenerátor, a Gatsby most támogatja ezeket a nyomon követett SVG-ket. A képek vektorizálásához a potrace JS PORT-ját használja.
  • Craft 3 CMS, amely támogatást adott a sziluettek számára is. A potrace PHP portját használja.
  • image-trace-loader, egy Webpack betöltő, amely potrace-et használ a képek feldolgozásához.

Érdekes látni az Emil web pot loader (potrace-alapú) és Mikael kézzel rajzolt SVG-k kimenetének összehasonlítását is.

Feltételezem, hogy a potrace által generált kimenet az alapértelmezett beállításokat használja. Meg lehet azonban őket csípni. Ellenőrizze az image-trace-loader opcióit, amelyek nagyjából azok, amelyeket a potrace-nek adunk át.

Összegzés

Különböző eszközöket és technikákat láttunk az SVG-k képekből történő létrehozására és helyőrzőként történő felhasználására. Ugyanúgy, mint a WebP egy fantasztikus formátum a miniatűrök számára, az SVG is érdekes formátum a helyőrzőkben. Szabályozhatjuk a részletességi szintet (és így a méretet), ez nagyon összenyomható és könnyen kezelhető CSS-sel és JS-sel.

Extra források

Ez a bejegyzés a Hacker News élére került. Nagyon hálás vagyok ezért, és az összes linkért, amely más forrásokhoz kapcsolódott, amelyeket megosztottak az adott oldal megjegyzésében. Íme néhány közülük!

  • A Geometrize a primitív kikötője, amelyet Haxe-ben írtak. Van egy JS megvalósítás is, amelyet kipróbálhat közvetlenül a böngészőjében.
  • Primitive.js, amely a Primitive portja a JS-ben. Ezenkívül a primitive.nextgen, amely a Primitive asztali alkalmazás portja a Primitive.js és az Electron használatával.
  • Van néhány Twitter-fiók, ahol példákat láthat a Primitive és a Geometrize alkalmazással létrehozott képekről. Nézze meg a @PrimitivePic és a @Geometrizer oldalakat.
  • imagetracerjs, amely egy raszteres kép nyomkövető és vektorizáló, amelyet JavaScript-ben írtak. Vannak portok a Java és az Android számára is.
  • Canvas-Graphics, a JS Canvas API részleges megvalósítása a PHP-ben a GD körül.

Kapcsolódó hozzászólások

Ha tetszett ez a bejegyzés, nézze meg ezeket a hozzászólásokat, amelyeket a képek betöltése technikáiról írtam:

Hogyan közepes a progresszív képbetöltés

Nemrégiben a Medium egyik bejegyzését böngésztem, és észrevettem egy szép képbetöltő hatást. Először töltsön be egy kis elmosódott képet ... medium.com A WebP használatával apró előnézeti képeket készíthet

A képoptimalizálás témakörét követve mélyebben áttekintem a Facebook technikáját az előnézet készítéséhez ... medium.com További példák a progresszív képbetöltésre

Egy korábbi bejegyzésemben a Medium által a képek megjelenítésére használt technikát boncolgattam, áttérve egy elmosódott képről a végső… medium.com

További cikkjeimet a jmperezperez.com oldalon olvashatja el.