Las dimensiones de imagen de WordPress predeterminadas y cómo agregar dimensiones personalizadas adecuadas

Cuando subes una imagen, WordPress funciona mucho detrás de escena para que puedas dar la imagen de tus visitantes. Puede pasar a este proceso y agregar dimensiones de imagen personalizadas para evitar la necesidad de 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 le enseñaré cómo agregar mis propias dimensiones de imagen cambiando el archivo Functions.php, regenerando las miniaturas y agregando las nuevas dimensiones de la imagen al bloque de imágenes Gutenberg y/o en el bucle de WordPress. El tamaño de las imágenes de WordPress explicadas cada vez que sube una imagen en la biblioteca de medios de WordPress, estas son las opciones adicionales para el tamaño de la imagen que WordPress crea de forma predeterminada:
Miniatura
ambiente
Medio-alto
Grande
Si su tema especifica dimensiones de imagen adicionales, WordPress también las crea. WordPress también conserva el tamaño original que carga y llama completo como en tamaño completo. Puede ver todo esto (excepto Medium_large) en el tamaño de la imagen del menú desplegable desde el bloque de imágenes Gutenberg al insertar una imagen en una página o publicar. ¿Por qué WordPress crea tantas imágenes? Las imágenes son como pantalones. Desea asegurarse de tener el tamaño correcto. Los pantalones e imágenes que son demasiado pequeños parecen locos y son dolorosamente obvios para usted y todos los demás no encajan bien. Las imágenes demasiado pequeñas en su sitio parecerán extendidas o pixeladas.
En cambio, si son demasiado grandes, es súper derrochador. No le pondrías a un niño un par de pantalones hechos para un hombre, ¿verdad? Hay tanta tela extra que ni siquiera es necesaria. Ese bebé se perderá en una pierna de pantalones;) las imágenes son las mismas. Si su imagen es demasiado grande para el contenedor, desperdicie su ancho de banda y el tiempo descargándola para transmitirla en su página y para qué? Para nada. Idealmente, las imágenes de tamaño completo que sube deben ser lo suficientemente grandes como para que coincida con el contenedor de imágenes más grande de su sitio, pero no más grandes. Luego, al usar imágenes en su sitio, debe usar el tamaño de imagen exacto que necesita. Debido a que la escala de imágenes para crear el tamaño correcto en Photoshop u otro editor de imágenes requiere un tiempo precioso, WordPress asume esta tarea y lo haga por usted. ¡Gracias WordPress! Todo lo que tiene que hacer es elegir el tamaño correcto al insertar una imagen en su sitio para obtener los beneficios de rendimiento de usar una imagen adecuada. Si las dimensiones de imagen de WordPress predeterminadas no tienen un tamaño perfectamente para su tema, puede ajustar los valores predeterminados en la sección de medios> Configuración o puede agregar dimensiones personalizadas, para que tenga más opciones para elegir.
Las dimensiones de imagen de WordPress predeterminadas excepto Medium_large, que está oculto de forma predeterminada

