Gestire Immagini
Da ArtiglieriA.
Questa pagina è una guida da seguire per inserire senza problemi immagini. Sono 3 i passaggi fondamentali:
- Preparate il file sul vostro PC della dimensione e formato opportune
- Caricatelo in FTP tramite la pagina "carica un immagine"
- Una volta creata la pagina del file andate su modifica e inserite questo testo: {{CatFoto}}
Cercare un'immagine su Internet
Attenzione: ogni immagine presente su Internet è protetta dal diritto d'autore e non può essere pubblicata in assenza di una esplicita autorizzazione scritta degli autori che lo permetta (devi ottenerla prima di procedere al caricamento), a meno che non sia stata rilasciata dagli autori con una licenza libera. Ricorda che le immagini prese da altri siti vanno salvate sul proprio pc e ricaricate. Un sito wiki che mette a disposizione spazio per caricare immagini e la possibilità di utilizzarle è Wikimedia Commons
Creare o modificare un'immagine
Se necessario, e se la licenza d'uso lo permette, modifica opportunamente l'immagine, ritagliandola in modo da mettere in evidenza l'oggetto principale rappresentato e di interesse per la voce. Tenete in considerazione l'opportunità di trasformarle in scala di grigio. Per creare, elaborare o modificare l'immagine puoi usare vari programmi di grafica. E' necessario caricare immagini di dimensioni larghe al massimo 600 pixel. Per le immagini da utilizate nei box tenete presente che la larghezza impostata, sarà di 300 pixel per le foto orizzontali e di 170 pixel per le foto verticali.
Modificare immagini presenti sul server
Per sostituire un'immagine già presente con un'altra versione: basta assicurarsi che la nuova immagine abbia esattamente lo stesso nome di quella da sostituire. Caricando l'immagine (vedi più sotto come fare), quella presente sul server verrà in tal modo automaticamente sostituita. Attenzione: se due file di immagine hanno lo stesso nome ma diversa estensione, saranno trattati come due diverse immagini.
Problemi con le immagini provenienti da scansione
Quando si acquisiscono con lo scanner immagini stampate possono nascere interferenze con il retino della stampa. A volte il software fornito con lo scanner contiene dei filtri per eliminare questo effetto. Altrimenti si può provare ad aumentare la risoluzione fino a rendere visibile il retino stesso, sfocare l'immagine applicando un filtro adatto in modo da eliminare il retino dall'immagine, e infine riscalare l'immagine alla dimensione desiderata.
Formati consigliati
Per immagini fotografiche utilizza preferibilmente il formato JPEG; per icone, disegni a tratti netti, mappe, bandiere e simili, usa il formato vettoriale (SVG) o, in casi limite, il PNG (più pesante e soggetto a sgranamento in dilatazione).
Immagini con molti colori
Per le fotografie si usa il formato JPEG, scegliendo una qualità abbastanza alta, in modo che non ci siano striature visibili (si notano particolarmente nelle zone dell'immagine con contorni netti e forti contrasti).
Immagini con pochi colori (disegni semplici)
Per disegni, bandiere, mappe e generalmente per tutte le immagini con pochi colori "piatti" o in cui servono trasparenze usa il formato vettoriale (SVG). Se intendi comunque usare il PNG ricordati di selezionare la compressione massima per ridurre le dimensioni del file.
Puoi disegnare queste immagini direttamente in vettoriale ed esportarle in Scalable Vector Graphics(SVG) (con programmi come Inkscape, licenza GNU GPL). Pubblicando l'immagine potrai con un solo file riprodurre senza sgranature l'immagine in SVG, avendo nello stesso tempo un file immagine molto leggero oltre che leggibile e modificabile anche da un semplice editor di testo. Un tutorial è disponibile /commons:Commons:Tutorial for Vectorial graphism/ (in inglese, con illustrazioni).
PNG e GIF
L'uso dei formati Portable Network Graphics (PNG) e Graphics Interchange Format(GIF) è sconsigliato se è possibile ottenere risultati assimilabili con l'Scalable Vector Graphics(SVG). Se vuoi usare questi formati ricorda che:
- Alcune versioni di Internet Explorer interpretano male le PNG dalla profondità di 24 bit. Per la massima compatibilità usa altre gamme:
- 256 colori per piccole immagini
- 32 bit per immagini grandi
- Per le sole immagini animate usa il formato Graphics Interchange Format(GIF). Trasforma le GIF statiche in PNG perché di solito si ottengono dei file più piccoli senza perdita di qualità.
Dimensioni
MediaWiki, (il software utilizzato per ArtiglieriA) consente di generare automaticamente anteprime più piccole delle immagini da includere nelle voci.
Il limite massimo per la dimensione di un file attualmente è di 0,5 megabyte. Il limite per le immagini caricate su Wikimedia Commons è di 20 megabyte.
Come caricare un'immagine
Per caricare un'immagine:
- dopo esserti registrato (attenzione: se vuoi caricare su Commons devi registrarti anche su Commons)
- salvala sul tuo pc;
- clicca su "Carica un file" nel menù a sinistra e cerca l'immagine salvata.
Caricando un'immagine proveniente da fotocamera digitale, sarà automaticamente affiancata ad essa una tabellina con i metadata della foto. Modificando però l'immagine con un programma di grafica solitamente questi dati si perdono.
Nome del file
Abbi cura di caricare file immagine che abbiano un nome chiaro e significativo, anche ai fini di una eventuale ricerca (per esempio denomina un file che raffiguri il duomo di Milano "Sipe Gallina.jpg" piuttosto che con un generico "Foto0001.jpg").
Considera che se una immagine è stata caricata in precedenza con lo stesso nome, quella sarà sostituita dalla tua. Nel dubbio, verifica prima se non sia già presente una immagine con quel nome.
Come categorizzare un immagine
Una volta creata la pagina del file andate su modifica e inserite questo testo: {{CatFoto}}. Questo testo richiama una funzione automatica per cui il file viene categorizzato con le stesse categorie della pagine che lo utilizzano.
Cambiare il nome di un'immagine
Diversamente dalle pagine di testo, le immagini non si possono spostare. Se si vuole cambiare il nome di un'immagine occorre
- Accertarsi che ci sia un valido motivo per cambiare il nome all'immagine
- Scaricarla sul proprio disco locale, quindi caricarla nuovamente sul server con il nuovo nome
- Copiare e incollare la descrizione e la licenza d'uso dalla vecchia immagine alla nuova
- Copiare e incollare la cronologia della vecchia immagine dentro la pagina di discussione della nuova (per mantenere la formattazione inseriscila tra i tag <pre>....</pre>)
- Modificare tutte le pagine che richiamano quella vecchia in modo che puntino alla nuova
- Fare cancellare da un amministratore l'immagine con il vecchio nome (come spiegato più sotto).
La pagina di descrizione
Nel campo Sommario inserisci tutte le informazioni sull'immagine: la provenienza e l'autore, lo stato del copyright, le informazioni sul soggetto ritratto. Esse compariranno poi nella relativa pagina di descrizione. Attenzione: non inserire queste informazioni nella voce o nella didascalia dell'immagine stessa.
Come inserire un'immagine in una voce
Inserisci un'immagine all'interno di una voce con la sintassi [[Immagine:nome_immagine.estensione|parametri eventuali]]. oppure utilizzando l'apposito pulsante nella modalità modifica.
Come cancellare un'immagine
Una volta caricata non si può cancellare direttamente l'immagine. La cancellazione può essere compiuta solo dagli amministratori.
- Se vuoi cancellare un'immagine che hai appena caricato perché è doppia e ne hai caricata una identica per correggerne il nome, perché pensi che violi il copyright o perché non pensi di utilizzarla nelle voci, puoi richiederne la cancellazione immediata. Ricorda che per la cancellazione effettiva è utile che l'immagine sia resa orfana, ovvero tolta dalle pagine che la richiamano (vedi la sezione "Pagine che usano questa immagine" in basso nella pagina di descrizione dell'immagine).
- Se trovi un'immagine non caricata da te che vìola il copyright, segnalala
Inserimento di un'immagine
Dopo aver caricato (o trovato) un'immagine chiamata Esempio.png per inserirla in una pagina basta scriverne il nome preceduto e seguito dalle doppie parentesi quadre, come un collegamento interno.
- [[Immagine:Esempio.png]] oppure [[Image:Esempio.png]]
Note:
- Non c'è alcuna differenza tra le immagini che si trovano su Commons e quelle che sono su it.wiki; in tutti gli esempi di questa pagina in cui è usato il prefisso Immagine: davanti al nome del file, si può usare anche Image: in modo del tutto indifferente, dovunque sia ospitata l'immagine.
- Mettere sempre una linea vuota dopo l'immagine per evitare disallineamenti del testo con Internet Explorer.
Posizione rispetto al testo
Per cambiare la posizione dell'immagine rispetto al testo della pagina si possono indicare dei parametri opzionali dopo il nome del file, separandoli con una barra verticale, |.
| Immersa nel corpo del testo: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[Immagine:Esempio.png]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
| Senza scorrimento del testo: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[Immagine:Esempio.png|none]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 |
| Allineata a sinistra, con scorrimento: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[Immagine:Esempio.png|left]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
| Centrata nella pagina: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[Immagine:Esempio.png|center]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
| Allineata a destra, con scorrimento: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[Immagine:Esempio.png|right]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
Nota:: Per terminare lo scorrimento del testo a lato dell'immagine, andando a capo e ritornando alla massima larghezza della pagina, è necessario inserire i seguenti tag:
- A capo su entrambi i margini: <br style="clear:both;"/>.
- A capo sul margine sinistro: <br style="clear:left;"/>.
- A capo sul margine destro: <br style="clear:right;"/>.
Didascalie, bordi e testo alternativo
È possibile aggiungere automaticamente all'immagine una didascalia, un bordo o un testo alternativo, che viene visualizzato al posto di quest'ultima dai browser testuali. Il testo alternativo rappresenta un elemento importante per l'accessibilità delle pagine, in particolare agli utenti disabili.
Testo alternativo
Per ottenere un testo alternativo (in HTML ALT TEXT) è sufficiente specificarne il contenuto dopo il nome ed eventuali parametri opzionali, separandolo con una barra verticale, |. Il testo alternativo dev'essere l'ultima informazione prima delle parentesi quadre di chiusura.
[[Immagine:Esempio.png|Testo alternativo]]
Bordo (o Cornice)
Per ottenere un piccolo bordo (o cornice), è necessario specificare il parametro opzionale border che fa sì che l'immagine venga visualizzata con un piccolo bordo grigio intorno a essa.
[[Immagine:Esempio.png|border]]
Didascalia
Immagine incorniciata con didascalia:
[[Immagine:Esempio.png|frame|Didascalia]]
[[Immagine:Esempio.png|128px|thumb|Link interni e esterni Il testo della didascalia può contenere dei collegamenti ad altre voci di ArtiglieirA oppure a siti esterni.
Didascalia con collegamenti:
[[Immagine:Esempio.png|frame|Link interni e esterni]]
Nota:: Assicurarsi sempre che il numero di parentesi quadre aperte e chiuse sia corretto: una parentesi in più o in meno significa il mancato funzionamento dell'intero comando [[Immagine: ]].
Dimensioni dell'immagine
Se non viene specificata, la dimensione con cui viene presentata l'immagine è quella con cui è stata caricata; per ridimensionarla è possibile specificare, tra le opzioni che seguono il nome, il numero di pixel di larghezza (l'altezza viene calcolata automaticamente in modo che l'immagine non sia distorta). Il numero di pixel dev'essere seguito, senza spazi, dai caratteri minuscoli px.
| Immagine in varie dimensioni: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[Immagine:Esempio.png|60px]]Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [[Immagine:Esempio.png|40px]] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [[Immagine:Esempio.png|20px]] Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Miniature
Per visualizzare automaticamente una miniatura dell'immagine (un'anteprima di dimensioni ridotte, si usa il parametro opzionale thumbnail o thumb. Se non sono specificati altri parametri, la miniatura appare allineata a destra, con la didascalia sotto (se fornita) e con un simbolo di zoom (ingrandisci) che indica la possibilità di vedere l'immagine nelle sue dimensioni reali.
[[Image:Esempio.png|thumbnail|Il Sipe fiammeggiante]]
Note:
- L'opzione thumb si può usare insieme left, center e right per modificare la posizione della miniatura sulla pagina. Per l'uso all'interno delle tabelle è consigliata invece l'opzione none.
- La dimensione predefinita delle miniature è di 180px di larghezza; l'altezza viene calcolata automaticamente in modo che l'immagine non sia distorta. L'opzione "thumbnail" può anche essere combinata con l'opzione "px" per cambiare la dimensione, come in questo esempio:
[[Image:Lago bolsena tramonto.jpg|100px|thumbnail|Il Lago di Bolsena in secca]]
- Per cambiare il proprio valore predefinito (che si applica ad ogni immagine la cui dimensione non sia stata stabilita esplicitamente), si veda Preferenze/Immagini.
- Se la dimensione originale dell'immagine è inferiore a quella della miniatura, quest'ultima non viene ridimensionata. Se l'immagine originale è molto grande (sopra i 12,5 Mpixel circa) l'anteprima non viene creata.
Gallerie di immagini
È possibile impaginare più immagini sotto forma di galleria. La sintassi da usare è la seguente:
<gallery>
Immagine:Nomefile.estensione|Didascalia
Immagine:Nomefile.estensione|Didascalia
...
</gallery>
E il risultato che viene visualizzato è simile a questo:
Sipe fiammeggiante |
Sipe fiammeggiante |
Sipe fiammeggiante |
Sipe fiammeggiante |
Richiamo della pagina di descrizione
Per richiamare all'interno di una voce la pagina di descrizione dell'immagine, aggiungere il carattere "due punti" (:) all'inizio del collegamento; in tal modo il software lo interpreta come un link interno. Il nome del file può essere seguito da una barra verticale, |, ed eventualmente da un testo. Se è presente solo la barra verticale, viene eliminato il prefisso 'Immagine:' e visualizzato solo il nome del file; se presente, il testo che segue la barra verticale viene visualizzato al posto del nome dell'immagine.
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[:Immagine:Esempio.png]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [[:Immagine:Esempio.png|]] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [[:Immagine:Esempio.png|Excepteur]] Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Immagine:Esempio.png Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Esempio.png Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Richiamo dell'immagine
Per richiamare all'interno di una voce l'immagine in formato scaricabile, sostituire il prefisso Media: a 'Immagine:' o 'Image:'; anche in questo caso il software lo interpreta come un link interno. Il nome del file può essere seguito da una barra verticale, |, ed eventualmente da un testo. Se è presente solo la barra verticale, viene eliminato il prefisso 'Media:' e visualizzato solo il nome del file; se presente, il testo che segue la barra verticale viene visualizzato al posto del nome dell'immagine.
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[Media:Esempio.png]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [[Media:Esempio.png|]] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [[Media:Esempio.png|Excepteur]] Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Media:Esempio.png Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Esempio.png Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
