Guida alle immagini · Guida ai suoni

Caricare i file · Inserire immagini nelle voci · Copyright immagini e Guida alla scelta della licenza · Cercare le immagini · Commons: risorse multimediali libere

Tag di licenza · Risorse di immagini di pubblico dominio · Pagina di descrizione · Testo alternativo - Laboratorio grafico — Puoi fotografare qualcosa per noi?

Questa pagina di aiuto spiega il linguaggio di markup delle immagini, cioè l'insieme di "marcatori" (regole o convenzioni, espressioni codificate) per aggiungere immagini, illustrazioni e grafici alle pagine di Teknopedia.

Dopo aver caricato (o trovato) un'immagine su Wikimedia Commons o su it.wiki (l'edizione in lingua italiana di Teknopedia), per inserirla in una pagina basta scriverne il nome preceduto e seguito dalle doppie parentesi quadre, come un collegamento interno (wikilink). In pratica, di solito si scrive:

[[File:Esempio it.png | miniatura | didascalia ]]

Dove Esempio it.png è il nome dell'immagine (es. Torre di Pisa 2008.jpg), miniatura (o thumb) è un parametro per la formattazione predefinita dell'immagine (vedi anche più sotto), e didascalia è il breve testo che descrive il suo contenuto (es. "La Torre di Pisa").

Quella appena descritta è la sintassi tipica, da usare nella grande maggioranza dei casi, e provvede automaticamente a creare una miniatura dell'immagine di dimensioni ottimali, allineata a destra. Solitamente non occorre altro, ma in taluni casi può essere utile modificare alcuni parametri (allineamento, dimensione ecc.), come descritto di seguito.

• È consigliabile inserire sempre una linea vuota tra l'immagine e il testo per evitare disallineamenti con alcuni browser e per migliorare la leggibilità del wikitesto.

• 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 File: davanti al nome del file, si può usare anche Immagine: o Image: in modo del tutto indifferente, dovunque sia ospitata l'immagine.

[[Immagine:Esempio it.png]] oppure [[Image:Esempio it.png]] o, più correttamente, [[File:Esempio it.png]]

• Si tenga presente che, quando sia Commons sia it.wiki contengono un'immagine con lo stesso nome, la precedenza andrà all'immagine di it.wiki, che sarà quindi quella mostrata nella pagina (se l'immagine è la stessa si prega di segnalarla con {{nowcommons}} o se diversa chiedere di rinominarla inserendo nella pagina dell'immagine la riga {{sposta|nuovo_nome_file|omonimia con immagine diversa su Commons}}).

La posizione effettiva dell'immagine rispetto al testo dipende dal dispositivo utilizzato e dalla risoluzione dello schermo. Non è pertanto garantito che la posizione specificata venga sempre rispettata. Per questo motivo, è fortemente sconsigliato l'utilizzo, all'interno del testo, di riferimenti specifici alla posizione di un'immagine (ad esempio "come visibile nell'immagine a destra" o "vedere l'immagine a fianco"). A questo proposito, ricordare anche che non è affatto garantito che il mezzo usato per leggere la voce sia in grado di visualizzare le immagini.

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, |.

Senza scorrimento del testo: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[File:Esempio it.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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Allineata a sinistra, con scorrimento: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[File:Esempio it.png|sinistra]] 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Centrata nella pagina: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[File:Esempio it.png|centro]] 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Allineata a destra, con scorrimento: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[File:Esempio it.pngowiki>'''|destra'''<nowiki>]] 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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: {{clear|both}}.
• A capo sul margine sinistro: {{clear|left}}.
• A capo sul margine destro: {{clear|right}}.

Se non si specifica una posizione, le immagini con cornice (parametri miniatura, thumb o frame, vedi sotto) vengono di default allineate a destra.

Le immagini senza cornice invece si comportano di default come se fossero parole di testo; si allineano a sinistra, ma se inserite all'interno di una frase come questa , diventano parte della frase stessa. In questi casi è possibile specificare anche un ulteriore parametro che indica l'allineamento verticale rispetto alle parole: "baseline", "middle" (default), "sub", "super", "text-top", "text-bottom", "top", o "bottom". Esempio di top e di bottom . È comunque un sistema usato molto raramente e solo con immagini molto piccole.

