En relación al tema sobre la manera mejor de cargar las imágenes en la web, hoy voy a enfocar el tema en la aplicación práctica cuando trabajamos en WordPress.

WordPress dispone de varias funciones para trabajar con las imágenes. Esto nos va a permitir usar un código HTML homogéneo, mejor estructurado y con menos trabajo por nuestra parte, si lo comparamos con el trabajo que nos daría hacerlo a mano. Por otro lado, también nos va a proporcionar los distintos tamaños de imagen disponibles e incluso generar, con ellos, el atributo srcset, evitando la descarga de imágenes grandes en pantallas pequeñas y con el consiguiente beneficio para el usuario y la red.

Cargando imágenes en WordPress

La primera función que voy a traer es wp_get_attachment_image()

<?php
echo wp_get_attachment_image( $image_id, $image_size, $icon, $attributes );
?>Lenguaje del código: PHP (php)

Esta función va a generar un html como este:

<img
 src="/ruta/de/mi/imagen.jpg"
 alt="descripcion alternativa de la imagen o su función"
 loading="lazy"
 width=""
 height=""
 srcset="/ruta/de/mi/imagen_pequeña.jpg (),/ruta/de/mi/imagen_mediana.jpg ()">Lenguaje del código: HTML, XML (xml)

Ya ves, ¡este html, lo tiene todo! Un src, un alt, el ancho y alto de la imagen para el tamaño seleccionado, las rutas para otros tamaños de imagen, y el atributo para que el navegador gestione la carga diferida. Y si necesitas aplicarle algún atributo más, puedes añadirlos como un array asociativo cuya clave será el atributo y el valor… pues el valor del atributo.

<?php
echo wp_get_attachment_image( 
    5000, 
    'large, 
    false, 
    array(
        'class'        => 'mi-clase-1 mi-clase-2 [...]',
        'otroatrubuto' => 'otro valor',
    ), 
);
?>Lenguaje del código: PHP (php)

<img
 src="/ruta/de/mi/imagen-5000-1024x1024.jpg"
 alt="descripcion alternativa de la imagen o su función"
 loading="lazy"
 width="1024"
 height="1024"
 srcset="/ruta/de/mi/imagen_pequeña.jpg (),/ruta/de/mi/imagen_mediana.jpg ()"
 class="mi-clase-1 mi-clase-2 [...]"
 otroatributo="otro valor">Lenguaje del código: HTML, XML (xml)

Imágenes como fondo en WordPress

Si necesitas datos de las imágenes, pero no quieres todo el chorro de html, puedes usar:

wp_get_attachment_image_source( $image_id, $image_size );Lenguaje del código: PHP (php)

Esta función proporciona un array de 4 elementos, donde:

• [0] Es la URL de la imagen,
• [1] es el ancho en píxeles,
• [2] es el alto en píxeles,
• [3] indica si la imagen es la original o una miniatura

Esto va a ser útil cuando, por ejemplo quieras usar una imagen como fondo de un bloque usando estilos en línea. Ejemplo:

<?php
// Usamos la imagen destacada de un post como fondo de un div.
$bg_image_id = ( has_post_thumbnail( $post_id ) ) 
    ? get_post_thumbnail_id( $post_id )
    : $default_image_id;
$image = wp_get_attachment_image_src( $bg_image_id );
?>
<div class="mi-clase" 
    style="background-image: url(<?php echo esc_url( $image[0] ) ); ?>">
</div>Lenguaje del código: PHP (php)

if ( has_post_thumbnail( $post_id ) ) :
    get_post_thumbnail( $post_id );
    post_thumbnail( $post_id );
endif;Lenguaje del código: PHP (php)

CSS background responsive en WordPress

Últimamente me estoy yendo a generar pequeños bloques de media-queries en algunas plantillas. Tal que así:

<style>
@media screen and (min-width: 1200px) {
    .responsive_background {
        background-image: 
            url('<?php echo esc_url( wp_get_attachment_image_url( $image_id, 'full' ) ); ?>'); 
    }
}
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
    .responsive_background {
        background-image: url(
            '<?php echo esc_url( wp_get_attachment_image_url( $image_id, 'large' ) ); ?>'); 
    }
}
@media screen and (max-width: 767.98px) {
    .responsive_background {
        background-image: 
            url('<?php echo esc_url( wp_get_attachment_image_url( $image_id, 'medium' ) ); ?>'); 
    }
}
</style>

<div class="responsive_background">
    ...
</div>Lenguaje del código: HTML, XML (xml)

Bueno, sí que es cierto que se suele decir que es buena práctica extraer el CSS a un fichero, pero, poniéndolo en una balanza, ¿no es más ventajoso poder usar una imagen acorde en tamaño con el uso que se le va a dar?