|
ThumbnailThumbnail (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.[1] 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. AttuazioneLe 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[2]. 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[3]. 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[4]. Attraverso JavaScript, HTML5 e CSS3 si possono aggiungere effetti di transizione e animazione alle miniature[5]. EtimologiaLa parola "thumbnail" è un riferimento alla miniatura umana e allude alle dimensioni ridotte di un'immagine, paragonabile alla dimensione del pollice umano[6][7]. Il primo uso della parola in questo senso risale al XVII secolo[8][9]. 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[8]. Dimensioni
Il termine vignette[14] è 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. LayoutEsistono diversi modi per disporre i thumbnails[15][16][17][18]:
Esempi nel webThumbnails generati dinamicamente lato client[19]: 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[20]: <!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'immaginiNote
Altri progetti
|
