Explicación de los tamaños de imagen de WordPress

Publicado: 2020-10-21

¡Los tamaños de imagen de WordPress a veces pueden ser un poco misteriosos! ¿Alguna vez ha visto esta página de Configuración de medios en su área de administración y se ha preguntado qué es?

En este artículo, analizaremos los tamaños de imagen de WordPress, de qué se tratan y cómo esto puede afectar cosas como los tiempos de carga. Además, también veremos cómo WordPress utiliza estos diferentes tamaños de imagen en los diseños de sitios web. Y finalmente, veremos cómo puede eliminar tamaños de imagen innecesarios o agregar su propio tamaño personalizado.

¿Cuál es el papel de los tamaños de imagen en WordPress?

Es muy importante que las imágenes de su sitio web se vean bien, nítidas y de alta calidad. Hay varios elementos que dictarán esto, incluido el tamaño físico de la imagen (tanto las dimensiones como el tamaño del archivo) y la resolución de la imagen. Si su imagen es demasiado grande (por ejemplo, 10,000 px de ancho) y el tamaño del archivo es demasiado grande (es decir, más de 1 mb o más), comenzará a disminuir la velocidad de carga de su sitio web. Por el contrario, si el tamaño de la imagen es demasiado pequeño, es probable que vea una degradación en la calidad de la imagen... en otras palabras, podría comenzar a verse borrosa o granulada.

WordPress intenta lograr un equilibrio ofreciendo el tamaño de imagen óptimo según la ubicación de la imagen. Lo hace creando 3 tamaños de imagen diferentes cada vez que carga una imagen en la biblioteca multimedia de WordPress. Estos son 'Tamaño de miniatura', 'Tamaño mediano' y 'Tamaño grande' con dimensiones de 150×150 píxeles, 300×300 píxeles (máximo) y 1024×1024 píxeles (máximo) respectivamente. Finalmente, también almacenará una imagen de 'Tamaño completo' que es el tamaño original de la imagen cargada.

Estos tamaños, junto con los tamaños adicionales que veremos más adelante, son utilizados por WordPress en varias posiciones en el diseño de la interfaz. Esto se hace para que la imagen utilizada a) se vea bien yb) se cargue rápidamente.

Examinando los tamaños de imagen de WordPress con más detalle

Veamos un ejemplo para que pueda ver exactamente lo que sucede 'detrás de escena' cuando carga una imagen en WordPress. A los efectos de este ejemplo, vamos a cargar una imagen con el nombre 'post1-feature-image'. Tiene un tamaño de 294 KB y mide 2089 × 1175 píxeles y lo haremos con el tema predeterminado de WordPress Twenty Twenty activo (otros temas pueden alterar la forma en que WordPress maneja las imágenes).

Habiendo cargado esta imagen a través de la biblioteca de medios de WordPress, podemos conectarnos a nuestro sitio usando un cliente FTP y, si nos dirigimos a la carpeta Cargar, veremos que se han creado múltiples versiones de nuestras imágenes.

Resaltado en rojo, verá nuestros tamaños de imagen predeterminados. La miniatura se ha recortado ya que está configurada como predeterminada a través de la configuración de Medios.

El 'Tamaño mediano' y el 'Tamaño grande' se han redimensionado de una manera que evita cambiar las proporciones reales de la imagen. Entonces, es por eso que, por ejemplo, el 'Tamaño mediano' es 300 × 169 en lugar de 300 × 300. El resto de las imágenes que se generaron son el resultado de algunos archivos del núcleo de WordPress y el código del tema Twenty Twenty.

¡Consiguiendo técnico!

Si está interesado en el código detrás de lo que sucede cuando se crean los tamaños de imagen adicionales, esta sección del artículo es para usted. Si no, ¡no dudes en pasar al siguiente capítulo!

WordPress extrae instrucciones de un archivo llamado media.php que se encuentra dentro de la carpeta wp-includes/. Dirígete a esta, línea 4861 y verás lo siguiente:

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg se está creando como resultado del tamaño 'medium_large' que se agregó en la versión 4.4 de WordPress para una mejor compatibilidad con imágenes receptivas y se puede ver en varios dispositivos portátiles. Se define en la carpeta “wp-admin/includes” en el archivo schema.php línea 522

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

y solicitado en el archivo image.php en la línea 86:

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg y post1-feature-image-1980x1114.jpg se generan a partir del tema 'Twenty Twenty' dentro del archivo functions.php en la línea 53:

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

