4 Wskazówki dotyczące optymalizacji obrazu

Sep 11, 2025

Jak

Kilku szczęśliwych deweloperów i tego autora miał możliwość Tech Edytuj Nowy Ebook Image Optimization Image Didy Osmani, Istotna optymalizacja obrazu , który absolutnie powinien przeczytać.

10 sposobów na optymalizację obrazów dla lepszej wydajności

Niezależnie od tego, czy budujesz pełny rozmiar Witryny e-commerce. lub po prostu robię dom online Portfolio projektowania , W tym artykule poznasz kilka wskazówek od książki Addy, która pomoże sprawić, aby Twoje obrazy były szczuplejsze i szybsze.

Bądź selektywny i wstępnie obciążać krytyczne obrazy

Spójrz na swoją stronę i zidentyfikuj krytyczny aktywa obrazu. Dla większości byłoby to logo lub obraz bohatera, który chcesz mieć jak najszybciej.

To jest miejsce Preload. Wskazówka zasobów przychodzi. Preload. jest sposobem na sugerowanie Klientowi, że składnik aktywów należy pobrać przed parserem przeglądarki w przeciwnym razie go odkryje. Możesz go używać do całkowitego czegokolwiek, ale działa wspaniale do wstępnego ładowania obrazów krytycznych. Oto przykład go w użyciu w HTML & lt; Head & GT; Element na zamówienie, aby wstępnie załadować obraz Banner Hero:

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

Możesz także użyć obciążenia wstępnego w nagłówku HTTP:

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

Poniżej możesz zobaczyć dwie rolki zrzutu ekranu o tej samej stronie ładowania w Chrome. Jeden scenariusz Preload. Aby załadować obraz banera bohatera, podczas gdy drugi nie.

The effect of using preload on a hero banner — Efekt używania wstępnego obciążenia na baner bohatera

W przykładzie z Preload. , Obraz banera pojawia się w oknie przeglądarki w pół sekundę szybciej. Wszystko ze względu na szybką liniową, która przekazała przeglądarkę rozpocząć głowę.

Automatycznie uprościć grafikę SVG

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Illustrator's uprości narzędzie, pokazujące liczbę punktów kotwiących przed i po jako precyzji krzywej jest obniżona

Optymalizacja SVG jest inna niż z innymi typami obrazu, ponieważ w przeciwieństwie do JPEG lub PNGS, SVG składają się z tekstu, szczególnie znacznika XML. Oznacza to, że typowe optymalizacje miałoby zastosowanie do aktywów tekstowych (na przykład, minifikacja, kompresja GZIP / Brotli) może być również stosowana do SVG. Poza tym możesz użyć optymalizatora, takich jak SVGO, aby obniżyć rozmiar SVG.

Ale co, jeśli nie tylko spożywasz grafikę wektorową, ale jej tworzenie? Jeśli jesteś użytkownikiem Illustrator, możesz automatycznie uprościć grafikę, aby zmniejszyć ilość punktów kotwicy w ścieżkach za pomocą okna Dialog Uproszczenia.

To okno dialogowe można znaleźć w Illustrator CC. Menu przechodząc do obiektu & GT; ścieżka i gt; uprościć. Poprzez zmniejszenie precyzji krzywej (i opcjonalnie dostosowywania progu kąta) można usunąć dodatkowe punkty ścieżki w dziedzinie grafiki. W tym przypadku zauważasz, że zmniejszenie precyzji krzywej zaledwie 6% usuwa 54 punkty ścieżki. Używany rozsądnie, może nawet poprawić wygląd swojej grafiki.

The savings that path simplification can afford — Oszczędności, które mogą sobie pozwolić na uproszczenie ścieżki

Słowo do mądry - bądź ostrożny, jak agresywny dostajesz z tym narzędziem. Niższa precyzja krzywej za dużo, a kiedyś ostrożnie wykonane grafiki rozpadnie się w blob. Wyprowadź jednak odpowiednią równowagę, a będziesz czerpać nagrody.

Konwertuj animowane gify do wideo

With FFmpeg you can turn flabby GIFs into svelte video — Z FFMPEG możesz zmienić wiotki gify do wideo svelte

Wszyscy kochamy dobry animowany GIF. Skutecznie przekazują prawie jakiekolwiek sentyment, ale mogą być naprawdę ogromne. Optymalizacje obrazu, takie jak Gifsicle, mogą pomóc golić nadmiar kilobajtów, ale bilet jest przekształcenie tych gifów w filmy i osadza je w HTML5 & lt; video & gt; etykietka. The. ffmpeg. Narzędzie wiersza poleceń jest dobrze dostosowane do tego zadania:

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

Polecenia powyżej weź źródło GIF ( animowany gif ) Jako wejście w argumencie -i i wyjściowe filmy z zmienną maksymalnie 512 kbps. W naszym własnym badaniu byliśmy w stanie przyjmować animowany GIF 989KB i zmniejszyć go do MP4 155 KB, 109KB OGV, i WEBM 85 KB. Wszystkie pliki wideo były porównywalne w jakości do źródła GIF. Ze względu na awarity & lt; video & gt; Obsługa znaczników w przeglądarkach, te trzy formaty wideo mogą być używane tak:

 ° Video Preload = "Brak" & gt;
  Źródło SRC = "/ Filmy / animowane.webm" Type = "Video / Webm" & GT;
  Źródło SRC = "/ Filmy / Animated.ogv" Type = "Video / Ogg" & GT;
  Źródło SRC = "/ Filmy / Animated.mp4" Type = "Video / MP4" & GT;
