4 suggerimenti di ottimizzazione dell'immagine essenziale

Sep 15, 2025

Come si fa

Alcuni studi fortunati e questo autore hanno avuto l'opportunità di tech Modifica il nuovo ebook di ottimizzazione dell'immagine di Addy Osmani, Ottimizzazione dell'immagine essenziale , che dovresti assolutamente leggere.

10 modi per ottimizzare le immagini per prestazioni migliori

Se stai costruendo a grandezza naturale siti web di e-commerce. o semplicemente fare una casa online per il tuo Portfolio di progettazione , In questo articolo imparerai alcuni suggerimenti dal libro di Addy che aiuterà a rendere le tue immagini più snella e più velocemente.

Essere selettivi e preload immagini critiche

Dai un'occhiata al tuo sito e identifica un'immagine critica. Per la maggior parte, questo sarebbe un logo o un'immagine dell'eroe che vuoi rendere il più presto possibile.

Questo è dove il precarico Il suggerimento delle risorse arriva. precarico è un modo per mettere a capo al cliente che un asset dovrebbe essere recuperato prima che il parser del browser lo scoprirebbe altrimenti. Puoi usarlo per praticamente tutto, ma funziona splendidamente per precaricare le immagini critiche. Ecco un esempio di questo in uso nell'HTML & lt; head & gt; Elemento per precaricare un'immagine Banner Hero:

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

Puoi anche utilizzare il precarico in un'intestazione HTTP:

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

Di seguito è possibile vedere due rotoli di screenshot della stessa pagina caricamento in cromo. Uso di uno scenario precarico Per caricare un'immagine di Banner Hero, mentre l'altra no.

The effect of using preload on a hero banner — L'effetto di usare il precarico su un bandiera dell'eroe

Nell'esempio con precarico , l'immagine banner appare nella finestra del browser mezzo secondo più veloce. Tutto a causa di un rapido one-lineer che ha dato il browser una testa di testa.

Semplifica automaticamente la tua opera d'arte SVG

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Lo strumento semplifica illustratore, mostrando il numero di punti di ancoraggio prima e dopo come la precisione della curva è abbassata

Ottimizzazione degli SVG è diversa da altri tipi di immagini, perché a differenza di JPEG o PNGS, gli SVG sono composti da testo, in particolare XML Markup. Ciò significa che le ottimizzazioni tipiche si applicherebbero alle attività basate su testo (ad esempio, minificazione, compressione Gzip / Brotli) può anche essere applicata a SVGS. Oltre a ciò, è possibile utilizzare un ottimizzatore come Svgo per tamponare le dimensioni degli SVG.

Ma cosa succede se non stai semplicemente consumando opere d'arte vettoriali, ma creando? Se sei un utente dellustratore, è possibile semplificare automaticamente la tua opera d'arte per ridurre la quantità di punti di ancoraggio nei percorsi tramite la finestra di dialogo Semplifica.

Questa finestra di dialogo può essere trovata in Illustrator cc. 'S MENU andando a Object & GT; Path & GT; semplificare. Riducendo la precisione della curva (e facoltativamente la soglia dell'angolo di regolazione), è possibile rimuovere punti di percorso extra nelle opere d'arte. In questo caso, noterete che una riduzione della precisione della curva del 6% rimuove 54 punti di percorso. Usato giudiziosamente, potrebbe persino migliorare l'aspetto della tua opera d'arte.

The savings that path simplification can afford — I risparmi che la semplificazione del percorso può permettersi

Parola per il saggio - Stai attento a quanto sia aggressivo con questo strumento. La precisione della curva inferiore troppo, e la tua opere d'arte una volta accuratamente artigianale si involtiscono in un blob. Colpire il giusto equilibrio, però, e raccoglierai i premi.

Converti gif animate in video

With FFmpeg you can turn flabby GIFs into svelte video — Con FFMPEG puoi trasformare GIF flabby in Svelte Video

Amiamo tutti un buon GIF animato. Trasmettono efficacemente quasi tutti i sentimenti, ma possono essere davvero enormi. Gli ottimizzatori di immagini come Gifsicle possono aiutare a radere in eccesso di kilobyte, ma il biglietto è convertire quelle gif in video e incorporale nell'HTML5 & lt; video e GT; etichetta. Il ffmpeg. L'utilità della riga di comando è adatta per questo compito:

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

I comandi sopra prendono una fonte GIF ( animato.gif. ) Come input nell'argomento -i, e in uscita video con un massimo di bitrate variabile di 512 kbps. In una prova del nostro, siamo stati in grado di prendere una GIF animata da 989 KB e ridurlo a un MP4 da 155 KB, un OGV da 109KB e un webm da 85kb. Tutti i file video erano comparabili in qualità della GIF di origine. A causa della ubiquità di & lt; video e GT; Supporto tag nei browser, questi tre formati video possono essere utilizzati come:

 & lt; video precload = "none" & gt;
  & lt; source src = "/ video / animato.webm" type = "" video / webm "& gt;
  & lt; source src = "/ video / animato.ogv" type = "video / ogg" & gt;
  & lt; sorgente src = "/ video / animated.mp4" type = "video / mp4" & gt;
