Come Ottimizzare le Immagini per il Web Usando Squoosh.app

Probabilmente sai già dell’ottimizzazione delle immagini.

È progettato per comprimere le foto sul tuo sito, così le pagine non si caricano a velocità glaciali.

Fino a ora, hai in qualche modo ignorato l’intera idea. Giusto — non fa una grande differenza fino a quando il tuo sito non è completamente formato.

Ma ora è arrivato il momento di agire. Il tuo acerrimo nemico… ehm, intendiamo… il tuo concorrente più vicino sta decisamente battendo il tuo sito nelle guerre delle prestazioni. È ora di reagire.

Squoosh è uno dei migliori strumenti a tua disposizione. È gratuito, open source e facile da usare.

In questa guida, vedremo come utilizzare Squoosh per comprimere immagini e ridurre i tempi di caricamento. Cominciamo!

Come Ottimizzare Immagini Con Squoosh in 30 Secondi

Andiamo subito al sodo.

Puoi iniziare ad ottimizzare le immagini per il tuo sito molto rapidamente.

Vai su https://squoosh.app.

Clicca sulla grande macchia rosa in cima alla pagina e seleziona l’immagine che desideri comprimere.

Accederai quindi a una schermata di anteprima, con un pannello delle impostazioni in basso a destra.

Qui, puoi scegliere di ridimensionare la tua immagine, ridurre la palette di colori, cambiare la qualità e selezionare il tipo di file di output preferito.

Sotto, un contatore ti indica quanto più piccolo sarà il tuo nuovo file.

Mentre selezioni le diverse opzioni, puoi spostare il cursore al centro dello schermo per vedere l’effetto sulla qualità dell’immagine. A sinistra c’è una vista ingrandita della tua immagine originale; a destra è presente un’anteprima della tua versione compressa.

Sembra buono? Scarica la tua immagine compressa toccando la macchia blu in basso a destra. È pronta per essere aggiunta al tuo sito web.

Boom, fatto.

Suggerimento Pro: Vuoi velocizzare le cose per la prossima immagine? Tocca la piccola icona “ingranaggio” nel pannello di controllo. Questo salverà le tue impostazioni attuali come un preset, che potrai caricare in seguito toccando l’altra icona dell’ingranaggio.

Conoscere Meglio Squoosh

Questa è la versione breve, ma c’è molto di più su Squoosh.

Questo strumento di compressione delle immagini open-source è stato effettivamente sviluppato dal team di Google. È disponibile sia come applicazione web che come componente aggiuntivo per Chrome.

Se ti senti tecnico, puoi anche scaricare Squoosh da GitHub ed eseguirlo offline tramite la riga di comando.

Squoosh supporta PNG, JPG, TIFF, GIF e molti altri formati. Ogni versione è gratuita e l’app gestisce la compressione localmente. Questo è una buona notizia per la privacy, perché le immagini non lasciano mai il tuo dispositivo.

Imparare A Usare Squoosh Come Un Professionista

Un’altra cosa fantastica di Squoosh è che offre un sacco di controllo. Devi solo sapere come navigare nel pannello di controllo.

Facciamo un breve tour.

Quando carichi per la prima volta un’immagine in Squoosh, vedrai solo quattro opzioni nel pannello di controllo:

Ridimensiona

Se stai pensando di usare un’immagine per una miniatura, non hai bisogno della piena risoluzione. Puoi attivare questo interruttore per cambiare la dimensione dell’immagine.

Inserisci il numero di pixel desiderato, ma lascia selezionate le opzioni predefinite a meno che non ci sia un motivo valido. Assicurati che “Mantieni Proporzioni” sia selezionato per evitare deformazioni!

Riduci la Palette

Molte immagini non contengono in realtà molti colori. Questa opzione ti permette di scartare le tonalità per ridurre la dimensione del file.

Quel cursore “Dithering”? Crea essenzialmente un pattern di rumore per mascherare la ridotta palette di colori.

Nota: Questa tecnica è più adatta per i design piuttosto che per le foto, poiché le foto potrebbero finire per sembrare fotocopie di scarsa qualità.

Formato

Sotto l’etichetta “Compress”, puoi selezionare un formato di output per la tua immagine. Le opzioni si dividono in due categorie principali.

• Lossy (ad esempio, JPG, GIF): Questi formati scartano piccolissime parti della tua immagine per risparmiare spazio. Generalmente non noterai la differenza, a meno che tu non desideri qualcosa con una risoluzione davvero alta.
• Lossless (ad esempio, PNG, AVIF): Al contrario, i formati lossless trovano modi per ridurre la dimensione del file senza influenzare la qualità della tua immagine.

Come regola generale, il formato lossy va bene per grafiche semplici, mentre il formato lossless è migliore per icone nitide e foto dettagliate.

Qualità

Se scegli un formato con perdita, vedrai anche questo cursore. Va da 0 (schiacciando completamente la tua immagine) a 100 (nessun cambiamento).

Prima di salvare la tua immagine, ti consigliamo di spostare questo cursore e osservare l’effetto nell’area di anteprima. Per ottenere un file piccolo e bello, sposta il cursore il più a sinistra possibile senza creare artefatti brutti.

Se stai convertendo in WebP, vedrai anche un cursore “Effort”. Questo controlla quanto accuratamente Squoosh analizzerà la tua immagine prima di decidere come applicare la compressione. Scegli un numero più alto se hai dettagli che vuoi mantenere.

