4 Essential Image Optimization Tips

Feb 4, 2026

hvordan

Et par heldige udviklere og denne forfatter havde mulighed for at redigere Addy Osmani's nye billedoptimering ebook, Essential Image Optimization. , som du absolut skulle læse.

10 måder at optimere billeder til bedre ydeevne

Uanset om du bygger fuld størrelse E-handel Websites. eller simpelthen lave et online hjem til din Designportefølje I denne artikel vil du lære et par tips fra Addy's Book, der vil hjælpe med at gøre dine billeder slankere og hurtigere.

Være selektiv og preload kritiske billeder

Tag et kig på dit websted og identificer et kritisk billedaktiv. For de fleste ville dette være et logo eller heltbillede, som du vil have gjort så hurtigt som muligt.

Det er her preload. Resource Tip kommer ind. preload. er en måde at hint på klienten om, at et aktiv skal hentes, før browserparseren ellers ville opdage det. Du kan bruge det til stort set alt, men det virker pragtfuldt for preloading kritisk billeddannelse. Her er et eksempel på det i brug i HTML & lt; hoved & gt; Element på bestilling til at preload en helt banner billede:

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

Du kan også bruge Preload i en HTTP-header:

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

Nedenfor kan du se to screenshot ruller af samme side indlæsning i krom. Et scenario bruger preload. At indlæse et helt bannerbillede, mens den anden ikke gør det.

The effect of using preload on a hero banner — Virkningen af at bruge preload på en helt banner

I eksemplet med preload. , Bannerbilledet vises i browservinduet et halvt sekund hurtigere. Alt på grund af en hurtig en-liner, der gav browseren en start.

Automatisk at forenkle dit SVG-kunstværk

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Illustrators forenkle værktøj, der viser antallet af ankerpunkter før og efter som kurvepræcisionen sænkes

Optimering af SVG'er er anderledes end med andre billedtyper, fordi SVG'er i modsætning til JPEG eller PNG'er består af tekst, specifikt XML-markup. Det betyder, at typiske optimeringer, du vil anvende på tekstbaserede aktiver (for eksempel minificering, GZIP / Brotli Compression) kan og bør også anvendes til SVG'er. Ud over det kan du bruge en optimering som SVGO til at tampe størrelsen af SVGS.

Men hvad nu hvis du ikke blot bruger vektor kunstværk, men skaber det? Hvis du er en Illustrator-bruger, kan du automatisk forenkle dit kunstværk for at reducere mængden af ankerpunkter i stier via vinduet Forenkle dialog.

Denne dialogboksen kan findes i Illustrator CC. menuen ved at gå til objekt & gt; sti & gt; forenkle. Ved at reducere kurven præcision (og eventuelt justering af vinkel tærskelværdi) er det muligt at fjerne ekstra path punkter i dit kunstværk. I dette tilfælde bemærker du, at en reduktion i kurvepræcisionen af så lidt som 6% fjerner 54 sti point. Brugt dømmende, det kunne endda forbedre udseendet af dit kunstværk.

The savings that path simplification can afford — De besparelser, der er forenkling, har råd til

Ord til The Wise - Pas på, hvor aggressiv du får med dette værktøj. Nedre kurven præcision for meget, og din en gang omhyggeligt udformet kunstværk vil udnytte sig til en blob. Slå den rette balance, og du vil høste fordelene.

Konverter animerede gif til video

With FFmpeg you can turn flabby GIFs into svelte video — Med ffmpeg kan du vende flabby gifs i svelte video

Vi elsker alle en god animeret gif. De formidler effektivt næsten enhver følelse, men de kan være meget store. Billedoptimisører som Gifsicle kan hjælpe med at skifte overskydende kilobytes, men billetten er at konvertere de GIF'er til videoer og integrere dem i HTML5 & lt; Video & GT; tag. Det ffmpeg. Command Line Utility er velegnet til denne opgave:

 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

Kommandoerne ovenfor tager en kilde gif ( animated.gif. ) Som input i det -I argument og output videoer med en variabel bitrate maksimalt 512kbps. I en egen test var vi i stand til at tage en 989KB animeret GIF og reducere det til en 155 kB MP4, en 109kb OGV og en 85kB webm. Alle videofiler var sammenlignelige i kvalitet til kilden GIF. På grund af ubiquiet af & lt; Video & GT; Tag support i browsere, disse tre videoformater kan bruges som sådan:

 & LT; Video Preload = "Ingen" & GT;
  & lt; kilde src = "/ videoer / animated.webm" type = "video / webm" & gt;
  & lt; kilde src = "/ videoer / animated.ogv" type = "video / ogg" & gt;
  & lt; kilde src = "/ videoer / animated.mp4" type = "video / mp4" & gt;
& lt; / Video & GT;

