4 Sfaturi esențiale de optimizare a imaginii

Sep 11, 2025

să

Câțiva dezvoltatori norocoși și acest autor au avut ocazia de a edita noul Ebook de optimizare a imaginilor de la Tech Editare Osmani, Optimizarea imaginii esențiale , pe care trebuie să le citiți absolut.

10 moduri de a optimiza imaginile pentru o performanță mai bună

Indiferent dacă construiți dimensiunea maximă Site-urile de eCommerce sau pur și simplu făcând o casă online pentru dvs. Portofoliul de proiectare , În acest articol veți învăța câteva sfaturi din cartea lui Addy, care vă va ajuta să faceți imaginile mai slabe și mai rapide.

Să fie selective și să precărcați imagini critice

Aruncați o privire la site-ul dvs. și identificați un activ critic al imaginii. Pentru majoritatea, acest lucru ar fi un logo sau o imagine de erou pe care doriți să o faceți cât mai curând posibil.

Acesta este locul în care Preîncărcați Sugestia de resurse vine. Preîncărcați este o modalitate de a suferi clientului că un activ ar trebui recuperat înainte ca parserul browserului să o descopere altfel. Puteți să o utilizați pentru ceva destul de mult, dar funcționează splendid pentru preîncărcarea imaginilor critice. Iată un exemplu de utilizare în HTML & lt; head & gt; element la comandă pentru a prelua o imagine de banner erou:

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

De asemenea, puteți utiliza preîncărcarea într-un antet HTTP:

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

Mai jos puteți vedea două rulouri de ecran ale aceleiași pagini încărcate în crom. Un scenariu utilizează Preîncărcați Pentru a încărca o imagine de banner erou, în timp ce cealaltă nu.

The effect of using preload on a hero banner — Efectul utilizării preîncărcării pe un banner erou

În exemplul cu Preîncărcați , Imaginea bannerului apare în fereastra browserului cu o jumătate de secundă mai rapidă. Toate din cauza unei căptușeli rapide care a dat browserului un început.

Simplificați automat opera de artă SVG

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Instrumentul de simplificare a ilustratorului, care prezintă numărul de puncte de ancorare înainte și după ce precizia curbei este redusă

Optimizarea SVG-urilor este diferită de alte tipuri de imagini, deoarece spre deosebire de Jpegs sau PNGS, SVG-urile sunt compuse din text, în special XML Markup. Aceasta înseamnă că optimizările tipice pe care le-ați aplica activelor bazate pe text (de exemplu, cu minificare, compresie GZIP / BROTLI) și ar trebui, de asemenea, să fie aplicate SVG-urilor. Dincolo de aceasta, puteți utiliza un optimizator, cum ar fi SVGO să tamponați dimensiunea SVG-urilor.

Dar dacă nu consumă doar o lucrare de artă vectorială, dar creând-o? Dacă sunteți utilizator ilustrator, puteți simplifica automat opera de artă pentru a reduce cantitatea de puncte de ancorare în căi prin fereastra de dialog Simplifice.

Acest dialog poate fi găsit în Illustrator CC. Meniul de la Object & Gt; simplifică. Prin reducerea preciziei curbei (și reglarea opțională a pragului unghiului), este posibil să se elimine punctele de cale suplimentare în opera de artă. În acest caz, veți observa că o reducere a preciziei curbei de câte 6% îndepărtează 54 de puncte. Folosit în mod judicios, ar putea chiar să îmbunătățească aspectul lucrărilor de artă.

The savings that path simplification can afford — Economiile care simplificarea căilor își pot permite

Cuvânt înțelept - Fii atent cu cât de agresiv obțineți cu acest instrument. Precizia curbei inferioare prea mult, iar opera de artă odată cu atenție vor crea într-un blob. Așezați balanța potrivită, totuși, veți culege recompensele.

Conversia gifilor animați la video

With FFmpeg you can turn flabby GIFs into svelte video — Cu FFMPEG puteți transforma gif-urile din Svelte

Toți iubim un bun gif animat. Ei transmit în mod eficient aproape orice sentiment, dar pot fi cu adevărat uriași. Optimizenii de imagine, cum ar fi Gifsicle, pot ajuta la răsturnarea excesului de kilobyte, dar biletul este de a transforma acele gifuri în videoclipuri și le încorpora în HTML5 & lt; video & gt; etichetă. FFMPEG. Comanda Line Utility este foarte potrivită pentru această sarcină:

 FFMPEG -I animat.gif -b: v 512K animat.webm
FFMPEG -I animat.gif -b: v 512K animat.ogv
FFMPEG -I animat.gif -b: v 512K animat.mp4

Comenzile de mai sus iau un GIF sursă ( animat.gif. ) ca intrare în argumentul -I și videoclipuri de ieșire cu un maxim de bitare variabilă de 512 kbps. Într-un test al nostru, am reușit să luăm un GIF animat de 989KB și să-l reduc la un MP4 de 155kb, un OGV de 109 kB și un webm de 85kb. Toate fișierele video au fost comparabile în calitate pentru GIF sursă. Din cauza ubicuitului & lt; video & gt; Tag suport în browsere, aceste trei formate video pot fi folosite astfel:

 & lt; preload video = "none" & gt;
  & lt; sursa src = "/ videoclipuri / animate.Webm" Type = "Video / WebM" & GT;
  & lt; sursa src = "/ videoclipuri / animated.ogv" Type = "Video / OGG" & GT;
  & lt; sursă src = "/ videoclipuri / animate.mp4" tip = "video / mp4" & gt;
