WordPress

Tamaños de Imagen Predeterminados de WordPress y Cómo Añadir Tamaños Personalizados Adecuados

Cuando subes una imagen, WordPress hace mucho trabajo entre bastidores para que puedas servir la imagen a tus visitantes. Puedes aprovechar este proceso y añadir tamaños de imagen personalizados para evitar tener que cambiar el tamaño de las imágenes manualmente.

En este artículo, explicaré cómo y por qué WordPress crea diferentes tamaños de imagen. Luego te enseñaré cómo añadir tus propios tamaños de imagen modificando el archivo functions.php, regenerar las miniaturas y añadir tus nuevos tamaños de imagen al bloque de imágenes de Gutenberg y/o al bucle de WordPress.

¿Tienes prisa? Aquí está todo lo que necesitas saber sobre los tamaños de imagen de WordPress:

Explicación del tamaño de las imágenes en WordPress

Cada vez que sube una imagen a la biblioteca multimedia de WordPress, estas son las opciones de tamaño de imagen adicionales que WordPress crea por defecto:

  • Miniatura (150px)
  • Medio (300px)
  • Mediana Grande (768px)
  • Grande (1024px)

If your theme specifies additional image sizes, WordPress creates those as well. WordPress also preserves the original size you upload and names it Full as in full-size.

You can see all of these (with the exception of Medium_Large) in the Gutenberg image block Image Size drop down when inserting an image into a page or post.

¿Por qué WordPress crea tantas imágenes?

Las imágenes son como los pantalones: quieres asegurarte de que tienes la talla correcta. Los pantalones y las imágenes que son demasiado pequeños parecen tontos y es dolorosamente obvio para ti y para todos los demás que no encajan bien. Por el contrario, si son demasiado grandes, es un gran desperdicio. No le pondrías un pantalón hecho para un hombre a un bebé, ¿verdad? Es mucha tela extra que ni siquiera es necesaria. Ese bebé se va a perder en un pantalón 😉

Las imágenes son lo mismo. Si tu imagen es demasiado pequeña para el contenedor, se verá estirada o pixelada. Si tu imagen es demasiado grande, estás perdiendo ancho de banda y tiempo en descargarla para servirla en tu página. ¿Y para qué? Para nada.

Lo ideal es que las imágenes de tamaño completo que subas sean lo suficientemente grandes para que quepan en el contenedor de imágenes más grande de tu sitio, pero no más. Luego, cuando utilices las imágenes en tu sitio, deberás usar el tamaño exacto de la imagen que necesitas. Dado que escalar las imágenes para crear el tamaño correcto en Photoshop u otro editor de imágenes requiere un tiempo valioso, WordPress se encarga de esta tarea y lo hace por ti. ¡Gracias, WordPress!

Todo lo que tienes que hacer es elegir el tamaño adecuado al insertar una imagen en tu sitio para obtener los beneficios de rendimiento de usar una imagen que sea la correcta. Si los tamaños de imagen por defecto de WordPress no tienen el tamaño perfecto para tu tema, puedes ajustar los valores por defecto en la sección Medios > Ajustes o añadir tamaños personalizados para tener más opciones entre las que elegir.

Tenga en cuenta que medium_large se añadió para aprovechar el soporte de imágenes responsivas, por lo que no se incluye en la página de configuración. Hablando de imágenes responsivas…

Imágenes responsivas

Todas estas imágenes en varios tamaños sirven para otro propósito, por lo que no debe establecer los valores predeterminados a cero para evitar que WordPress las cree, como sugieren algunos tutoriales.

WordPress añadió las imágenes responsivas al núcleo en la versión 4.4. En lugar de rellenar los atributos src de las imágenes con la URL de una sola imagen, WordPress también añadió srcset (conjunto de fuentes) que es una lista de URLs de imágenes de varios tamaños.

¿Adivina qué imágenes utiliza para crear esa lista? Sí, WordPress utiliza las mismas imágenes en diferentes tamaños que crea cuando subes una imagen.

Ofrece esta lista al navegador para que pueda seleccionar una imagen que sea apropiada para el dispositivo del visitante. Si el visitante está usando un dispositivo móvil, recibirá una imagen más pequeña en el srcset. Si está visitando su sitio en un dispositivo Retina de escritorio, entonces recibirá el archivo de imagen Retina-ready de tamaño completo que usted subió. Una vez más, esta es la razón por la que debe subir una imagen lo suficientemente grande como para cubrir esa necesidad.

Cuando añada un tamaño de imagen personalizado, WordPress lo añadirá al srcset siempre que tenga la misma relación de aspecto. Si el tamaño de imagen personalizado recorta la imagen en una forma diferente, entonces se omitirá del conjunto.

«Optimización de imágenes más grandes en WordPress

