4 Základní tipy pro optimalizaci obrazu

Sep 17, 2025

jak

Několik šťastných vývojářů a tento autor měl možnost techniku Edit Addy Osmani je nová optimalizace obrazu ebook, Základní optimalizace obrazu , které byste měli absolutně číst.

10 způsobů, jak optimalizovat obrazy pro lepší výkon

Ať už stavíte v plné velikosti webové stránky eCommerce nebo jednoduše dělat online domov pro vaše Design portfolio , v tomto článku se naučíte několik tipů z Addyho knihy, která pomůže, aby vaše obrázky štíhlejší a rychlejší.

Být selektivní a předpětí kritické obrázky

Podívejte se na své stránky a identifikovat kritické aktivum obrazu. Pro většinu by to byl logo nebo hrdina obraz, který chcete mít co nejdříve.

To je místo, kde preload Zdá se přichází. preload Je způsob, jak omezit klientovi, že aktivum by mělo být načteno předtím, než jej analyzátor prohlížeče jinak objevit. Můžete ji použít pro skoro cokoliv, ale funguje skvěle pro kritické snímání před zahájením preloadingu. Zde je příklad použití v HTML & lt; hlava & gt; Prvek na přednastavení nápisu Hero Banner:

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

Preload můžete také použít v záhlaví HTTP:

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

Níže můžete vidět dva snímky obrazovky stejné stránky načítání stránky v Chrome. Jeden scénář používá preload načíst obrázek banneru hrdiny, zatímco ostatní ne.

The effect of using preload on a hero banner — Účinek použití předpětí na hrdinu banner

V příkladu s preload Obraz banneru se zobrazí v okně prohlížeče polovina druhého rychlejšího. Vše kvůli rychlému jednomu vložce, který dal prohlížeč začátek hlavy.

Automaticky zjednodušit umělecká díla SVG

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Zjednodušte nástroj Illustrator, zobrazující počet kotevních bodů před a po přesnost křivky je snížena

Optimalizace SVGS je jiné než u jiných typů obrazu, protože na rozdíl od JPEGS nebo PNGS, SVGS se skládají z textu, konkrétně XML Markup. To znamená, že typické optimalizace, které byste se vztahovali na textová aktiva (například minifikace, komprese GZIP / Brotli), může být také aplikována na SVGS. Kromě toho můžete použít optimalizátor, jako je SVGO, aby se posunul velikosti SVGS.

Ale co když nejste jen konzumovat vektorové kresby, ale vytváření? Pokud jste uživatelem Illustrator, můžete automaticky zjednodušit své kresby, abyste snížili množství kotevních bodů v cestách přes zjednodušené dialogové okno.

Tento dialog lze nalézt v Illustrator CC. 's menu jít do objektu & gt; cesta & gt; zjednodušit. Snížením přesnosti křivky (a volitelně nastavovací prahovou hodnotu úhlu) je možné odstranit body extra cesty ve vašem kresbu. V tomto případě si upozorníme, že snížení přesnosti křivky za pouhých 6% odstraňuje 54 bodů cest. Používá se uvážlivě, mohl by dokonce zlepšit vzhled vaší kresby.

The savings that path simplification can afford — Úspory, které se mohou dovolit zjednodušení cesty

Slovo k moudrému - buďte opatrní, jak agresivní dostanete s tímto nástrojem. Nižší křivka Přesnost příliš mnoho, a vaše jednou pečlivě vytvořená umělecká díla se bude odesílat do blob. Stiskněte správnou rovnováhu, a budete sklízet odměny.

Převést animované gify na video

With FFmpeg you can turn flabby GIFs into svelte video — S FFMPEG můžete proměnit flabby GIF do videa Svelte

Všichni milujeme dobrý animovaný gif. Účinně sdělují téměř nějaký sentiment, ale mohou být opravdu obrovské. Optimalizátory obrazu, jako je gifasa, mohou pomoci oholit se nadbytečné kilobajty, ale jízdenka je převést ty gify do videí a vložit je do html5 & lt; video & gt; štítek. . \ T ffmpeg. Utility příkazového řádku je pro tento úkol dobře hoden:

 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

Výše uvedené příkazy mají zdroj GIF ( animovaný.gif. ) Jako vstup v argumentu -I a výstup videa s proměnlivým bitovým maximálně 512kbps. Ve vlastním testu jsme byli schopni vzít 989KB animovaný GIF a snížit ji na 155KB MP4, 109KB OGV a 85KB Webm. Všechny video soubory byly srovnatelné v kvalitě na zdroj GIF. Kvůli všudypřítomnosti & lt; video & gt; Podpora tagů v prohlížečích, tyto tři formáty videa lze použít takto:

 & lt; video preload = "žádný" & gt;
  & lt; zdroj src = "/ videa / animated.webm" type = "video / webm" & gt;
  & lt; zdroj src = "/ videa / animated.ogv" type = "video / ogg" & gt;
  & lt; zdroj src = "/ videa / animated.mp4" typ = "video / mp4" & gt;
& lt; / video & gt;

