4 Viktiga bildoptimeringstips

Sep 15, 2025

Hur

Några lyckliga utvecklare och den här författaren hade möjlighet att Tech redigera Addy Osmani's New Image Optimization ebook, Grundläggande bildoptimering , som du absolut borde läsa.

10 sätt att optimera bilder för bättre prestanda

Oavsett om du bygger full storlek E-handel webbplatser eller helt enkelt göra ett online hem för din Designportfölj , I den här artikeln kommer du att lära dig några tips från Addys bok som hjälper till att göra dina bilder smalare och snabbare.

Var selektiva och förladda kritiska bilder

Ta en titt på din webbplats och identifiera en kritisk bild tillgång. För de flesta skulle det vara en logotyp eller hjältebild som du vill ha göra så snart som möjligt.

Det är här preload Resurshint kommer in. preload Det är ett sätt att tippa till kunden att en tillgång ska hämtas innan webbläsarens parser annars skulle upptäcka den. Du kan använda den för ganska mycket, men det fungerar fantastiskt för förladdning av kritiska bilder. Här är ett exempel på det i bruk i HTML & lt; huvud & gt; Element på för att förladda en hjälte banner bild:

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

Du kan också använda förspänning i en http-rubrik:

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

Nedan kan du se två skärmdump rullar av samma sida som loads i Chrome. Ett scenario använder preload För att ladda en hjältebannerbild, medan den andra inte gör det.

The effect of using preload on a hero banner — Effekten av att använda förspänning på en hjälte banner

I exemplet med preload , Banner-bilden visas i webbläsarfönstret en halv sekund snabbare. Allt på grund av ett snabbt en-liner som gav webbläsaren ett start.

Förenkla automatiskt ditt SVG-konstverk

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Illustrators förenkla verktyg, som visar antalet ankarpunkter före och efter när kurvprecisionen sänks

Optimering av SVGS är annorlunda än med andra bildtyper, eftersom SVGs till skillnad från JPEG eller PNGS består av text, specifikt XML-markering. Det innebär att typiska optimeringar du skulle gälla för textbaserade tillgångar (till exempel minifiering, gzip / brotli-komprimering) kan och bör också tillämpas på SVGs. Utöver det kan du använda en optimiser som SVGO för att stampa ner SVGs storlek.

Men vad händer om du inte bara konsumerar vektor konstverk, men skapar det? Om du är en Illustrator-användare kan du automatiskt förenkla ditt konstverk för att minska mängden ankarpunkter i banorna via dialogrutan Förenkla.

Den här dialogrutan finns i Illustrator CC 's Meny genom att gå till Objekt & GT; Path & GT; Förenkla. Genom att minska kurvans precision (och eventuellt justera vinkeltröskeln) är det möjligt att ta bort extra sökpunkter i ditt konstverk. I det här fallet noterar du att en minskning av kurv precision på så lite som 6% tar bort 54 vägpunkter. Används judiciously, det kan till och med förbättra utseendet på ditt konstverk.

The savings that path simplification can afford — Besparingarna som väg förenkling har råd med

Ord till den kloka - var försiktig med hur aggressiv du får med det här verktyget. Lägre kurvprecision för mycket, och din när noga utformade konstverk kommer att ägna sig åt i en blob. Strike rätt balans, men du kommer att skörda belöningarna.

Konvertera animerade gif till video

With FFmpeg you can turn flabby GIFs into svelte video — Med FFMPEG kan du vända flabby gifs till Svelte video

Vi älskar alla en bra animerad gif. De förmedlar effektivt nästan alla känslor, men de kan vara riktigt stora. Bildoptimierare som GIFSICle kan hjälpa till att raka bort överskott av kilobytes, men biljetten är att konvertera dessa GIFs till videor och bädda in dem i HTML5 & lt; video & gt; märka. De ffmpeg Kommandoradsverktyget är väl lämpat för den här uppgiften:

 ffmpeg -i animerat.gif -b: v 512k animerad.webm
ffmpeg -i animerat.gif-b: v 512k animerad.ogv
ffmpeg -i animerad.gif-b: v 512k animerad.mp4

Kommandona ovan tar en källa gif ( animerad.gif ) som inmatning i -i-argumentet, och mata ut videoklipp med en variabel bitrate maximalt 512 kbps. I ett eget test kunde vi ta en animerad GIF 989KB och minska den till en 155KB MP4, en 109KB OGV och en 85KB-webm. Alla videofiler var jämförbara i kvalitet till källgif. På grund av ubiquiten av & lt; video & gt; Tagstöd i webbläsare kan dessa tre videoformat användas som:

 & lt; video preload = "none" & gt;
  & lt; källa src = "/ videos / animated.webm" typ = "Video / webm" & gt;
  & lt; källa src = "/ videos / animated.ogv" typ = "Video / Ogg" & GT;
  & lt; källa src = "/ videor / animated.mp4" typ = "Video / mp4" & gt;