& lt; / video & gt;

Dacă vă decideți să mergeți pe acest traseu, asigurați-vă că ați comandat-o & lt; sursă & gt; Etichete astfel încât cel mai optim format este specificat mai întâi și cel mai puțin optim este specificat ultima dată. În cele mai multe cazuri, aceasta înseamnă că veți începe mai întâi cu videoclipuri WebM, dar verificați dimensiunea fișierului de ieșire a fiecărui videoclip și mergeți cu ceea ce este mai mic și sfârșitul cu cel mai mare.

Dacă nu aveți FFMPEG sau nu știți ce este, verifică . Este ușor de instalat prin majoritatea managerilor de pachete de sistem de operare, cum ar fi homebrew sau ciocolată.

Încărcare leneșă cu intersecțiaObserver

Imaginile leneș de încărcare este ceva ce ați putea face deja, dar multe scripturi leneș de încărcare utilizează stivuitoare de evenimente de defilare a CPU-intensive. Astfel de metode contribuie la interacțiunile lentă pe o pagină. Hardware mai vechi, cu o putere mai redusă de procesare, este chiar mai predispus la efectele rele ale acestui tip de cod. Executarea Throtting-ului ajută la o diplomă, dar este încă o soluție dezordonată și destul de ineficientă pentru a determina când elementele sunt în port de vizualizare.

Din fericire, API-ul de observare a intersecției ne oferă o modalitate mai simplă și mult mai eficientă de a determina când elementele sunt în portportul de vizualizare. Iată un exemplu de marcă de încărcare leneșă de bază:

 & Lt; IMG CLASS = "Lazy" Data-Src = "/ Imagini / Lazy-Loaded-Image.jpg" Src = "/ Imagini / Putholder.jpg" Alt = "Sunt leneș". width = "320" înălțime = "240" & gt;

Aici, încărcăm o imagine a substituentului în SRC. Atribut, apoi depozitați adresa URL pentru imaginea pe care o dorim să o încarcă la limită în Data-SRC. atribut. Pentru a se opri totul, dăm & IMG & GT; Element o clasă de leneș pentru acces ușor cu QuerySelectoral. . De acolo, pur și simplu folosim acest cod:

 Document.AdDeventlistener ("Domcontentenload", funcția () {
  dacă ("intersecțiaObserver" în fereastră & amp; & amp; "intersecțiaObsery" în fereastră & amp; "intersecția" în fereastră.IntersectionObseryRy.protype) {
    elemente = document.QuerySelectorall ("img.lazy");

    Var ImageObserver = Noua intersecțieObserver (funcția (intrări, observator) {
      intrări.Foreceh (funcție (intrare) {
        dacă (intrare.isintergecting) {
          entry.target.setattribute ("src", entry.target.getattribute ("date-src"));
          entry.target.classlist.remove ("leneș");
          ImageObserver.unobserve (entry.target);
        }
      });
    });

    elemente.Foreceh (funcție (imagine) {
      ImageObserver.observe (imagine);
    });
  }
});

Aici, legăm codul la document obiecte Domcontentenload. eveniment. Acest cod verifică pentru a vedea dacă observatorul de intersecție este acceptat de browserul curent. Dacă se dovedește că este, apucăm toate img. elemente cu o clasă de leneş cu QuerySelectoral. și apoi atașați observatorii pentru ei.

Observatorul conține referiri la elementele pe care le observăm ( Intrări ) și observatorul însuși ( observator ). Acest cod se blochează pe fiecare intrare de observator izintersing valoare. În timp ce elementul observat este în afara de vizualizare, izintersing se intoarce 0. . Deoarece elementul intră în vizualizare, totuși, va returna o valoare mai mare decât 0. . Este în acest moment că schimbăm conținutul imaginii Data-SRC. atributul în SRC. atribut și eliminați-o leneş clasă. După o anumită imagine a unei imagini leneș, observatorul este scos din acesta cu observatorul Unobserve.ro metodă.

Acest proces este mult mai ușor decât muscatura în jurul valorii de stivuitoare de scroll, dar de când observatorul de intersecție nu se bucură de sprijin universal, este posibil să trebuiască să vă întoarceți pe ele. Dacă sunteți un fel de a lua un script și mergeți, am scris un încărcător leneș care utilizează observator de intersecție, dar, de asemenea, se întoarce la metodele de ansamblu. Puteți să o luați Aici .

Acest articol a fost publicat inițial în numărul 301 din net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Cumpărați problema 301 aici sau Abonați-vă aici .

Articole similare:

Ghidul complet pentru SVG
Utilizarea instrumentelor vectoriale: abordarea unui designer web
Animați svg cu javascript

4 Sfaturi esențiale de optimizare a imaginii

Să fie selective și să precărcați imagini critice

Simplificați automat opera de artă SVG

Conversia gifilor animați la video

Încărcare leneșă cu intersecțiaObserver

să - Cele mai populare articole

Creați artă CSS animată

5 sfaturi pentru Super-Fast CSS

Creați seturi de pictograme de produs în Illustrator

5 lucruri de care aveți nevoie pentru pictura de ulei

8 secrete esențiale de securitate WordPress

4 pași simpli pentru a vă îmbunătăți randamentul

Cum să sculptați digital în ZBRUSHCORE

5 moduri de a crea mai multe experiențe mai imersive VR

Categorii