Sådan bruges SVG som en pladsholder og andre billeddannelsesteknikker

Generering af SVG'er fra billeder kan bruges til pladsholdere. Fortsæt med at læse!

Jeg brænder for optimering af billedydelse og får billeder til at indlæse hurtigt på nettet. Et af de mest interessante udforskningsområder er pladsholdere: hvad der skal vises, når billedet endnu ikke er indlæst.

I løbet af de sidste dage har jeg fundet nogle indlæsningsteknikker, der bruger SVG, og jeg vil gerne beskrive dem i dette indlæg.

I dette indlæg gennemgår vi disse emner:

  • Oversigt over forskellige typer pladsholdere
  • SVG-baserede pladsholdere (kanter, figurer og silhuetter)
  • Automatisering af processen.

Oversigt over forskellige typer pladsholdere

Tidligere har jeg skrevet om pladsholdere og doven belastning af billeder og også talt om det. Når du laver ladning af billeder, er det en god ide at tænke over, hvad der skal gengives som en pladsholder, da det kan have en stor indflydelse på brugerens opfattede ydelse. Tidligere beskrev jeg flere muligheder:

Flere strategier til at udfylde et billedområde, inden det indlæses.

  • At holde pladsen tom til billedet: I en verden med responsivt design forhindrer dette indhold i at springe rundt. Disse layoutændringer er dårlige set ud fra en brugers oplevelsessynspunkt, men også for ydeevne. Browseren er tvunget til at foretage layoutberegninger, hver gang den henter dimensioner på et billede, hvilket giver plads til det.
  • Stedholder: Forestil dig, at vi viser en brugers profilbillede. Vi ønsker måske at vise en silhuet i baggrunden. Dette vises, mens hovedbilledet indlæses, men også når denne anmodning mislykkedes, eller når brugeren overhovedet ikke angav et profilbillede. Disse billeder er normalt vektorbaserede, og på grund af deres lille størrelse er de en god kandidat til at blive lineret.
  • Ensfarvet: Tag en farve fra billedet og brug den som baggrundsfarve for pladsholderen. Dette kan være den dominerende farve, den mest livlige… Tanken er, at det er baseret på det billede, du indlæser, og skal hjælpe med at gøre overgangen mellem intet billede til billede indlæst glattere.
  • Sløret billede: Også kaldet slør-up teknik. Du gengiver en lille version af billedet og overgår derefter til den fulde. Det oprindelige billede er lille både i pixels og kB'er. For at fjerne artefakter skaleres billedet op og udviskes. Jeg har tidligere skrevet om dette om Hvordan Medium indlæser progressiv billed, Brug af WebP til at oprette små forhåndsvisningsbilleder og Flere eksempler på Progressiv billedindlæsning.

Det viser sig, at der er mange andre variationer, og mange smarte mennesker udvikler andre teknikker til at skabe pladsholdere.

En af dem har gradueringer i stedet for solide farver. Gradueringer kan oprette en mere præcis forhåndsvisning af det endelige billede med meget lidt overhead (stigning i nyttelast).

Brug af gradueringer som baggrunde. Skærmbillede fra Gradify, som ikke er online mere. Kode på GitHub.

En anden teknik er at bruge SVG'er baseret på billedet, som får en trækkraft med nylige eksperimenter og hacks.

SVG-baserede pladsholdere

Vi ved, at SVG'er er ideelle til vektorbilleder. I de fleste tilfælde vil vi indlæse en bitmap-en, så spørgsmålet er, hvordan man vektoriserer et billede. Nogle indstillinger bruger kanter, former og områder.

kanter

I et tidligere indlæg forklarede jeg, hvordan man kan finde ud af kanterne på et billede og oprette en animation. Mit oprindelige mål var at prøve at tegne regioner og vektorisere billedet, men jeg vidste ikke, hvordan man gør det. Jeg indså, at brugen af ​​kanterne også kunne være nyskabende, og jeg besluttede at animere dem for at skabe en "tegne" -effekt.

Former

SVG kan også bruges til at tegne områder fra billedet i stedet for kanter / kanter. På en måde ville vi vektorisere et bitmap-billede for at skabe en pladsholder.

Tilbage i dagene prøvede jeg at gøre noget lignende med trekanter. Du kan se resultatet i mine samtaler på CSSConf og Render Conf.

Kodepunkterne ovenfor er et bevis på konceptet for en SVG-baseret pladsholder sammensat af 245 trekanter. Genereringen af ​​trekanterne er baseret på Delaunay-triangulering ved hjælp af Possans polyserver. Som forventet, jo flere trekanter SVG bruger, jo større er filstørrelsen.

Primitive og SQIP, en SVG-baseret LQIP-teknik

Tobias Baldauf har arbejdet med en anden lav kvalitetskvalitet til billedplacering ved hjælp af SVG'er kaldet SQIP. Før jeg graver i SQIP selv, vil jeg give et overblik over Primitive, et bibliotek, som SQIP er baseret på.

Primitive er ganske fascinerende, og jeg vil bestemt anbefale dig at tjekke det ud. Det konverterer et bitmap-billede til en SVG, der består af overlappende figurer. Dens lille størrelse gør det velegnet til at indlægge det lige ind på siden. En mindre tur-retur og en meningsfuld pladsholder inden for den indledende HTML-nyttelast.

Primitive genererer et billede baseret på figurer som trekanter, rektangler og cirkler (og et par andre). I hvert trin tilføjer det en ny. Jo flere trin, det resulterende billede ser tættere på det originale. Hvis din output er SVG, betyder det også, at outputkodens størrelse vil være større.