Esto se hace porque el tema Twenty Twenty usa 1200px como tamaño de imagen para las imágenes destacadas. Si creamos una publicación de prueba y agregamos una imagen destacada y luego en la página de publicación única de la interfaz, podemos ver cómo se usa este tamaño haciendo clic derecho en la imagen destacada y mirando en el inspector del navegador.

Finalmente, la imagen de 1980 px es el tamaño utilizado para la imagen destacada de las otras plantillas de publicación. Puede ver esto cambiando la plantilla de publicación de prueba a 'Plantilla de portada'. Luego, en el inspector CSS del elemento HTML de la imagen de portada podemos ver cómo se usa este tamaño:

Siempre vale la pena asegurarse de que cualquier imagen que cargue sea más ancha que los anchos de las imágenes destacadas y de portada para que se vean nítidas. WordPress puede reducir el tamaño de las imágenes de manera efectiva, pero no puede ampliar una imagen pequeña y hacer que se vea bien.

Eliminar tamaños de imagen de WordPress innecesarios

Como hemos visto, WordPress está ocupado produciendo una variedad de tamaños de imagen cada vez que subimos una imagen a nuestra biblioteca de medios. Pero, ¿realmente necesitamos todas estas imágenes? En realidad, no, no lo hacemos. No solo reduce la velocidad a la que se cargan las imágenes, ya que WordPress tiene que trabajar en segundo plano creando estos diversos tamaños de imágenes, sino que también ocupa almacenamiento que no necesitamos usar en nuestro servidor. Entonces, ¿cómo impedimos que WordPress cree tamaños de imagen que no necesitamos? ¡Sigue leyendo para averiguarlo!

Nota: a menos que siga estas instrucciones en un sitio web de demostración, le recomendamos que implemente los cambios que se describen a continuación en el archivo functions.php de un tema secundario. Los cambios realizados en el archivo functions.php en un tema principal se borrarán la próxima vez que se actualice el tema.

Eliminar los tamaños de imagen predeterminados de WordPress

Esto se puede lograr fácilmente editando el archivo functions.php del tema y agregando el siguiente código:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

Para probar, subamos una nueva imagen (en nuestro ejemplo, esto se llama post2-featured-image) a la biblioteca de medios y actualicemos nuestra vista FTP de la carpeta de carga.

Como puede ver, al decirle a WordPress que elimine los 4 tamaños de imagen predeterminados a través de nuestro archivo functions.php, hemos detenido a WordPress para crearlos en nuestra carpeta de medios. En el futuro, esta simple actualización de nuestro código de tema significa que no obstruiremos nuestro servidor con tamaños de imagen no deseados. Esto ahorrará espacio y acelerará el proceso de carga de imágenes.

Eliminación de tamaños de imagen antiguos de la biblioteca multimedia

Es posible que haya notado que, si bien los 4 tamaños de imagen predeterminados no se crearon para nuestra nueva imagen que cargamos, la imagen cargada anteriormente todavía tiene las 8 variantes guardadas en la biblioteca de medios. Con toda probabilidad, a menos que se trate de un sitio web completamente nuevo, habrá subido decenas, si no cientos, de imágenes y, en todos los casos, se habrán creado estos tamaños 'extra'. ¿Entonces lo que hay que hacer?

Lo primero que debe determinar es ¿necesita estas imágenes? Antes de continuar con la eliminación de imágenes generadas por WordPress, deberá confirmar que estos tamaños ya no se utilizan. Revise las publicaciones de su blog, las imágenes destacadas y cualquier otra parte de su sitio web para asegurarse de que ninguno de los tamaños anteriores todavía esté en uso.

Una excelente manera de lidiar con estos archivos no deseados de las imágenes antiguas es usar el complemento Force Regenerate Thumbnail que los procesará y los eliminará automáticamente. Instale y active el complemento y luego presione el botón 'Regenerar todas las miniaturas' desde el menú del complemento (Herramientas-> Forzar regeneración de miniaturas).

Actualice la vista de la carpeta de medios FTP y verá que las imágenes predeterminadas de WordPress han desaparecido. ¡Agradable!

Otra manera fácil de lograr el mismo resultado para los tamaños predeterminados es cambiar el valor de sus dimensiones a "0" desde Configuración> Medios en wp-admin. Entonces verás algo como esto:

Un método alternativo es cambiar update_option( 'SIZE_w/h', 0 ); dentro de funciones.php. Recuerde hacer esto en un archivo functions.php de un tema secundario para que sus cambios no se pierdan cuando actualice el tema en un momento posterior.

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

Cuando se realice esta actualización, verá que lo que reflejará el valor de las dimensiones en la configuración de Medios (desde WP Admin) ahora se ha actualizado a 0.