È raccomandato aggiungere all'immagine una didascalia o testo alternativo, che viene automaticamente 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 e non vedenti.

Lo stesso argomento in dettaglio: Aiuto:Testo alternativo per le immagini.

È caldamente consigliato corredare l'immagine con un breve testo descrittivo, che costituirà la legenda dell'immagine laddove non potesse essere vista dal lettore. Questo funge anche da testo alternativo (in HTML attributo ALT).

La didascalia va inserita dopo il nome dell'immagine e dopo gli eventuali parametri opzionali, separandola con una barra verticale, |. Il testo alternativo dev'essere l'ultima informazione prima delle parentesi quadre di chiusura.

Immagine con testo alternativo:
[[File:Esempio it.png|Testo alternativo]]

Notare che, per le immagini prive di cornice, il testo inserito in questo modo appare sia come testo alternativo, sia come didascalia a tooltip, visibile solo al passaggio del mouse (in HTML attributo title). Se si vuole impostare solo il testo alternativo oppure un testo alternativo diverso dalla didascalia, utilizzare alt= (vedi #Didascalia).

Per ottenere un bordo sottile (non una cornice completa), è necessario specificare il parametro opzionale border che fa sì che l'immagine venga visualizzata con un piccolo bordo grigio intorno a essa.

Immagine con bordo (o cornice):
[[File:Esempio it.png|border]]

Per ottenere una didascalia è necessario specificare il parametro opzionale miniatura (o thumb) oppure frame che fa sì che l'immagine venga visualizzata sulla destra, racchiusa in una cornice e con la didascalia in basso; la didascalia, che va separata dalle opzioni con una seconda barra verticale, |, sostituisce il testo alternativo dell'immagine. Per indicare anche un testo alternativo bisogna usare il parametro alt.

Se il testo della didascalia è costituito da una sola frase o da un semplice nome non inserire un punto finale; se, viceversa, il testo che accompagna e descrive l'immagine è composito e composto da più frasi, osservare la normale punteggiatura adottata abitualmente per i testi.

Immagine incorniciata con didascalia:
[[File:Esempio it.png|miniatura|Didascalia]]

Immagine incorniciata con didascalia e testo alternativo:
[[File:Esempio it.png|miniatura|alt=Un globo terrestre|Didascalia]]

Il testo della didascalia può contenere buona parte della formattazione comunemente utilizzata nel testo delle voci, come i collegamenti ad altre voci di Teknopedia (wikilink) e le note.

[[File:Esempio it.png|miniatura|[[Aiuto:Wikilink|Link]] e note<ref>Esempio</ref>]]

Non si deve però formattare tutta la didascalia solo per proprio gusto stilistico, aggiungendo cose come corsivo, small o centrature. Le didascalie hanno già lo stile previsto dalla propria skin.

Alcune formattazioni possono non funzionare dentro le didascalie, ad esempio gli elenchi puntati/numerati realizzati con * e #. Se proprio necessari, gli elenchi si possono inserire con il codice HTML (vedi tag ul e ol).

Legenda colorata:
Il testo della didascalia può contenere una legenda interpretativa dei colori di un grafico o di uno schema. Per comporla, è possibile utilizzare il template {{legenda}}.

[[File:Gnome-globe.svg|miniatura|Legenda: {{legenda|green|Continenti}} {{legenda|lightskyblue|Oceani}}]]

Attenzione! 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 [[File: ]].

Nell'inserire immagini e tabelle, tieni conto sia della resa grafica (pensa ai tanti utenti che usano basse risoluzioni video), sia del peso complessivo della pagina (molti utenti hanno infatti sistemi non recentissimi e possono usare connessioni lente). Prova a vedere come appare la pagina anche a bassa risoluzione (ad esempio 800x600 o 1024x768) e non eccedere col peso delle immagini; non impostare le dimensioni delle immagini di tipo thumb se non è strettamente necessario: lascia che abbiano la larghezza di default scelta dall'utente. Verifica poi che la pagina non debba essere scorsa orizzontalmente o che parti di essa non si sovrappongano. Inoltre, assicurati che il contenuto sia sempre accessibile anche quando le immagini non possono essere visualizzate.

Se non viene specificata, la dimensione con cui viene presentata l'immagine è quella con cui è stata caricata; per garantire a tutti una migliore accessibilità è preferibile utilizzare le miniature (opzione miniatura o thumb), affinché la dimensione visualizzata sia opportunamente ridimensionata e incorniciata. È possibile personalizzare tale dimensione dalle proprie preferenze utente. Ogni utente è libero di cambiare le proprie preferenze in base alle necessità (es. velocità di connessione veloce e dimensione dello schermo).

Esempio:

Il parametro thumb imposta le immagini a una larghezza massima di default di 220 pixel (fino al 10 giugno 2010 è stata 180 pixel), indipendentemente dal loro sviluppo in altezza. Le immagini che in originale sono più strette di 220 pixel non vengono ingrandite ma mostrate nella dimensione reale.

Se non sono specificati altri parametri, la miniatura apparirà 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.

Esiste anche l'opzione frameless (o senza_cornice), alternativa a thumb, che ha tutte le caratteristiche di ridimensionamento automatico delle miniature, ma è sprovvista della cornice. In quanto immagine senza cornice è allineata come le parole e la didascalia diviene testo alternativo.

Talvolta può essere necessario ridimensionare manualmente l'immagine, perché ha orientamento o contenuti particolari. È generalmente preferibile farlo in maniera proporzionale alla dimensione standard di ciascun utente. Le immagini con opzione miniatura si possono ridimensionare in maniera relativa alla larghezza di default, con il parametro verticale (o upright).

Il parametro è nato inizialmente per le immagini con orientamento verticale, e se utilizzato senza ulteriori specificazioni applica una larghezza un po' più stretta di quella delle normali miniature, circa il 75% (170 pixel nel caso dell'impostazione di default di 220 pixel).