For at forstå, hvordan Primitive fungerer, løb jeg det gennem et par billeder. Jeg genererede SVG'er til kunstværket ved hjælp af 10 figurer og 100 figurer:

Behandler dette billede ved hjælp af Primitive ved hjælp af 10 figurer og 100 figurer.Behandler dette billede ved hjælp af Primitive ved hjælp af 10 figurer og 100 figurer.

Når du bruger 10 former billederne, begynder vi at få et indblik i det originale billede. I forbindelse med billedpladsholdere er der potentiale til at bruge denne SVG som pladsholder. Faktisk er koden for SVG med 10 figurer virkelig lille, omkring 1030 bytes, der går ned til ~ 640 bytes, når output sendes gennem SVGO.

              

De billeder, der er genereret med 100 figurer, er som forventet større med 5 vægtning efter 5 kg efter SVGO (8 kB før). De har et stort detaljeringsniveau med en stadig lille nyttelast. Beslutningen om, hvor mange trekanter der skal bruges, afhænger stort set af billedtypen (f.eks. Kontrast, farvemængde, kompleksitet) og detaljeringsniveau.

Det ville være muligt at oprette et script, der ligner cpeg-dssim, der justerer mængden af ​​anvendte figurer, indtil en strukturel lighedstærskel er opfyldt (eller et maksimalt antal figurer i værste fald).

Disse resulterende SVG'er er også gode at bruge som baggrundsbilleder. Når de er størrelsesbegrænsede og vektorbaserede, er de en god kandidat til heltebilleder og stor baggrund, der ellers ville vise artefakter.

SQIP

I Tobias 'egne ord:

SQIP er et forsøg på at finde en balance mellem disse to ekstremer: det bruger Primitive til at generere en SVG bestående af flere enkle figurer, der tilnærmer sig de vigtigste funktioner, der er synlige inde i billedet, optimerer SVG ved hjælp af SVGO og tilføjer et Gaussian Blur-filter til det . Dette producerer en SVG-pladsholder, der vejer kun ~ 800–1000 byte, ser glat ud på alle skærme og giver et visuelt signal om billedindhold, der kommer.

Resultatet ligner brugen af ​​et lille stedholderbillede til opblæsningsteknikken (hvad Medium og andre websteder gør). Forskellen er, at i stedet for at bruge et bitmap-billede, f.eks. JPG eller WebP, er pladsholderen SVG.

Hvis vi kører SQIP mod de originale billeder, får vi dette:

Udgangsbillederne bruger SQIP til det første billede og det andet.

Output SVG er ~ 900 bytes, og ved at inspicere koden kan vi se det FeGaussianBlur-filter, der er anvendt på gruppen af ​​former:

    < stien fyld = "# 817c70" d = "M0 0h2000v2000H0z" />           

SQIP kan også udsende et billedtag med SVG-indholdet Base 64 kodet:

Tilføj beskrivende alt tekst

Silhuetter

Vi kiggede lige på at bruge SVG'er til kanter og primitive former. En anden mulighed er at vektorisere billederne “spore” dem. Mikael Ainalem delte et kodeord for et par dage siden, der viste, hvordan man bruger en 2-farve silhuet som pladsholder. Resultatet er virkelig smukt:

SVG'erne i dette tilfælde blev håndtegnet, men teknikken gød hurtigt integrationer med værktøjer til at automatisere processen.

  • Gatsby, en statisk stedgenerator, der bruger React, understøtter disse sporede SVG'er nu. Det bruger en JS PORT potrace til at vektorisere billederne.
  • Craft 3 CMS, som også tilføjede støtte til silhuetter. Den bruger en PHP-port i potrace.
  • image-trace-loader, en Webpack-læsser, der bruger potrace til at behandle billederne.

Det er også interessant at se en sammenligning af output mellem Emils webpack loader (baseret på potrace) og Mikaels håndtegnede SVG'er.

Jeg antager, at output genereret af potrace bruger standardindstillingerne. Det er dog muligt at finpusse dem. Tjek indstillingerne for image-trace-loader, som stort set er dem, der er sendt ned til potrace.

Resumé

Vi har set forskellige værktøjer og teknikker til at generere SVG'er fra billeder og bruge dem som pladsholdere. På samme måde som WebP er et fantastisk format til miniaturebilleder, er SVG også et interessant format til brug i pladsholdere. Vi kan kontrollere detaljeniveauet (og dermed størrelsen), det er yderst komprimerbart og let at manipulere med CSS og JS.

Ekstra ressourcer

Dette indlæg kom til toppen af ​​Hacker News. Jeg er meget taknemmelig for det og for alle links til andre ressourcer, der er blevet delt i kommentarerne på den side. Her er et par af dem!

  • Geometrize er en port af Primitive skrevet i Haxe. Der er også en JS-implementering, som du kan prøve direkte i din browser.
  • Primitive.js, som er en havn hos Primitive i JS. Også primitive.nextgen, som er en port i den Primitive desktop-app, der bruger Primitive.js og Electron.
  • Der er et par Twitter-konti, hvor du kan se eksempler på billeder genereret med Primitive og Geometrize. Tjek @PrimitivePic og @Geometrizer.
  • imagetracerjs, som er en raster image tracer og vectorizer skrevet i JavaScript. Der er også porte til Java og Android.
  • Canvas-Graphics, en delvis implementering af JS Canvas API i PHP omkring GD.

Relaterede indlæg

Hvis du har haft glæde af dette indlæg, så tjek disse andre indlæg, jeg har skrevet om teknikker, der indlæser billeder:

Du kan læse flere af mine artikler på jmperezperez.com.