de José M. Pérez

Cum să utilizați SVG ca substituent și alte tehnici de încărcare a imaginilor

Cum se foloseste SVG ca substituent si alte tehnici de
Generarea de SVG-uri din imagini poate fi utilizată pentru substituenți. Continua să citești!

Sunt pasionat de optimizarea performanței imaginilor și de a face ca imaginile să se încarce rapid pe web. Una dintre cele mai interesante zone de explorare este substituenții: ce să arăți când imaginea nu s-a încărcat încă.

În ultimele zile am întâlnit câteva tehnici de încărcare care folosesc SVG și aș dori să le descriu în această postare.

În această postare vom trece prin aceste subiecte:

  • Prezentare generală a diferitelor tipuri de substituenți
  • Substituenți pe bază de SVG (margini, forme și siluete)
  • Automatizarea procesului.

Prezentare generală a diferitelor tipuri de substituenți

În trecut Am scris despre substituenți și leneșul de imagini, Si deasemenea am vorbit despre asta. Atunci când faceți încărcarea leneșă a imaginilor, este o idee bună să vă gândiți la ce să redați ca substituent, deoarece poate avea un impact mare asupra performanței percepute de utilizator. În trecut am descris mai multe opțiuni:

ad-banner
Cum se foloseste SVG ca substituent si alte tehnici de

Mai multe strategii pentru a umple aria unei imagini înainte ca aceasta să se încarce.

  • Menținerea spațiului gol pentru imagine: Într-o lume a designului receptiv, acest lucru împiedică conținutul să sară în jur. Aceste modificări ale aspectului sunt negative din punctul de vedere al experienței utilizatorului, dar și pentru performanță. Browserul este obligat să facă calcule de re-aspect de fiecare dată când preia dimensiunile unei imagini, lăsând spațiu pentru aceasta.
  • Substituent: Imaginați-vă că afișăm imaginea de profil a unui utilizator. S-ar putea să dorim să afișăm o siluetă în fundal. Aceasta este afișată în timp ce imaginea principală este încărcată, dar și atunci când solicitarea nu a reușit sau când utilizatorul nu a setat deloc nicio imagine de profil. Aceste imagini sunt, de obicei, bazate pe vectori și, datorită dimensiunilor mici, sunt un candidat bun pentru a fi subliniate.
  • Culoare solidă: Ia o culoare din imagine și folosește-o ca culoare de fundal pentru substituent. Aceasta poate fi culoarea dominantă, cea mai vibrantă … Ideea este că se bazează pe imaginea pe care o încărcați și ar trebui să ajute la tranziția dintre nicio imagine la imagine încărcată mai ușoară.
  • Imagine neclară: Numită și tehnica de estompare. Redați o versiune mică a imaginii și apoi treceți la cea completă. Imaginea inițială este mică atât în ​​pixeli, cât și în KB. Pentru a elimina artefactele, imaginea este mărită și neclară. Am scris anterior despre acest lucru pe Modul de încărcare progresivă a imaginii, Folosind WebP pentru a crea mici imagini de previzualizare, și Mai multe exemple de încărcare progresivă a imaginilor .

Se pare că există multe alte variații și o mulțime de oameni inteligenți dezvoltă alte tehnici pentru a crea substituenți.

Unul dintre ele are gradiente în loc de culori solide. Gradienții pot crea o previzualizare mai precisă a imaginii finale, cu foarte puține cheltuieli generale (creștere a sarcinii utile).

1611243190 318 Cum se foloseste SVG ca substituent si alte tehnici de
Folosirea gradienților ca fundaluri. Captură de ecran de la Gradify, care nu mai este online. Cod pe GitHub.

O altă tehnică este folosirea SVG-urilor bazate pe imagine, care devine un pic de tracțiune cu experimente și hacks recente.

Substituenți bazați pe SVG

Știm că SVG-urile sunt ideale pentru imaginile vectoriale. În majoritatea cazurilor, dorim să încărcăm un bitmap, deci întrebarea este cum să vectorizăm o imagine. Unele opțiuni utilizează margini, forme și zone.

Margini

În o postare anterioară Am explicat cum să afli marginile unei imagini și să creezi o animație. Scopul meu inițial era să încerc să desenez regiuni, vectorizând imaginea, dar nu știam cum să o fac. Mi-am dat seama că utilizarea marginilor ar putea fi și inovatoare și am decis să le anim, creând un efect de „desen”.

Desenarea imaginilor folosind detectarea marginilor și animația SVG
Pe vremuri, SVG abia mai era folosit și acceptat. La ceva timp după ce am început să le folosim ca alternativă la clasic …medium.com

Forme

SVG poate fi folosit și pentru a desena zone din imagine în loc de margini / margini. Într-un fel, am vectoriza o imagine bitmap pentru a crea un substituent.

În trecut, am încercat să fac ceva similar cu triunghiurile. Puteți vedea rezultatul în discuțiile mele la CSSConf și Redare Conf.

