Las miniaturas de WordPress, ¡el mega tutorial!

Miniaturas WordPress

Hoy vamos a darle un repaso a fondo a algo que usamos todos los días en nuestras páginas hechas en WordPress. Las miniaturas o thumbnails.

¿Sabes lo que son las miniaturas?

¿Las estás usando correctamente en tu WordPress?

Pues vamos a averiguarlo ya.

¿Qué son las miniaturas?

Las miniaturas son una serie de imágenes que se crean de forma automática, a partir de una imagen que subimos a nuestro WordPress.

Pongamos un ejemplo.

Supongamos que tenemos una imagen en nuestro ordenador que se llama foto-de-fiesta.png.

Si tenemos configurados en nuestro WordPress diferentes tamaños como el 150x150px, 300x300px y 1024x1024px.

Al subirla, se crearán las miniaturas foto-de-fiesta-150×150.png, foto-de-fiesta-150×150.png, etc.

A eso se le llaman miniaturas.

¿Para qué sirven las miniaturas?

Las miniaturas nos sirven, aparte de otras cosas, para 2 muy importantes.

La primera para que siempre usemos imágenes acordes con el tamaño de pantalla o el espacio donde se usen.

Esto hará que nuestra web cargue mucho más rápido lo que mejorará el SEO.

La mayoría de las plantillas hacen una gestión automática de esto, así que no tendrás que hacer absolutamente nada.

Por poner un ejemplo, mostrarán el tamaño de imagen correspondiente a como hemos configurado nuestro apartado blog.

Pero a veces, por haber hecho un cambio de plantilla, o por insertar imágenes manualmente, no usamos los tamaños correctos.

Si en nuestro blog tenemos un ancho de 600px, es tontería poner imágenes más grandes, porque la web se hará más pesada.

O si la barra lateral tiene de ancho 300px, tampoco nos interesa meter imágenes de 500px de ancho.

Para ello lo suyo es usar un tamaño de miniatura que hayamos definido previamente.

El segundo uso que se le da, el de las imágenes destacadas.

WordPress dispone de una herramienta muy potente que es la imagen destacada, con la que usando un tamaño de miniatura, podremos ver la imagen en su tamaño correcto, siempre y cuando lo hagamos bien.

Usando las miniaturas en entradas y páginas

Ya hemos visto que las plantillas suelen usar las miniaturas de forma automática para apartados como el blog.

¿Pero sabrías usar el tamaño adecuado en un post o en una página?

Cuando añadimos una imagen a un artículo o página desde el botón de añadir objeto, tenemos 2 opciones.

Insertar miniaturas en páginas y entradas WordPress

Creamos previamente una miniatura que se adapte al ancho del post.

O recortamos la imagen antes de subirla a WordPress.

La opción de la miniatura es mucho más rápida y te olvidarás de tener que editar cada foto a mano.

Pero tenlo en cuenta a la hora de usar herramientas que ahora veremos.

¿Están correctamente tus miniaturas?

Vamos a hacer un ejercicio que te ayudará a usar las miniaturas correctas y con el que conseguirás acelerar tu web.

Lo primero es saber qué tamaños de imágenes usas en diferentes apartados de tu web, como el blog, barra lateral, pantalla completa, etc.

Debes de saber, que tenemos que comprobar esos tamaños en el ordenador, que es donde nuestra web(supuestamente responsive), alcanza su máximo ancho de pantalla.

Comprobando el tamaño de las miniaturas en WordPress

Yo voy a probar con el artículo anterior que hice.

Si pongo el ratón encima de la foto, pulso botón derecho y le doy a inspeccionar desde Chrome, me indica que la imagen que uso tiene 780x400px, pero que en realizad(natural) tiene 1024x525px.

Si no te sale la ventanita, pon el ratón encima de la url de la imagen que sale abajo.

Osea que estoy metiendo una imagen bastante más grande de lo que necesito y eso que esta miniatura la inserta de forma automática la plantilla.

Lo mismo te puede pasar así, o por el contrario. Que la imagen sea más pequeña.

Puedes hacer esta comprobación en las imágenes de la barra lateral, para otros tamaños que muestre tu blog, etc.

