4 Essential Image Optimization Tips

Feb 2, 2026

Procedures

Een paar gelukkige ontwikkelaars en deze auteur hadden de mogelijkheid om addy Osmani's nieuwe beeldoptimalisatie eBook te bewerken, Essentiële beeldoptimalisatie , wat je absoluut moet lezen.

10 manieren om afbeeldingen voor betere prestaties te optimaliseren

Of je nu full-size bouwt e-commerce websites Of gewoon een online huis voor uw Ontwerpportfolio In dit artikel leer je een paar tips van Addy's Book die je foto's mager en sneller zal maken.

Wees selectieve en voorspanning kritieke afbeeldingen

Bekijk uw site en identificeer een kritisch beeldwinst. Voor de meesten zou dit een logo of hero-afbeelding zijn die je zo snel mogelijk wilt maken.

Dit is waar de preload Resource-hint komt binnen. preload is een manier om naar de klant te halen die een actief moet worden opgehaald voordat de browser-parser anders zou ontdekken. Je kunt het voor vrijwel alles gebruiken, maar het werkt prachtig voor het voorladen van kritieke beelden. Hier is een voorbeeld van het in gebruik in de HTML & LT; HOOFD & GT; Element op volgorde om een hero-bannerafbeelding te prraden:

<link rel="preload" href="/img/logo.svg" as="image">

U kunt ook preload gebruiken in een HTTP-header:

Link: </img/logo.svg>; rel=preload; as=image

Hieronder ziet u twee screenshot-rollen van dezelfde pagina die in Chrome wordt geladen. Eén scenario gebruikt preload om een hero-bannerbeeld te laden, terwijl de andere dat niet doet.

The effect of using preload on a hero banner — Het effect van het gebruik van preload op een held banner

In het voorbeeld met preload , het bannerbeeld verschijnt in het browservenster een half seconde sneller. Alles vanwege een snelle een-voering die de browser een hoofd start gaf.

Vereenvoudig automatisch uw SVG-illustraties

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Illustrator's vereenvoudig gereedschap, met het aantal ankerpunten vóór en na als Curve Precision wordt verlaagd

Het optimaliseren van SVG's is anders dan met andere beeldtypen, omdat in tegenstelling tot JPEG's of PNGS, SVGS bestaat uit tekst, specifiek XML-markeringen. Dit betekent dat typische optimalisaties die u toepast op op tekst gebaseerde activa (bijvoorbeeld minicificatie, gzip / brotli-compressie) kunnen en moeten worden toegepast op SVGS. Daarnaast kunt u een optimiser zoals SVGO gebruiken om de grootte van SVGS te tampelen.

Maar wat als je niet alleen vectorillustraties consumeert, maar het creëert? Als u een illustratorgebruiker bent, kunt u uw illustraties automatisch vereenvoudigen om het aantal ankerpunten in paden te verkleinen via het dialoogvenster Vereenvoudigen.

Dit dialoogvenster is te vinden in Illustrator cc Menu door naar Object & GT te gaan; Path & GT; vereenvoudigen. Door de Curve Precision (en optioneel aanpassen hoekdrempel), is het mogelijk extra padpunten in uw kunstwerk te verwijderen. In dit geval merk je op dat een vermindering van de curve-precisie van slechts 6% 54 padpunten verwijdert. Uchter gebruikt, kan het zelfs het uiterlijk van uw kunstwerk verbeteren.

The savings that path simplification can afford — De besparingen die het pad vereenvoudiging kunnen veroorloven

Word to the wijs - wees voorzichtig met hoe agressief je krijgt met deze tool. Lagere curve-precisie te veel, en je bent eenmaal zorgvuldig gecrafted artwork in een klodder. Sla de juiste balans, en je plukt de beloningen.

Converteer geanimeerde gifs naar video

With FFmpeg you can turn flabby GIFs into svelte video — Met FFMPEG kunt u flabby gifs in Svelte-video draaien

We houden allemaal van een goede geanimeerde gif. Ze brengen effectief bijna elk sentiment over, maar ze kunnen echt enorm zijn. Beeldoptimalisers zoals Gifsicle kunnen overmatige kilobytes helpen scheren, maar het ticket is om die gifs om te zetten in video's en ze in de HTML5 in te buigen & LT; VIDEO & GT; label. De ffmpeg Opdrachtregelhulpprogramma is goed geschikt voor deze taak:

 FFMPEG -I Animated.gif -B: v 512K animated.webm
ffmpeg -i animated.gif -b: v 512K animated.ogv
ffmpeg -i animated.gif -b: v 512K animated.mp4

De bovenstaande opdrachten nemen een bron GIF ( geanimeerde GIF ) Zoals input in het -I-argument en uitvoervideo's met een maximum van variabele bitrate van 512kbps. In een eigen test konden we een 989KB-gif nemen en verminderen tot een MP4 van 155KB, een 109KB OGV en een 85KB WebM. Alle videobestanden waren vergelijkbaar in kwaliteit aan de bron GIF. Vanwege de alomtegenwoordigheid van & LT; VIDEO & GT; Tagondersteuning in browsers kunnen deze drie videoformaten zoals SO worden gebruikt:

 & lt; video preload = "Geen" & GT;
  & lt; source src = "/ video's / animated.webm" type = "Video / Webm" & GT;
  & lt; bron src = "/ video's / animated.ogv" type = "Video / OGG" & GT;
  & LT; SOURCE SRC = "/ VIDEO'S / geanimeerd.mp4" Type = "Video / MP4" & GT;
