Cuando carga una imagen, WordPress hace mucho trabajo entre bastidores para que pueda servir la imagen a sus visitantes. Puede realizar este proceso a cuestas y agregar tamaños de imagen personalizados para evitar tener que cambiar el tamaño de las imágenes manualmente.
En esta publicación, explicaré cómo y por qué WordPress crea diferentes tamaños de imagen. Luego te enseñaré cómo agregar tus propios tamaños de imagen modificando las funciones.archivo php, regenerar miniaturas y agregar nuevos tamaños de imagen al bloque de imagen de Gutenberg y/o al bucle de WordPress.
- Explicación de los tamaños de imagen de WordPress
- ¿Por qué WordPress crea tantas imágenes?
- Imágenes receptivas
- Imágenes más grandes » optimizadas para la web «En WordPress
- Miniaturas de WordPress y Tamaño de imagen destacado
- Antes de comenzar a Crear Tamaños de imagen personalizados en WordPress
- Cómo Agregar Tamaños de imagen personalizados en WordPress
- Recorte
- Regenerar miniaturas
- Cómo Agregar Tamaños de imagen personalizados al menú desplegable en el bloque de imagen de Gutenberg
- WordPress Añadir tamaño de imagen Fragmento de código completo
- Mejores prácticas de tamaños de imagen personalizados
- Eso es todo lo que hay que Añadir Tamaños de imagen personalizados
Explicación de los tamaños de imagen de WordPress
Cada vez que carga una imagen en la biblioteca multimedia de WordPress, estas son las opciones de tamaño de imagen adicionales que WordPress crea de forma predeterminada:
- Miniatura
- Medium
- Medium Large
- Large
Si su tema especifica tamaños de imagen adicionales, WordPress también los crea.
WordPress también conserva el tamaño original que subes y lo nombra completo como en tamaño completo.
Puede ver todo esto (con la excepción de Medium_Large) en el menú desplegable Tamaño de imagen de bloque de imagen de Gutenberg al insertar una imagen en una página o publicación.
¿Por qué WordPress crea tantas imágenes?
Las imágenes son como pantalones. Quieres asegurarte de que tienes el tamaño correcto. Los pantalones y las imágenes que son demasiado pequeños se ven tontos y es dolorosamente obvio para ti y para todos los demás que no encajan bien. Las imágenes demasiado pequeñas en su sitio se verán estiradas o pixeladas.
Por el contrario, si son demasiado grandes, es un desperdicio. No le pondrías un par de pantalones hechos para un hombre a un bebé, ¿verdad? Es mucha tela extra que ni siquiera es necesaria. Ese bebé se va a perder en una pierna de pantalón;)
Las imágenes son las mismas. Si tu imagen es demasiado grande para el contenedor, estás perdiendo ancho de banda y tiempo descargándola para publicarla en tu página. Y para qué? Por nada.
Lo ideal es que las imágenes de tamaño completo que subas sean lo suficientemente grandes como para que quepan en el contenedor de imágenes más grande de tu sitio, pero no más grandes. Luego, cuando use imágenes en su sitio, debe usar la imagen del tamaño exacto que necesita.
Dado que escalar imágenes para crear el tamaño correcto en Photoshop u otro editor de imágenes lleva un tiempo valioso, WordPress se encarga de esta tarea y la hace por usted. Gracias, WordPress!
Todo lo que necesita hacer es elegir el tamaño adecuado al insertar una imagen en su sitio para obtener los beneficios de rendimiento de usar una imagen que sea la correcta.
Si los tamaños de imagen predeterminados de WordPress no son del tamaño perfecto para tu tema, puedes ajustar los valores predeterminados en la sección Configuración de medios > o agregar tamaños personalizados para que tengas más opciones para elegir.
Los tamaños de imagen predeterminados son los siguientes:
- cuadrado de 150 px para miniaturas
- ancho de 300 px para imágenes medianas
- ancho máximo de 768 px para imágenes medianas y grandes
- ancho máximo de 1024 px para imágenes grandes.
Medium_large se agregó para aprovechar la compatibilidad con imágenes receptivas, por lo que no se incluye en la página de configuración. Hablando de imágenes receptivas
Imágenes receptivas
Todas estas imágenes en varios tamaños sirven para otro propósito, por lo que no debe establecer los valores predeterminados en cero para evitar que WordPress las cree, como sugieren algunos tutoriales.
WordPress agregó imágenes responsivas a core en la versión 4.4. En lugar de rellenar atributos de imagen src con la URL de una sola imagen, WordPress también agregó srcset (conjunto de fuentes), que es una lista de URL 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 adecuada para el dispositivo del visitante. Si el visitante está utilizando un dispositivo móvil, recibirá una imagen más pequeña en srcset. Si visitan tu sitio en un dispositivo Retina de escritorio, recibirán el archivo de imagen preparado para Retina de tamaño completo que subiste. Una vez más, esta es la razón por la que debe cargar una imagen lo suficientemente grande como para satisfacer esa necesidad.
Cuando añades un tamaño de imagen personalizado, WordPress lo añadirá a srcset siempre que tenga la misma relación de aspecto. Si el tamaño de imagen personalizado recorta la imagen en una forma diferente, se omitirá del conjunto.
Imágenes más grandes » optimizadas para la web «En WordPress
WordPress 5.3 introdujo una nueva forma de administrar archivos de imagen de gran tamaño detectando y generando un» tamaño máximo optimizado para la web » de ellos.
¿Cómo funciona?
Cuando se carga una nueva imagen, WordPress detectará si es una imagen «grande» en función de si su altura o ancho está por encima de big_image threshold.
El valor de umbral predeterminado es 2560px (esto se puede modificar utilizando el nuevo filtro big_image_size_threshold).
Si la altura o el ancho de una imagen está por encima de este umbral, se reducirá la escala, y el umbral se utilizará como valor de altura máxima y anchura máxima.
La imagen reducida se utilizará como el tamaño más grande disponible.
Desea desactivar el escalado?
La escala es controlada por el filtro big_image_size_threshold.
Devolver false de la devolución de llamada del filtro lo deshabilitará (como se muestra a continuación):
add_filter( 'big_image_size_threshold', '__return_false' );
Miniaturas de WordPress y Tamaño de imagen destacado
Ahora hemos llegado a la parte de nuestro tutorial donde desentrañaremos todo el lío de imágenes destacadas/miniaturas. Básicamente, el problema se reduce a esto; debido a que WordPress mantiene la compatibilidad con versiones anteriores a medida que evoluciona, los nombres de las cosas cambian, pero las funciones aún se refieren a las cosas por sus nombres antiguos.
El tamaño de imagen de miniaturas de WordPress se introdujo en la versión 2.9, pero se cambió rápidamente a Imágenes destacadas en la versión 3.0, pero, por desgracia, el nombre se mantuvo. Por lo tanto, a menudo escuchará imágenes destacadas denominadas miniaturas en tutoriales e incluso en los nombres de las funciones.
Estos son algunos ejemplos:
- Si su tema no tiene imágenes destacadas y desea habilitar esa función, agregará
add_theme_support( 'post-thumbnails' );a su archivo de funciones. - Para mostrar el tamaño de imagen destacado de WordPress en un tema, usará la función
the_post_thumbnail().
Las miniaturas y las imágenes destacadas comparten un tamaño predeterminado de 150px por 150px. Si utiliza la función the_post_thumbnail() sin un argumento para especificar el tamaño, utilizará el tamaño cuadrado predeterminado de 150 px.
Para que esto sea menos confuso para ti y puedas usar el tamaño correcto, sugiero crear un tamaño de imagen personalizado y nombrarlo destacado, grande o algo similar. Luego, cuando quieras usar esa imagen en you’re the loop, usarás the_post_thumbnail('featured-large').
Antes de comenzar a Crear Tamaños de imagen personalizados en WordPress
Al comenzar a crear tamaños de imagen personalizados, evite exagerar y crear imágenes para todos los propósitos imaginables. De lo contrario, consumirás espacio en tu alojamiento y si estás utilizando un servicio de optimización de imágenes que te cobra por imagen, pasarás por tu asignación de imágenes mucho más rápido.
Si tu plan te permite optimizar 100 imágenes, pero cada carga genera 9 tamaños adicionales que también deben optimizarse, alcanzarás tu límite una vez que subas 10 imágenes. Tenga esto en cuenta al agregar tamaños personalizados y elegir planes de optimización de imágenes.
Smush Pro no tiene límites de optimización de imágenes y viene con una CDN para que pueda mantener despejado el espacio de almacenamiento de su servidor. Podrá agregar más tamaños de imagen personalizados de los que normalmente agregaría. Piense en ello como el equivalente a poner pantalones MC Hammer fluidos en lugar de jeans ajustados pequeños en esos bebés porque la tela es barata 🙂
Pruebe Smush Pro gratis durante 7 días.
Cómo Agregar Tamaños de imagen personalizados en WordPress
Aquí está el código que agregaremos a nuestro archivo de funciones para agregar 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:
- El nombre que le da a su tamaño de imagen personalizado
- El ancho de la imagen en píxeles
- El alto de la imagen en píxeles
- Si la imagen se recorta para ajustarse al ancho y alto que especificó anteriormente
Recorte
El parámetro de recorte es booleano, por lo que usará verdadero o falso. Si lo omites por completo, el valor predeterminado será false.
Si establece el parámetro de recorte en true, WordPress recortará su imagen para que se ajuste a las dimensiones que especifique cuando cree la imagen personalizada.
Por ejemplo, si su tamaño de imagen personalizado es un cuadrado de 600px por 600px y establece el recorte en verdadero, entonces si carga una imagen rectangular de 600px por 800px, 200px se cortarán para que la imagen sea cuadrada.
add_image_size( 'custom-image-square', 600, 600, true );
Establecer el parámetro de recorte en true es útil para tamaños de imagen que tienen que ser exactos, como imágenes destacadas o imágenes de archivo post que tienen que ajustarse perfectamente a una dimensión determinada.
Para imágenes que pueden tener más margen de maniobra, como el tamaño de imagen de la publicación de WordPress y las imágenes en páginas que tienden a tener alturas y anchos variables, puede establecer el recorte en falso. Esto redimensionará 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 intentando atraer tráfico a tus sitios con tus imágenes.
Regenerar miniaturas
Uno de los pasos más importantes cuando:
- modificar los tamaños de imagen predeterminados de WordPress
- agregar tamaños de imagen personalizados o
- cambiar a un nuevo tema que tiene diferentes tamaños personalizados
está regenerando miniaturas.
En este contexto, las miniaturas se refieren a todas las imágenes adicionales que crea WordPress, incluidos los tamaños de imagen personalizados que se incluyen en su tema y los que crea a través de su archivo de funciones.
Cuando realices un cambio en la forma en que WordPress crea imágenes adicionales, solo afectará a las imágenes que subas en el futuro. No actualiza las imágenes que ya están en tu biblioteca multimedia.
Para cambiar las imágenes que ya has subido, tendrás que usar el popular plugin Regenerar miniaturas.
Después de instalarlo, lo encontrará en la sección Herramientas.
Al regenerar las miniaturas en los nuevos tamaños, tendrá la opción de eliminar los tamaños de imagen antiguos no utilizados para liberar espacio en el servidor.
Solo necesita agregar el código a continuación a su archivo de funciones si desea que sus tamaños de imagen personalizados aparezcan en el menú desplegable en el bloque de imagen de Gutenberg. Si creaste un tamaño de imagen personalizado para usar entre bastidores para tu tema, puedes omitir este paso.
Vamos a conectarnos al filtro image_size_names_choose.
En la matriz, agregaré el nombre del tamaño personalizado que especificé en la función add_image_size y el nombre que quiero que aparezca en el menú desplegable entre paréntesis.
Como aprendí al hacer este tutorial, tendrás que regenerar miniaturas antes de que la imagen aparezca en el menú desplegable.
WordPress Añadir tamaño de imagen Fragmento de código completo
A continuación, combinaremos todo lo que aprendimos en un bloque de código con un ejemplo del mundo real.
Digamos que quieres agregar tamaños de imagen personalizados a tu blog.
Aquí están los tamaños de imagen que desea agregar:
- Una imagen destacada de 1600px por 400px
- Un tamaño de 800px que abarca el ancho de la sección de contenido de tu blog
Dado que nuestro tema actualmente no admite imágenes destacadas, comenzaremos con eso.
Verás mis tamaños personalizados. Observa que no recorté las imágenes que van a abarcar el ancho del contenido del blog. Recortaré mis imágenes destacadas, ya que quiero que se alineen correctamente.
La única imagen que quiero agregar al menú desplegable de Gutenberg es la imagen de blog, ya que usaré el tamaño de imagen destacado de WordPress en mi tema.
Después de agregar este código a mi archivo functions.php, el siguiente paso es regenerar miniaturas.
Para usar mi imagen destacada personalizada para mis publicaciones en el bucle, agregaré lo siguiente a single.php o index.php
Vea cómo agregué 'featured-large' en la función the_post_thumbnail()? Eso mostrará mi imagen destacada debajo de los títulos de mis publicaciones de blog, por encima de mi contenido.
Mejores prácticas de tamaños de imagen personalizados
Aquí hay algunos consejos más para que no tenga problemas para crear imágenes personalizadas en WordPress.
- Siempre cargue el archivo más grande que pueda. Si el tamaño de la imagen es demasiado pequeño, WordPress no podrá crear todos los tamaños que necesita para servir sus imágenes correctamente en una variedad de dispositivos.
- Si necesita cambiar el tamaño predeterminado de medium_large, utilice la función
update_option(). Puede usar esta misma función para actualizar cualquier otro tamaño de imagen predeterminado de WordPress. - 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. - Aquí encontrará más información sobre el recorte suave y el recorte duro al crear tamaños de imágenes personalizados en caso de que tenga problemas.
Eso es todo lo que hay que Añadir Tamaños de imagen personalizados
Una vez que entiendas cómo funcionan los tamaños de imagen personalizados en WordPress, puedes modificarlos para que se ajusten a tus necesidades y ahorrar mucho tiempo. Obtener los tamaños de imagen correctos también te ayuda a mejorar el rendimiento de tu sitio y las clasificaciones de los motores de búsqueda, por lo que es importante hacerlo bien.
Si realmente quieres llevar la optimización de tu imagen a otro nivel, echa un vistazo a Smush. Hemos añadido una CDN increíble a Smush Pro que tiene un cambio de tamaño de imagen automático, lo que le ayudará a evitar tener que modificar su archivo de funciones para agregar tamaños de imagen personalizados.
También hay otras excelentes funciones de optimización de imágenes que vienen incorporadas, como la carga lenta y la conversión de imágenes a formatos de próxima generación. Pruebe Smush Pro gratis durante 7 días y vea cómo las funciones de optimización de imágenes pueden mejorar su sitio.
Tags:
- código
- imágenes