Lavorare con le immagini

Domande più frequenti

D: Ho importato alcune immagini PNG molto grandi e adesso il mio sito e molto lento. Come mai?
R: Il formato PNG non è il più adatto per immagini di grandi dimensioni. E’ invece il formato perfetto se hai bisogno di immagini dotate di trasparenza.
Cerca di usare il formato JPEG dove possibile. Per un’immagine di grandezza 800 x 600 pixel un file JPEG potrebbe essere il 90% più piccolo dell’equivalente PNG senza notevoli perdite di qualità.

D: Perché il mio file PNG non viene visualizzato correttamente?
R: Controlla che la tua immagine PNG sia in formato RGB. Noi supportiamo solo PNG a 24bit e 32 bit. Non supportiamo le PNG a 8 bit. Per migliori risultati ti consigliamo di usare la funzione Salva per il Web di Photoshop.

D: Di che dimensioni dovrebbero essre le immagini?
R: Per rendere il tuo sito veloce da caricare, ridimensiona sempre le tue foto su un programma come Photoshop, o un’alternativa gratuita, prima di caricarle. Se importi grandi immagini su Cloud Site e poi le ridimensioni dall’interno dell’editor, l’immagine resterà di grandi dimensioni.

D: Posso usare il formato GIF?
R: Cloud Site non supporta le GIF e ti consigliamo di evitare questo formato. A meno che non necessiti di piccole animazioni, usa il formato JPEG. Se hai proprio bisogno di usare delle GIF, evita di ridimensionarle dall’interno di Cloud Site (quindi usa un editor di immagini come Photoshop per ridimensionarle).

D: C’è un limite al numero di immagini che posso caricare?
R: No, non c’è alcun limite al numero di immagini che puoi caricare. L’unico limite è lo spazio di memorizzazione messo a disposizione dal tuo account. Gli account dimostrativi hanno solitamente 10Mb di spazio, mentre gli account a pagamento possono avere 1Gb o più spazio.

D: Quante immagini posso caricare simultaneamente?
R: Puoi caricare fino a 5 immagini alla volta.

D: Posso sovrapporre più immagini tra loro?
R: Per fare questo dovrai fare uso del Widget Sfondo.

Importare un’immagine

?name=media_1347448235374.png

Seleziona il pannello CARICA (1) e clicca su Aggiungi (2) per aggiungere un’immagine.

Puoi importare file JPEG o PNG. Generalmente è sempre meglio usare JPEG per le foto e PNG per la grafica.

Nota 1: Se il tasto Aggiungi non è visibile, significa che devi ancora installare Adobe Flash player. Effettua il Logout da Cloud Site, vai su http://get.adobe.com/it/flashplayer/ e segui le istruzioni.

Nota 2: Internet Explorer 6 non supporta la trasparenza nei file PNG, quindi se vuoi mantenere la compatibilità con questo browser, dovrai evitare di usarla.

?name=media_1337852496889.png

Puoi importare fino a 5 immagini alla volta. Questo non è un limite della tua pagina, è solo il limite di immagini che puoi importare ad ogni passata.

?name=media_1347452116000.png

La nuova immagine apparirà nel pannello immagini (1). Potrai cliccare sull’icona info (2) per otternere l’URL dell’immagine.

?name=media_1347452267928.png

Trascina l’immagine sulla tua pagina per usarla.

Posizionare l’immagine

?name=media_1347453540848.png

Puoi muovere l’immagine cliccando al suo interno (1). Non cliccare sui bordi o sulle maniglie (2).

L’immagine non si muoverà se il pannello è aperto. Usa il tasto di chiusura (3) per chiudere il pannello.

Scaling an image

?name=media_1347453776075.png

Clicca sui bordi o le maniglie dell’immagine per ridimensionarla

L’immagine non si ridimensionerà se il pannello è aperto. Usa il tasto di chiusura (1) per chiudere il pannello.

Usare le colonne

?name=media_1347454653671.png

Usa il widget Layout Colonne per allineare più immagini una accanto all’altra, oppure trascina le immagini che vuoi allineare e la colonna apparirà automaticamente.

Puoi piazzare solo sei elementi per rigo.