Si multiplicas este problema, por todas las fotos de tu web, ya sabes otro motivo porque la web puede cargar lenta.

¿Y porqué ocurre todo esto?

El cambio de plantilla es uno de los motivos más frecuentes.

Las miniaturas y los cambios de plantilla

Si en nuestro WordPress estamos usando la plantilla que siempre hemos usado, pues no creo que pase esto.

El problema suele venir cuando hacemos un cambio de plantilla, como yo he hecho recientemente.

Debes tener muy claro que tu web crea 2 tipos diferentes de miniaturas.

Por un lado las que crea WordPress de forma automática.

Y por otro, las que crea tu plantilla.

Si hemos cambiado la plantilla por otra, solo se verán bien las imágenes que subamos de nuevo, dado que son las que se crearán de forma correcta.

¿Qué es lo que tendría que hacer entonces?

Pues si no tenemos los tamaños adecuados, habrá que configurarlos ¿no?

Si, pero hay un problema.

Todas las plantillas que uses, traen(o deberían) sus propios tamaños de miniaturas, así que ahí no tienes que tocar nada.

Pero WordPress seguirá creando tamaños que puede que tú uses o no. Ya depende de ti.

Yo personalmente los desactivo y solo uso los tamaños que crea mi plantilla.

Configurando el tamaño de las miniaturas desde los ajustes de WordPress

Si nos vamos a AjustesMedios, podremos ver los tamaños que nos crea WordPress, y como he dicho antes independientemente de las miniaturas de la plantilla.

WordPress ajustes multimedia

Los 3 tamaños usados por WordPress son large, medium y thumbnail.

En el caso de que no vayamos a usar ninguno de estos tamaños, lo suyo es desactivarlos porque ahorraremos espacio en nuestro hosting.

Eso se hace poniendo todos los números de tamaños a 0 y guardando los cambios.

Ahora cada vez que subamos una imagen nueva, estos 3 tamaños no se crearán.

Comprobando los tamaños de miniaturas de nuestro tema

Llegamos a un punto muy interesante del tutorial.

¿Cómo comprobar los tamaños de miniaturas que crea una plantilla?

Para esto hay varias opciones.

Mirar en el panel de control de la plantilla

Algunas plantillas suelen traer un panel de control y pueden dar la posibilidad de elegir que miniaturas crear.

O por lo menos, comprobar cuáles se están creando.

Archivos de contenido Genesis

En mi nueva plantilla Altitude Pro, podemos entrar en los ajustes de Genesis y comprobarlo.

En este caso la única que me crea es la featured-page, dado que las otras 3 son de WordPress.

Desde el código de la plantilla

Si eres de los que le mete mano al código, podrás comprobar qué tamaños de miniaturas usa tu plantilla y que normalmente suele ser en el archivo Functions.php.

Aunque esto es un poco lioso con algunas plantillas, así que te voy a dar una solución mucho mejor y más sencilla.

Desde tu hosting

Si hay un método sencillo para comprobar esto, es desde el mismo hosting.

Para hacer la prueba, lo único que tienes que hacer es subir una imagen desde WordPress.

Comprobar miniaturas en hosting WordPress

Una vez subida y si entras a tu hosting, podrás comprobar los tamaños que van creando tanto tu WordPress, como tus plantillas nuevas y antiguas.

Captura de numero de miniaturas

Si lo hacemos desde Cpanel, entramos en Archivos – Administrados de archivoscarpeta wp-contentuploads y ya dentro, pues elegimos el año y mes que queramos.

Podemos comprobar que de la foto que yo he subido y que se llama Altitude Pro theme, se han creado 5 miniaturas. 3 son de WordPress y 2 de la misma plantilla.

Ojo: Aquí pueden aparecer muchas más miniaturas, como por ejemplo de plugins.

Hay plugins como los de contenido relacionado, de los que crean galerías, etc, que suelen crear sus propios tamaños de miniaturas.

Por eso es tan importante saber a qué pertenece cada miniatura.

Ahora que supuestamente tenemos las miniaturas correctas para nuestra web.

Lo que toca es volver a generar cada una de ellas, para que se adapten correctamente.