Las dimensiones de imagen predeterminadas son las siguientes:
Square de 150px para miniaturas
Ancho de 300px para imágenes medianas
Ancho máximo de 768 píxeles para imágenes medianas_mari
El ancho máximo de 1024 píxeles para imágenes grandes. Medium_large se ha agregado para aprovechar el soporte de imágenes receptivas, por lo que no se incluye en la página Configuración. Por el camino de las imágenes receptivas … imágenes receptivas, todas estas imágenes de diferentes tamaños tienen otro propósito, por lo que no debe establecer los valores predeterminados en cero para evitar WordPress, como sugieren algunos tutoriales.
WordPress agregó imágenes receptivas al núcleo en la versión 4.4. En lugar de poblar los atributos SRC de la imagen con la URL para una sola imagen, WordPress también agregó SRCSET (conjunto de fuentes), que es una lista de URL de diferentes tamaños. ¿Adivina qué fotos están usando para crear esa lista? Sí, WordPress usa las mismas imágenes de diferentes tamaños que crea al cargar una imagen. Proporciona esta lista al navegador para que pueda seleccionar una imagen adecuada para el dispositivo del visitante. Si el visitante usa un dispositivo móvil, recibirá una imagen más pequeña en SCSET. Si visita su sitio en un dispositivo Retina de escritorio, recibirán el archivo de imagen de tamaño completo para la retina que cargó. Nuevamente, es por eso que debe cargar una imagen lo suficientemente grande como para satisfacer esta necesidad.
Cuando agrega un tamaño de imagen personalizado, WordPress lo agregará a SCSET siempre que tenga la misma relación de aspecto. Si la dimensión de imagen personalizada corta la imagen en una forma diferente, se omitirá desde el conjunto. Las imágenes más grandes de “optimización web” en WordPress WordPress 5.3 han introducido una nueva forma de administrar grandes archivos de imágenes detectando y generando un “tamaño máximo optimizado para la web”. ¿Como funciona? Cuando se carga una nueva imagen, WordPress detectará si es una imagen “grande” dependiendo de si su altura o ancho ha superado el umbral Big_image. El umbral predeterminado es 2560 PX (se puede modificar utilizando el nuevo filtro Big_imize_threshold). Si la altura o el ancho de una imagen está sobre este umbral, se reducirá: el umbral se utiliza como un valor máximo de altura y ancho máximos. La imagen reducida se utilizará como el tamaño más grande disponible. ¿Le gustaría deshabilitar la escala? La escala está controlada por el filtro BIG_IMAGE_SIZE_TRESHOLD. Si devuelve falso de la llamada del filtro, se deshabilitará (como se muestra a continuación): add_filter (‘big_image_size_threshold’, ‘__return_false);
Miniaturas de WordPress y el tamaño de imagen recomendado que ahora hemos alcanzado la parte de nuestro tutorial en el que desentrañaremos toda la miseria de miniaturas/imágenes presentadas. Básicamente, el problema se limita a esto; Debido a que WordPress mantiene la compatibilidad con la versión inversa a medida que evolucionan, los nombres de las cosas cambian, pero las funciones aún se refieren a las cosas por sus antiguos nombres. El tamaño de la imagen de las miniaturas de WordPress se introdujo en la versión 2.9, pero se cambió rápidamente a las imágenes destacadas en la versión 3.0, pero desafortunadamente, el nombre permaneció. Por lo tanto, a menudo escuchará imágenes presentadas llamadas miniaturas en tutoriales e incluso en nombre de las funciones. Si no tiene la metabox para la imagen presentada, pegue add_theme_support (‘post-thibnails’); En las funciones de su archivo.php
Aquí hay unos ejemplos:
Si su tema no tiene imágenes presentadas y desea activar esta función, agregará add_theme_support (‘post-pulgadas’); en el archivo con funciones.
Para mostrar el tamaño de la imagen presentada de WordPress en un tema, usará The_Post_Thumbnail ().

