Sommario<\/p>\nToggle<\/span>

Cosa si intende per immagini ridimensionate<\/a><\/li>
Inserire immagini scalate<\/a><\/li>
Come fornire immagini scalate in WordPress<\/a><\/li>
Ritagliare le immagini nella Libreria Media<\/a><\/li>
Scalare o ritagliare le immagini per le dimensioni definite dal tuo tema grafico<\/a><\/li>
Modificare all’interno di articoli o pagine<\/a><\/li>
Modificare i file con Paint<\/a><\/li>
Comprimere le immagini<\/a><\/li>
Approfondimenti<\/a><\/li><\/ul><\/nav><\/div>\n\n
L\u2019ottimizzazione delle immagini, \u00e8 uno dei lavori meno considerati quando si pensa a come migliorare le prestazioni di un sito. Al contrario le immagini dovrebbero essere il primo pensiero per ottimizzare l’efficienza di un sito.<\/p>\n\n\n\n
In questo articolo descrivo le operazioni per ridimensionare e scalare le immagini in WordPress dopo averne fatto l’upload..
Volendo queste attivit\u00e0 possono essere fatte prima di caricare le immagini con lo strumento preferito di editing delle immagini.<\/p>\n\n\n\n
<\/span>Cosa si intende per immagini ridimensionate<\/span><\/h2>\n\n\n\n
Le immagini per il web non devono essere troppo grandi, ma neanche troppo piccole. Devono essere giuste.<\/p>\n\n\n\n
Se sono troppo piccole, come quantit\u00e0 di pixel, una volta ridimensionate, risulteranno sfocate. Peggio ancora se si ridimensionano le immagini con l\u2019attributo HTML width, <\/em>lasciando inalterata la dimensione originale.<\/p>\n\n\n\n
Se l\u2019immagine \u00e8 troppo grande, il browser la riduce alla giusta dimensione. Questo non influisce sull\u2019aspetto dell\u2019immagine, ma siccome la sua dimensione, anche se ridotta dal browser, resta quella originale, va ad aumentare il peso globale della pagina.<\/p>\n\n\n\n
Poich\u00e9 non si vedono differenze nella qualit\u00e0 dell\u2019immagine, \u00e8 facile sovraccaricare una pagina con peso extra dovuto ad immagini non ottimizzate. E dato che molti non si rendono conto del problema, non lo risolvono, confidando sulle capacit\u00e0 del browser di fornire immagini della dimensione giusta. <\/p>\n\n\n\n
Lo scopo del browser, per\u00f2, non \u00e8 perdere tempo per calcolare e ricalcolare la dimensione delle immagini per ridimensionarle alla grandezza giusta per il loro contenitore. Il suo scopo \u00e8 presentare una pagina nel miglior modo e nel minor tempo possibile.<\/p>\n\n\n\n
Fornire un\u2019immagine troppo grande causa diversi inconvenienti:<\/p>\n\n\n\n
- un sito lento non piace ai robot di indicizzazione delle pagine (SEO).<\/li><\/ul>\n\n\n\n
  <\/span>Inserire immagini scalate <\/span><\/h2>\n\n\n\n
  Un\u2019immagine scalata \u00e8 un\u2019immagine che \u00e8 stata ridimensionata per entrare esattamente nell\u2019area in cui la si vuole inserire.<\/p>\n\n\n\n
  Al contrario del ritaglio. che pu\u00f2 alterare le proporzioni di un\u2019immagine, il ridimensionamento di un\u2019immagine ne preserva le proporzioni.<\/p>\n\n\n\n
  Se leggi questo articolo su uno schermo di grandi dimensioni, la larghezza di questo articolo \u00e8 640px.<\/p>\n\n\n\n
  Siccome per chi scrive articoli per la community l\u2019ottimizzazione delle immagini ha la sua importanza, quando si creano le immagini per gli articoli, queste hanno la dimensione esatta, o non superiore, alla dimensione del loro contenitore e quindi non pi\u00f9 grandi di 640px in larghezza. Almeno, cos\u00ec si spera!<\/p>\n\n\n\n
  Questa \u00e8 la dimensione esatta che non richiede al browser lavoro aggiuntivo, e chi visualizza l\u2019articolo risparmia dati, altrimenti sprecati inutilmente per caricare un’immagine che tanto nessuno vedr\u00e0 a quella dimensione. <\/p>\n\n\n\n
  Gli sviluppatori possono utilizzare gli attributi HTML per fornire immagini meglio scalate e ottimizzate come gli attributi srcset<\/em>, size <\/em>e gli attributi width<\/em> e hight<\/em>. Ma anche questi per lavorare al meglio richiedono immagini ottimizzate e non con dimensioni messe l\u00ec a caso. Ma questa \u00e8 un’altra storia.<\/p>\n\n\n\n
  <\/span>Come fornire immagini scalate in WordPress<\/span><\/h2>\n\n\n\n
  Per avere immagini correttamente dimensionate, come prima cosa devi conoscere quali sono le dimensioni delle immagini da usare nel tuo sito. <\/p>\n\n\n\n
  \u00c8 necessario sapere quel \u00e8 la dimensione massima in cui ogni immagine viene mostrata, poich\u00e9 sappiamo che una dimensione superiore a questo limite \u00e8 inutile.<\/p>\n\n\n\n
  Supponi di voler inserire una bella foto nella home page del tuo sito o articolo. L\u2019immagine \u00e8 cos\u00ec come l\u2019ho scattata 5312px x 2988px, l’ho solo rinominata con un nome significativo, cosa che deve sempre essere fatta soprattutto quando il nome originale \u00e8 composto da quelle lunghe stringhe di numeri che non dicono molto sulla natura dell’immagine.<\/p>\n\n\n\n
  $\"\"$ <\/figure>\n\n\n\n
  Non ho ancora fatto nulla per ottimizzare l\u2019immagine, ed \u00e8 veramente una foto gigantesca!<\/p>\n\n\n\n
  Per un’immagine da inserire all\u2019interno di un articolo, probabilmente avrai bisogno di un\u2019immagine la cui larghezza sia compresa tra 600px e 960px. Altre immagini possono essere molto pi\u00f9 grandi o pi\u00f9 piccole a seconda dell\u2019uso che se ne deve fare.<\/p>\n\n\n\n
  Senza considerare la necessit\u00e0 degli schermi retina, quelli dei dispositivi Apple, per capirci. Questi schermi richiedono di raddoppiare la dimensione dell\u2019immagine, pertanto un\u2019immagine di 1800px, se la si vuole visualizzare correttamente su uno schermo retiina, deve avere una dimensione di 3600px.<\/p>\n\n\n\n
  Per trovare la dimensione utile per l\u2019immagine da inserire correttamente, cerchiamo un\u2019immagine gi\u00e0 pubblicata sul sito e apriamo gli strumenti di sviluppo del browser.<\/p>\n\n\n\n
  Se utilizzi Chrome, fai click destro sull\u2019immagine e sul menu contestuale vai alla voce Ispeziona<\/em><\/p>\n\n\n\n
  $\"\"$ <\/figure>\n\n\n\n
  In Chrome quando passi sull\u2019immagine con il mouse, vedi la dimensione a cui l\u2019immagine \u00e8 mostrata, con la dimensione originale tra parentesi (intrinsic). Quella \u00e8 la dimensione dell\u2019immagine che i visitatori scaricano quando visualizzano la pagina.<\/p>\n\n\n\n
  $\"\"$ <\/figure>\n\n\n\n
  L\u2019immagine reale \u00e8 un po\u2019 pi\u00f9 grande di quanto necessario, 400px. Sono pochi pixel, ma sempre un spreco. Immagina se anzich\u00e9 essere pi\u00f9 grande di pochi pixel, la dimensione da scaricare fosse qualche mega byte di troppo.
  Sembra strano eppure succede pi\u00f9 di quanto non si creda. Anche io spesso, pur se di pochi pixel,, lascio un po\u2019 pi\u00f9 grandi le mie immagini. <\/p>\n\n\n\n
  Firefox e Opera lavorano allo stesso modo, al click destro del mouse si deve cercare la voce Ispeziona elemento<\/em> in Opera mentre in Firefox la voce \u00e8 Analizza elemento<\/em>. Le informazioni sull\u2019immagine appaiono nello stesso modo.<\/p>\n\n\n\n
  Questo ci dice la dimensione dell\u2019immagine che ci serve. Ora che sappiamo quale deve essere la dimensione dell\u2019immagine, possiamo modificarla. <\/p>\n\n\n\n
  WordPress ci offre diverse possibilit\u00e0 per ridimensionare correttamente le immagini.<\/p>\n\n\n\n
  <\/span>Ritagliare le immagini nella Libreria Media<\/span><\/h2>\n\n\n\n
  Per ritagliare un\u2019immagine, vai su Media > Libr<\/em>eria e fai click sull\u2019immagine che devi ritagliare. Ora fai click sul bottone Modifica immagine<\/em>.<\/p>\n\n\n\n
  $\"\"$ <\/figure>\n\n\n\n
  Scala e\/o ritaglia l\u2019immagine utilizzando le opzioni che trovi sulla destra. Ricorda che se scali l\u2019immagine per la larghezza necessaria, l\u2019altezza potrebbe essere pi\u00f9 corta o pi\u00f9 lunga della dimensione definita nel tema grafico in uso in relazione alle dimensioni dell\u2019immagine originale.<\/p>\n\n\n\n
  Se decidi di scalare l\u2019immagine, questa resta nella giusta proporzione in relazione a quella dell\u2019immagine originale. <\/p>\n\n\n\n
  Se invece decidi di ritagliare l\u2019immagine, questa potrebbe non essere pi\u00f9 proporzionata correttamente in base alle dimensioni che hai scelto.<\/p>\n\n\n\n
  Puoi scalare l\u2019immagine inserendo le misure di larghezza e altezza desiderate, nelle caselle sotto la voce Scala l\u2019immagine<\/em> e poi facendo click su Ridimensiona<\/em>.<\/p>\n\n\n\n
  Se invece preferisci ritagliare l\u2019immagine puoi farlo cliccando sull\u2019immagine e trascinando il mouse sull\u2019immagine fino a raggiungere le dimensioni desiderate. Rilascia il mouse e vedrai l\u2019area selezionata.<\/p>\n\n\n\n
  Puoi fare click sui quadratini della selezione per ridimensionare la selezione alla larghezza e altezza necessari. Puoi vedere le variazioni del ridimensionamento della selezione nel riquadro a destra sotto la voce Selezione<\/em>. In alternativa puoi inserire nei due campi larghezza e altezza le dimensioni esatte per la larghezza e per l’altezza.<\/p>\n\n\n\n
  Hai anche la possibilit\u00e0 di inserire il Rapporto dimensioni <\/em>(aspect ratio) che preferisci per l\u2019immagine.<\/p>\n\n\n\n
  Il rapporto dimensioni \u00e8 la proporzione fra la larghezza e l\u2019altezza. Puoi preservare questa proporzione tenendo premuto il tasto maiuscolo mentre ridimensioni la tua selezione. Utilizza il campo di input per specificare la proporzione, ad esempio 1:1 (quadrata), 4:3, 16:9, ecc. <\/em><\/p><\/blockquote>\n\n\n\n
  Quando la selezione \u00e8 attiva, la puoi spostare nell\u2019area dell\u2019immagine che vuoi preservare per la pubblicazione.<\/p>\n\n\n\n
  Se vuoi ritagliare la selezione che hai definito per la tua immagine, devi fare click sull\u2019icona Ritaglio<\/em> in alto a sinistra dell\u2019immagine<\/p>\n\n\n\n
  $\"\"$ <\/figure>\n\n\n\n
  <\/span>Scalare o ritagliare le immagini per le dimensioni definite dal tuo tema grafico<\/span><\/h2>\n\n\n\n
  Dopo aver scalato e\/o ritagliato l\u2019immagine, puoi scegliere a quale misura predefinita dell\u2019immagine vuoi applicare i tuoi cambiamenti, selezionando le opzioni di Impostazioni miniatura,<\/em> che trovi in basso sulla destra dello schermo.<\/p>\n\n\n\n
  Questa opzione pu\u00f2 essere utile se vuoi modificare l\u2019immagine ma mantenere intatta la miniatura.<\/p>\n\n\n\n
  Quando hai terminato le modifiche non dimenticare di fare click sul pulsante Salva<\/strong>.<\/p>\n\n\n\n
  <\/span>Modificare all’interno di articoli o pagine<\/span><\/h2>\n\n\n\n
  Le immagini possono essere modificate anche quando si sta lavorando su un articolo o pagina. <\/p>\n\n\n\n
  Seleziona l\u2019immagine da modificare; <\/li>
  fai click sul pulsante Modifica; <\/li>
  ora sei nella libreria Media con l\u2019immagine da modificare attiva;<\/li>
  fai click sul pulsante modifica e ti troverai nell\u2019interfaccia descritta nei paragrafi precedenti.<\/li><\/ol>\n\n\n\n
  $\"\"$ <\/figure>\n\n\n\n
  Puoi\nanche modificare un\u2019immagine cliccando su di essa direttamente\ndalla libreria media.<\/p>\n\n\n\n
  <\/span>Modificare i file con Paint<\/span><\/h2>\n\n\n\n
  Lo strumento Paint presente nei sistemi Windows dalla versione 7 in poi, consente di modificare le immagini in modo semplice ed efficace. <\/p>\n\n\n\n
  $\"\"$ <\/figure>\n\n\n\n
  In Paint vai sul pulsante ridimensione. Si apre un box che permette di inserire le nuove dimensioni. Seleziona il pulsante pixel <\/em>e inserisci le dimensioni orizzontali, quelle che hai trovato utilizzando il comando ispeziona elemento<\/em>. Se il pulsante Mantieni proporzioni \u00e8 selezionato, le dimensioni verticali si inseriscono in automatico.<\/p>\n\n\n\n
  Puoi anche modificare selezionando l’opzione in percentuale.<\/p>\n\n\n\n
  Quando hai terminato fai click su ok, e salva il file. Ora puoi ricaricare il file in WordPress per rimpiazzare la vecchia immagine con la nuova. Ricorda di cancellare l\u2019immagine che non ti serve<\/strong>, altrimenti avrai immagini nella libreria media che occupano spazio sul server ma che non sono di alcuna utilit\u00e0.<\/p>\n\n\n\n
  <\/span>Comprimere le immagini<\/span><\/h2>\n\n\n\n
  Quando hai scalato e ritagliato la tua immagine, non devi dimenticare di comprimerla. <\/p>\n\n\n\n
  La compressione pu\u00f2 far risparmiare anche oltre il 50%. Guarda i numeri delle immagini di questo articolo prima e dopo la compressione. Un bel risparmio!<\/p>\n\n\n\n
  $\"\"$ <\/figure>\n\n\n\n
  Per la compressione ti consiglio il servizio online Tinypng<\/a>.<\/p>\n\n\n\n
  <\/span>Approfondimenti<\/span><\/h2>\n\n\n\n
  Gli articoli suggeriti come approfondimento sono stati pubblicati prima dell’aggiornamento di WordPress alla versione 5.0 e al nuovo editor Gutenberg<\/a>, Alcune funzioni descritte in questi articoli hanno variazioni minime rispetto a quelle illustrate qui, e forse neanche ci farai caso, dato che nella nuova versione di WordPress e del nuovo editor, queste sono state semplificate. <\/p>\n\n\n\n
  Ottimizzare le immagini per il web<\/a><\/li>
  Strumenti di WordPress per le immagini<\/a><\/li>
  Immagini e sicurezza<\/a><\/li><\/ul>\n\n\n\n
  Leggili perch\u00e9 troverai molte informazioni che riguardano le immagini e molti consigli su diversi servizi online necessari per la compressione ed elaborazione delle immagini.<\/p>\n\n\n\n
  Se hai suggerimenti o risorse che vuoi farci conoscere, puoi farlo utilizzando il modulo dei commenti.<\/p>\n","protected":false},"excerpt":{"rendered":"
  L\u2019ottimizzazione delle immagini, \u00e8 uno dei lavori meno considerati quando si pensa a come migliorare le prestazioni di un sito. <\/p>\n","protected":false},"author":2,"featured_media":54724,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1319],"tags":[7,963,900],"class_list":["post-54713","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-supporto","tag-immagini","tag-ottimizzare","tag-web"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/posts\/54713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/comments?post=54713"}],"version-history":[{"count":0,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/posts\/54713\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/media\/54724"}],"wp:attachment":[{"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/media?parent=54713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/categories?post=54713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preverprova.it\/comprever\/wp-json\/wp\/v2\/tags?post=54713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}