Impostazioni Avanzate

A seconda del formato di output che selezioni, potresti avere accesso a più opzioni nella scheda “Impostazioni avanzate”.

A meno che tu non abbia un dottorato in modifica delle immagini, è meglio evitare queste impostazioni.

Consigli Rapidi Per Ottenere Di Più Da Squoosh

Nel complesso, Squoosh è molto facile da usare. E onestamente, la sezione sopra contiene tutto ciò che devi veramente sapere sull’applicazione.

Ma ti vediamo, lettore. Vuoi diventare un dio della compressione delle immagini, vero?

Ecco alcuni consigli professionali che ti aiuteranno a raggiungere quello status immortale.

• Trascina e rilascia: Non preoccuparti del menu dei file. Trascina direttamente la tua immagine in Squoosh.
• Conosci i tuoi formati: Usa WebP per i browser moderni, MozJPEG per le foto e OptiPNG per la grafica. Ricorda, AVIF è il nuovo arrivato; verifica quali browser possono gestirlo.
• La dimensione conta: Comprimi per la qualità, non solo per la dimensione del file. Se la tua immagine passa dall’aspetto di un capolavoro a un progetto artistico da asilo, fai un passo indietro e aggiusta quelle impostazioni.
• L’impegno conta: Aumenta quel cursore di impegno per PNG e WebP per sfruttare al massimo la dimensione del file senza impattare drasticamente sulla qualità. 
• “Riduci Palette” è tuo amico: Quanti colori diversi contiene la tua immagine? Se è abbastanza semplice, puoi risparmiare molto spazio spostando il cursore “Riduci Palette” verso sinistra.

Ricorda, ogni MB risparmiato significa meno tempo di attesa per i tuoi utenti!

Come Gestire le Immagini del Sito Web per Migliorare le Prestazioni

Sebbene Squoosh possa ridurre le tue immagini a una dimensione più gestibile, non è una soluzione universale.

Segui queste linee guida per assicurarti che le tue immagini compresse offrano l’incremento di prestazioni che stai cercando!

• Utilizza un CDN: Le reti di consegna dei contenuti (CDN) sono ottimizzate per i media e alleggeriscono il carico sui server del tuo host.
• Rifletti attentamente sui tipi di file: È facile rendere tutte le immagini uguali. Tuttavia, la scelta del file dovrebbe corrispondere alle esigenze di ciascuna immagine sul tuo sito.
• Rimuovi i metadati non necessari: La tua immagine ha davvero bisogno di portarsi dietro informazioni su posizione e fotocamera? Probabilmente no.
• Prova ad usare gli sprite: Invece di usare una grande immagine con un motivo ripetuto, potresti essere in grado di usare un piccolo sprite più volte. Questo potrebbe velocizzare davvero le cose!

Se sei curioso di scoprire tutti i modi in cui puoi implementare l’ottimizzazione delle immagini, il nostro blog è assolutamente ricco di tutorial utili. Ecco alcuni dei punti salienti:

• Addio, JPG: Ecco Come Ottimizzare le Immagini per il Web Moderno (WebP, SVG, e Altro)
• Come Risolvere 16 Problemi Comuni con le Immagini in WordPress
• Problemi Comuni di Caricamento delle Immagini in WordPress e Come Risolverli (5 Metodi)

Alternative a Squoosh: I Migliori Strumenti di Compressione delle Immagini

Squoosh è un ottimo punto di partenza per comprimere e ottimizzare le immagini per il tuo sito web. Tuttavia, ci sono altre opzioni disponibili:

• TinyPNG: Questa applicazione web comprime istantaneamente le immagini mantenendo una qualità impressionante. È gratuita per l’upload in batch di 20 immagini o meno; puoi sbloccare di più per $39 al mese.
• ShortPixel: Se possiedi un sito web WordPress, questo plugin ti permette di comprimere le immagini direttamente dalla tua area amministrativa. È gratuito per fino a 100 immagini al mese.
• ImageOptim: Perfetto per i possessori di Mac. Questa applicazione open-source ti permette di comprimere batch di immagini sul tuo computer. Ed è completamente gratuita!
• Kraken.io: Questo potente strumento di compressione delle immagini funziona in modo simile a Squoosh, sebbene senza la bella anteprima visiva. Ah, ed è gratuito solo per file fino a 1MB di dimensione.
• JPEGmini: Lavori con molte foto di alta qualità? Con un semplice trascina e rilascia, questa applicazione per desktop ti permette di ridurre la dimensione dei file JPG fino all’80%.

Fai Funzionare Il Tuo Sito Più Fluidamente Oggi

Ottimizzare le immagini è una seccatura. Ma vale la pena quando le tue pagine si caricano alla velocità della luce. Inoltre, non è troppo faticoso quando hai a disposizione uno strumento come Squoosh.

Certo, le immagini non sono l’unica causa di caricamento lento delle pagine. Il tuo piano di hosting potrebbe essere il colpevole.

Vuoi qualcosa che offra prestazioni più affidabili? Da DreamHost, tutti i nostri piani includono una garanzia di uptime del 100% e larghezza di banda illimitata. Ciò significa che il tuo sito non vacillerà sotto pressione.

Vuoi provare? Iscriviti oggi per sentire la differenza!