In precedenti articoli del nostro Blog abbiamo affrontato singolarmente i diversi aspetti sopra indicati, ma in questo post li terremo in considerazione tutti insieme.<\/p>\n\n\n\n
La cosa migliore \u00e8 ovviamente ottimizzare le immagini con degli strumenti gratuiti e facili da utilizzare, senza diventare necessariamente esperti di Photoshop. Per la realizzazione di questo articolo abbiamo modificato la maggior parte delle immagini usando la versione gratuita di Pixlr che \u00e8 uno strumento fantastico per la modifica basilare delle foto.<\/p>\n\n\n\n
Se sei interessata\/o ad altri strumenti, non puoi assolutamente perderti questo altro articolo “Le alternative a Photoshop”<\/a>. <\/p>\n\n\n\n Siti che raccolgono immagini:<\/strong> non devi per forza essere un fotografo professionista per usare foto sbalorditive. Ci sono sempre pi\u00f9 siti che offrono raccolte di foto di alta qualit\u00e0 facilmente scaricabili a titolo gratuito per usi commerciali. Condividiamo con te una lista dei nostri preferiti:<\/p>\n\n\n\n Quando scarichi un\u2019immagine da uno di questi siti, si tratter\u00e0 probabilmente di un file JPEG molto grande. La sua ottimizzazione richiede una riduzione della grandezza e il caricamento di un file pi\u00f9 piccolo. Meglio evitare invece file di piccole dimensioni perch\u00e9 l\u2019ingrandimento pregiudicherebbe la qualit\u00e0 dell\u2019immagine.<\/p>\n\n\n\n Usa le immagini migliori:<\/strong> certamente non puoi usare raccolte di foto per ogni occasione. Basti pensare a quando ti servono immagini del tuo team oppure dei prodotti che vuoi vendere. Se vuoi fotografare i tuoi articoli, ecco qua qualche semplice trucco <\/a>per degli scatti ben illuminati e professionali, in questo modo non dovrai per forza acquistare della costosissima attrezzatura fotografica!<\/p>\n\n\n\n Grafica:<\/strong>\u00a0se stai cercando qualcosa che sia pi\u00f9 orientato verso lo stile grafico, esistono ormai tantissimi strumenti che puoi utilizzare per creare delle infografiche o per inserire delle scritte sulle foto. Ti suggeriamo di utilizzare Canva<\/a>\u00a0e PiktoChart<\/a>. <\/p>\n\n\n\n Logo: <\/strong>se stai cercando uno strumento gratuito per creare il tuo logo, ti consigliamo di usare il Logo Creator di Jimdo. <\/p>\n\n\n\n Avendo a che fare con immagini, ti imbatterai la maggior parte delle volte in file JPEG (o JPG) o PNG. Entrambe le tipologie hanno diversi pro e contro, puoi tenere a mente giusto i seguenti:<\/p>\n\n\n\n Che fare se vuoi inserire nel sito una foto sulla quale \u00e8 impressa una scritta?<\/p>\n\n\n\n In questo caso \u00e8 meglio optare per il formato JPEG. Molti programmi per la modifica delle foto lasciano la possibilit\u00e0 di scegliere tra JPG o PNG cliccando su \u201cSalva come\u201d, \u201cEsporta\u201d, o \u201cSalva per il web\u201d.<\/p>\n\n\n\n Esistono anche degli strumenti online gratuiti (come ad esempio Zamzar) che permettono la conversione del file.<\/p>\n\n\n\n Puoi convertire un file PNG in JPEG senza problemi, ma attenzione alla qualit\u00e0 dell\u2019immagine nel passaggio dal formato JPEG a PNG. Se disponi del tuo logo solamente in JPG, meglio rivolgerti a un graphic designer di fiducia per la realizzazione di un\u2019immagine direttamente in formato PNG.<\/p>\n\n\n\n Quando si ha a che fare con immagini per il web, la cosa pi\u00f9 importante \u00e8 trovare il giusto equilibrio tra dimensione e risoluzione. Pi\u00f9 \u00e8 alta la risoluzione, pi\u00f9 grande sar\u00e0 la dimensione del file. Nel mondo della stampa l\u2019alta risoluzione \u00e8 un valore positivo. Nell\u2019universo web invece immagini grandi possono rallentare notevolmente la velocit\u00e0 di caricamento delle pagine. Ci\u00f2 va a discapito della qualit\u00e0 della navigazione dei tuoi visitatori e dell\u2019indicizzazione del sito. Immagini grandi e tempi di caricamento lento sono particolarmente fastidiose per chi visita le pagine web da un dispositivo mobile.<\/p>\n\n\n\n In certi casi vorresti usare una foto molto grande per il tuo sito, ad esempio per personalizzare lo sfondo. Se usi una foto con una bassa qualit\u00e0 e cerchi d\u2019ingrandirla, potrebbe risultare sfocata. Come raggiungere quindi il giusto equilibrio tra dimensione e qualit\u00e0? Prima di tutto \u00e8 necessario capire che, quando si parla d\u2019immagini, il termine \u201cdimensioni\u201d \u00e8 relativo. Se volessi stampare un\u2019immagine, avresti bisogno di una dimensione molto pi\u00f9 grande di quella necessaria per caricare la stessa immagine sul web.<\/p>\n\n\n\n Potrebbe essere un po\u2019 complicato capire alcuni concetti, allora ecco qua una breve panoramica dei tre maggiori aspetti che definiscono le dimensioni di un\u2019immagine:<\/p>\n\n\n\n Dove trovare la grandezza del file, dell\u2019immagine e la sua risoluzione?<\/strong><\/p>\n\n\n\n Puoi trovare le grandezze del file e dell\u2019immagine direttamente sul tuo computer. Se usi un PC, clicca il tasto destro sul file, seleziona \u201cPropriet\u00e0\u201d e poi il \u201cSommario\u201d.<\/p>\n\n\n\n Su un Mac premi Ctrl e clicca sul file selezionando poi la voce \u201cInformazioni\/Get info\u201d. Scoprire la risoluzione richiede un software pi\u00f9 avanzato come ad esempio Photoshop, ma molti programmi per la modifica basilare di immagini le salveranno automaticamente in un dpi basso e compatibile col web (Pixlr in 72dpi e Canva in 92dpi, basta optare per la voce \u201cSalva per il web\u201d).<\/p>\n\n\n\n Qualche prezioso trucco per ottimizzare le immagini<\/strong><\/p>\n\n\n\n Ora che conosci le varie accezioni del termine \u201cdimensione\u201d, segui questo pugno di regole per una perfetta ottimizzazione:<\/p>\n\n\n\n Immaginiamo che tu possegga una meravigliosa camera digitale e che voglia passare gran parte del tempo a scattare foto grandi diversi megabytes: si tratterebbe di dimensioni decisamente sproporzionate per il web. I siti che raccolgono foto ad alta qualit\u00e0 tendono ad offrire immagini contenute in file di grandi dimensioni.<\/p>\n\n\n\n Se la tua immagine supera 1MB, ecco qualche consiglio su come procedere:<\/p>\n\n\n\n Le immagini del sito appariranno molto meglio se userai sempre lo stesso stile e grandezza\/proporzioni. Questa \u201ccoerenza\u201d grafica ti aiuter\u00e0 notevolmente anche nell\u2019allineamento del testo, delle colonne e di tutte le informazioni sulle pagine web.<\/p>\n\n\n\n Per capire che intendiamo, dai uno sguardo agli esempi che seguono.<\/p>\n\n\n\n Nel primo, preso dal sito \u201cMake-Believe Coffee\u201d, le foto hanno grandezze differenti. Una \u00e8 orientata in senso verticale e le altre in orizzontale. Ci\u00f2 fa apparire la pagina come dominata dal caos.<\/p>\n\n\n\n Nell\u2019esempio successivo ho usato Pixlr per ritagliare le foto e renderle uniformi a 1000×70 pixels.<\/p>\n\n\n\n La foto superiore della tazza bianca col cappuccino fumante mi \u00e8 sembrata a quel punto troppo diversa dalle altre e l\u2019ho quindi sostituita con un\u2019altra pi\u00f9 simile nello stile e nei colori alle altre due immagini. Ho poi sperimentato gli effetti di Pixlr e aggiunto un filtro sottile su ogni foto (simile a quelli che si trovano su Instagram) per rendere conforme l\u2019aspetto di tutte le immagini. Infine le ho caricate tutte sul mio sito inserendole in colonne per ottenere una struttura grafica pi\u00f9 pulita e ordinata.<\/p>\n\n\n\n Visto che le foto sono tutte della stessa grandezza e orientate verso la medesima direzione (verticale) si adattano perfettamente all\u2019interno di una colonna, permettendomi di inserire il testo nella seconda senza altri noiosi accorgimenti!<\/p>\n\n\n\n Ora che le tue immagini sono state ridimensionate e hanno un aspetto magnifico, come ottimizzarle per i motori di ricerca?<\/p>\n\n\n\n Moltissime persone caricano immagini come elementi foto e poi dimenticano di compilare le parti relative alle informazioni aggiuntive. Caption e Alternative Text sono fondamentali per rinominare le immagini e quindi cruciali per la SEO del tuo sito. <\/p>\n\n\n\n Di solito non si presta attenzione al nome attribuito al file. Potrebbe apparire privo d’importanza intitolare un’immagine \u201cPhoto1.jpg\u201d o \u201cScreen Shot 2017-06-02 at 3.41.15 PM\u201d. Prendi qualche minuto per rinominare le immagini prima di caricarle sul sito.<\/p>\n\n\n\n Perch\u00e9? Perch\u00e9 facendo ci\u00f2 darai una spinta incredibile all\u2019ottimizzazione (SEO) delle tue pagine. Prova a ragionare in questo modo: Google analizza il tuo sito, ma pu\u00f2 leggere solo testi e non vedere le immagini. I nomi dei file danno delle informazioni sul contenuto dell\u2019immagine e da essi dipende la corretta interpretazione di Google (pensa alla differenza tra un file che si chiama eiffel-tower.jpg piuttosto che DSC12345.jpg).<\/p>\n\n\n\n Sui siti Jimdo le immagini vengono automaticamente rinominate per accordarsi all\u2019alternative Text, usando trattini alti al posto degli spazi. Ci\u00f2 vuol dire che non dovrai rinominare tutti i file d\u2019immagini sul sito, ma semplicemente aggiornare l\u2019alternative text.<\/p>\n\n\n\n Il titolo del file diventa inoltre parte dell\u2019URL dell\u2019immagine, quindi attribuirgli un nome in una lingua esistente e comprensibile rende l\u2019indirizzo dell\u2019immagine stessa pi\u00f9 facile da raggiungere e da interpretare.<\/p>\n\n\n\n Gli Alt tags (o alternative text) non saranno visibili ai visitatori, ma daranno ai motori di ricerca delle informazioni fondamentali sul contenuto di ogni singola immagine. Perci\u00f2 appena aver caricato un elemento grafico, accertati di compilare il campo dell\u2019alternative text con una frase che descriva ci\u00f2 che mostra la foto, preferibilmente usando delle parole chiave. Gli alternative text aiutano anche i visitatori che navigano sul tuo sito usando dei software audio per non vedenti, per cui si tratta anche di un modo intelligente e civile di potenziare l\u2019accessibilit\u00e0 delle pagine web.<\/p>\n\n\n\n I nomi dei file e gli alt tags sono particolarmente importanti per l\u2019indicizzazione delle pagine web dedicati ai prodotti. Non dimenticare poi di aggiungere una caption (breve testo descrittivo visibile ai tuoi utenti) ad ogni immagine visto che i visitatori tendono a leggere le brevi didascalie pi\u00f9 di ogni altra cosa. <\/p>\n\n\n\n Nota:<\/strong> compilare Alt tags, scrivere caption: si tratta di operazioni ottime per la SEO, ma non tentare di semplificare troppo questi accorgimenti ricorrendo ad un insieme di parole chiave scollegate tra loro. La strada da seguire \u00e8 quella di descrivere un\u2019immagine con una breve frase di senso compiuto. Aggiungere parole chiave irrilevanti o ripetitive penalizzerebbe la tua valutazione sui motori di ricerca.<\/p>\n\n\n\n Scegli immagini che rimandano al senso dei testi, invece che inserire qualcosa che potrebbe colpire inizialmente l\u2019attenzione del visitatore, ma \u00e8 completamente staccata dal contento. Un\u2019immagine che \u00e8 circondata da informazioni coerenti e rilevanti (soprattutto in termini di parole chiave) viene premiata con un ranking maggiore sui motori di ricerca.<\/p>\n\n\n\n Se il tuo sito parla di formazione e scolarizzazione, non otterrai nessun miglioramento nell\u2019indicizzazione mostrando la foto di una mela. Hai bisogno di immagini di classi, insegnanti, studenti, sicuramente molto pi\u00f9 interessanti per il lettore e coerenti con l\u2019oggetto tematico delle tue pagine web.<\/p>\n\n\n\n Vuoi creare un sito web tutto tuo? Scopri qui come creare il design di un sito senza ricorrere a un professionista!<\/a><\/p>\n\n\n\n Ripassiamo tutti i consigli elencati precedentemente con un esempio che si riferisce ancora una volta al sito Make-Believe Coffee.<\/p>\n\n\n\n Ho trovato una foto di una tazza di caff\u00e8 su Unsplash. Al momento del download il nome era \u201cfN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg\u201d e aveva una dimensione di 2509×1673 pixel. La grandezza del file era di 586 KB, non cos\u00ec male, ma ancora molto pi\u00f9 grande di quanto avessi bisogno per le mie pagine web.<\/p>\n\n\n\n Per ottimizzare questa foto, potrei procedere in questo modo:<\/p>\n\n\n\n Anche se questa lista pu\u00f2 sembrare lunga e faticosa da leggere e realizzare, soprattutto se devi caricare molte immagini, diventerai sempre pi\u00f9 veloce man mano che familiarizzerai col procedimento.<\/p>\n\n\n\n Ti consiglio di inserire questa pagina nella barra segnalibro, potresti ritrovarti a cercarla spesso! Seguire questi consigli ti servir\u00e0 a migliorare l\u2019aspetto delle immagini, velocizzare il caricamento del sito e potenziarne la SEO.<\/p>\n\n\n\n Non dovr\u00e0 passare molto tempo prima che tu riesca a vedere i primi risultati.<\/p>\n\n\n\n Aiutati ancora con la nostra guida online<\/a> per tanti altri consigli su come creare il tuo sito web! <\/p>\n\n\n\n![\"Ottimizzare](\"https:\/\/i0.wp.com\/image.jimcdn.com\/app\/cms\/image\/transf\/dimension%3D700x10000%3Aformat%3Djpg\/path\/s11684123ec8ecd7d\/image\/if86f675e5d3ebd3e\/version\/1554799248\/ottimizzare-foto-e-immagini-per-il-tuo-sito-web.jpg?ssl=1\")
<\/figure>\n\n\n\n1. Inizia con immagini di alta qualit\u00e0<\/h2>\n\n\n\n
Crea un logo per mettere in risalto la tua attivit\u00e0.<\/h3>\n<\/div>\n\n\n\n
2. Usa il giusto tipo di file: JPEG o PNG<\/h2>\n\n\n\n
![\"Salva](\"https:\/\/i0.wp.com\/image.jimcdn.com\/app\/cms\/image\/transf\/dimension%3D327x10000%3Aformat%3Djpg\/path\/s11684123ec8ecd7d\/image\/id686f4130eea240c\/version\/1523364915\/salva-le-foto-come-file-jpeg.jpg?ssl=1\")
![\"Salva](\"https:\/\/i0.wp.com\/image.jimcdn.com\/app\/cms\/image\/transf\/dimension%3D327x10000%3Aformat%3Dpng\/path\/s11684123ec8ecd7d\/image\/idaf6cafff62fed09\/version\/1523364935\/salva-grafiche-e-loghi-come-file-png.png?ssl=1\")
3. Ridimensiona le immagini per ottimizzare velocit\u00e0 e aspetto della pagina<\/h2>\n\n\n\n
Che fare se l\u2019immagine \u00e8 troppo grande per il sito?<\/h3>\n\n\n\n
![\"Ridimensiona](\"https:\/\/i0.wp.com\/image.jimcdn.com\/app\/cms\/image\/transf\/dimension%3D700x10000%3Aformat%3Dpng\/path\/s11684123ec8ecd7d\/image\/i3bf6b2a76bf5bccd\/version\/1523366148\/ridimensiona-le-immagini-usando-pixlr.png?ssl=1\")
<\/a>4. Tutte le immagini del sito devono avere stesse dimensioni e identico stile<\/h2>\n\n\n\n
![\"Immagini](\"https:\/\/i0.wp.com\/image.jimcdn.com\/app\/cms\/image\/transf\/dimension%3D700x10000%3Aformat%3Dpng\/path\/s11684123ec8ecd7d\/image\/i10e116fb6b3c2e72\/version\/1523366174\/immagini-non-ottimizzate-per-seo.png?ssl=1\")
![\"Ottimizzazione,](\"https:\/\/i0.wp.com\/image.jimcdn.com\/app\/cms\/image\/transf\/dimension%3D700x10000%3Aformat%3Dpng\/path\/s11684123ec8ecd7d\/image\/i76555bae8577b97b\/version\/1523366217\/ottimizzazione-ridimensionamento-e-allineamento-delle-immagini-per-seo.png?ssl=1\")
![\"Ritaglia](\"https:\/\/i0.wp.com\/image.jimcdn.com\/app\/cms\/image\/transf\/dimension%3D700x10000%3Aformat%3Djpg\/path\/s11684123ec8ecd7d\/image\/ieb557f61df85fb6c\/version\/1523366231\/ritaglia-le-immagini-con-pixlr.jpg?ssl=1\")
5. Usa i campi caption e alternative text per rinominare le immagini<\/h2>\n\n\n\n
![\"Ottimizza](\"https:\/\/i0.wp.com\/image.jimcdn.com\/app\/cms\/image\/transf\/none\/path\/s11684123ec8ecd7d\/image\/i4261df0b1546d82a\/version\/1523366252\/ottimizza-le-immagini-usando-i-campi-caption-e-alternative-text.jpg?ssl=1\")
6. Scegli immagini coerenti coi testi<\/h2>\n\n\n\n
Sintesi: ottimizzazione delle immagini web in chiave SEO<\/h2>\n\n\n\n
![\"Ottimizza](\"https:\/\/i0.wp.com\/image.jimcdn.com\/app\/cms\/image\/transf\/dimension%3D700x10000%3Aformat%3Dpng\/path\/s11684123ec8ecd7d\/image\/i4d033a61c79b206d\/version\/1523366264\/ottimizza-le-immagini-usando-i-campi-caption-e-alternative-text.png?ssl=1\")
<\/figure>\n\n\n\nScegli Jimdo per creare il sito per la tua attivit\u00e0.<\/h3>\n<\/div>\n\n\n\n