Thumbnail

Thumbnail (dall'inglese, significa "miniatura") è il termine che viene usato normalmente in informatica per definire un'anteprima di un'immagine più grande, che quindi viene presentata in formato ridotto.

Solitamente, cliccando sull'anteprima, attraverso un link verso l'immagine più grande, questa verrà visualizzata nelle sue dimensioni reali.

L'utilizzo delle thumbnail ha ricevuto un notevole impulso con la diffusione dei software sviluppati per la gestione e l'archivio delle fotografie realizzate con apparecchiature digitali.

Attuazione

Le miniature sono idealmente implementate nelle pagine Web come copie separate e più piccole dell'immagine originale, in parte perché uno degli scopi di un'immagine in miniatura su una pagina Web è ridurre la larghezza di banda e il tempo di download.

Alcuni web designer producono miniature con HTML o script lato client che fanno sì che il browser dell'utente riduca l'immagine, piuttosto che utilizzare una copia più piccola dell'immagine. Ciò riduce però la qualità visiva delle miniature.

La visualizzazione di una parte significativa dell'immagine anziché dell'intero fotogramma può consentire l'uso di una miniatura più piccola pur mantenendo la riconoscibilità. Ad esempio, quando si esegue l'anteprima di un ritratto a figura intera di una persona, potrebbe essere meglio mostrare il viso leggermente ridotto rispetto a una figura indistinta. Tuttavia, questo può fuorviare lo spettatore su ciò che contiene l'immagine, quindi è più adatto a presentazioni artistiche.

La miniatura rende le pagine più piccole e più facilmente visualizzabili e consente inoltre agli spettatori di avere il controllo su ciò che vogliono visualizzare nello specifico.

Nel 2002 il tribunale nel caso statunitense Kelly v. Arriba Soft Corporation ha stabilito che fosse una pratica corretta per i motori di ricerca utilizzare immagini in miniatura per aiutare gli utenti del Web a trovare ciò che cercano.

Attraverso JavaScript, HTML5 e CSS3 si possono aggiungere effetti di transizione e animazione alle miniature.

Etimologia

La parola "thumbnail" è un riferimento alla miniatura umana e allude alle dimensioni ridotte di un'immagine, paragonabile alla dimensione del pollice umano. Il primo uso della parola in questo senso risale al XVII secolo. La parola fu poi usata in senso figurato, sia nel sostantivo che nell'aggettivo, per riferirsi a qualcosa di piccolo o conciso, come un saggio biografico. L'uso della parola "thumbnail" nel contesto specifico delle immagini del computer come "una piccola rappresentazione grafica, come di una grafica più grande, un layout di pagina, ecc." sembra essere stato utilizzato per la prima volta negli anni '80.

Dimensioni

• Il programma di digitalizzazione e catalogazione della biblioteca pubblica di Denver produce miniature di 160 pixel nella dimensione lunga.
• Le linee guida della California Digital Library per le immagini digitali raccomandano 150-200 pixel per ogni dimensione.
• Picture Australia richiede che le miniature siano di 150 pixel sul lato lungo.
• Gli standard internazionali del progetto Dunhuang per la digitalizzazione e la gestione delle immagini specificano un'altezza di 96 pixel a 72 ppi.
• YouTube consiglia la risoluzione di 1280×720 (con una larghezza minima di 640 pixel) con un rapporto di aspetto di 16:9.
• DeviantArt produce automaticamente miniature di massimo 150 pixel nella dimensione lunga.
• Flickr produce automaticamente miniature di un massimo di 240 pixel nella dimensione lunga o di 75 × 75 pixel più piccoli. Applica anche loro una maschera di contrasto.
• Picasa produce automaticamente miniature di massimo 144 pixel nella dimensione lunga o miniature di album di 160×160 pixel.

Il termine vignette è talvolta usato per descrivere un'immagine più piccola dell'originale, più grande di una miniatura, ma non più di 250 pixel nella dimensione lunga.

Registi, artisti di storyboard e grafici, così come altri tipi di artisti visivi, usano il termine "schizzo in miniatura" ("thumbnail sketch") per descrivere un piccolo disegno su carta (di solito parte di un gruppo) utilizzato per esplorare rapidamente più idee. Gli schizzi in miniatura sono simili agli scarabocchi, ma possono includere tanti dettagli quanto un piccolo schizzo. Uno schizzo in miniatura "completo" di un progetto stampato, più o meno nelle dimensioni finali, viene spesso definito "comp" e può essere molto dettagliato. Lo scopo delle miniature era di visualizzare le idee in una forma in miniatura, simile a un'illustrazione stenografica. Spesso gli animatori della vecchia scuola usavano questo processo per annotare rapidamente le "pose" chiave che facevano parte di una sequenza di animazione. Questi disegni compatti erano poi appuntati sopra il tavolo di animazione, facilmente visibili. Mentre l'animatore lavorava alla creazione dei disegni finali di ogni posa, le miniature aiutavano a mantenere rilevante l'ideazione originale.

Layout

Esistono diversi modi per disporre i thumbnails:

• 
  Esempio di griglia per slideshow. I thumbnails possono essere sotto, sopra o ai lati dell'immagine ingrandita.
• 
  Griglia personalizzata. Senza particolari allineamenti, con alcune immagini visualizzate intenzionalmente più grandi di altre.
• 
  Griglie in muratura o a cascata. Le immagini formano colonne uguali, mantengono le proporzioni e vengono tutte ridimensionate per avere la stessa larghezza.
• 
  Griglie con proporzioni fisse. Le immagini vengono ritagliate automaticamente in un quadrato.
• 
  Griglie standard. Le immagini mantengono le loro proporzioni, ma sono contenute in un rettangolo specifico.
• 
  Griglia per i thumbnails usata da Google nei suoi risultati di ricerca.
• 
  Thumbnails su un dispositivo mobile

Esempi nel web

Thumbnails generati dinamicamente lato client:

function ThumbnailGenerator() {
  this.resizeCanvas = document.createElement('canvas');

  this.generate = function (imgSrc, thumbDims, compression) {
    [this.resizeCanvas.width, this.resizeCanvas.height] = [thumbDims.x, thumbDims.y];
    const ctx = this.resizeCanvas.getContext("2d");
  
    const tmp = new Image();
  
    const ret = new Promise(resolve => {
      tmp.onload = () => {
        ctx.drawImage(tmp, 0, 0, thumbDims.x, thumbDims.y);
        resolve(this.resizeCanvas.toDataURL('image/jpeg', compression || 0.5));
      };
    });
    tmp.src = imgSrc;
    return ret;
  };

  this.generateBatch = function (imgSrcs, thumbDims, compression) {
    return Promise.all(imgSrcs.map(img => this.generate(img, thumbDims, compression)));
  }

  return this;
}

Thumbnails generati in modo statico con HTML e CSS:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>

<h2>Thumbnail</h2>
<p>Clicca per ingrandire.</p>

<a target="_blank" href="apple.jpg">
  <img src="apple.jpg" alt="Mela" style="width:150px">
</a>

</body>
</html>

Galleria d'immagini

• 
• 
• 

Altri progetti

Altri progetti

• Wikimedia Commons

• Wikimedia Commons contiene immagini o altri file su Thumbnail

Controllo di autorità	GND (DE) 7667604-3