WordPress 5.3 ha introducido una nueva forma de gestionar los archivos de imagen grandes detectando y generando un «tamaño máximo optimizado para la web» de los mismos.

¿Cómo funciona?

Cuando se sube una nueva imagen, WordPress detectará si es una imagen «grande» en función de si su altura o su anchura está por encima del big_image threshold.

El valor del umbral por defecto es de 2560px (se puede modificar con el nuevo filtro big_image_size_threshold).

Si la altura o la anchura de una imagen está por encima de este umbral, se reducirá, y el umbral se utilizará como valor de altura máxima y anchura máxima.

La imagen reducida se utilizará como el mayor tamaño disponible.

¿Desea desactivar el escalado?

El escalado se controla con el filtro big_image_size_threshold.

Devolver falsedesde la llamada de retorno del filtro lo deshabilitará (como abajo):

add_filter( 'big_image_size_threshold', '__return_false' );

Tamaño de las miniaturas y de las imágenes destacadas en WordPress

Hemos llegado a la parte de nuestro tutorial en la que vamos a desentrañar todo el lío de las miniaturas/imágenes destacadas. Básicamente, el problema se reduce a esto; debido a que WordPress mantiene la compatibilidad hacia atrás a medida que evoluciona, los nombres de las cosas cambian, pero las funciones todavía se refieren a las cosas por sus antiguos nombres.

El tamaño de las imágenes de WordPress Thumbnails fue introducido en la versión 2.9 pero fue rápidamente cambiado a Imágenes Destacadas en la versión 3.0, pero por desgracia, el nombre se quedó. Así que a menudo oirás referirse a las imágenes destacadas como miniaturas en los tutoriales e incluso en los nombres de las funciones.

He aquí algunos ejemplos:

  • Si tu tema no tiene imágenes destacadas y quieres habilitar esa característica, deberás añadir add_theme_support( 'post-thumbnails' ); a tu archivo de funciones.
  • Para mostrar el tamaño de la imagen destacada de WordPress en un tema, utilizarás la función the_post_thumbnail().

Las miniaturas y las imágenes destacadas comparten un tamaño por defecto de 150px por 150px. Si utilizas la función the_post_thumbnail() sin un argumento para especificar el tamaño, utilizará el tamaño cuadrado de 150px por defecto.

Para que esto sea menos confuso para ti y puedas usar el tamaño correcto, te sugiero que crees un tamaño de imagen personalizado y lo llames featured-large o algo similar. Entonces, cuando quieras usar esa imagen en tu bucle, usarás the_post_thumbnail('featured-large').

Antes de empezar a crear tamaños personalizados

Cuando empiece a crear tamaños de imagen personalizados, evite exagerar y crear imágenes para todos los propósitos imaginables. De lo contrario, agotará el espacio de su alojamiento y, si utiliza un servicio de optimización de imágenes que le cobra por imagen, agotará su asignación de imágenes mucho más rápido.

Si tu plan te permite optimizar 100 imágenes pero cada subida genera 9 tamaños adicionales que también deben ser optimizados, llegarás a tu límite una vez que subas 10 imágenes. Tenga esto en cuenta cuando agregue tamaños personalizados y elija planes de optimización de imágenes.

Cómo añadir tamaños de imagen personalizados

Aquí está el código que vamos a añadir a nuestro archivo de funciones para añadir tamaños de imagen:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

Esta función acepta 4 parámetros en este orden:

  1. El nombre que le das al tamaño de tu imagen personalizada
  2. La anchura de la imagen en píxeles
  3. La altura de la imagen en píxeles
  4. La imagen debe ser recortada para que se ajuste a la anchura y la altura especificadas anteriormente

Recortando

El parámetro de recorte es un booleano, por lo que usarás true o false. Si lo omite por completo, entonces será falso por defecto.

Si establece el parámetro de recorte en true, entonces WordPress recortará su imagen para que se ajuste a las dimensiones que usted especifique cuando cree la imagen personalizada.

Por ejemplo, si el tamaño de su imagen personalizada es un cuadrado de 600px por 600px y establece el recorte como verdadero, entonces si sube una imagen rectangular de 600px por 800px, se cortarán 200px para hacer la imagen cuadrada.

add_image_size( 'custom-image-square', 600, 600, true );

Establecer el parámetro de recorte en true es útil para los tamaños de imagen que tienen que ser exactos, como las imágenes destacadas o las imágenes de archivo de las publicaciones que tienen que encajar perfectamente en una dimensión determinada.

Para las imágenes que pueden tener más margen de maniobra, como el tamaño de la imagen de la entrada de WordPress y las imágenes en las páginas que tienden a tener alturas y anchos variables, entonces usted puede establecer el recorte a false. Esto cambiará el tamaño de las imágenes, pero no cambiará la forma de la imagen ni cortará ningún píxel.

