{"id":41571,"date":"2023-01-10T12:52:01","date_gmt":"2023-01-10T10:52:01","guid":{"rendered":"https:\/\/www.hostinet.com\/formacion\/?p=41571"},"modified":"2023-01-11T18:28:37","modified_gmt":"2023-01-11T16:28:37","slug":"que-son-los-thumbnails-y-para-que-sirven","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/general\/que-son-los-thumbnails-y-para-que-sirven\/","title":{"rendered":"Qu\u00e9 son los Thumbnails y para qu\u00e9 Sirven"},"content":{"rendered":"
<\/div>

\"Qu\u00e9<\/p>\n

Los thumbnails<\/strong>, pese a su extra\u00f1o nombre, los habr\u00e1s visto un multitud de ocasiones en los distintos sitios web que visitas, ya que son esas peque\u00f1as miniaturas de im\u00e1genes<\/strong> que nos sirven para identificarlas antes de verlas en su tama\u00f1o real.<\/p>\n

Su uso en toda la red es muy habitual y es raro no encontrar alguna miniatura de una imagen o v\u00eddeo en un sitio web que muestre elementos visuales, ya sean im\u00e1genes o v\u00eddeos, pero los thumbnails son muy pr\u00e1cticos en realidad<\/strong>, as\u00ed que vamos a ver c\u00f3mo usarlos y crearlos.<\/p>\n

 <\/p>\n

\u00bfQu\u00e9 es un Thumbnail?<\/h2>\n

Un thumbnail<\/strong> es una vista previa en miniatura de una imagen o v\u00eddeo que podemos encontrar en una web o aplicaci\u00f3n.<\/p>\n

Su finalidad es simple, con simple vistazo<\/strong> puedes ver y encontrar el archivo que te interesa y puedes acceder a \u00e9l de una manera r\u00e1pida.<\/p>\n

Tambi\u00e9n suponen un ahorro de recursos en un hosting, ya que por un lado no es necesario cargar todas las im\u00e1genes en su tama\u00f1o real<\/strong> y por otro el usuario puede acceder a la informaci\u00f3n que busca, sin tener que ir abriendo todos los iconos de uno en uno<\/strong> hasta encontrarlo.<\/p>\n

 <\/p>\n

\u00bfD\u00f3nde Podemos usar los Thumbnails?<\/h2>\n

Por lo general, los thumbnails se han utilizado en im\u00e1genes<\/strong> y v\u00eddeos<\/strong>, ya que son los dos elementos visuales m\u00e1s utilizados en la web.<\/p>\n

Pero tambi\u00e9n se utilizan en sistemas operativos y aplicaciones de escritorio, con el mismo objetivo, que es poder mostrar una vista previa del archivo al usuario.<\/p>\n

En redes sociales se han convertido en una constante que, adem\u00e1s de facilitar la localizaci\u00f3n, se utilizan como una llamada a la acci\u00f3n<\/strong>.<\/p>\n

Es decir, que el thumbnail se dise\u00f1a<\/strong> para que sea m\u00e1s atractivo y llame m\u00e1s la atenci\u00f3n del usuario, de esta forma tendr\u00e1 m\u00e1s visualizaciones, likes<\/em>, etc…<\/p>\n

 <\/p>\n

\u00bfC\u00f3mo crear un Thumbnails?<\/h2>\n

La forma m\u00e1s sencilla de crear un thumbnail<\/strong> es de forma autom\u00e1tica, es decir, que se encargue un programa o aplicaci\u00f3n de generar una miniatura de muestra por si s\u00f3lo.<\/p>\n

Esto es muy interesante si tienes que generar muchas miniaturas y lo \u00fanico que buscas es que el usuario tenga una referencia de la imagen, pero no llamar\u00e1 mucho la atenci\u00f3n<\/strong>.<\/p>\n

Cualquier aplicaci\u00f3n, CMS o sistema operativo crear\u00e1 thumbnails de manera autom\u00e1tica por ti, pero si lo que quieres es utilizar el thumbnail como herramienta para llamar la atenci\u00f3n, los mejor es dise\u00f1arlo a medida<\/strong>.<\/p>\n

Para crear un thumbnail necesitas una aplicaci\u00f3n que te permita editar im\u00e1genes<\/strong>.<\/p>\n

Aqu\u00ed ya depende de la aplicaci\u00f3n que quieras usar, pero es recomendable una aplicaci\u00f3n tipo Photoshop<\/strong>, en la que puedas trabajar con capas.<\/p>\n

Como Photoshop<\/strong> es un programa profesional y caro, puedes utilizar alguna alternativa gratuita que, sinceramente, para crear un thumbnail son m\u00e1s que capaces.<\/p>\n

Hay muchas opciones que puedes encontrar para sustituir Photoshop, pero aqu\u00ed te dejamos dos opciones Open Source<\/em> y multiplataforma, para que puedas instalarla y usarlas libremente:<\/p>\n

    \n
  • GIMP<\/a><\/strong>
    \nEs la aplicaci\u00f3n tipo Photoshop gratuita m\u00e1s popular. Tiene miles de opciones, as\u00ed que la curva de aprendizaje puede ser un poco elevada, pero es el m\u00e1s parecido a Photoshop.<\/li>\n
  • Krita<\/a><\/strong>
    \nAunque tiene un perfil m\u00e1s enfocado a crear ilustraciones y pintura digital, tambi\u00e9n puedes usarlo para crear thumbnails sin problemas.<\/li>\n<\/ul>\n

    Si buscas algo online, una opci\u00f3n muy recomendable es Canva<\/a><\/strong>, en su versi\u00f3n gratuita.<\/p>\n

    Si no tienes experiencia previa en utilizar aplicaciones tipo Photoshop, con Canva<\/strong> podr\u00e1s crear tus thumbnails sin problemas, adem\u00e1s, tienen plantillas que puedes utilizar para crear las miniaturas<\/strong>\u00a0de tus v\u00eddeos.<\/p>\n

    Su interface es muy sencilla de aprender y la versi\u00f3n gratuita es m\u00e1s que suficiente para crear cualquier tipo de dise\u00f1o, aunque eso s\u00ed, se trata de una opci\u00f3n online<\/strong>, por lo que necesitar\u00e1s conexi\u00f3n a Internet para poder utilizarla.<\/p>\n

     <\/p>\n

    Recomendaciones para Crear un Thumbnail Llamativo<\/h2>\n

    Si entras en YouTube, ver\u00e1s que la mayor\u00eda de los thumbnails son muy llamativos y que est\u00e1n dise\u00f1ados para llamar tu atenci\u00f3n<\/strong>.<\/p>\n

    \"Ejemplo<\/p>\n

    Esto es as\u00ed porque se trata de un dise\u00f1o realizado a prop\u00f3sito para mostrar en YouTube.<\/p>\n

    Puedes dejar a la aplicaci\u00f3n que escoja la captura de pantalla, pero quedar\u00eda menos llamativo y tendr\u00eda menos opciones de conseguir un click.<\/p>\n

    Hay que tener algunas cosa en cuenta para crear un thumbnail que sirva para llamar la atenci\u00f3n a los usuarios, sobre todo en los v\u00eddeos, ya que en las im\u00e1genes s\u00f3lo podr\u00e1s crear un thumbnail de la misma imagen.<\/p>\n

      \n
    • Usa im\u00e1genes llamativas<\/strong>
      \nYa que puedes elegir, elige la imagen m\u00e1s llamativa que puedas, sobre todo en los v\u00eddeos, en los que puedes escoger el frame<\/em> que quieras. Puede ser un momento interesante del v\u00eddeo o una imagen de referencia que tenga que ver con el tema del v\u00eddeo.<\/li>\n
    • A\u00f1ade texto, pero sin pasarse<\/strong>
      \nA\u00f1adir un titular al thumbnail siempre es buena idea, pero sin pasarse, ya que estamos hablando de una miniatura y si a\u00f1ades mucho texto, no ser\u00e1 legible, as\u00ed que tenlo en cuenta.<\/li>\n
    • Usa la misma tipograf\u00eda, colores y logo<\/strong>
      \nPara facilitar al usuario la identificaci\u00f3n de tus thumbnails, es recomendable, en medida de lo posible, utilizar siempre el mismo tipo de tipograf\u00eda, los mismos colores y si lo usas, el mismo logo en el thumbnaiul.<\/li>\n
    • Crea distintos thumbnails para cada servicio<\/strong>
      \nTomando una base de un dise\u00f1o de un thumbnail, es recomendable adaptar el tama\u00f1o a los distintos servicios en los que vayas a usarlo, ya que suelen tener tama\u00f1os distintos. Es m\u00e1s trabajo, pero queda mejor y los resultados ser\u00e1n mucho mejores.<\/li>\n
    • Usa el clickbait, pero con sentido<\/strong>
      \nEl clickbait<\/em> es un forma de llamar la atenci\u00f3n con un titular para que el usuario haga click. El problema del clickbait es que el titular no tenga nada que ver con lo que vas a mostrar o muy poco. Est\u00e1 bien utilizar clickbait y \u00abexagerar un poco\u00bb, pero s\u00f3lo un poco, de lo contrario los usuarios se sentir\u00e1n enga\u00f1ados y los perder\u00e1s.<\/li>\n<\/ul>\n

       <\/p>\n

      Cosas a Tener en Cuenta<\/h2>\n

      Ya has visto qu\u00e9 es un thumbnail<\/strong>, la forma de hacerlo y c\u00f3mo puedes aprovecharlo para conseguir m\u00e1s clicks<\/strong>, sobre todo el los v\u00eddeos, ya que tiene m\u00e1s opciones para jugar<\/em> con el dise\u00f1o.<\/p>\n

      Sin duda alguna, la miniaturas son muy \u00fatiles en muchos aspectos y no debes desaprovecharlos, sobre todo si usas redes sociales y v\u00eddeos, ya que puedes aumentar el CTR mucho con un thumbnail bien dise\u00f1ado<\/strong>.<\/p>\n

      \"Hosting<\/a><\/p>\n