Pokud se rozhodnete jít tuto trasu, nezapomeňte si objednávat & lt; zdroj & gt; Značky tak, že nejpočetnější formát je zadán jako první a nejméně optimální je uveden poslední. Ve většině případů to znamená, že nejprve začnete s webm videem, ale zkontrolujte velikost výstupního souboru každého videa a jděte s tím, co je nejmenší, a končí s čímkoliv je největší.

Pokud nemáte FFMPEG nebo nevíte, co to je, Koukni na to . Je snadné instalovat prostřednictvím manažerů balíčků operačního systému, jako je homebrew nebo čokolády.

Líné zatížení s křižovatkemObserver

Lazy loading images je něco, co byste již mohli dělat, ale mnoho líných nakládacích skriptů používají manipulátory s rolovacími rolovacími událostmi. Tyto metody přispívají k pomalým interakcím na stránce. Starší hardware s menším zpracovatelským výkonem je ještě náchylnější k nemocným účinkům tohoto typu kódu. Provádění škrticí do určité míry to přispívá, ale je to stále špinavá a spíše neefektivní řešení pro určení, kdy jsou prvky ve výřezu.

Naštěstí, křižovatka Observer API nám dává jednodušší a mnohem efektivnější způsob, jak zjistit, kdy jsou prvky ve výřezu. Zde je příklad některých základních líných načítání obrazu značení:

 Class = "Lazy" Data-SRC = "/ Images / Lazy-loaded-image.jpg" src = "/ obrázky / placeholderer.jpg" alt = "Jsem líný." šířka = "320" výška = "240" & gt;

Zde načte zástupný obraz v SRC. Atribut, a pak uložte adresu URL pro obraz, který chceme lenily zatížení v Data-SRC. atribut. Aby to bylo možné, dáváme & lt; img & gt; prvek třída líný pro snadný přístup QuerSelectorall. . Odtud používáme tento kód:

 Document.AddeventListener ("DomContentLoaded", funkce () {
  IF ("IntersectionObServer" v okně & amp; & amp; "IntersectionObserverentrery" v okně a amp; "Intersectionratio" v okně
    Prvky = dokument.QuerySelektorall ("img.lazy");

    var imagobserver = nová intersekceObserver (funkce (záznamy, pozorovatel) {
      Záznamy.Foreach (funkce (vstup) {
        if (entry.Interersecting) {
          ENTRY.TARGET.SETATTRIBUTE ("SRC", ENTRY.TARGET.GETATTRIBUTE ("Data-SRC"));
          entry.target.classlist.remove ("líný");
          imightobserver.unobserve (entry.target);
        }
      });
    });

    prvky.foreach (funkce (obrázek) {
      imightobserver.observe (obrázek);
    });
  }
});

Zde se vážeme kódu dokument Objekt je DomContentloaded. událost. Tento kód kontroluje, zda je obstaravatel křižovatku podporován aktuálním prohlížečem. Pokud se ukáže, že to je, chytíme vše img. prvky s třídou líný s QuerSelectorall. a pak k nim připojte pozorovatele.

Pozorovatel obsahuje odkazy na prvky, které pozorujeme ( Záznamy ) a samotný pozorovatel ( pozorovatel ). Tento kód závěsy na každém zadavateli Isintersecting. hodnota. Zatímco pozorovaný prvek je mimo výřez, Isintersecting. návrat 0. . Vzhledem k tomu, že prvek vstupuje do výřezu, vrátí hodnotu větší než 0. . Je to v tomto bodě, že vyměníme obsah obrázku Data-SRC. atribut do. SRC. a odstranit jeho líný třída. Po daném obrazu Lazy Loads je pozorovatel odstraněn z ní s pozorovatelem unobserve. metoda.

Tento proces je mnohem jednodušší než mucking kolem s posuvnými manipulátory, ale protože křižovatka pozorovatel nemá rád univerzální podporu, budete se na ně muset vrátit zpět. Pokud jste druh, který chcete chytit skript a jít, jsme napsali líný nakladač, který používá křižovatku pozorovatele, ale také se vrátí ke způsobům jeseneearů. Můžete ho chytit tady .

Tento článek byl původně publikován v čísle 301 síť Časopis nejprodávanějšího světa pro webové designéry a vývojáře. Koupit problém 301 zde nebo Přihlásit se zde .

Související články:

Kompletní průvodce SVG
Použití vektorových nástrojů: přístup web designer
Animate SVG s JavaScriptem

4 Základní tipy pro optimalizaci obrazu

Být selektivní a předpětí kritické obrázky

Automaticky zjednodušit umělecká díla SVG

Převést animované gify na video

Líné zatížení s křižovatkemObserver

jak - Nejoblíbenější články

Služoky Google: Jak navrhnout dokument

Jak nakreslit lva

Jak photoshop někoho do obrázku

Jak odstranit vrásky ve Photoshopu

Jak nakreslit vlk

Jak nakreslit paže

Sestavte mobilní aplikace s křížovou platformou se službou Google Flutter

Konečný průvodce pro kompozici snímků ve Photoshopu

Kategorie