Sådan bruges SVG som pladsholder og andre teknikker til billedindlæsning

Jeg brænder for optimering af billedydelse og få 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 er jeg stødt på nogle indlæsningsteknikker, der bruger SVG, og jeg vil gerne beskrive dem i dette indlæg.

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

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

Oversigt over forskellige typer pladsholdere

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

Flere strategier til at udfylde området på et billede, inden det indlæses.

  • Holde pladsen tom for billedet : I en verden med lydhør design forhindrer dette indhold i at hoppe rundt. Disse layoutændringer er dårlige set fra en brugers oplevelses synspunkt, men også med hensyn til ydeevne. Browseren er tvunget til at foretage layoutberegninger hver gang den henter dimensionerne på et billede og giver plads til det.
  • Pladsholder : Forestil dig, at vi viser en brugers profilbillede. Vi vil muligvis vise en silhuet i baggrunden. Dette vises, mens hovedbilledet indlæses, men også når denne anmodning mislykkedes, eller når brugeren slet ikke indstillede et profilbillede. Disse billeder er normalt vektorbaserede og er på grund af deres lille størrelse en god kandidat til at blive inline.
  • Ensfarvet : Tag en farve fra billedet og brug den som baggrundsfarve for pladsholderen. Dette kan være den dominerende farve, den mest levende ... Ideen er, at den er baseret på det billede, du indlæser, og at det skal hjælpe med at gøre overgangen mellem intet billede til et billede indlæst glattere.
  • Sløret billede : Også kaldet blur-up-teknik. Du gengiver en lille version af billedet og går derefter over til det fulde. Det oprindelige billede er lille både i pixels og kBs. For at fjerne artefakter skaleres billedet op og sløres. Jeg har tidligere skrevet om dette på How Medium laver progressiv billedindlæsning, Brug af WebP til at oprette små preview-billeder 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 gradienter i stedet for solide farver. Gradienterne kan oprette en mere nøjagtig forhåndsvisning af det endelige billede med meget lidt overhead (stigning i nyttelast).

En anden teknik er at bruge SVG'er baseret på billedet, som får noget 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 kan vektorisere et billede. Nogle muligheder bruger kanter, former og områder.

Kanter

I et tidligere indlæg forklarede jeg, hvordan man finder ud af kanterne på et billede og opretter en animation. Mit oprindelige mål var at forsøge at tegne regioner og vektorisere billedet, men jeg vidste ikke, hvordan jeg skulle gøre det. Jeg indså, at brugen af ​​kanterne også kunne være innovativ, og jeg besluttede at animere dem og skabe en "tegningseffekt".

Tegning af billeder ved hjælp af kantdetektion og SVG-animation

Tilbage i dagene blev SVG næppe brugt og understøttet. Længe efter vi begyndte at bruge dem som et alternativ til klassisk ... medium.com

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 bitmapbillede for at skabe en pladsholder.

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

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

Primitive og SQIP, en SVG-baseret LQIP-teknik

Tobias Baldauf har arbejdet på en anden billedstedsholderteknik af lav kvalitet ved hjælp af SVG'er kaldet SQIP. Før jeg graver ind 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 bitmapbillede til en SVG sammensat af overlappende former. Den lille størrelse gør den velegnet til at placere den lige ind på siden. Én mindre rundtur og en meningsfuld pladsholder inden for den indledende HTML-nyttelast.

Primitive genererer et billede baseret på former 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 dit output er SVG, betyder det også, at størrelsen på outputkoden bliver større.

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

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

Billederne genereret med 100 former er større som forventet og vejer ~ 5 kB 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 i høj grad af billedtypen (f.eks. Kontrast, mængde farver, kompleksitet) og detaljeringsniveau.

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

Disse resulterende SVG'er er også gode at bruge som baggrundsbilleder. At være størrelsesbegrænset og vektorbaseret er de en god kandidat til heltebilleder og store baggrunde, der ellers ville vise artefakter.

SQIP

Med Tobias 'egne ord:

SQIP er et forsøg på at finde en balance mellem disse to ekstremer: det gør brug af Primitive til at generere en SVG bestående af flere enkle former, 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 kun vejer ~ 800-1000 bytes, ser glat ud på alle skærme og giver et visuelt signal om det kommende billedindhold.

Resultatet svarer til at bruge et lille pladsholderbillede til sløreteknikken (hvad Medium og andre websteder gør). Forskellen er, at i stedet for at bruge et bitmapbillede, f.eks. JPG eller WebP, er pladsholderen SVG.

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

Outputtet SVG er ~ 900 bytes, og efter inspektion af koden kan vi få øje på det feGaussianBlurfilter, der er anvendt på gruppen af ​​figurer:

SQIP kan også output et billedkode med SVG-indhold Base 64 kodet:

Silhuetter

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

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

  • Gatsby, en statisk generator, der bruger React, understøtter disse sporede SVG'er nu. Det bruger en JS PORT af potrace til at vektorisere billederne.
  • Craft 3 CMS, som også tilføjede understøttelse af silhuetter. Det bruger en PHP-port af potrace.
  • image-trace-loader, en Webpack-loader, der bruger potrace til at behandle billederne.

Det er også interessant at se en sammenligning af output mellem Emil's 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 tilpasse dem. Tjek mulighederne for image-trace-loader, som stort set er dem, der sendes 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 at bruge i pladsholdere. Vi kan kontrollere detaljeringsniveauet (og dermed størrelsen), det er meget komprimerbart og let at manipulere med CSS og JS.

Ekstra ressourcer

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

  • Geometrize er en havn 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 af Primitive i JS. Også primitive.nextgen, som er en havn 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 nydt dette indlæg, skal du tjekke disse andre indlæg, jeg har skrevet om teknikker til indlæsning af billeder:

Hvor medium laver progressiv billedindlæsning

For nylig gennemsøgte jeg et indlæg på Medium, og jeg så en dejlig billedindlæsningseffekt. Først skal du indlæse et lille sløret billede ... medium.com Brug WebP til at oprette små preview-billeder

Efterfølgende med billedoptimeringsemnet vil jeg se nærmere på Facebooks teknik til at oprette preview ... medium.com Flere eksempler på Progressive Image Loading

I et tidligere indlæg dissekerede jeg en teknik, der blev brugt af Medium til at vise billeder, overgang fra et sløret billede til det endelige ... medium.com

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