Regenerando las miniaturas

En tu caso, si usas un tema que ya trae predefinidas esas miniaturas, podrás seguir con este paso directamente.

Yo voy a ajustar los tamaños que necesito y seguimos.

En mi caso me quedaré con uno de 780x400px, uno de 300x150px y otro de 150x150px, que son las que suelo usar con regularidad y que usa mi plantilla.

Si necesito insertar alguna vez, otro tamaño diferente, prefiero subirla ya recortada.

Para regenerar las miniaturas de WordPress, podemos usar muchas herramientas.

Ojo: No te recomiendo instalar el plugin que te voy a explicar.

Si buscamos en Google algo así como regenerar miniaturas o thumbnails, el primero que nos aparece y que es el más usado es Regenerate Thumbnails. No es que se mala herramienta, pero tiene un fallo bastante gordo.

Podemos probarlo si quieres yendo a PluginsAñadir nuevo – ponemos en el buscador Regenerate Thumbnails, le damos a instalar y lo activamos.

Ahora nos iremos a HerramientasRegen. Thumbnails.

Regenerate Thumbnails

Si te das cuenta, la herramienta más sencilla no puede ser.

Osea que le damos al botón y se crearán de nuevo todas las miniaturas de nuestra web.

Regenerando nuevas miniaturas

Lo que si debes tener en cuenta, es que esto hará un uso intensivo de recursos de tu hosting, por eso debes tener un hosting de calidad y que no esté saturado.

Pues nada, le damos a Regenerate all thumbnails.

Dependiendo del número de imágenes tardará más o menos. No cierres la ventana hasta que termine.

Ejemplo miniatura recortada WordPress

En mi caso se ha solucionado el problema de la imagen anterior.

Hasta aquí puede parecer todo guay.

Todas nuestras miniaturas funcionan, etc.

Pero sigue leyendo…

Las miniaturas y como afectan a tu hosting

Lo bueno de usar miniaturas, es que siempre usaremos un tamaño adecuado para cada apartado de nuestra web.

Lo malo de ésto es que si no se hace bien, con el tiempo estaremos malgastando recursos de nuestro hosting.

Problemas de espacio

Si WordPress crea 3 tamaños de miniaturas y tu plantilla otros 5 o 6, pues por cada imagen que subamos, estamos creando otras 9.

Después de haber usado la herramienta anterior, el número de miniaturas ha aumentado considerablemente.

Si te pongo la captura de la misma imagen de antes, mira lo que ha pasado.

Miniaturas generadas cpanel

Si antes teníamos la imagen más 5 miniaturas, ahora tenemos la imagen + 7.

El problema de esto es que si yo configuré que solo necesito 3 tamaños de ancho 780, 300 y 150, pues el resto no me sirven y están ocupando espacio.

¿La solución?

Pues usar una herramienta que elimine las miniaturas que no sirvan y que creen solo las que necesitamos.

Ejemplo borrado miniaturas WordPress

Esta herramienta se llama Force Regenerate Thumbnails y la interfaz, el modo de funcionar y todo, es exactamente igual a la anterior, menos por un detalle.

También borra las miniaturas que no sirven, como en mi caso la de 100, 300, 332, etc…, que se muestran en deleted.

Osea que te soluciona todos esos problemas del tirón.

¿Por qué he puesto este ejemplo?

Porque quiero que veas que no siempre las herramientas más usadas, son las mejores.

Imagina que has cambiado ya de plantilla 3 veces y cada una usa diferentes tamaños.

Más algunos plugins que creen sus propias miniaturas y los hayas desinstalado hace ya tiempo.

Pues cada vez que las regeneres, son más imágenes que tendrás sin usar.

En mi caso he aligerado el peso de la página web considerablemente y eso que yo solo he usado 2 plantillas en todo este tiempo.

Así que imagina en una página web que tenga miles y miles de imágenes.

Rendimiento del servidor

Si al problema de espacio, le sumamos que cada vez que subas una imagen, se tenga que crear cada una de las miniaturas.

Y si encima es una web que tenga bastante gente trabajando como redactores, etc.