Las miniaturas y las imágenes presentadas tienen una dimensión implícita de 150 px en 150 px. Si usa The_Post_Thumbnail () sin un argumento para especificar el tamaño, usará el tamaño cuadrado predeterminado de 150 PX.
Para que esto esté menos confundido para usted, por lo que puede usar el tamaño correcto, le sugiero que cree una dimensión de imagen personalizada y lo nombrara o algo similar. Luego, cuando desee usar esa imagen en su bucle, usará The_Post_Thumbnail (‘destacado-Large’). Antes de comenzar a crear imágenes personalizadas en WordPress a medida que comienza a crear dimensiones de imagen personalizadas, evite ir por la borda y crear imágenes para cualquier propósito imaginable. De lo contrario, grabará espacio en el alojamiento y si utiliza un servicio de optimización de imágenes que le cobra, pasará por la asignación de imagen mucho más rápido. Si su plan le permite optimizar 100 imágenes, pero cada carga genera 9 dimensiones adicionales que deben optimizarse, alcanzará su límite una vez que cargue 10 imágenes. Tenga esto en cuenta al agregar dimensiones personalizadas y elegir planes de optimización de imágenes. Smush Pro no tiene límites para optimizar la imagen y viene con un CDN para que pueda mantener su espacio de almacenamiento en el servidor. Podrá agregar dimensiones de imagen más personalizadas de las que normalmente haría. Piense en esto como el equivalente a ponerse estos bebés pantalones fluidos Mc Hammer en lugar de jeans pequeños, porque el material es barato 🙂 Pruebe gratis Smush Pro.
Cómo agregar dimensiones de imagen personalizadas a WordPress Aquí está el código que agregaremos a nuestro archivo de características para agregar las dimensiones de la 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 da el tamaño de imagen personalizado
Ancho de imagen en píxeles
Altura de la imagen en píxeles
Si la imagen debe cortarse para que coincida con el ancho y la altura especificadas anteriormente

Cortar el parámetro de corte es un booleano, por lo que usará verdadero o falso. Si lo omite por completo, será implícitamente falso. Si establece el parámetro de corte verdadero, WordPress cortará la imagen para que coincida con las dimensiones que especifique al crear la imagen personalizada. Por ejemplo, si el tamaño de imagen personalizado es un cuadrado de 600px en 600px y establece el corte verdadero, entonces si carga una imagen rectangular de 600px en 800px, se cortará 200px para hacer la imagen cuadrada. add_image_size (‘Custom-Image-Square’, 600, 600, verdadero); La configuración del parámetro de corte verdadero es útil para las dimensiones de las imágenes que deben ser precisas, como las imágenes presentadas o las imágenes de archivo publicadas que deben adaptarse perfectamente a un cierto tamaño. Para imágenes que pueden tener más espacio de movimiento, como el tamaño de la imagen de WordPress y las imágenes en páginas que tienden a tener alturas y anchos variables, entonces puede establecer el corte en el falso. Esto cambiará el tamaño de las imágenes, pero no cambiará la forma de la imagen y no cortará ningún píxel. Eche un vistazo a nuestra guía de SEO para obtener fotos si intenta atraer tráfico a sus sitios con sus fotos. Regeneración en miniatura Uno de los pasos más importantes cuando: Cambiar la imagen predeterminada de WordPress
Agregar dimensiones de imagen personalizadas o
Cambiar a un nuevo tema que tiene diferentes tamaños personalizados
regenera las miniaturas. En este contexto, las miniaturas se refieren a todas las imágenes adicionales creadas por WordPress, incluidas las dimensiones personalizadas de las imágenes que se incluyen en su tema y aquellas que crea a través del archivo de funciones. Cuando realiza un cambio en cómo WordPress crea imágenes adicionales, solo afectará las imágenes que continúa cargando. No actualice imágenes que ya estén en su biblioteca de medios. Para cambiar las imágenes que ya ha subido, deberá usar las miniaturas de regeneración populares. Después de instalarlo, lo encontrará en la sección del instrumento. Solo presione el botón para crear nuevas dimensiones de imagen
Cuando regenere miniaturas en nuevas dimensiones, tendrá la opción de eliminar las viejas imágenes no utilizadas para liberar espacio en el servidor. Cómo agregar dimensiones de imagen personalizadas al menú desplegable en el bloque de imágenes Gutenberg Simplemente agregue el código a continuación a su archivo de características si desea que aparezcan las dimensiones de su imagen personalizadas en el menú desplegable Gutenberg. Si ha creado una dimensión de imagen personalizada para usarla detrás de su trasero, puede omitir este paso.
Aquí está el tamaño personalizado de la imagen que agrego con el código a continuación
Imagine_size_names_choose Filter image_size_names_choose. En la matriz, agregaré el nombre de la dimensión personalizada que especifiqué en el add_image_size y el nombre que quiero aparecer en el menú desplegable.
Cargue el esencial DC6175FFEB6DEA2ECF45EFBC8E21D683
Como aprendí cuando estaba haciendo este tutorial, deberá regenerar las miniaturas antes de que la imagen aparezca en el menú desplegable. WordPress agrega un fragmento de código completo para el tamaño de la imagen, combinaremos todo lo que hemos aprendido en un solo bloque de código con un ejemplo del mundo real. Supongamos que desea agregar dimensiones de imagen personalizadas a su blog Aquí están las dimensiones de las imágenes que desea agregar: una imagen presentada de 1600 x 400 píxeles
Un tamaño de 800 PX que se extiende en el ancho de la sección de contenido de su blog