Impostazioni immagine

?name=media_1347455113070.png

1. Seleziona immagine – Usa questo per sostituire l’immagine
2. Impostazioni – Usa questo per aprire il pannello delle impostazioni, aggiungere all’immagine un link, un tag alternativo, un tag titolo, specificare un rollover o un lightbox.
3. Reset – Fa tornare l’immagine alle dimensioni originali
4. Maniglia di trascinamento – Trascina un’immagine su un altra riga
5. Elimina – Rimuove l’immagine dalla pagina senza rimuoverla dal sito.

Il pannello impostazioni immagine

?name=media_1337851353029.png

1. Usa il campo Tag Alternativo per inserire una descrizione alternativa della tua immagine. Questa descrizione verrà mostrata in quei browser che non possono mostrare le immagini (esempio: browser per non vedenti e browser per telefoni cellulari).

2. Il campo Tag Titolo serve a dare un titolo all’immagine. Questo tag potrebbe essere mostrato sui motori di ricerca.

3. Clicca sul tasto di reset per reimpostare le dimensioni originali di un’immagine.

4. Clicca sul lucchetto per bloccare il rapporto d’aspetto (il rapporto tra altezza e larghezza) dell’immagine.

5. Il riquadro rollover serve ad impostare un’immagine che si sostituisce a quella già presente nel momento in cui il mouse passa sopra. Per attivare questa funzione, trascina un’immagine alternativa sul riquadro rollover.

6. Trascina un’immagine sul riquadro lightbox. Quando i visitatori del tuo sito cliccheranno sull’immagine, essa si aprirà su un riquadro più grande. Nota: questa funzione può essere testata solo in modalità Anteprima o sul sito pubblicato. Non funzionerà dall’interno dell’editor.

7. Per aggiungere un link ad un’immagine, clicca su Aggiungi.

8. Per rimuovere un link clicca su Rimuovi.

9. Rel=”nofollow” è un impostazione avanzata che dice a Google di non utilizzare il link dell’immagine per i suoi criteri di rating. Se non sai a cosa serve, non attivarla.

10. Quando il tuo sito ha molte immagini grandi, puoi selezionare il caricamento asincrono su di esse per evitare che vengano caricate quando non è necessario (ad esempio, se hai molte immagini e vuoi che vengano caricate solo quando l’utente scorre la pagina, ottimizzando il caricamento della pagina stessa).

Aggiungere un link ad un’immagine

?name=media_1347463128603.png

Clicca su Aggiungi (1)

?name=media_1347463246358.png

Se il link punta ad una pagina interna del sito, usa il menu link interno(1). Per puntare il link ad una pagina esterna, incolla l’URL nel campo Link Esterno (2). Se vuoi che il link venga aperto in una nuova pagina/tab usa il menu Opzioni Link (3).

Lightbox e Rollover

?name=media_1347466058530.png

Per questo esempio abbiamo adoperato 3 immagini:

Chrysantemum_icona_bn 256×192 – Questa è l’immagine che useremo nella pagina. L’abbiamo ridotta per aumentare la velocità di caricamento della pagina ed è in bianco e nero per farla sembrare inattiva.

Chrysantemum_icona 256×192 – Questa è la stessa immagine di prima, però a colori. La useremo per fare il rollover in modo che quando il puntatore del mouse ci passerà sopra essa sembrerà attiva.

Chrysantemum_grande 1024×768 – Questa è la stessa immagine a risoluzione e colori originali. La useremo per il lightbox.

?name=media_1347468331945.png

Trascina l’immagine in bianco e nero sulla template (1) e clicca sull’icona impostazioni (2).

?name=media_1347468802824.png

Trascina l’immagine piccola a colori (1) nel primo riquadro. Sarà l’immagine per il rollover.

Trascina l’immagine grande a colori (2) nel secondo riquadro. Per provare il lightbox usa la funzione Anteprima o pubblica il tuo sito e aprilo su un browser dove non hai effettuato l’accesso con Cloud Site, oppure esci dall’editor ed entra nel sito.

?name=media_1347469061747.png

Questo è un esempio di immagine Lightbox. Dovrai usare la modalità preview per provare questa opzione.