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.

P.D. Puedes aprender a optimizar WordPress gratis como WPOptimizer y recibir cada semana consejos de optimización probados para tener una web WordPress rápida, que mejorará su SEO y conversiones.

¿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-150x150.png, foto-de-fiesta-150x150.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.

Vaya, es de las tareas más importantes si quieres optimizar WordPress y mejorar su velocidad.

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 Ajustes - Medios, 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 archivos - carpeta wp-content - uploads 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 Plugins - Añadir nuevo - ponemos en el buscador Regenerate Thumbnails, le damos a instalar y lo activamos.

Ahora nos iremos a Herramientas - Regen. 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 es activar en el plugin la casilla de "Borra los archivos de miniatura de tamaños antiguos sin registrar para liberar espacio del servidor. Esto puede resultar en imágenes rotas en tus entradas y páginas".

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.

Únete gratis a WPOptimizers y aprende a optimizar WordPress

  • Acceso exclusivo a la comunidad de Discord.
  • Consejos semanales probados, para tener una web WordPress rápida.

Únete gratis a WPOptimizers y aprende a optimizar WordPress

Acceso exclusivo a la comunidad de Discord.
Consejos semanales probados, para tener una web WordPress rápida.

Información básica sobre Protección de Datos. Responsable: Raúl González Sedeño (yo mismo). Finalidad: Tratar la información que me pases para poder prestarte el servicio solicitado y ayudarte a tener una web rápida con mis consejos. Legitimación: Que me das permiso, vaya. Destinatarios: Tus datos se guardan en Active Campaign que es mi servicio de email marketing y que está acogido al acuerdo de seguridad EU-US Privacy. Resumiendo, que están protegidos. Derechos: Y obviamente puedes acceder, rectificar y suprimir tus datos, así como otros derechos cuando quieras. Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos personales en mi página web.