Codul de mai sus este o dovadă a conceptului unui substituent bazat pe SVG compus din 245 de triunghiuri. Generarea triunghiurilor se bazează pe Triangularea Delaunay folosind Poliservitorul lui Possan. Așa cum era de așteptat, cu cât SVG folosește mai multe triunghiuri, cu atât este mai mare dimensiunea fișierului.

Primitive și SQIP, o tehnică LQIP bazată pe SVG

Tobias Baldauf a lucrat la o altă tehnică Placeholder Image Low-Quality folosind SVG-uri numite SQIP. Înainte de a căuta în SQIP în sine, voi oferi o prezentare generală a Primitiv, o bibliotecă pe care se bazează SQIP.

Primitivul este destul de fascinant și vă recomand cu siguranță să îl verificați. Convertește o imagine bitmap într-un SVG compus din forme suprapuse. Dimensiunea redusă o face adecvată pentru înclinarea sa direct în pagină. Un drum mai puțin dus-întors și un substituent semnificativ în sarcina utilă HTML inițială.

Primitive generează o imagine bazată pe forme precum triunghiuri, dreptunghiuri și cercuri (și câteva altele). În fiecare pas adaugă unul nou. Cu cât mai mulți pași, imaginea rezultată arată mai aproape de cea originală. Dacă ieșirea dvs. este SVG, înseamnă că dimensiunea codului de ieșire va fi mai mare.

Pentru a înțelege cum funcționează Primitive, l-am parcurs prin câteva imagini. Am generat SVG-uri pentru opera de artă folosind 10 forme și 100 de forme:

1611243190 341 Cum se foloseste SVG ca substituent si alte tehnici de
1611243190 109 Cum se foloseste SVG ca substituent si alte tehnici de
1611243191 230 Cum se foloseste SVG ca substituent si alte tehnici de
Prelucrare această imagine folosind Primitive, folosind 10 forme și 100 de forme.
1611243191 117 Cum se foloseste SVG ca substituent si alte tehnici de
1611243191 601 Cum se foloseste SVG ca substituent si alte tehnici de
1611243191 364 Cum se foloseste SVG ca substituent si alte tehnici de
Prelucrare această imagine folosind Primitive, folosind 10 forme și 100 de forme.

Când folosim 10 forme, imaginile începem să înțelegem imaginea originală. În contextul substituenților de imagine există potențialul de a utiliza acest SVG ca substituent. De fapt, codul pentru SVG cu 10 forme este foarte mic, în jur de 1030 octeți, care coboară la ~ 640 octeți când treceți ieșirea prin SVGO.

<svg xmlns=”http://www.w3.org/2000/svg" width=”1024" height=”1024"><path fill=”#817c70" d=”M0 0h1024v1024H0z”/><g fill-opacity=”.502"><path fill=”#03020f” d=”M178 994l580 92L402–62"/><path fill=”#f2e2ba” d=”M638 894L614 6l472 440"/><path fill=”#fff8be” d=”M-62 854h300L138–62"/><path fill=”#76c2d9" d=”M410–62L154 530–62 38"/><path fill=”#62b4cf” d=”M1086–2L498–30l484 508"/><path fill=”#010412" d=”M430–2l196 52–76 356"/><path fill=”#eb7d3f” d=”M598 594l488–32–308 520"/><path fill=”#080a18" d=”M198 418l32 304 116–448"/><path fill=”#3f201d” d=”M1086 1062l-344–52 248–148"/><path fill=”#ebd29f” d=”M630 658l-60–372 516 320"/></g></svg>

Imaginile generate cu 100 de forme sunt mai mari, așa cum era de așteptat, cântărind ~ 5kB după SVGO (8kB înainte). Au un nivel de detaliu excelent, cu o sarcină utilă încă mică. Decizia numărului de triunghiuri de utilizat va depinde în mare măsură de tipul imaginii (de exemplu, contrast, cantitatea de culori, complexitate) și nivelul de detaliu.

Ar fi posibil să creați un script similar cu cpeg-dssim care ajustează cantitatea de forme utilizate până la a similitudine structurale pragul este atins (sau un număr maxim de forme în cel mai rău caz).

Aceste SVG-uri rezultate sunt excelente și pentru a fi utilizate ca imagini de fundal. Fiind constrânși în funcție de dimensiune și bazate pe vectori, aceștia sunt un bun candidat pentru imagini de erou și fundaluri mari care altfel ar arăta artefacte.

SQIP

În Cuvintele lui Tobias:

SQIP este o încercare de a găsi un echilibru între aceste două extreme: folosește Primitiv pentru a genera un SVG format din mai multe forme simple care aproximează principalele caracteristici vizibile în interiorul imaginii, optimizează SVG folosind SVGO și îi adaugă un filtru Gaussian Blur. Acest lucru produce un substituent SVG care cântărește la numai ~ 800-1000 de octeți, arată neted pe toate ecranele și oferă un indiciu vizual al conținutului imaginii viitoare.

Rezultatul este similar cu utilizarea unei mici imagini de substituent pentru tehnica de estompare (ce Mediu și alte site-uri do). Diferența este că în loc să utilizați o imagine bitmap, de exemplu JPG sau WebP, substituentul este SVG.