Echa un vistazo a nuestra guía de SEO de imágenes si estás tratando de atraer tráfico a tus sitios con tus imágenes.

Regeneración de miniaturas

Uno de los pasos más importantes cuando:

  1. modificar el tamaño de las imágenes por defecto de WordPress
  2. añadir tamaños de imagen personalizados o
  3. cambiar a un nuevo tema que tiene diferentes tamaños personalizados

está regenerando las miniaturas.

En este contexto, las miniaturas se refieren a todas las imágenes adicionales que crea WordPress, incluyendo los tamaños de imagen personalizados que se incluyen en su tema y los que usted crea a través de su archivo de funciones.

Cuando usted hace un cambio en la forma en que WordPress crea imágenes adicionales, entonces sólo afectará a las imágenes que usted suba en adelante. No actualiza las imágenes que ya están en su biblioteca de medios.

Para cambiar las imágenes que ya has subido, tendrás que utilizar el popular plugin Regenerate Thumbnails.

Después de instalarlo, lo encontrarás en la sección de Herramientas.

Cuando regenere las miniaturas en sus nuevos tamaños, tendrá la opción de eliminar los antiguos tamaños de imagen no utilizados para liberar espacio en el servidor.

Cómo añadir tamaños de imagen personalizados al desplegable del bloque de imágenes de Gutenberg

Sólo tienes que añadir el código siguiente a tu archivo de funciones si quieres que tus tamaños de imagen personalizados aparezcan en el desplegable del bloque de imágenes de Gutenberg. Si has creado un tamaño de imagen personalizado para utilizarlo entre bastidores para tu tema, puedes omitir este paso.

Vamos a engancharnos al filtro image_size_names_choose.

En el array, añadiré el nombre del tamaño personalizado que he especificado en la función add_image_size y el nombre que quiero que aparezca en el desplegable dentro del paréntesis.

CODE1

Como aprendí al hacer este tutorial, tendrás que regenerar las miniaturas antes de que la imagen aparezca en el desplegable.

Fragmento de código completo de WordPress Add Image Size

A continuación, combinaremos todo lo que hemos aprendido en un bloque de código con un ejemplo del mundo real.

Digamos que quiere añadir tamaños de imagen personalizados a su blog.

Aquí están los tamaños de imagen que quiere añadir:

  • Una imagen destacada de 1600px por 400px
  • Un tamaño de 800px que abarca el ancho de la sección de contenido de su blog

Como nuestro tema no soporta actualmente las imágenes destacadas, empezaremos con eso.

A continuación, verá mis tamaños personalizados. Observe que no he recortado las imágenes que van a abarcar el ancho del contenido del blog. Recortaré con fuerza mis imágenes destacadas ya que quiero que se alineen bien.

La única imagen que quiero añadir al menú desplegable de Gutenberg es la imagen del blog, ya que voy a utilizar el tamaño de la imagen destacada de WordPress en mi tema.

CODE2

Después de añadir este código a mi archivo functions.php, el siguiente paso es regenerar las miniaturas.

Para usar mi imagen destacada personalizada para mis entradas en el bucle, añadiré lo siguiente a single.php o index.php

CODE3

¿Ves cómo he añadido 'featured-large' en la función the_post_thumbnail()? Eso mostrará mi imagen destacada debajo de los títulos de mis entradas del blog, por encima de mi contenido.

Mejores prácticas

Aquí tienes algunos consejos más para que no tengas problemas a la hora de crear imágenes personalizadas en WordPress.

  1. Sube siempre el archivo más grande que puedas. Si el tamaño de tu imagen es demasiado pequeño, WordPress no podrá crear todos los tamaños que necesita para servir tus imágenes correctamente en una variedad de dispositivos.
  2. Si necesita cambiar el tamaño por defecto medium_large, utilice la función update_option(). Puedes utilizar esta misma función para actualizar cualquier otro tamaño de imagen por defecto de WordPress.
  3. Si estás fuera del bucle de WordPress, puedes usar la función get_the_post_thumbnail() para usar una de tus imágenes personalizadas.
  4. Aquí hay más información sobre el recorte suave y el recorte duro al crear tamaños de imágenes personalizados en caso de que tengas problemas.

Conclusión

Una vez que entiendas cómo funcionan los tamaños de imagen personalizados en WordPress, podrás modificarlos para adaptarlos a tus necesidades y ahorrar mucho tiempo. Conseguir que el tamaño de tus imágenes sea el adecuado también te ayuda a mejorar el rendimiento de tu sitio y el posicionamiento en los motores de búsqueda, por lo que es una cosa importante que hay que hacer bien.

A ti, ¿has probado a añadir tamaños de imagen personalizados a tu sitio? Déjanos un comentario si tienes alguna duda sobre cómo añadir tamaños de imagen personalizados a WordPress.

Etiquetas

Publicidad

Síguenos en Facebook