& lt; / video & gt;

Om du bestämmer dig för att gå den här vägen, var noga med att beställa din & lt; källa & gt; Taggar så att det mest optimala formatet anges först, och minst optimalt anges senast. I de flesta fall betyder det att du börjar med WebM-videor först, men kolla utmatningsfilstorleken på varje video och gå med vad som är minsta först och slutar med vad som är störst.

Om du inte har FFMPEG eller inte vet vad det är, Kolla in det . Det är lätt att installera genom de flesta operativsystempaketförvaltare, som Homebrew eller Chocolatey.

Lazy belastning med korsningsmedel

Lazy Loading-bilder är något du kanske redan gör, men många lata lastskript använder CPU-Intensive Scroll Event-hanterare. Sådana metoder bidrar till tröga interaktioner på en sida. Äldre hårdvara med mindre bearbetningskraft är ännu mer benägen för de dåliga effekterna av denna typ av kod. Execution Throttling hjälper till i en examen, men det är fortfarande en rörig och ganska ineffektiv lösning för att bestämma när element är i visningsporten.

Tack och lov ger intersektion observatör API oss ett enklare och mycket effektivare sätt att bestämma när element är i visningsporten. Här är ett exempel på någon grundläggande lat lastbildsmarkering:

 & lt; img class = "lat" data-src = "/ bilder / lata laddad-image.jpg" src = "/ images / placeholder.jpg" alt = "Jag är lat." Bredd = "320" Höjd = "240" & GT;

Här laddar vi en platshållare i src Attribut, och sedan lagra webbadressen för bilden vi vill lata belastar i data-src attribut. Till toppen av allt, vi ger & lt; img & gt; Element En klass av lat för enkel åtkomst med queryselectorall . Därifrån använder vi helt enkelt den här koden:

 document.AddeventListener ("Domcontentloaded", funktion () {
  Om ("IntersectionobServer" i Window & Amp; & amp; "Intersectionobserverentry" i Window & Amp; & amp; "IntersectionRatio" i fönstret.intersectionobserverentry.prototype) {
    Elements = document.querySectorall ("img.lazy");

    Var ImageObserver = Ny IntersectionobServer (funktion (poster, observatör) {
      poster.foreach (funktion (post) {
        om (post.isinterecting) {
          inträde.target.SetAttribute ("src", inträde.target.getattribute ("data-src");
          post.target.classlist.remove ("lat");
          imageobserver.unobserve (inträde.target);
        }
      });
    });

    element.foreach (funktion (bild) {
      bildobserver.observe (bild);
    });
  }
});

Här binder vi kod till dokumentera föremål Domcontentloaded händelse. Denna kod kontrollerar om korsningsobservatören stöds av den aktuella webbläsaren. Om det visar sig att det är, tar vi alla img element med en klass av lat med queryselectorall och sedan bifoga observatörer till dem.

Observatören innehåller referenser till de element vi observerar ( poster ) och observatören själv ( observatör ). Den här koden hänger på varje observatörsinträde isinterektera värde. Medan det observerade elementet är ur visningsporten, isinterektera återvända 0 . När elementet kommer in i visningsporten, kommer det dock att returnera ett värde som är större än 0 . Det är vid denna tidpunkt att vi byter innehållet i bilden data-src attribut i src attribut och ta bort dess lat klass. Efter en given bild lata belastningar, tas observatören bort från det med observatörens unobserve metod.

Denna process är mycket lättare än att mucka med rullhanterare, men eftersom korsningsobservatör inte tycker om universellt stöd kan du behöva falla tillbaka på dem. Om du är sorten för att ta ett skript och gå, har vi skrivit en lat lastare som använder korsningsobservatör, men faller också tillbaka till metoderna för yesteryear. Du kan ta tag i det här .

Denna artikel publicerades ursprungligen i utgåva 301 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp utgåva 301 här eller prenumerera här .

Relaterade artiklar:

Den fullständiga guiden till SVG
Använda vektorverktyg: en webbdesigners tillvägagångssätt
Animera svg med javascript

4 Viktiga bildoptimeringstips

Var selektiva och förladda kritiska bilder

Förenkla automatiskt ditt SVG-konstverk

Konvertera animerade gif till video

Lazy belastning med korsningsmedel

Hur - Mest populära artiklar

Hur man tar en skärmdump på en Mac

Utforska data visualisering med p5.js

Förstå Unity Asset Import Pipeline

Hur man målar en traditionell brittisk byplats

Hur man skapar färgglada världar som berättar en historia

Hur man förmedlar ljud i en målning

Gör en affisch från en mall i Photoshop

Bygg komplexa layouter med Postcss-Flexbox

Kategorier