Debido a que nuestro tema actualmente no acepta las imágenes presentadas, comenzaremos con él. Luego verás mis dimensiones personalizadas. Tenga en cuenta que no he cortado las imágenes que se extenderán en el ancho del contenido del blog. Apenas cortaré mis imágenes presentadas, porque quiero que las alineen correctamente. La única imagen que quiero agregar al menú desplegable Gutenberg es la imagen del blog, porque usaré el tamaño de la imagen presentada WordPress en mi tema.
La idea FB6585ABD259E728CDD10D83015A2919 está cargada.

Después de agregar este código a mi archivo functions.php, el siguiente paso es regenerar las miniaturas. Para usar mi imagen personalizada presentada para mis publicaciones de bucle, agregaré lo siguiente a single.php o index.php
Cargue el esencial D46855C251F0F0F751D0E7E2A5CAECC7
¿Ves cómo agregué ‘destacado-large’ en The_Post_Thumbnail ()? Esto mostrará mi imagen presentada en los títulos de las publicaciones de blog sobre mi contenido. Las mejores prácticas para las dimensiones personalizadas de las imágenes aquí son algunos consejos para no tener problemas para crear imágenes personalizadas. Siempre cargue el archivo más grande posible. Si el tamaño de su imagen es demasiado pequeño, WordPress no podrá crear todas las dimensiones que necesita para transmitir sus imágenes correctamente en una variedad de dispositivos.
Si necesita cambiar el tamaño del tamaño predeterminado de Medium_large, use la función update_option (). Puede usar la misma función para actualizar cualquier otra dimensión de imagen de WordPress predeterminada.
Si está fuera del bucle de WordPress, puede usar la función get_the_post_thumbnail () para usar una de sus imágenes personalizadas.
Aquí hay más sobre el corte suave y el corte duro al crear dimensiones de imágenes personalizadas si tiene problemas.
Esto es todo lo que necesita para agregar dimensiones de imagen personalizadas Una vez que comprende cómo funcionan las imágenes personalizadas en WordPress, puede cambiarlas para satisfacer sus necesidades y ahorrar mucho tiempo. Obtener el tamaño de imagen correcto también lo ayuda a mejorar el rendimiento de su sitio y los motores de búsqueda, por lo que es importante hacerlo correctamente. Si realmente desea llevar su optimización de imágenes a otro nivel, consulte Smush. Hemos agregado un sorprendente CDN a Smush Pro que tiene un cambio de tamaño de imagen automático, que lo ayudará a evitar alterar el archivo con funciones para agregar dimensiones de imagen personalizadas. Hay otras excelentes funciones de optimización de imágenes que se incorporan, como la carga perezosa y la conversión de imágenes en formatos de nueva generación. Pruebe gratis Smush Pro y vea cómo las funciones de optimización de imágenes pueden mejorar su sitio. Desde su lado, ¿ha intentado agregar dimensiones de imagen personalizadas a su sitio? Déjenos un comentario si tiene alguna pregunta sobre cómo agregar imágenes personalizadas a WordPress
Etiquetas:
código
imágenes