Pues conseguimos un rendimiento bastante malo de nuestra web al subir imágenes.

Además, piensa que al usar imágenes no optimizadas, también tarda más en cargar la web y eso también influye en el rendimiento.

Por eso es importante controlar el número de miniaturas que se crean en WordPress y usarlas correctamente.

Miniaturas y SEO

Como te he explicado antes, es fundamental usarlas para mejorar la velocidad de la web, dado que afecta al SEO, pero esto no queda ahí.

También debes de saber que al igual que cualquier otra imagen que subas a WordPress, debes de optimizar el SEO a estas imágenes.

Con esto me refiero a rellenar correctamente el nombre del archivo, el título y texto alternativo de la misma.

Porque las miniaturas usarán estos datos SEO también.

Configurando el tamaño de miniaturas desde código

Para los que les gusta tocar código o como yo que uso Genesis, podemos meterle mano al código y crear más tamaños de miniaturas en caso de que lo necesitemos.

Para ello, agregaremos nuevos tamaños de imágenes al archivo Functions.php de nuestra plantilla.

Recuerda que cada vez que añadas un nuevo tamaño de miniatura, deberás regenerarlas.

El funcionamiento es básicamente este:

add_image_size ( nombre, ancho, alto, recorte )

  • Nombre: Pues el nombre que le pongamos a la miniatura como por ejemplo imagen_sidebar. Intenta usar minúsculas y sin espacios.
  • Ancho: Pues el ancho en píxeles de la imagen.
  • Alto: Lo mismo que el ancho.
  • Recorte: El recorte es importante que esté en verdadero(true), porque así la imagen será de unas proporciones adecuadas para la web.

Por ejemplo:

add_image_size ( imagen-lateral, 300, 300, true )

También se puede ajustar el modo de recorte para que lo coja en el centro, arriba, a la derecha o izquierda, etc. Puedes ver más aquí.

Yo personalmente prefiero dejarlo como viene, que es en el centro, dado que es complicado porque cada imagen es diferente.

Así que tendrás que crear una linea, por cada una de las miniaturas que quieres agregar a tu web.

Resumiendo

Espero que con este tutorial hayas aprendido lo que son las miniaturas o thumbnails de WordPress, como usarlas y como mejorar las que ya tienes en tu WordPress para un funcionamiento óptimo de tu web.

  • Preocúpate por usar los tamaños correctos.
  • Optimiza tus imágenes para que carguen lo más rápido posible.
  • No te olvides de optimizar su SEO.
  • Y al loro cuando cambies de plantilla porque se puede liar.

Además conseguirás optimizar tanto el espacio de tu web, como el rendimiento de tu servidor.

Si tienes alguna duda o quieres agregar algo, te espero en los comentarios.

¿Quieres más visitas a tu blog?

Descarga mis 50 técnicas para mejorar tus visitas y

entra a formar parte de mi comunidad.

Información básica sobre Protección de Datos

Responsable: Raúl González Sedeño.

Finalidad: Gestión del envío de información solicitada y de suscripciones al blog.

Legitimación: Consentimiento del interesado.

Destinatarios: Se comunicarán datos a Active Campaign para gestionar las suscripciones al blog como plataforma de envío de boletines.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.

Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos personales en mi página web ragose.com + info.

He leído y acepto la política de privacidad.

