{ "id": 37022, "slug": "2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni", "url": "https://agents.willem.com/it/posts/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/", "source_url": "https://willem.com/it/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/", "language": "it", "date": "2018-09-26", "published": "2018-09-26T00:00:00+02:00", "created": "2025-06-26T22:10:20.991000+02:00", "updated": "2026-10-20T09:19:12.822000+02:00", "title": "Ottimizzare le immagini per il web e le prestazioni", "subtitle": "Riduci le dimensioni dei file con jpegoptim, optipng, pngcrush e pngquant", "summary": "Un modo per rendere il tuo sito più veloce è renderlo più piccolo. Non con caratteri minuscoli, ma con meno byte! Più della metà del peso di un sito medio è dovuta alle immagini. Eppure pochissime persone ottimizzano le immagini per il web e per le prestazioni: è ora di scoprire quanti byte puoi risparmiare!", "topics": [ "cloud", "data", "howto", "networking", "programming", "server", "web", "webdesign", "work" ], "author": { "name": "Willem L. Middelkoop", "url": "https://willem.com" }, "provenance": { "kind": "model", "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary and hunspell", "date": "2026-10-20", "reviewed_by_native_reader": false, "language": "it", "source_language": "en" }, "translations": [ { "language": "en", "title": "Optimising images for the web and performance", "url": "https://agents.willem.com/en/posts/2018-09-26_optimising-images-for-the-web-and-performance/", "source_url": "https://willem.com/en/2018-09-26_optimising-images-for-the-web-and-performance/" }, { "language": "nl", "title": "Afbeeldingen optimaliseren voor web en performance", "url": "https://agents.willem.com/nl/posts/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/", "source_url": "https://willem.com/nl/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/" }, { "language": "de", "title": "Bilder für Web und Performance optimieren", "url": "https://agents.willem.com/de/posts/2018-09-26_bilder-fur-web-und-performance-optimieren/", "source_url": "https://willem.com/de/2018-09-26_bilder-fur-web-und-performance-optimieren/" }, { "language": "es", "title": "Optimización de imágenes para la web y el rendimiento", "url": "https://agents.willem.com/es/posts/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/", "source_url": "https://willem.com/es/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/" }, { "language": "fr", "title": "Optimiser les images pour le web et les performances", "url": "https://agents.willem.com/fr/posts/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/", "source_url": "https://willem.com/fr/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/" }, { "language": "pt", "title": "Otimizar imagens para a web e para o desempenho", "url": "https://agents.willem.com/pt/posts/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/", "source_url": "https://willem.com/pt/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/" }, { "language": "pap", "title": "Optimalisá imagen pa web i rendimentu", "url": "https://agents.willem.com/pap/posts/2018-09-26_optimalisa-imagen-pa-web-i-rendimentu/", "source_url": "https://willem.com/pap/2018-09-26_optimalisa-imagen-pa-web-i-rendimentu/" }, { "language": "fy", "title": "Ôfbyldings optimalisearje foar it web en prestaasje", "url": "https://agents.willem.com/fy/posts/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/", "source_url": "https://willem.com/fy/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/" } ], "image": "https://willem.com/global/images/c806bdb54964.webp", "image_width": 2560, "images": [ { "url": "https://willem.com/global/images/ec02ee9672ec.webp", "description": "Peso medio di una pagina web, suddiviso per tipo di risorsa (HttpArchive, settembre 2018)", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-1.jpg" }, { "url": "https://willem.com/global/images/e94033e684f1.webp", "description": "Le immagini bitmap sono come scacchiere, dove i pixel sono i quadrati", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-2.png" }, { "url": "https://willem.com/global/images/3640b9482061.webp", "description": "Una slide tipica su pace-cme.org", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-3.jpg" }, { "url": "https://willem.com/global/images/4c08bf11faa4.webp", "description": "Immagine di prova, con tinte unite, contenuto fotografico e testo", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-4.jpg" }, { "url": "https://willem.com/global/images/19c8b9866186.webp", "description": "Controllo della qualità: a sinistra l'originale, a destra pngquant", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-5.jpg" } ], "text": "Ottimizza il tuo sito\nSe ottimizzi il tuo sito, si carica più in fretta. Dato che a molte persone piacciono i siti veloci, motori di ricerca come Google hanno iniziato a misurare la velocità delle pagine per decidere la posizione del tuo sito nei risultati di ricerca.\nDimensione media di una pagina\nAnche se molti web designer si concentrano prima di tutto su HTML e script, la maggior parte del peso di un sito medio è fatta di immagini (Fonte HttpArchive (https://httparchive.org/reports/page-weight), peso delle pagine, settembre 2018).\nUn'ottimizzazione efficace delle immagini può quindi avere effetti incredibili sulla velocità del tuo sito.\nChe cos'è l'ottimizzazione delle immagini?\nUn'immagine digitale è come una scacchiera, un rettangolo di 8x8 quadrati bianchi e neri. Se salvassi la scacchiera senza compressione, dovresti annotare il colore di ogni quadrato singolarmente (“il quadrato uno è bianco, il due è nero, il tre è bianco, il cinque è nero, ecc.”). Servirebbero 64 righe per descrivere l'intera scacchiera: sarebbe preciso, ma non molto efficiente.\nOttimizzare un'immagine significa trovare modi più efficienti per descriverne i colori. Potresti descrivere l'intera scacchiera in una sola riga di testo: “alterna nero e bianco, comincia con il bianco”, o in modo ancora più efficiente: “ripeti bianco, nero”. Con le immagini digitali si chiama compressione: l'algoritmo cerca di individuare sequenze di colori che si ripetono.\nCi sono diversi algoritmi, ognuno con i suoi punti di forza e le sue debolezze. Alcuni funzionano meglio con le foto (con milioni di colori), altri con immagini con molti meno colori diversi (come una slide di PowerPoint). Scegliere l'algoritmo giusto è il tuo primo aumento di prestazioni.\nFormati di immagine comuni\n- JPG è un tipo di file immagine molto diffuso, con una compressione efficace per le immagini con tanti colori diversi, come le foto. Questo formato esiste dal 1992 ed è supportato quasi ovunque.\n- GIF è un altro vecchio tipo di file immagine, sviluppato nel 1987. È popolare perché supporta le animazioni. Tecnicamente è molto limitato: solo 256 colori diversi per immagine.\n- PNG è stato sviluppato nel 1994 per sostituire il GIF, per via delle polemiche sull'algoritmo di compressione del GIF. È popolare perché quasi tutti i dispositivi lo supportano e perché il PNG gestisce milioni di colori, trasparenza compresa. Permette una compressione senza perdita, che garantisce testi e linee nitidi, ed è quindi perfetto per grafici e loghi.\nDi recente Google (webP) e Apple (HEIF) hanno introdotto nuovi formati di immagine che offrono una compressione ancora migliore di JPG, GIF e PNG. Ma questi formati non sono ancora molto diffusi.\nScegliere il formato giusto\nIl formato migliore per la tua immagine dipende dal suo contenuto reale. Non esiste una regola universale che stabilisca il formato migliore per una data immagine. Il consiglio è di provare da solo e vedere che cosa succede alla dimensione del file se salvi l'immagine in formati diversi. Molti programmi desktop ti permettono di scegliere il formato quando selezioni “Salva con nome”.\nPuoi iniziare con JPG per le foto e PNG per le immagini con meno colori, come un logo, una grafica o una slide di PowerPoint. Formati come il JPG offrono diverse impostazioni di qualità della compressione che influiscono sulla qualità dell'immagine e sulla dimensione del file. Un'impostazione di qualità più bassa riduce la qualità dell'immagine a favore di un file più piccolo: prova a trovare il giusto equilibrio tra qualità e dimensione.\nCompressione con perdita e senza perdita\nGli algoritmi di compressione che sacrificano qualità in cambio di un file più piccolo si chiamano algoritmi di compressione con perdita (lossy). Gli algoritmi che mantengono la qualità originale dell'immagine si chiamano invece algoritmi di compressione senza perdita (lossless).\nCome ottimizzare le immagini\nUna volta che hai la tua immagine JPG o PNG, puoi ottimizzarla scegliendo le impostazioni giuste per l'algoritmo di compressione. Non preoccuparti, non devi farlo a mano: puoi usare un software di ottimizzazione automatica per trovare le impostazioni di compressione ideali per una data immagine.\nOttimizzare le immagini JPG\nSe usi Photoshop puoi usare la funzione integrata Salva per il Web per ottenere un'immagine JPG ottimizzata in modo ragionevole.\nIn alternativa puoi usare un'utilità da riga di comando come jpegoptim. Questo strumento riduce i file JPG ottimizzando le tabelle di Huffman interne, migliorando di fatto le prestazioni dell'algoritmo di compressione. In media puoi aspettarti un miglioramento del 10-15% senza perdita di qualità dell'immagine.\nUn altro modo di ottimizzare le immagini JPG è usare un ottimizzatore online, come TinyJPG (https://tinyjpg.com) o ImageOptim (https://imageoptim.com/api).\nSe usi WordPress, puoi prendere in considerazione un plugin che ottimizzi le immagini al posto tuo, come Imagify di xtremerain (https://www.xtremerain.com/imagify-advanced-optimization/).\nOttimizzare le immagini PNG\nI file PNG si possono ottimizzare con Photoshop usando la funzione Salva per il Web. Per ottimizzare ancora meglio i tuoi file PNG puoi usare un'app specializzata, come ImageAlpha (https://pngmini.com) per Mac o PNGGauntlet (https://pnggauntlet.com) per Windows.\nPer i file PNG esistono anche ottimizzatori online, come TinyPNG (https://tinypng.com) e Compressor.io (https://compressor.io).\nIn alternativa puoi usare programmi da riga di comando come optipng, pngcrush o pngquant. Vale la pena approfondire un po' questi strumenti per PNG.\nConfronto tra optipng, pngcrush e pngquant\nPer il mio lavoro di sviluppatore web integro l'ottimizzazione delle immagini nei sistemi di gestione dei contenuti, così che i miei clienti abbiano le loro immagini ottimizzate in automatico. Con la crescita significativa del numero di clienti ho avuto problemi di prestazioni.\nPer guadagnare prestazioni ho deciso di mettere alla prova optipng, pngcrush e pngquant. Speravo di trovare una buona ottimizzazione delle immagini con meno potenza di calcolo del server. Questo avrebbe migliorato le prestazioni per i miei clienti.\nPACE-CME\nUno di questi clienti è PACE-CME, un sito (https://pace-cme.org) con risorse di formazione cardiovascolare per i medici. Questo sito contiene migliaia di slide di PowerPoint salvate come file PNG.\nPer testare le prestazioni ho usato un'immagine di prova speciale, più grande e più pesante di una tipica slide di PowerPoint. È un'immagine ad alta risoluzione con contenuti misti, composta in parte da foto, testo e tinte unite.\nMetodo\nHo fatto i test su un server Intel XEON quad-core con 8GB di RAM. Per ogni strumento di ottimizzazione PNG ho usato sia le impostazioni più estreme (per vedere che cosa riesce a fare con la dimensione del file), sia quelle predefinite (per vedere quanto sono più veloci le impostazioni predefinite e come si confronta il risultato con le migliori impostazioni di compressione).\nRisultati\n- immagine di prova originale 2897KB\n- optipng estremo (-o7): 2510KB in 2 minuti e 36 secondi / predefinito: 2536KB in 4,9 secondi\n- pngcrush estremo (-brute): 2510KB in 1 minuto e 42 secondi / predefinito: 2531KB in 9,2 secondi\n- pngquant estremo (-s 1): 744KB in 5,2 secondi / predefinito: 746KB in 4,2 secondi\nLe prestazioni di pngquant sono incredibili: è molto più veloce e ottiene anche file molto più piccoli. Non è magia, però: usa un algoritmo di compressione diverso, con perdita. Questo significa che le immagini ottimizzate con pngquant perdono un po' di qualità. Le ho confrontate da vicino e non ho notato la differenza.\nConclusione\nOttimizzare le immagini per il web e per le prestazioni è davvero importante. Come hanno mostrato i miei test, scegliere l'algoritmo giusto può fare tutta la differenza.\nPer me ha significato scegliere pngquant, ma la tua decisione può essere diversa a seconda del tipo di immagini che vuoi ottimizzare.\nIl punto chiave di questo articolo è quindi: prenditi cura delle immagini. Il tuo sito sarà molto più veloce, e a chi non piace un sito veloce?", "word_count": 1247, "markdown_url": "https://agents.willem.com/it/posts/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/post.md" }