0Pricing
Frontend Academy · Lezione

Ottimizzazione delle immagini: lazy loading e formato WebP

Aggiungere loading=lazy alle immagini, servire i moderni formati WebP e AVIF, usare immagini responsive con srcset e sizes e impostare larghezza e altezza esplicite per evitare spostamenti del layout.

Ottimizzazione delle immagini: lazy loading e formato WebP è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Le immagini determinano gran parte del peso della pagina

Una pagina web mediana pesa circa 2 MB e le immagini ne rappresentano all'incirca la metà. Ottimizzare le immagini è l'attività di performance con il maggiore impatto.

Formati moderni: WebP e AVIF

WebP è dal 25 al 35% più piccolo di JPEG a parità di qualità ed è supportato da tutti i browser moderni. AVIF è ancora più piccolo (riduzione del 50%), ma più lento da codificare. Utilizzi entrambi con un fallback.

L'elemento picture

Utilizzi <picture> per fornire AVIF se supportato, poi WebP e infine JPEG come fallback definitivo.

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>

Lazy loading nativo

Aggiunga loading="lazy" alle immagini sotto la piega. Il browser ne rimanda il caricamento finché l'immagine non si avvicina alla viewport: non è necessario alcun JavaScript.

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

Immagini responsive con srcset e sizes

Fornisca immagini più piccole agli schermi più piccoli. srcset elenca le immagini candidate con le rispettive larghezze; sizes indica al browser la larghezza di visualizzazione dell'immagine a ogni breakpoint.

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="" width="800" height="600">

Perché impostare esplicitamente width e height

Il browser riserva lo spazio in base agli attributi width/height, evitando spostamenti del layout quando arriva l'immagine. I browser moderni calcolano automaticamente l'aspect-ratio a partire da questi attributi.

decoding="async"

Aggiunga decoding="async" per consentire al browser di decodificare l'immagine al di fuori del thread principale, lasciandolo libero di eseguire il rendering degli altri contenuti.

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

CDN per immagini

Le CDN per immagini (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) trasformano le immagini al volo: ne modificano le dimensioni, le convertono in WebP/AVIF, le comprimono e le distribuiscono dalle cache edge.

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

Componente Image di Next.js

Il componente <Image> di Next.js gestisce automaticamente srcset responsive, conversione in WebP, lazy loading e segnaposto sfocato.

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

Comprimere JPEG e PNG

Se non può passare a WebP, comprima almeno le immagini: utilizzi Squoosh (squoosh.app) per immagini singole, ImageOptim per l'elaborazione in batch oppure sharp in uno script di build.

SVG per icone e loghi

Utilizzi SVG per icone, loghi e qualsiasi grafica vettoriale. Gli SVG si ridimensionano perfettamente, sono molto leggeri e possono essere stilizzati con CSS. Inserisca inline gli SVG di piccole dimensioni per evitare una richiesta HTTP aggiuntiva.

Verifica rapida

Quale attributo HTML indica al browser di rimandare il caricamento di un'immagine finché non si avvicina alla viewport?

Riepilogo: ottimizzazione delle immagini

Utilizzi formati moderni (AVIF, WebP) tramite l'elemento picture. Aggiunga loading="lazy" sotto la piega e fetchpriority="high" all'immagine hero. Imposti width/height espliciti per prevenire il CLS. Utilizzi srcset/sizes per le immagini responsive. Le CDN per immagini automatizzano la trasformazione. Image di Next.js gestisce tutto. Utilizzi SVG per le icone.

Domande Frequenti

La lezione «Ottimizzazione delle immagini: lazy loading e formato WebP» è gratuita?

Sì — il testo completo di «Ottimizzazione delle immagini: lazy loading e formato WebP» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Ottimizzazione delle immagini: lazy loading e formato WebP»?

Aggiungere loading=lazy alle immagini, servire i moderni formati WebP e AVIF, usare immagini responsive con srcset e sizes e impostare larghezza e altezza esplicite per evitare spostamenti del layout. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Ottimizzazione delle immagini: lazy loading e formato WebP»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Core Web Vitals: LCP, FID e CLS
  2. Audit e punteggi di Lighthouse
  3. Ottimizzazione delle immagini: lazy loading e formato WebP
  4. Code splitting e route lazy
← Torna a Frontend Academy