Hvis du beslutter dig for at gå denne rute, skal du sørge for at bestille din & lt; kilde & gt; Tags, så det mest optimale format er angivet først, og den mindst optimale er angivet sidst. I de fleste tilfælde betyder det, at du først starter med WebM-videoer, men kontroller outputfilstørrelsen for hver video og gå med det, der er mindste først, og slut med det, der er størst.

Hvis du ikke har FFMPEG eller ikke ved, hvad det er, Tjek det ud . Det er nemt at installere gennem de fleste operativsystempakkeforvaltere, såsom homebrew eller chocolatey.

Lazy load with IntersionObserver

Lazy loading billeder er noget, du måske allerede gør, men mange dovne loading scripts bruger CPU-intensiv rullehåndhåndtere. Sådanne metoder bidrager til træg interaktioner på en side. Ældre hardware med mindre forarbejdningskraft er endnu mere tilbøjelig til de dårlige virkninger af denne type kode. Execution Throttling hjælper i en grad, men det er stadig en rodet og ret ineffektiv løsning for at bestemme, hvornår elementer er i visningsporten.

Heldigvis giver krydsning observatør API os en enklere og langt mere effektiv måde at bestemme, hvornår elementer er i visningsporten. Her er et eksempel på nogle grundlæggende dovne loading image markup:

 & lt; img klasse = "doven" data-src = "/ billeder / lazy-loaded-image.jpg" src = "/ billeder / placeholder.jpg" alt = "Jeg er doven." Bredde = "320" Højde = "240" & GT;

Her lægger vi et stedholderbillede i Src. Attribut, og gem derefter webadressen for det billede, vi ønsker at indlæse laceret i DATA-SRC. attribut. Til toppen af det hele giver vi & lt; img & gt; element en klasse af doven for nem adgang med Queryselectorall. . Derfra bruger vi simpelthen denne kode:

 DOCUMENT.ADDEVENTLISTENER ("DOMCONTENTLOASE", FUNKTION () {
  Hvis ("IntersionObserver" i vindue og amp; & amp; "IntersionObserverentry" i vindue og amp; & amp; "IntersectionRatio" i vindue.intersectionobserverentry.prototype) {
    Elements = Document.queryselectorall ("img.lazy");

    VAR IMAGEOBSERVER = Ny IntersionObServer (funktion (poster, observatør) {
      entries.foreach (funktion (post) {
        hvis (entry.isintersecting) {
          entry.target.Setattribute ("src", entry.target.getattribute ("data-src"));
          entry.target.classlist.remove ("doven");
          imageobserver.unobserve (entry.target);
        }
      });
    });

    elements.foreach (funktion (billede) {
      imageobserver.observe (billede);
    });
  }
});

Her binder vi kode til dokument objekts. Domcontentloaded. begivenhed. Denne kode kontrollerer for at se, om krydsobservatør understøttes af den aktuelle browser. Hvis det viser sig, at det er, tager vi alle sammen img. elementer med en klasse af doven med Queryselectorall. og derefter vedhæfte observatører til dem.

Observatøren indeholder referencer til de elementer, vi observerer ( indgange. ) og selve observatøren ( Observator. ). Denne kode hængsler på hver observatørindtastning isektorerct værdi. Mens det observerede element er ude af visningsporten, isektorerct vender tilbage 0. . Da elementet går ind i visningsporten, vil det dog returnere en værdi større end 0. . Det er på dette tidspunkt, at vi byder på indholdet af billedet DATA-SRC. attributter til Src. attribut, og fjern dets doven klasse. Efter et givet billede dovne belastninger fjernes observatøren fra den med observatørens unobserve. metode.

Denne proces er meget lettere end at mucking rundt med rullehåndteringsmaskiner, men da krydset observatør ikke nyder universel støtte, må du måske falde tilbage på dem. Hvis du er den slags for at få fat i et script og gå, har vi skrevet en doven læsser, der bruger skæringsobservatør, men falder også tilbage til metoderne for yesteryear. Du kan få fat i det her .

Denne artikel blev oprindeligt offentliggjort i udstedelse 301 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb problem 301 her eller Abonner her .

Relaterede artikler:

Den komplette vejledning til SVG
Brug af vektorværktøjer: En webdesigner tilgang
Animere SVG med JavaScript

4 Essential Image Optimization Tips

Være selektiv og preload kritiske billeder

Automatisk at forenkle dit SVG-kunstværk

Konverter animerede gif til video

Lazy load with IntersionObserver

hvordan - Mest populære artikler

Mixed-Media Art Tutorial: Sådan Accolor Over Digital Artwork

Sådan tegner du perspektiv

Sådan opnår man bedre belysning med V-RAY

Sådan maler man en traditionel British Village Scene

Sådan blandes en gouache palette

Sådan laver du dine egne lærredskort

Mock Up AR Grafik med After Effects

Lav en hi-troskab prototype i atomisk

Kategorier