Esempio (l'ordine di inserimento dei parametri non è importante), con risultato a fianco:

Al parametro può essere inoltre assegnato un valore numerico (verticale=N), per applicare un ridimensionamento qualsiasi. Il valore da inserire è il rapporto tra la larghezza desiderata e quella di default delle miniature, utilizzando il punto come separatore decimale. Ad esempio il parametro verticale=2 crea un'immagine di larghezza doppia, mentre verticale=0.5 crea un'immagine larga la metà. Non ha ovviamente senso inserire verticale=1 (è come non metterlo), mentre verticale=0.75 equivale a verticale senza numero.

Esempio:

Notare che "verticale", qualunque sia il valore, non sgranerà mai l'immagine facendola apparire più grande della dimensione reale. Come con il solo "miniatura", le immagini che in originale sono più strette di quanto richiesto vengono mostrate nella dimensione reale.

È possibile impostare in assoluto la dimensione in pixel dell'immagine, sebbene sia una pratica da evitare, perché vanifica le impostazioni dell'utente e può danneggiare l'accessibilità. Se necessario, per forzare una certa larghezza si deve indicare il numero di pixel seguito, senza spazi, dai caratteri minuscoli px, ad esempio 250px; l'altezza verrà calcolata automaticamente.

Esempio:

Se la larghezza in pixel viene fornita assieme al parametro thumb, come per tutte le miniature rappresenterà una larghezza massima, mentre se non è una miniatura è possibile forzare anche una larghezza maggiore dell'originale, "stirando" l'immagine.

È possibile anche definire l'altezza dell'immagine usando il formato "AAAxBBBpx", che permette di mostrare l'immagine con una dimensione massima di AAA pixel di larghezza o BBB di altezza, sempre mantenendo le proporzioni. In tale caso l'immagine non viene distorta, ma la miniatura, una volta raggiunto il massimo in una delle due misure, ridimensionerà l'altra in proporzione.

Ad esempio usando la sintassi

si ottiene l'immagine a destra, con un'altezza di 100 px.

È possibile anche forzare soltanto l'altezza, inserendo ad esempio x100px.

L'opzione frame permette di inserire un'immagine nelle sue dimensioni originali e incorniciata. Il frame è compatibile con le didascalie e l'allineamento. Ogni tipo di ridimensionamento manuale verrà ignorato.

L'uso di immagini grandi, tramite l'opzione frame o l'impostazione di valori molto elevati di verticale o di px, dovrebbe essere limitato a casi di effettiva necessità (diagrammi particolareggiati, panoramiche orizzontali...). Teniamo presente che le immagini non devono essere di intralcio nella lettura della voce; per chi desidera vedere in dettaglio un'immagine, è sufficiente cliccarla. In particolare è bene evitare immagini di questo tipo nella sezione iniziale.

Con immagini molto larghe può essere preferibile l'uso dell'allineamento center, per evitare che a lato dell'immagine ci sia del testo, che alle basse risoluzioni verrebbe schiacciato in una colonna troppo stretta.
È inoltre possibile inserire immagini che possono scorrere orizzontalmente, senza mai fuoriuscire dallo schermo, utilizzando il template {{Immagine grande}}. Può essere usato ad esempio con i panorami a 360 gradi. Ad esempio, il comando {{immagine grande|Skyline-New-York-City.jpg|2000px}} produce l'immagine

Lo stesso argomento in dettaglio: Template:Ritaglio immagine con CSS.

Per visualizzare in una voce solo il dettaglio di un'immagine, è consigliabile modificare l'immagine per creare una immagine derivata, caricando l'immagine ottenuta con un nuovo nome e con la stessa licenza dell'immagine originale. Nei casi in cui non fosse possibile, può essere utilizzato il template {{Ritaglio immagine con CSS}}.

È possibile, in alcuni casi tassativi, impaginare più immagini sotto forma di galleria, da organizzare all'interno di una sezione intitolata "Galleria d'immagini".^[2] La sintassi da usare è così composta:

<gallery>
File:Nomefile.estensione|Didascalia

File:Nomefile.estensione|Didascalia

...

</gallery>

E il risultato che viene visualizzato è simile a questo:

Il tag gallery accetta quattro parametri (vedi il Manuale di MediaWiki):

• caption="{caption}": imposta il titolo della gallery.
• widths={width}: imposta la larghezza delle immagini.
• heights={heights}: imposta l'altezza massima delle immagini.
• perrow={integer}: imposta il numero di immagini per ogni riga.

Ad esempio la sintassi <gallery perrow="5"> imposta cinque immagini per riga. Si raccomanda di utilizzare la sintassi standard; i parametri aggiuntivi possono essere utilizzati solo in casi particolari e ben motivati.

Esempio:

<gallery widths=60 heights=60 perrow=5 caption="Terra emisfero orientale">
File:Earth Eastern Hemisphere.jpg
File:Earth Eastern Hemisphere.jpg
File:Earth Eastern Hemisphere.jpg
File:Earth Eastern Hemisphere.jpg
File:Earth Eastern Hemisphere.jpg
File:Earth Eastern Hemisphere.jpg
File:Earth Eastern Hemisphere.jpg
File:Earth Eastern Hemisphere.jpg
File:Earth Eastern Hemisphere.jpg
File:Earth Eastern Hemisphere.jpg
</gallery>

Si ottiene:

• Terra emisfero orientale
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

A partire dalla versione 1.22 di MediaWiki, ci sono nuovi parametri sfruttabili per costruire gallerie di miglior utilità. Il parametro mode, ad esempio, consente di sistemare le immagini con altezza costante e didascalia a scomparsa.

Qualche esempio. Dal seguente codice (relativo al mode="traditional", che è anche il default)

<gallery mode="traditional">
File:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
File:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
File:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
</gallery>

si ottiene:

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

Altri esempi:

mode="nolines"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

mode="packed"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

mode="packed-overlay"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

mode="packed-hover"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

class="center"

• 
  Astronotus ocellatus (Oscar)
• 
  Salmo salar (Salmon Larva)
• 
  Epinephelus lanceolatus (Giant grouper)

Nelle gallerie non è possibile utilizzare i pipe trick.

Per piccoli gruppi di immagini relative a un particolare aspetto della voce è possibile utilizzare il template {{immagine multipla}}.

Per creare un wikilink alla 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 'File:' e visualizzato solo il nome del file; se presente, il testo che segue la barra verticale viene visualizzato al posto del nome dell'immagine.

• [[:File:Esempio it.png]] genera File:Esempio it.png
• [[:File:Esempio it.png|]] genera Esempio it.png
• [[:File:Esempio it.png|Prova]] genera Prova

Per creare un wikilink diretto all'immagine in formato scaricabile, ignorando la pagina di descrizione, utilizzare il prefisso Media: anziché File: o Immagine:; anche in questo caso il software lo interpreta come un link interno, con o senza i due punti iniziali. 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.

• [[Media:Esempio it.png]] genera Media:Esempio_it.png
• [[Media:Esempio it.png|]] genera Esempio it.png
• [[Media:Esempio it.png|Prova]] genera Prova

Il prefisso Media ha anche un comportamento diverso con la funzione ifexist.

Normalmente cliccare su un'immagine rimanda alla pagina contenente la sua descrizione. Tuttavia usando il parametro link si può fare in modo che il clic rimandi ad un'altra pagina. Ad esempio, il codice

[[File:Flag of Italy.svg|20px|link=Italia|Italia]]

genera l'immagine che rimanda alla voce Italia.

Se la pagina a cui si vuole fare puntare l'immagine è un sito esterno, bisogna specificare l'intero URL della pagina. Ad esempio,

[[File:Flag of the President of Italy.svg|20px|link=http://www.quirinale.it/|Sito ufficiale della Presidenza della Repubblica Italiana]]

genera l'immagine che rimanda al sito ufficiale della Presidenza della repubblica italiana.

Se invece si vuole rendere l'immagine "inerte", cioè fare in modo che il cliccarla non abbia alcun effetto, è sufficiente aggiungere il parametro link= senza alcun valore, cioè vuoto. Così, ad esempio:

[[File:Gnome-globe.svg|20px|link=]]

produce su cui, come è facile constatare, il clic non produce effetto.

È importante sottolineare che l'utilizzo di questo parametro è previsto solo in casi molto determinati; in particolare è vietato utilizzarlo quando il link all'immagine è obbligatorio per la validità della relativa licenza (per esempio tutte le licenze Creative Commons), e comunque deve essere evitato nelle comuni immagini presenti nel namespace principale.

Commons e It.wiki possono ospitare anche file di tipo video (WebM, ogg, MPEG) e documenti (DjVu, pdf). Questi possono essere inclusi nelle pagine di Teknopedia esattamente come le immagini, con la stessa sintassi [[File:]] o gallery sopra descritta. Vengono mostrati come un'immagine statica di anteprima finché non vengono cliccati per avviarli o sfogliarli.

I video (vedi Aiuto:File multimediali) mostrano di default il fotogramma che sta a metà del filmato. Per mostrare come immagine un altro fotogramma, aggiungere il parametro thumbtime= con la posizione in secondi oppure in ore:minuti:secondi dall'inizio del video.

I documenti mostrano di default la prima pagina. Per mostrare come immagine un'altra pagina, aggiungere il parametro page= con il numero progressivo della pagina. Nell'esempio a fianco è stato usato [[File:Mozart Sonate (manuscript).djvu|thumb|page=6|...]]

• Aiuto:Immagini
• Teknopedia:Copyright immagini
• Aiuto:Come cercare immagini per Teknopedia
• Speciale:Carica
• Template:Immagine grande
• Template:Doppia immagine
• Template:Tripla immagine
• Template:Immagine multipla
• Template:Ritaglio immagine con CSS
• Template:Dx

Progetto Immagini: collabora a Teknopedia sull'argomento Immagini