Ottimizza le immagini per il web su Windows

Inizia dalla richiesta di rete, non dall’esportazione del design. Una foto prodotto da 3000 pixel può apparire corretta in una card da 640 pixel perché CSS la scala verso il basso, ma il browser trasferisce comunque la sorgente di grandi dimensioni. Il flusso di lavoro Windows che segue individua questa discrepanza, crea varianti sensate e verifica la pagina dopo il deployment.

Individua le immagini che costano di più

Apri la pagina in Microsoft Edge, premi F12, seleziona Network, ricarica e filtra per Img. Ordina per dimensione trasferita. Annota tre dati per ogni richiesta costosa:

1. Le dimensioni in pixel del file.
2. La larghezza renderizzata nel pannello Elements.
3. Se si trova sopra la piega o viene caricata successivamente.

Un’immagine hero renderizzata a 1200 pixel potrebbe richiedere una sorgente da 1920 o 2400 pixel per display ad alta densità. Raramente necessita dell’esportazione originale della fotocamera da 6000 pixel. Una card renderizzata a 360 pixel non dovrebbe richiedere lo stesso file dell’hero.

Ridimensiona una singola immagine con Paint

Paint è sufficiente per correggere una singola sorgente sovradimensionata:

1. Apri l’immagine e scegli Ridimensiona e inclina.
2. Mantieni attiva l’opzione Mantieni proporzioni.
3. Inserisci la larghezza in pixel richiesta, non una percentuale stimata dalla dimensione del file.
4. Usa Salva con nome in modo che il file master rimanga intatto.

Per una card da 640 pixel, crea un candidato standard da 800 pixel e un candidato per display ad alta densità da 1280 pixel. Controlla il testo piccolo e i bordi sottili del prodotto dopo il ridimensionamento. Se la sorgente contiene trasparenza, non salvarla come JPEG.

Ridimensionamento in batch con PowerToys

Microsoft PowerToys include Image Resizer , che aggiunge comandi di ridimensionamento a Esplora file. Definisci larghezze che corrispondano ai breakpoint reali del sito, come 480, 960 e 1600 pixel, quindi crea copie invece di sostituire gli originali.

PowerToys è utile per le dimensioni, ma non costituisce un pipeline di consegna completo. La denominazione dei file, la conversione del formato, il markup responsive e la revisione visiva sono ancora importanti. Inserisci i candidati generati in una cartella separata per non confonderli con le opere sorgente.

Scegli tra JPEG, PNG, WebP o AVIF

Non convertire ogni PNG in JPEG. Questo può rimuovere la trasparenza e creare anelli di ringing intorno al testo. Non convertire nemmeno una foto JPEG in PNG; solitamente aumenta le dimensioni del file senza ripristinare i dettagli persi. Vedi compressione con perdita e senza perdita per il compromesso sottostante.

Consegna correttamente le immagini responsive

La sola compressione non rende un’immagine responsive. Fornisci candidati di larghezza e lascia che il browser ne selezioni uno:

<img
  src="product-960.webp"
  srcset="product-480.webp 480w, product-960.webp 960w, product-1600.webp 1600w"
  sizes="(max-width: 720px) 100vw, 50vw"
  width="960"
  height="640"
  alt="Black travel bag open to show the interior compartments"
>

Google raccomanda elementi immagine standard, testo alt utile, candidati responsive e un fallback src nella sua guida SEO per le immagini . Larghezza e altezza riservano lo spazio di layout. Il testo alt dovrebbe descrivere lo scopo dell’immagine, non ripetere un elenco di parole chiave.

Verifica il risultato in Edge

Ricarica con cache disabilitata alle larghezze desktop e mobile. Conferma che il browser scelga il candidato srcset previsto, che l’hero non sposti il layout e che il testo rimanga leggibile. Usa quindi PageSpeed Insights o i dati di campo per determinare se le modifiche alle immagini hanno migliorato la pagina effettiva. Google tratta le Core Web Vitals come una parte dell’esperienza della pagina, non come sostituto di contenuti utili.

Per le immagini prodotto non rilasciate, mantieni la conversione locale fino alla pubblicazione. Vedi rischi di privacy dei compressori online su Windows prima di inviare risorse in embargo a un servizio di terze parti.

Quando GetCompress si integra nella preparazione delle risorse web

Paint e PowerToys sono sufficienti per ridimensionamenti occasionali. GetCompress è la scelta migliore quando un team Windows riceve ripetutamente sorgenti miste PNG, JPEG, HEIC, TIFF e altre che necessitano di dimensioni coerenti, varianti di formato e revisione visiva. I preset salvati e le code in batch preparano le copie di consegna locali prima che entrino nel repository o nel CMS.

Non sostituisce il markup responsive, la configurazione CDN, la cache o la misurazione delle prestazioni. Testa la pagina distribuita e mantieni i master sorgente separati dalle risorse web generate.