Iets meer dan een jaar geleden lanceerde het Chrome Aurora-team de Angular NgOptimizedImage-richtlijn . De richtlijn is primair gericht op het verbeteren van de prestaties, zoals gemeten aan de hand van de Core Web Vitals- statistieken. Het bundelt algemene afbeeldingsoptimalisaties en best practices in een gebruikersgerichte API die niet veel ingewikkelder is dan een standaard <img> -element.
In 2023 hebben we de richtlijn uitgebreid met nieuwe functies. Dit bericht beschrijft de meest substantiële van deze nieuwe functies, met de nadruk op waarom we ervoor hebben gekozen om prioriteit te geven aan elke functie, en hoe deze de prestaties van Angular-applicaties kan helpen verbeteren.
Nieuwe functies
NgOptimizedImage is in de loop van de tijd aanzienlijk verbeterd, inclusief de volgende nieuwe functies.
Vulmodus
Het formaat van uw afbeeldingen aanpassen door een width en height attribuut aan te bieden is een uiterst belangrijke optimalisatie voor het verminderen van de lay-outverschuiving , omdat browsers de beeldverhouding van de afbeelding moeten kennen om er ruimte voor te besparen. Het formaat van afbeeldingen is echter extra werk voor applicatieontwikkelaars en heeft geen zin bij sommige gebruiksscenario's voor afbeeldingen.
Om deze spanning te helpen oplossen is de eerste belangrijke functie die aan de afbeeldingscomponent is toegevoegd na de preview van de ontwikkelaar: de vulmodus . Dit is een manier voor ontwikkelaars om afbeeldingen op te nemen zonder ze expliciet te vergroten of verkleinen, en zonder dat er sprake is van een verschuiving in de lay-out.
In de opvulmodus is de vereiste grootte van de afbeelding uitgeschakeld en wordt de afbeelding automatisch opgemaakt om het element dat het bevat te vullen. Hierdoor wordt de beeldverhouding van een afbeelding losgekoppeld van de ruimte die deze op de pagina inneemt, en krijgt u meer controle over hoe afbeeldingen in uw pagina-indeling passen.
De vulmodus gebruikt NgOptimizedImage als een beter presterend alternatief voor de css-eigenschap background-image . Plaats een afbeelding in de <div> of een ander element dat de stijl van de background-image zou hebben gehad, en schakel vervolgens de vulmodus in, zoals gedemonstreerd in het voorgaande codevoorbeeld. Gebruik de CSS-eigenschappen object-fit en object-position op de <div> om te bepalen hoe de afbeelding op de achtergrond wordt gepositioneerd.
// Height and width are required
<img ngSrc="example.com" height="300" width="400">
// Unless you use fill mode!
<div style="width: 100vw; height: 50em; position: relative">
<img ngSrc="example.com" fill>
</div>
Srcset-generatie
Een van de meest effectieve technieken voor afbeeldingsoptimalisatie is het gebruik van het srcset attribuut om ervoor te zorgen dat afbeeldingen van het juiste formaat worden gedownload voor elk apparaat dat toegang heeft tot uw toepassing. Door srcset in uw hele app te gebruiken, kunt u bandbreedteverspilling voorkomen en uw LCP Core Web Vital aanzienlijk verbeteren.
Het nadeel van het srcset attribuut is dat het lastig te implementeren kan zijn. Het handmatig uitschrijven van srcset waarden betekent dat u meerdere regels opmaak toevoegt aan elk afbeeldingselement in uw app, compleet met meerdere aangepaste URL's voor elke srcset . U moet ook beslissen over een reeks breekpunten, wat ingewikkeld is, omdat deze zowel de schermdichtheden als de viewport-groottes van gewone apparaten kunnen vertegenwoordigen.
Daarom was het toevoegen van geautomatiseerde srcset-generatie aan de NgOptimizedImage-richtlijn een belangrijke mijlpaal na de lancering. Met deze toevoeging kan elke toepassing die een CDN gebruikt die het wijzigen van de grootte van afbeeldingen ondersteunt, volledige, aanpasbare srcsets krijgen die automatisch worden toegevoegd aan elke afbeelding die wordt gegenereerd met de NgOptimizedImage-richtlijn.
We hebben een vereenvoudigde API toegevoegd voor het instellen van de sizes , die wordt gebruikt om ervoor te zorgen dat elke afbeelding het juiste type srcset krijgt. Als u geen sizes attribuut opneemt, weten we dat de afbeelding een vaste grootte moet hebben en een dichtheidsafhankelijke srcset zou moeten krijgen, zoals de volgende:
<img src="www.example.com/image.png" srcset="www.example.com/image.png?w=400 1x, www.example.com/image.png?w=800 2x" >
Dit soort srcset zorgt ervoor dat afbeeldingen worden weergegeven in een formaat dat rekening houdt met de pixeldichtheid van het apparaat van de gebruiker.
Aan de andere kant, als u de eigenschap sizes opneemt, genereert NgOptimizedImage een responsieve srcset die breekpunten bevat voor veel gangbare apparaat- en afbeeldingsformaten, met behulp van deze standaardlijst met breekpunten:
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
Preconnect-generatie
Om LCP te verbeteren, is het belangrijk om de tijd die uw gebruikers besteden aan het downloaden van de LCP-image te beperken. In de vorige sectie zag je hoe srcset kan helpen bij het overbrengen van kleinere afbeeldingsbestanden, maar een even belangrijke optimalisatie is om de overdracht zo snel mogelijk te starten. Eén manier om dat te doen is door link rel="preconnect" -tags te gebruiken om de verbinding met uw afbeeldingsdomein een vliegende start te geven.
Vanaf het begin heeft NgOptimizedImage gewaarschuwd als u er niet in slaagt vooraf verbinding te maken met het domein van uw LCP-image, maar waarschuwen is niet de ideale oplossing; we lossen het probleem liever gewoon voor u op. En dat is precies wat NgOptimizedImage nu doet, met geautomatiseerde preconnect-generatie .
Om deze functie te ondersteunen, gebruiken we statische codeanalyse om te proberen afbeeldingsdomeinen in NgOptimizedImage- laders te detecteren en automatisch preconnect-linktags voor die domeinen te genereren. Er kunnen nog steeds gevallen zijn waarin handmatige preconnect-koppelingen vereist zijn, maar voor de meeste gebruikers betekent automatische preconnect dat er één stap minder nodig is voor goede beeldprestaties.
Verbeterde ondersteuning voor aangepaste laders
Een belangrijk element van NgOptimizedImage is de loader-architectuur, waarmee de richtlijn automatisch URL's kan genereren die zijn afgestemd op de image-CDN van de applicatie. Voor veelgebruikte CDN's is een set ingebouwde laders meegeleverd. We bieden ook het gebruik van aangepaste laders , waarmee u NgOptimizedImage kunt integreren met vrijwel elke oplossing voor het hosten van afbeeldingen.
Bij de lancering hadden deze aangepaste laders een beperkt bereik en konden ze alleen het width attribuut van het afbeeldingselement lezen. Als reactie op gebruikersfeedback hebben we ondersteuning toegevoegd voor een aanpasbare loaderParams gegevensstructuur, waarmee willekeurige gegevens van het afbeeldingselement naar de aangepaste lader kunnen worden doorgegeven. Met de uitbreiding kunnen aangepaste laders zo eenvoudig of zo complex zijn als vereist door de beeldinfrastructuur van een applicatie.
Het volgende voorbeeld laat zien hoe een eenvoudige aangepaste lader de loaderParams API zou kunnen gebruiken om te kiezen tussen twee alternatieve afbeeldingsdomeinen:
const myCustomLoader = (config: ImageLoaderConfig) => {
if (config.loaderParams?.alternateDomain) {
return `https://alternate.domain.com/images/${config.src}`
}
return `https://primary.domain.com/images/${config.src}`;
};
Een voorbeeld van een complexere aangepaste lader is beschikbaar in de Angular-documentatie .
Uitgebreide richtlijnen voor beeldprestaties
Tot nu toe maakte elke waarschuwing voor beeldprestaties die we aan Angular hebben toegevoegd deel uit van de NgOptimizedImage-richtlijn. Als u de richtlijn niet in de app gebruikt, krijgt u geen advies over problemen met de beeldprestaties.
In Angular 17 breiden we de reikwijdte van de beeldprestatierichtlijnen uit naar alle Angular-apps. Als we nu afbeeldingspatronen detecteren waarvan we weten dat ze prestatieverslechterende fouten zijn, zoals het lui laden van uw LCP-afbeelding of het downloaden van een bestand dat veel te groot is voor de pagina, laten we u dit weten, zelfs als u dat niet doet met behulp van NgOptimizedImage.
Beeldprestaties zijn belangrijk voor alle apps en we zijn blij om door te gaan met het uitbouwen van vangrails om veelvoorkomende fouten in Angular-apps te helpen voorkomen.
Ergens naar uitkijken
We zijn al hard bezig met het ontwikkelen van de volgende reeks functies voor NgOptimizedImage. Hoewel de beeldprestaties onze centrale zorg blijven, willen we ook functies toevoegen die de ervaring van ontwikkelaars verbeteren, om ervoor te zorgen dat NgOptimizedImage een aantrekkelijke optie blijft voor het opnemen van afbeeldingen in Angular-applicaties.
Een functie die voor ons prioriteit heeft, zijn tijdelijke aanduidingen voor afbeeldingen. Deze worden vaak gebruikt om het laden van afbeeldingen er beter uit te laten zien in webapplicaties, maar kunnen de prestaties negatief beïnvloeden als ze verkeerd worden geïmplementeerd. We hopen een op prestatie gericht placeholder-systeem voor afbeeldingen in NgOptimizedImage te bouwen. Houd onze blog in de gaten voor verdere aankondigingen!