4 Essential Image Optimization Tippek

Sep 11, 2025

kézikönyv

Néhány szerencsés fejlesztő és ez a szerzőnek lehetősége volt a Tech Edit Addy Osmani új képoptimalizálásának eBook, Essential Image Optimization , amit teljesen el kell olvasnia.

10 módja a képek jobb teljesítményének optimalizálására

Akár teljes méretű, akár teljes méretű E-kereskedelmi webhelyek vagy egyszerűen online otthoni otthona Design portfólió , Ebben a cikkben megtanulsz néhány tippet az Addy könyvétől, amely segíti a képeket, és gyorsabban.

Válasszon szelektív és preload kritikus képeket

Vessen egy pillantást a webhelyére, és azonosíts egy kritikus képeszközt. A legtöbb esetben ez egy logó vagy hős kép lenne, amelyet a lehető leghamarabb meg akarsz adni.

Ez az, ahol a előtöltés Az erőforrás-tipp jön be. előtöltés az ügyfélnek való utalás módja, hogy egy eszközt kell letölteni, mielőtt a böngésző parser másképp felfedezné. Használhatja, hogy elég sok mindent használhat, de kiválóan működik a kritikus képek előre betöltésére. Íme egy példa a HTML-ben & lt; head & gt; Elem a hős banner kép előállításához:

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

A HTTP fejlécben is előállítható:

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

Az alábbiakban látható két képernyőkép-tekercs ugyanazon az oldal betöltése a Chrome-ban. Egy forgatókönyv használ előtöltés Hero banner kép betöltése, míg a másik nem.

The effect of using preload on a hero banner — A preload használatának hatása egy hős bannerre

A példában előtöltés , A banner kép megjelenik a böngészőablakban fél második gyorsabban. Mindez, mert egy gyors egybélés, amely a böngészőnek a fej kezdetét adta.

Automatikusan egyszerűsíti az SVG grafikát

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Az Illustrator egyszerűsítő eszköze, amely a görbe pontosság előtti és utáni horgonypontok számát mutatja

Az SVG-k optimalizálása eltérő, mint más képtípusokkal, mivel a JPEG-ekkel vagy a PNG-kkel ellentétben az SVG-k szöveges, specifikusan XML jelöléssel rendelkeznek. Ez azt jelenti, hogy a szövegalapú eszközökre (például a minifikációra, a GZIP / BROTLI tömörítésre) alkalmazandó tipikus optimalizációkat is alkalmazhatnánk, és az SVG-kre is alkalmazni kell. Ezen túlmenően használhat egy optimalizálót, például az SVGO-t, hogy tampálja az SVG-ek méretét.

De mi van, ha nem csupán a vektoros grafikát fogyasztja, hanem megteremti? Ha egy felhasználó Illustrator, akkor automatikusan egyszerűbbé teszi a grafikát, hogy csökkentse a horgony pontok utak révén Egyszerűbb ablakot.

Ez a párbeszédablak megtalálható Illusztrátor CC Menü az objektum és a gt; Path & GT; Egyszerűsítés. A görbe precíziójának csökkentésével (és adott esetben beállító szögküszöb) lehetséges az extra útvonalpontok eltávolítása a műalkotásban. Ebben az esetben megjegyezheti, hogy a görbe pontosságának csökkentése 6% -kal csökkenti az 54 útvonalpontot. Használtan használták, ez még javíthatja a műalkotás megjelenését is.

The savings that path simplification can afford — Az egyszerűsítés elérésének megtakarítása megengedheti magának

Word a bölcsnek - legyen óvatos, hogy milyen agresszív kapsz ezzel az eszközzel. Az alsó görbe pontosság túl sokat, és az egyszer gondosan kialakított műalkotás egy foltba kerül. Bár a megfelelő egyensúlyt, és élvezze a jutalmakat.

Konvertálja animált gifeket a videóba

With FFmpeg you can turn flabby GIFs into svelte video — Az FFMPEG segítségével a Flabby Gifs Svelte videóba fordulhat

Mindannyian szeretünk egy jó animált GIF-t. Hatékonyan közvetítik majdnem bármilyen hangot, de tényleg hatalmas lehetnek. Image optimisers, mint például a gifsicle segíthet a felesleges kilobájt felesleges, de a jegy az, hogy konvertálja ezeket a gifeket a videókba, és beágyazza őket a HTML5-be & lt; video & gt; címke. A ffmpeg A parancssori segédprogram alkalmas erre a feladatra:

 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

A fenti parancsok egy forrás GIF-t ( Animated.gif ) A -I argumentum bemenete, és a kimeneti videók változó bitráta maximum 512kbps. Saját tesztünkben 989KB animált GIF-t tudtunk vinni, és csökkentenünk egy 155 kB-os MP4-hez, 109kb OGV-hez, és egy 85kb-ot. Minden videofájl hasonló minőségben volt a forrás GIF-nek. A mindenütt jelenlévő & lt; video & gt; TAG támogatás a böngészőkben, ezek a három video formátum használható így:

 & lt; video preload = "Nincs" & gt;
  & lt; forrás src = "/ videók / animated.webm" típus = "Video / Webm" & gt;
  & lt; forrás src = "/ videók / animated.ogv" típus = "Video / OGG" & gt;
  & lt; forrás src = "/ videók / animated.mp4" típus = "Video / Mp4" & gt;
& lt; / video & gt;