& LT; / VIDEO & GT;

Als u besluit om deze route te gaan, moet u u bestellen & LT; SOURCE & GT; Tags, zodat eerst het meest optimale formaat wordt gespecificeerd, en het minst optimaal wordt gespecificeerd als laatste. In de meeste gevallen betekent dit dat u eerst begint met WebM-video's, maar controleer de uitvoeringsbestand van elke video en gaat u met wat het eerst klein is en eindigt met wat de grootste is.

Als u geen FFMPEG heeft of weet niet wat het is, bekijken Het is eenvoudig te installeren via de meeste managers van het besturingssysteempakket, zoals homebrew of chocolady.

Luie Load met IntersectionObserver

Lazy laden van afbeeldingen is iets dat je misschien al doet, maar veel luie laadscripts gebruiken CPU-Intensive Scroll Event Handlers. Dergelijke methoden dragen bij aan trage interacties op een pagina. Oudere hardware met minder verwerkingsvermogen is nog vatbaar voor de nadelige effecten van dit type code. Uitvoering Throttling helpt bij een diploma, maar het is nog steeds een rommelige en eerder inefficiënte oplossing voor het bepalen wanneer elementen in de viewport zijn.

Gelukkig geeft de interessante waarnemer API ons een eenvoudiger en veel efficiëntere manier om te bepalen wanneer elementen in de viewport zijn. Hier is een voorbeeld van een eenvoudige Lazy Loading Image Markup:

 & lt; img class = "lui" data-src = "/ afbeeldingen / lui-load-image.jpg" src = "/ afbeeldingen / placeholder.jpg" alt = "Ik ben lui." Breedte = "320" hoogte = "240" & GT;

Hier laden we een placeholder-afbeelding in de SRC attribuut en sla de URL op voor de afbeelding die we willen luiveren in de Data-SRC attribuut. Om het allemaal uit te vullen, geven we het & lt; img & gt; element een lui voor gemakkelijke toegang met QuerySelectectorall Vanaf daar gebruiken we deze code gewoon:

 Document.ADDEVENTLISTENER ("domcontentloaded", functie () {
  if ("intersectionobserver" in venster & amp; & amp; "intersectionobserverterry" in venster & amp; & amp; "intersectionratio" in venster.intersectionobserverentry.prototype) {
    elementen = document.QuerySelectectorAlle ("IMG.LAZY");

    Var ImageObServer = Nieuwe IntersectionObServer (functie (vermeldingen, waarnemer) {
      vermeldingen.forreach (functie (invoer) {
        if (invoer.isintersecting) {
          entry.target.Setattribute ("SRC", entry.target.getattribute ("Data-SRC"));
          entry.target.classlist.Remove ("lui");
          imageobserver.unobserve (entry.target);
        
      
    

    elementen.forreach (functie (afbeelding) {
      imageobserver.observe (afbeelding);
    
  
});

Hier binden we code aan de document voorwerpen Domcontentloaded evenement. Deze code controleert of de kruispuntswaarnemer wordt ondersteund door de huidige browser. Als het blijkt dat het is, grijpen we alles img elementen met een klasse van lui met QuerySelectectorall en bevestig vervolgens waarnemers aan hen.

De waarnemer bevat verwijzingen naar de elementen die we observeren ( inzendingen ) en de waarnemer zelf ( waarnemer Deze code scharniert op elke waarnemersinvoer is het waarde. Terwijl het waargenomen element uit de viewport is, is het geeft terug 0 Naarmate het element de viewport binnengaat, retourneert het een waarde groter dan 0 Het is op dit punt dat we de inhoud van de afbeelding wisselen Data-SRC attribuut in de SRC attribuut en verwijder het lui klasse. Na een gegeven beeld luie belastingen, wordt de waarnemer eruit verwijderd met de waarnemer onjuist methode.

Dit proces is veel gemakkelijker dan het ronddraaien met scroll-handlers, maar aangezien de kruising waarnemer niet van universele ondersteuning heeft, moet u mogelijk terugvallen op hen. Als je het sorteert om een script te pakken en te gaan, hebben we een luie lader geschreven die gebruikmaakt van een kruising-waarnemer, maar ook terugvalt naar de methoden van weleer. Je kunt het pakken hier

Dit artikel is oorspronkelijk gepubliceerd in kwestie 301 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop hier nummer 301 of Abonneer hier

Gerelateerde artikelen:

De volledige gids voor SVG
Vectortools gebruiken: de aanpak van een webontwerper
Animate SVG met JavaScript

4 Essential Image Optimization Tips

Wees selectieve en voorspanning kritieke afbeeldingen

Vereenvoudig automatisch uw SVG-illustraties

Converteer geanimeerde gifs naar video

Luie Load met IntersectionObserver

Procedures - Meest populaire artikelen

Maak een old-school anaglyph-effect

21 manieren om de productiviteit met NPM

Hoe te ontwerpen van geloofwaardige Fantasy Beasts

Hoe te schilderen als een 19e-eeuwse meester

Maak een tegelsmateriaal in DUST-ontwerper

De regels van responsieve webtypografie

5 tips voor beeldhouwen in dubbele snelle tijd

Versnel uw 3D-modellering

Categorieën