& lt; / video & gt;

Se decidi di andare a questa strada, assicurati di ordinare il tuo & lt; fonte e GT; Tag in modo che il formato più ottimale sia specificato per primo, e il meno ottimale è specificato per ultimo. Nella maggior parte dei casi, questo significa che inizierai con i video WebM prima, ma controlla la dimensione del file di output di ciascun video e vai con tutto ciò che è il primo più piccolo e termina con ciò che è più grande.

Se non hai ffmpeg o non sai cosa sia, controlla . È facile da installare attraverso la maggior parte dei pacchetti di sistema operativo, come homebrew o cioccolato.

Carico pigro con intersezionebserver

Le immagini di caricamento pigro sono qualcosa che potresti già fare, ma molti script di caricamento pigro utilizzano i gestori di eventi di scorrimento ad alta intensità della CPU. Tali metodi contribuiscono alle interazioni lente su una pagina. L'hardware più vecchio con meno potenza di elaborazione è ancora più incline agli effetti negativi di questo tipo di codice. L'elettricità dell'esecuzione aiuta a una laurea, ma è ancora una soluzione disordinata e piuttosto inefficiente per determinare quando gli elementi sono nella vista.

Per fortuna, l'API dell'osservatore Intersection ci offre un modo più semplice e molto più efficiente per determinare quando gli elementi sono nella vista. Ecco un esempio di qualche markup image di caricamento pigro di base:

 & lt; img class = "pigro" dati-src = "/ images / lazy-loaded-image.jpg" src = "/ immagini / segnaposto.jpg" alt = "Sono pigro." width = "320" altezza = "240" e GT;

Qui, carichiamo un'immagine segnaposto nel src. Attributo, quindi conservare l'URL per l'immagine che vogliamo caricare in piguolo nel Data-src. attributo. Per iniziare tutto, diamo il & lt; img & gt; elemento una classe di pigro per un facile accesso con QuerySelezionatoAll. . Da lì, usiamo semplicemente questo codice:

 Document.AdDeventListener Aener ("DomcontententLaded", funzione () {
  se ("intersezioneBserver" in finestra e amplificatore; & amp; "intersezionebserverny" in window & amp; & amp; "intersectionRatio" in window.intersectionobserverny.prototipo) {
    elementi = document.queryselectoryall ("img.lazy");

    VAR PIEGHEOBSERVER = NUOVO INTESTICESSEFSERVER (FUNZIONE (VEDIE, OBSERVER) {
      voci.Foreach (funzione (ingresso) {
        se (entry.isintersecting) {
          entry.target.setattribute ("src", entry.target.getattribute ("data-src"));
          entry.target.classlist.remove ("pigro");
          imagebserver.unobserve (entry.target);
        }
      }););
    }););

    elementi.Foriesare (funzione (immagine) {
      imagebserver.observe (immagine);
    }););
  }
});

Qui, vinciamo il codice al documento oggetto Domcontentloaded. evento. Questo codice controlla per vedere se l'osservatore di intersezione è supportato dal browser corrente. Se si scopre che lo è, afferriamo tutti img. elementi con una classe di pigro con QuerySelezionatoAll. e quindi allegare gli osservatori a loro.

L'osservatore contiene riferimenti agli elementi che stiamo osservando ( inserimenti ) e l'osservatore stesso ( osservatore ). Questo codice si accende su ogni voce dell'osservatore Isintersecting valore. Mentre l'elemento osservato è fuori dal viewport, Isintersecting ritorna 0. . Poiché l'elemento entra nel puntoposto, però, restituirà un valore maggiore di 0. . È a questo punto che scambiamo il contenuto dell'immagine Data-src. Attributo in. src. Attributo e rimuovi il suo pigro classe. Dopo una determinata immagine carichi pigri, l'osservatore viene rimosso da esso con l'osservatore unbserve metodo.

Questo processo è molto più facile che in giro con i gestori di scorrimento, ma poiché l'osservatore di intersezione non ama il supporto universale, potrebbe essere necessario ricadere su di loro. Se sei il tipo per prendere una sceneggiatura e andare, abbiamo scritto un lazy loader che utilizza l'osservatore di intersezione, ma torna anche ai metodi di Yesteryear. Puoi afferrarlo Qui .

Questo articolo è stato originariamente pubblicato in emissione 301 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 301 qui o Iscriviti qui .

Articoli Correlati:

La guida completa a svg
Usando strumenti vettoriali: un approccio di un web designer
Animare svg con javascript

4 suggerimenti di ottimizzazione dell'immagine essenziale

Essere selettivi e preload immagini critiche

Semplifica automaticamente la tua opera d'arte SVG

Converti gif animate in video

Carico pigro con intersezionebserver

Come si fa - Articoli più popolari

Disegna il potere di contrasto nell'arte

Come creare un robot Papercraft

Crea un effetto testo wobbly con JavaScript

5 cose di cui hai bisogno per la pittura ad olio

Come progettare la tipografia isometrica

Come lavorare con il video HTML

Come creare deliziose trame con matite

Come catturare il movimento nei tuoi rendering 3D

Categorie