Ha úgy dönt, hogy megy ez az útvonal, győződjön meg róla, hogy megrendeli az Ön & lt; forrás & gt; A címkék úgy, hogy a legoptimálisabb formátumot először megadjuk, és a legkevésbé optimális az utolsó. A legtöbb esetben ez azt jelenti, akkor elkezd a WebM videók első, de nézd meg a kimeneti fájl mérete minden videó, és menjen el mindent, ami a legkisebb első, és vége azzal, ami legnagyobb.

Ha nincs ffmpeg, vagy nem tudom, mi az, nézd meg . Könnyen telepíthető a legtöbb operációs rendszercsomagvezetők, például a homebrew vagy a csokoládé.

Lusta terhelés az interectionobserverrel

A lusta betöltése képek, amit talán már csinál, de sok lusta betöltési parancsfájl használata CPU-intenzív scroll eseménykezelők. Az ilyen módszerek hozzájárulnak az oldal lassú kölcsönhatásához. A kevesebb feldolgozó erővel rendelkező régebbi hardver még inkább hajlamos az ilyen típusú kódok rossz hatásaira. A végrehajtás fojtása segítséget nyújt bizonyos mértékben, de ez még mindig rendetlen és meglehetősen hatékony megoldás annak meghatározására, hogy az elemek a nézetablakban vannak-e.

Szerencsére a metszéspont megfigyelő API egyszerűbbé és sokkal hatékonyabb módja annak, hogy meghatározzuk, hogy az elemek a nézetablakban vannak. Íme egy példa néhány alapvető lusta betöltési képmegjelölésre:

 & lt; img osztály = "lusta" data-src = "/ képek / lusty-loaded-image.jpg" src = "/ képek / playholder.jpg" alt = "lusta vagyok." Szélesség = "320" magasság = "240" & gt;

Itt betöltünk egy helyőrző képet a src attribútum, majd tárolja az URL-t a képhez, amit a lustán betölteni szeretnénk a adat-src tulajdonság. A tetejére mindent el kell adnunk & lt; img & gt; Elem egy lusta osztály, hogy könnyű hozzáférést biztosítson QuerySelectorall . Innen egyszerűen ezt a kódot használjuk:

 Document.addeventlistener ("DOMCONTENTOMED", funkció () {
  if ( "IntersectionObserver" ablak & amp; & amp; "IntersectionObserverEntry" ablak & amp; & amp; "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
    Elements = Document.QuerySelectorAll ("img.lazy");

    VAR ImageOBServer = Új Intersectionobserver (funkció (bejegyzések, megfigyelő) {
      Bejegyzések.Forforeach (funkció (bejegyzés) {
        ha (belépés.Intersecting) {
          belépés.target.settribute ("src", belépés.target.getattribute ("DATA-SRC");
          belépés.target.classlist.Remove ("lusta");
          imagobserver.unobserve (belépés.target);
        }
      });
    });

    Elements.foreach (funkció (kép) {
      imagobserver.observe (kép);
    });
  }
});

Itt kóstoljuk meg a kódot a dokumentum objektum Domcontentetted esemény. Ez a kód ellenőrzi, hogy a metszéspont megfigyelője az aktuális böngésző támogatja-e. Ha kiderül, hogy ez, megragadjuk az összeset img elemek egy osztályú lusta val vel QuerySelectorall majd csatolja a megfigyelőket.

A megfigyelő hivatkozásokat tartalmaz a megfigyelt elemekre ( bejegyzés ) és maga a megfigyelő ( megfigyelő ). Ez a kód az egyes megfigyelői bejegyzésen található isintersecting érték. Míg a megfigyelt elem ki van kapcsolva a nézetablakból, isintersecting visszatér 0 . Mivel az elem belép a nézetablakba, bár visszaadja a nagyobb értéket 0 . Ezen a ponton van, hogy cseréljük a kép tartalmát adat-src attribútum a src attribútum, és távolítsa el lusta osztály. Egy adott kép lusta terhelés után a megfigyelőt eltávolítja tőle a megfigyelővel unobserve módszer.

Ez a folyamat sokkal könnyebb, mint a tekercskezelőkkel, de mivel a metszéspont megfigyelője nem élvezi az univerzális támogatást, előfordulhat, hogy vissza kell esnie rájuk. Ha te vagy a rendezés, hogy megragad egy szkriptet, és menjünk, írtunk egy lusta rakodógépet, amely metszéspont-megfigyelőt használ, de a Yesteryear módszereihez is visszaesik. Megragadhatja itt .

Ezt a cikket eredetileg a 301 háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon 301 kérdést vagy Iratkozzon fel itt .

Kapcsolódó cikkek:

Az svg teljes útmutatója
Vektoros eszközök használata: egy webes tervező megközelítése
Animálja az SVG-t a JavaScript-el

4 Essential Image Optimization Tippek

Válasszon szelektív és preload kritikus képeket

Automatikusan egyszerűsíti az SVG grafikát

Konvertálja animált gifeket a videóba

Lusta terhelés az interectionobserverrel

kézikönyv - Most Popular Articles

8 Golden Szabály a mobil design

Hogyan építsünk egy blogolási helyet Gatsby-vel

Hogyan érhető el skála a festményekben

Affinity Designer: Hogyan kell használni az export személyt

Építsen egy komplex 3D sci-fi jelenetet a keverőben

Hogyan festeni egy színes zombi

6 módja a modellezés felgyorsításának

A színes ceruzák keveredése

Kategóriák