Le immagini rappresentano in media il 50-70% del peso totale<\/strong> di una pagina web. Un sito WordPress<\/a> con immagini non ottimizzate carica pi\u00f9 lentamente, consuma pi\u00f9 banda e penalizza i Core Web Vitals<\/strong>, in particolare il Largest Contentful Paint (LCP). In questa guida ti mostro come ottimizzare le immagini del tuo sito usando formati moderni, compressione intelligente e lazy loading.<\/p>\n Quando carichi un’immagine nella libreria media di WordPress, il sistema genera automaticamente diverse dimensioni (thumbnail, medium, large, full). Ma non applica compressione aggressiva n\u00e9 converte in formati moderni. Il risultato sono pagine con megabyte di immagini<\/strong> in formato JPEG o PNG non ottimizzato.<\/p>\n I problemi pi\u00f9 comuni:<\/p>\n I formati di immagine moderni offrono una compressione molto superiore ai tradizionali JPEG e PNG:<\/p>\n WebP<\/strong> (sviluppato da Google):<\/p>\n AVIF<\/strong> (basato su AV1):<\/p>\n La strategia ideale \u00e8 servire AVIF ai browser che lo supportano<\/strong>, WebP come fallback e JPEG\/PNG per i browser pi\u00f9 vecchi.<\/p>\n Convertire manualmente ogni immagine sarebbe impraticabile. Ecco i migliori plugin che lo fanno automaticamente:<\/p>\n ShortPixel Image Optimizer:<\/strong><\/p>\n Imagify:<\/strong><\/p>\n EWWW Image Optimizer:<\/strong><\/p>\n Il lazy loading<\/strong> ritarda il caricamento delle immagini che non sono visibili nella viewport del browser. Quando l’utente scorre la pagina, le immagini vengono caricate man mano che entrano nel campo visivo.<\/p>\n A partire da WordPress 5.5, il lazy loading nativo \u00e8 attivo di default tramite l’attributo loading=”lazy”<\/span> aggiunto automaticamente alle immagini. Questo funziona bene per la maggior parte dei casi.<\/p>\n Attenzione al LCP:<\/strong> l’immagine principale della pagina (hero image, immagine in evidenza) non dovrebbe avere lazy loading<\/strong> perch\u00e9 \u00e8 l’elemento LCP. Se viene caricata in ritardo, il punteggio LCP peggiora. WordPress dalla versione 6.3 esclude automaticamente la prima immagine dal lazy loading, ma verifica che sia cos\u00ec nel tuo tema.<\/p>\n La compressione non basta se carichi immagini con dimensioni eccessive. Una foto da 5000×4000 pixel compressa in WebP resta comunque troppo grande se viene mostrata a 800×600.<\/p>\n Regola pratica:<\/strong> l’immagine non dovrebbe mai essere pi\u00f9 larga del doppio della dimensione di visualizzazione. Se il tuo contenuto \u00e8 largo 800 pixel, carica immagini da massimo 1600 pixel di larghezza (per supportare schermi Retina).<\/p>\n Puoi configurare WordPress per limitare automaticamente la dimensione massima. Aggiungi a functions.php<\/span>:<\/p>\n Questo ridimensiona automaticamente le immagini pi\u00f9 larghe di 2048 pixel al caricamento.<\/p>\n Se hai un sito con migliaia di immagini non ottimizzate, puoi ottimizzarle in massa:<\/p>\n Nota:<\/strong> su siti con migliaia di immagini, l’ottimizzazione in massa pu\u00f2 richiedere ore e consumare risorse del server. Eseguila in orari di basso traffico.<\/p>\n Dopo aver generato le versioni WebP e AVIF, devi configurare il server per servirle ai browser compatibili. I plugin lo fanno automaticamente in due modi:<\/p>\n Il metodo .htaccess \u00e8 pi\u00f9 efficiente perch\u00e9 funziona anche con le immagini nel CSS e non modifica l’HTML.<\/p>\n Ottimizzare le immagini di un sito WordPress con migliaia di file richiede tempo e configurazione corretta. Se vuoi migliorare le prestazioni del tuo sito senza rischiare problemi di qualit\u00e0 visiva, il team di SoccorsoWP<\/a><\/strong> pu\u00f2 occuparsi di tutto. Apri un ticket<\/a> e velocizza il tuo sito.<\/p>\n","protected":false},"excerpt":{"rendered":" Come ottimizzare le immagini WordPress: formati WebP, AVIF e lazy loading Le immagini rappresentano in media il 50-70% del peso totale di una pagina web….<\/p>\n","protected":false},"author":1,"featured_media":25914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Ottimizzare immagini WordPress: WebP, AVIF e lazy loading","_seopress_titles_desc":"Come ottimizzare le immagini WordPress con formati WebP e AVIF, compressione automatica, lazy loading e ridimensionamento. Guida completa.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","footnotes":""},"categories":[1699],"tags":[],"class_list":["post-25913","post","type-post","status-publish","format-standard","has-post-thumbnail","category-performance-e-ottimizzazione"],"_links":{"self":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts\/25913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/comments?post=25913"}],"version-history":[{"count":0,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts\/25913\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/media\/25914"}],"wp:attachment":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/media?parent=25913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/categories?post=25913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/tags?post=25913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Perch\u00e9 le immagini rallentano WordPress<\/h2>\n
\n
Formati moderni: WebP e AVIF<\/h2>\n
\n
\n
Plugin per la conversione automatica<\/h2>\n
\n
\n
\n
Lazy loading: caricare solo il necessario<\/h2>\n
Ridimensionare le immagini prima del caricamento<\/h2>\n
add_filter('big_image_size_threshold', function() { return 2048; });<\/pre>\nOttimizzare le immagini gi\u00e0 caricate<\/h2>\n
\n
Servire le immagini WebP\/AVIF<\/h2>\n
\n
Serve assistenza?<\/h2>\n