20 comentarios en “Las miniaturas de WordPress, ¡el mega tutorial!”

  1. Erik (Tierras Insólitas)

    Muy buenas!!!

    El “tamaño medio” configurado en WordPress lo tenía en 500px y las imágenes puestas en mis artículos a ese tamaño. Me parecía demasiado pequeño así que he configurado el nuevo tamaño a 650px. He pasado el plugin para generar de nuevo las miniaturas. El problema es que ahora todos los artículos escritorios anteriormente dicen teniendo las fotos a 500px (y eso que el plugin las ha borrado). ¿Hay alguna forma de que se cambien por las de 650px de forma automática? ¿Sin tener que editar de uno a uno el artículo?

    Gracias!!;;

    1. Erik debes de tener en cuenta la plantilla. Osea que por mucho que bajes el tamaño, si la plantilla las aumenta o disminuye no tendrás en tamaño exacto y además perderán calidad. Es cosa de verlo.

      Saludos.

  2. ¡Hola!

    Gran tutorial, y lo del plugin para regenerar la miniaturas y borrar las que no se utilizan perfecto, no lo conocía 🙂
    Pero me gustaría hacer una pregunta, ya que he llegado a este blog buscando información sobre un problemilla que tengo: desde que he actualizado recientemente WordPress a la 4.5 (4.5.3 para ser exacto) he notado que las miniaturas las realiza con menos “peso”. Quiero decir, si una miniatura antes, por poner un ejemplo, tenía 20kb, ahora tiene 14kb, con el mismo tamaño, éste no cambia, pero claro, al tener menos peso salen un pelín más pixeladas. Se nota poco, pero lo suficiente.

    He hecho pruebas con otro sitio que tengo pero con una versión anterior de WordPress, y este sí sigue haciendo las miniaturas con el peso anterior, es decir, y siguiendo con el ejemplo de antes, a 20kb una imagen de 247×300 (digo 20kb como puedo decir 23 o 19, según la información de la fotografía, claro). ¿Es que WordPress ha hecho algo en las nuevas versiones para que el peso de las imágenes sea algo menor?

    Gracias de antemano 🙂

    1. Rafa normalmente las actualizaciones de WordPress suelen mejorar muchos aspectos y el de las imágenes es uno de ellos. Pero si te digo la verdad, no he llegado a medir el peso de las imágenes, porque yo uso mis propios plugins para ello.

      Saludos.

      1. Gracias por la respuesta, Raúl.

        Pero si puedes hacer la prueba, te invito a ello. Si te es posible, sube cualquier foto a una web con una versión reciente de WP, y luego haz lo mismo con la misma foto a otra web con una versión anterior (y que hagan la miniatura con el mismo tamaño, lógicamente). Mira el “peso” y comprobarás que en ambas imágenes, aunque de mismas dimensiones, es distinto. Esto en miniaturas pequeñas se nota y bastante 🙁

  3. Hola, tengo un problema. Yo estoy poniendo imágenes de cuadros y quiero que la miniatura guarde la proporción de aspecto que tiene el original, y no consigo que así sea, al incorporarla a la tienda del blog. Sin embargo, una de las imágenes, no sé por qué, sí que guarda esa relación de aspecto. El resto son cuadradas todas y ya cuando las abres se muestra su proporción y aspecto real. Gracias.

  4. Hola Raúl, muy interesante tu post, pero tengo una inquietud.

    Cada vez que subo una imagen destacada a mi blog, wordpress me la recorta y la imagen no queda bien.
    Qué estoy haciendo mal o que debo hacer para que la imagen quede exactamente igual que la original. Este me vuelve loco.

    Gracias

  5. Gracias Raúl, tengo que decir que se trata del mejor tutorial sobre miniaturas de WordPress que se puede encontrar en todo Internet. Y lo puedo decir bien alto, porque llevo tiempo buscando uno que despeje mis dudas. Desconocía por completo lo del duplicado de miniaturas, por lo que ahora empezaré a trabajar en ello, como tu indicas.

    Pero, ahora bien, llevo tiempo trabajando en un cambio de plantilla. La tengo finalizada pero no he hecho el cambio porque tengo aproximadamente 55.000 imágenes. Aunque tengo un servidor dedicado con disco SSD, no sé si utilizar el Regenerate Thumbnails o hay otra forma, como por ejemplo local. Es simplemente para no saturar el servidor y sobre todo por el tiempo, ya que la web no puede estar inactiva, o lo hago como tu indicas.

    ¿Cómo puedo hacer este paso? Espero tu respuesta. Muchas gracias.

    1. Hola David!

      Me alegro que te haya gustado.

      Respecto a tu consulta, Yo usaría sin duda el plugin para regenerar las miniaturas. Yo en casos como el tuyo en el que hay muchas imágenes, si veo que el servidor va muy justo aumento los recursos temporalmente. Pero vaya, que tienes que ir muy justo para necesitarlo.

      Saludos.

  6. Hola Raul y enhorabuena por este post.

    Te ruego me resuelvas una duda: el hecho de haber buscado/ leído tu post es porque tengo un problema en una web, la cual está compuesta básicamente por Sliders (Slider Revolution) que por lo que he visto subí en su día las fotos bastante sobredimensionadas. La pregunta es si las miniaturas afectan a los sliders o éste redimensiona el tamaño al configurarlo, i consecuentemente no afecta.

    Muchas gracias de antemano.

    Un cordial saludo.

    Ferran.

    1. Hola Ferran!

      Pues mira, el tema de los sliders tiene tela. Escribí un post sobre ello, pero lo tengo pendiente de actualizar.

      Las miniaturas que usan los sliders son para otra cosa. Para poner unas imágenes en pequeño y que al hacer clic salga ese slide.

      Si no recuerdo mal, cuando creas un slider tienes que aplicarle un tamaño, osea ancho y alto. Y las imágenes que subas tienen que ser de ese mismo tamaño.

      Pero la cosa no queda ahí.

      Si quieres hacerlo bien, lo suyo es crear el mismo slider por cada tamaño de pantalla (pc, tablet y móvil), para que se usen imágenes de un tamaño lo más cercano a la resolución de pantalla con la que se acceda.

      Espero que te ayude.

      Saludos y gracias por tu comentario.

  7. ¡Uf!
    Un artículo muy detallado. Muchas gracias.
    Hace tiempo que el tema fotos y miniaturas me “quita el sueño”.

    Mi pregunta es: ¿el “hotlinking” de imágenes desde Flickr (por ejemplo) es una buena solución para evitar problemas de espacio en el servidor o al final acaba siendo más un problema que una solución?

  8. Hola Javi!

    Yo personalmente estoy en contra de usar imágenes fuera de WordPress. Puede que algunas dejen de funcionar, que cambien la url, no puedes optimizarlas, cuentan para la carga de la web y mil cosas más. Mira, me lo apunto para un post!

    Si lo que te preocupa es el espacio, a día de hoy hay hostings que te dan por lo menos 10 gigas en los paquetes más baratos como Siteground. Muchas imágenes tienes que tener para llenarlo o tenerlas muy mal optimizadas.

    Me alegro que te haya gustado. Saludos.

    1. Hola Raúl.
      Gracias por tu respuesta. ¡Más rápido que Flash!

      Sí, bueno, he leído de todo. Y reconozco que no es una solución 100% perfecta, pero es que lo de usar gran cantidad de fotos (yo suelo usar al menos 3 por artículo) puede ser un problema de gestión, ¿no?
      De momento las que subo a photobucket las subo optimizadas.
      Soy consciente de que acabaré subiéndolas a mi servidor…pero a medio/largo plazo.
      De momento ya lo he hecho con las imágenes destacadas.

      ¡Espero tu artículo como agua de mayo!

      Gracias

  9. Hola Raúl,
    hace muchos días que deseo que alguien me ayude con crear miniaturas automáticas y que tengan movimiento como como la previa de un video, por ejemplo youtube ya lo tiene en su página e igual la página para adultos x vídeos

    Lo que deseo es que si hay algún plugin, que importa que se tenga que pagar para porder crear estas miniaturas automáticamente

  10. Hola, que buena informacion, pero tengo un problema más grande…. de momento a otro en el backend, en el menu derecho inferior donde se asigna la foto destacada… antes alli mismo la veia grande… del tamaño de ese contenedor y de pronto se ve miniatura, muy pequeña y ahora todo se ve asi en el backend,,, en el frontend… y no tengo forma de ver las imagenes grandes destacadas de pagina… auxxxiliiooo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad y la política de comentarios.

Información básica sobre Protección de Datos

Responsable: Raúl González Sedeño.

Finalidad: Gestión del envío de información solicitada, gestión de suscripciones al blog y moderación de comentarios.

Legitimación: Consentimiento del interesado.

Destinatarios: Se comunicarán los datos a Active Campaign para gestionar las comunicaciones con el usuario.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.

Información adicional: Puede consultar la información adicional y detallada sobre protección de datos personales en mi página web ragose.com + info