Dacă executăm SQIP împotriva imaginilor originale, vom obține acest lucru:

1611243192 59 Cum se foloseste SVG ca substituent si alte tehnici de
1611243192 478 Cum se foloseste SVG ca substituent si alte tehnici de
Imaginile de ieșire folosind SQIP pentru prima poză și al doilea.

SVG de ieșire este de ~ 900 de octeți, iar inspectând codul putem detecta feGaussianBlur filtru aplicat grupului de forme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#817c70" d="M0 0h2000v2000H0z"/><g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"><ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107 194.6)"/><ellipse fill="#eee3bb" rx="1" ry="1" transform="matrix(-56.38179 17.684 -24.48514 -78.06584 205 110.1)"/><ellipse fill="#fff4bd" rx="1" ry="1" transform="matrix(35.40604 -5.49219 14.85017 95.73337 16.4 123.6)"/><ellipse fill="#79c7db" cx="21" cy="39" rx="65" ry="65"/><ellipse fill="#0c1320" cx="117" cy="38" rx="34" ry="47"/><ellipse fill="#5cb0cd" rx="1" ry="1" transform="matrix(-39.46201 77.24476 -54.56092 -27.87353 219.2 7.9)"/><path fill="#e57339" d="M271 159l-123–16 43 128z"/><ellipse fill="#47332f" cx="214" cy="237" rx="242" ry="19"/></g></svg>

SQIP poate afișa, de asemenea, o etichetă de imagine cu conținutul SVG Base 64 codificat:

<img width="640" height="640" src="https://www.freecodecamp.org/news/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c/example.jpg” alt="Add descriptive alt text" style="background-size: cover; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw…<stripped base 64>…PjwvZz48L3N2Zz4=);">

Siluete

Tocmai ne-am uitat la utilizarea SVG-urilor pentru margini și forme primitive. O altă posibilitate este de a vectoriza imaginile „urmărindu-le”. Mikael Ainalem impartit un codepen acum câteva zile, arătând cum să folosiți o siluetă în 2 culori ca substituent. Rezultatul este foarte frumos:

Cum se foloseste SVG ca substituent si alte tehnici de

În acest caz, SVG-urile au fost desenate manual, dar tehnica a generat rapid integrări cu instrumente pentru automatizarea procesului.

  • Gatsby, un generator de site static care utilizează React acceptă aceste SVG-uri urmărite acum. Folosește un JS PORT de potrace pentru a vectoriza imaginile.

De asemenea, este interesant să vedeți o comparație a rezultatului dintre încărcătorul webpack al lui Emil (bazat pe potrace) și SVG-urile desenate manual de Mikael.

Presupun că ieșirea generată de potrace folosește opțiunile implicite. Cu toate acestea, este posibil să le modificăm. Verifica opțiunile pentru imagine-trace-loader, care sunt destul de mult cele trecute la potrace.

rezumat

Am văzut diferite instrumente și tehnici pentru a genera SVG-uri din imagini și a le folosi ca substituenți. La fel WebP este un format fantastic pentru miniaturi, SVG este, de asemenea, un format interesant de utilizat în substituenți. Putem controla nivelul de detaliu (și, prin urmare, dimensiunea), este foarte compresibil și ușor de manipulat cu CSS și JS.

Resurse suplimentare

Această postare a ajuns la partea de sus a Hacker News. Sunt foarte recunoscător pentru asta și pentru toate linkurile către alte resurse care au fost distribuite în comentariile de pe pagina respectivă. Iată câteva dintre ele!

  • Geometrize este un port al Primitivului scris în Haxe. Există deasemenea o implementare JS că poți încerca direct pe browserul dvs..
  • Primitive.js, care este un port al Primitive în JS. De asemenea, primitiv.nextgen, care este un port al aplicației desktop Primitive folosind Primitive.js și Electron.
  • Există câteva conturi Twitter în care puteți vedea exemple de imagini generate cu Primitive și Geometrize. Verifică @PrimitivePic și @Geometrizer.
  • imagetracerjs, care este un trasor de imagine raster și vectorizer scris în JavaScript. Există, de asemenea, porturi pentru Java și Android.
  • Canvas-Grafică, o implementare parțială a API-ului JS Canvas în PHP în jurul GD.

Dacă v-a plăcut această postare, consultați aceste alte postări pe care le-am scris despre tehnici de încărcare a imaginilor:

Modul de încărcare progresivă a imaginii
Recent, navigam într-o postare pe Medium și am văzut un efect frumos de încărcare a imaginii. Mai întâi, încărcați o mică imagine neclară …medium.comUtilizarea WebP pentru a crea imagini de previzualizare minuscule
Urmând subiectul de optimizare a imaginii, voi analiza mai profund tehnica Facebook pentru a crea previzualizarea …medium.comMai multe exemple de încărcare progresivă a imaginilor
Într-o postare trecută am disecat o tehnică utilizată de Medium pentru a afișa imagini, trecând de la o imagine neclară la finală …medium.com

Puteți citi mai multe articole despre jmperezperez.com.