Eliminar tamaños de imagen de tema adicionales

Ahora hemos tratado con éxito las imágenes predeterminadas producidas por el núcleo de WordPress. Ahora podemos continuar y abordar las imágenes creadas por el tema (en este caso, Twenty Twenty). Si, como nuestros tamaños de imagen predeterminados, ha llegado a la conclusión de que estos no son necesarios, puede realizar algunos cambios en el código de su tema para evitar que WordPress produzca estos tamaños en el futuro.

Para hacer esto, vamos a usar el gancho init y la función central remove_image_size. Copie el código a continuación y péguelo en su archivo functions.php. Si no está utilizando el tema Twenty Twenty como estamos aquí, reemplace los nombres 'post-thumbnail' y 'twentytwenty-fullscreen' con el nombre de su tema activo.

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

Si cargamos una nueva imagen ahora y verificamos nuestra carpeta de carga a través de nuestro cliente FTP, veremos que se generan todos los tamaños excepto 'post-thumbnail' y 'twentytwenty-fullscreen'.

Agregue su propio tamaño de imagen personalizado

Ahora que aprendimos cómo eliminar tamaños de imagen redundantes en WordPress, veamos cómo podemos agregar nuestros propios tamaños de imagen personalizados de acuerdo con las necesidades de nuestra plantilla.

¿Cómo decidimos qué tamaños de imagen necesitamos?

Supongamos que tiene un sitio web con una columna principal con un ancho de 960 px donde la imagen destacada está en la parte superior y el contenido de la publicación debajo. Entonces, el tamaño de imagen deseado será de 960 px. No olvide calcular también el relleno CSS, si corresponde. Si los elementos principales tienen un relleno de 20 px, por ejemplo, el ancho correcto de la imagen será de 920 px. Es 960 px menos 20 px para el relleno izquierdo menos 20 px para el relleno derecho.

Registrar nuevos tamaños de imágenes

Una forma sencilla de registrar nuevos tamaños es utilizar la función integrada add_image_size() que proporciona WordPress. La estructura de la función es:

 add_image_size( name, width, height, crop )

La mayoría de estas opciones se explican por sí mismas. La última opción (recortar) dicta si WordPress respeta las proporciones de nuestra imagen al cambiar el tamaño o si recorta nuestra imagen. Si la opción de recorte se establece en 'verdadero', la imagen se recortará y no se respetarán las proporciones. Si la opción de recorte se omite o se establece en falso, se respetarán las proporciones de nuestra imagen.

Probemos esto en acción y controlemos el resultado usando una imagen de prueba de 2089 × 1175 píxeles.

Primero agreguemos este código:

 add_image_size( 'new-post-thumb', 220, 180 );

Esto generará un post2-feature-image-220x124.jpg en lugar de 220×180 en nuestra carpeta de cargas porque el recorte no está configurado (falso). Lo mismo sucedería si insertas lo siguiente:

 add_image_size( 'new-post-thumb', 220, 180, false );

Sin embargo, si configura el recorte como verdadero de esta manera, se guardará una imagen post2-feature-image-220x180.jpg .

 add_image_size( 'new-post-thumb', 220, 180, true );

Por último, puede dictar la forma en que se colocará el recorte. En lugar de 'verdadero', simplemente use opciones como 'izquierda' o 'arriba' o ambas:

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

La matriz especifica la ubicación del recorte. Los valores que se pueden utilizar son:

Para x_crop_position: 'izquierda', 'centro' o 'derecha'.
Para y_crop_position: 'superior', 'centro' o 'inferior'.

La salida en cada caso será una parte diferente de la imagen original. Aquí hay unos ejemplos:

Una alternativa a hacer esto manualmente agregando código a nuestro tema es usar un complemento como Tamaños de imagen simples. Sin embargo, es útil comprender lo que sucede detrás de escena, incluso si usa un complemento como este.

Conclusión

El uso de los tamaños de imagen correctos en WordPress es importante: no solo garantiza una experiencia de usuario de alta calidad al presentar imágenes nítidas y de alta resolución al espectador del sitio web, sino que también afecta significativamente los tiempos de carga y el uso del servidor. Con suerte, este artículo lo ayudó a comprender la importancia de los tamaños de imagen en WordPress y las formas en que puede anular, eliminar o expandir los tamaños de imagen para satisfacer las necesidades de su sitio web, así como también cómo puede potencialmente ahorrar una tonelada de espacio en el servidor al detener WordPress. generando tamaños innecesarios de cada imagen que subas.