& LT; / Video & GT;

Jeśli zdecydujesz się na tę trasę, upewnij się, że zamówisz Źródło & GT; Tagi, aby najbardziej optymalny format został określony pierwszy, a najmniej optymalny jest określony ostatni. W większości przypadków oznacza to, że najpierw zaczniesz filmy WEBM, ale sprawdź rozmiar pliku wyjściowego każdego filmu i przejdź do tego, co jest najmniejsze, a kończą się cokolwiek jest największe.

Jeśli nie masz FFMPEG lub nie wiesz, co to jest, Sprawdź to . Łatwo jest zainstalować za pomocą większości menedżerów pakietów systemowych, takich jak homebrew lub czekolada.

Leniwy ładunek z przecinkiem

Lazy Loading Images to coś, co możesz już robić, ale wiele leniwych skryptów załadunkowych wykorzystuje CPU intensywne obsługi zdarzeń przewijania. Takie metody przyczyniają się do powolnych interakcji na stronie. Starszy sprzęt o mniejszej mocy przetwarzania jest jeszcze bardziej podatny na złe skutki tego typu kodu. Wykonanie Drottling pomaga w pewnym stopniu, ale nadal jest brudny i raczej nieefektywny obejście do określania, gdy elementy są w rzutni.

Na szczęście intercentry API Observer daje nam prostsze i o wiele bardziej wydajny sposób na określenie, gdy elementy są w rzutni. Oto przykład niektórych podstawowych leniwych znaczników ładowania:

 & LT; IMG Class = "Lazy" Data-SRC = "/ Images / Lazy-Loaded-Image.jpg" SRC = "/ Images / placeholder.jpg" Alt = "Jestem leniwy". Szerokość = "320" wysokość = "240" i GT;

Tutaj ładujemy obraz zastępczy w src. atrybut, a następnie przechowuj adres URL na obraz, który chcemy leniwie ładować w dane-src. atrybut. Na to wszystko, dajemy & lt; img & gt; element klasyfikacji leniwych do łatwego dostępu Queryselectorall. . Stamtąd używamy tego kodu:

 Document.addeventListener ("Domcontentloaded", funkcja () {
  Jeśli ("INTERSECTECTECTECTECTEROBSERVER" w oknie i wzmacniacz; "INTERSECTICEOBSERVEREENTRY" w oknie & amp; & amp; "przecinekRatio" w oknie
    Elements = Document.QuerySelecorall ("img.lazazy");

    var imageObserver = Nowy INTERSECTECTECTEROBSERVER (funkcja (wpisy, obserwator) {
      Entries.Forach (funkcja (wpis) {
        if (Entry.Interecting) {
          Entry.target.setattribute ("src", wpis.target.getTtribute ("dane-src"));
          wpis.target.classlist.Remove ("leniwy");
          ImageObserver.unobserve (wpis.target);
        }
      });
    });

    Elements.Forach (funkcja (obraz) {
      imageobserver.observe (obraz);
    });
  }
});

Tutaj wiążymy kod do dokument obiekt DOMCONTENTOLEDED. zdarzenie. Ten kod sprawdza, czy obserwator przecięcia jest obsługiwany przez bieżącą przeglądarkę. Jeśli okaże się, że to, chwytamy wszystkie img. elementy z klasą leniwy z Queryselectorall. a następnie dołącz do nich obserwatorów.

Obserwator zawiera odniesienia do elementów, które obserwujemy ( wpisy ) i sam obserwator ( obserwator ). Ten kod zawiasuje na każdym wpisie obserwatora izintersecting. wartość. Podczas gdy obserwowany element jest poza rzutnią, izintersecting. zwroty 0. . Ponieważ element przechodzi jednak na rzutnię, zwróci wartość większą niż 0. . Jest w tym momencie, że zamieniamy treść obrazu dane-src. atrybut do src. atrybut i usuń jego leniwy klasa. Po danym obrazie leniwe ładunki obserwator zostanie usunięty z niego z obserwatora unobserve. metoda.

Proces ten jest znacznie łatwiejszy niż zmuśniany ręcznikami przewijania, ale ponieważ przecięcie obserwatora nie cieszy się uniwersalną obsługą, może być musiała się na nich wrócić. Jeśli jesteś taki, aby złapać skrypt i iść, napisaliśmy leniwego ładowarki, który używa przecięcia obserwatora, ale także powraca do metod sztywnych. Możesz go złapać tutaj .

Ten artykuł został pierwotnie opublikowany w wydaniu 301 netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 301 tutaj lub Subskrybuj tutaj .

Powiązane artykuły:

Kompletny przewodnik po SVG
Korzystanie z narzędzi wektorowych: podejście do projektanta internetowego
Animuj SVG z JavaScript

4 Wskazówki dotyczące optymalizacji obrazu

Bądź selektywny i wstępnie obciążać krytyczne obrazy

Automatycznie uprościć grafikę SVG

Konwertuj animowane gify do wideo

Leniwy ładunek z przecinkiem

Jak - Najpopularniejsze artykuły

Zbuduj szybki reaktywny blog z svelte i sapper

Utwórz tekstury za pomocą narzędzia do stempla

Użyj narzędzia do pióra i tekstur, aby dodać głębokość w Photoshopie

Jak renderować realistyczne przezroczyste powierzchnie

Jak skanować osobę w mniej niż pięć minut

Utwórz prosty wykres kolorowy

Moda elastyczne układy z siatką CSS

Utwórz postać z silną pozą w Photoshopie

Kategorie