Thumbnail

Da Wikipedia, l'enciclopedia libera.
Vai alla navigazione Vai alla ricerca

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

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[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].

La 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].

  • Il programma di digitalizzazione e catalogazione della biblioteca pubblica di Denver produce miniature di 160 pixel nella dimensione lunga[10].
  • Le linee guida della California Digital Library per le immagini digitali raccomandano 150-200 pixel per ogni dimensione[11].
  • Picture Australia richiede che le miniature siano di 150 pixel sul lato lungo[12].
  • Gli standard internazionali del progetto Dunhuang per la digitalizzazione e la gestione delle immagini specificano un'altezza di 96 pixel a 72 ppi[13].
  • YouTube consiglia la risoluzione di 1280×720 (con una larghezza minima di 640 pixel) con un rapporto di aspetto di 16:9[2].
  • DeviantArt produce automaticamente miniature di massimo 150 pixel nella dimensione lunga[2].
  • 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[2].
  • Picasa produce automaticamente miniature di massimo 144 pixel nella dimensione lunga o miniature di album di 160×160 pixel[2].

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.

Esistono diversi modi per disporre i thumbnails[15][16][17][18]:

Esempi nel web

[modifica | modifica wikitesto]

Thumbnails 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'immagini

[modifica | modifica wikitesto]
  1. ^ Erin Jansen,Vincent James, NetLingo: The Internet Dictionary, p. 381.
  2. ^ a b c d e Thumbnail: piccole immagini con una grande potenza espressiva, su IONOS Digitalguide. URL consultato il 6 settembre 2021.
  3. ^ (EN) 28 CSS Thumbnails, su Free Frontend. URL consultato il 6 settembre 2021.
  4. ^ openjurist.org.
  5. ^ (EN) admin, Top 10 : CSS Thumbnails, su csshint - A designer hub, 4 luglio 2019. URL consultato il 6 settembre 2021.
  6. ^ Online Etymology Dictionary, su etymonline.com, Online Etymology Dictionary. URL consultato il 5 marzo 2010.
  7. ^ AllWords.com. URL consultato il 5 marzo 2010.
  8. ^ a b Random House Word of the Day, su randomhouse.com. URL consultato il 5 marzo 2010.
  9. ^ OPodictionary, su podictionary.com. URL consultato il 5 marzo 2010.
  10. ^ About the Digitization and Cataloging Program at The Denver Public Library, su photoswest.org. URL consultato il 13 marzo 2013 (archiviato dall'url originale il 4 luglio 2003).
    «Thumbnail files are designed to display quickly and allow multiple images to be displayed simultaneously on a monitor screen for browsing. Thumbnails are 160 pixels on the long-dimension.»
  11. ^ CDlib.org, California Digital Library. URL consultato il 13 marzo 2013 (archiviato dall'url originale il 23 ottobre 2005).
  12. ^ Local History Digitisation Manual, su libraries.vic.gov.au. URL consultato il 13 marzo 2013 (archiviato dall'url originale il 19 febbraio 2011).
  13. ^ The International Dunhuang Project - Standards for Digitisation and Image Management, su idp.bl.uk. URL consultato il 13 marzo 2013 (archiviato dall'url originale il 20 aprile 2008).
  14. ^ (EN) admin, Top 20 : CSS Thumbnails, su gscode -Front end developer, 20 luglio 2020. URL consultato il 12 settembre 2020.
  15. ^ (EN) Alex Vita inspiration, tools, web-design Leave a comment 5 min read, The 4 types of thumbnail grids: what's the best way to display thumbs on your photography website?, su ForegroundWeb, 1º febbraio 2017. URL consultato il 6 settembre 2021.
  16. ^ Thumbnail grid examples, su eev.ee. URL consultato il 6 settembre 2021.
  17. ^ (EN) WonderPlugin Support, WordPress Slideshow with Thumbnails, su WordPress Plugin, 13 marzo 2014. URL consultato il 6 settembre 2021.
  18. ^ (EN) How to Get Thumbnail Images on Google Mobile Searches, su Columbus Digital Marketing Agency - Voted Top 1% in U.S. [Media Captain], 7 marzo 2021. URL consultato il 6 settembre 2021.
  19. ^ (EN) Andrew Tate, Generating Thumbnails Dynamically on the Client, su Medium, 2 febbraio 2021. URL consultato il 6 settembre 2021.
  20. ^ How To Create a Thumbnail, su w3schools.com. URL consultato il 6 settembre 2021.

Altri progetti

[modifica | modifica wikitesto]
Controllo di autoritàGND (DE7667604-3
  Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica