Imágenes SRCSET responsive en OxygenBuilder

diciembre 15, 2021

A menudo llenamos nuestros sitios web con imágenes.

Ya sea porque creamos un tutorial como este, porque necesitamos una galería para un cliente o porque queremos adornar nuestros textos para hacerlos más amenos y útiles para el usuario.

Cuando subimos las imágenes a WordPress, este se encarga de generar varios tamaños de cada imagen. Aunque tú solo veas una única imagen en tus archivos.

¿Para qué hace esto el amigo WordPress? Pues para poder servir la imagen adecuada en cada momento.

Para ello, se sirve del atributo srcset. Te dejo aquí un artículo donde lo explican muy bien.

Sería un desperdicio mostrar imágenes muy grandes en dispositivos móviles, o imágenes muy pequeñas en pantallas grandes de ordenador.

En Settings -> Media puedes ver los tamaños por defecto de WordPress. Son 3 y déjame adelantarte que no son suficientes.

Tamaños por defecto en WordPress
Los 3 tamaños por defecto en WordPress

Por eso, vamos a crear más tamaños personalizados. Vamos a aprender cómo utilizar esos tamaños en Oxygen y facilitarle al browser el trabajo para que utilice cada tamaño según convenga.

El WPO de tu web te lo agradecerá. Recuerda, Oxy está optimizado pero nunca viene mal seguir buenas prácticas 😉

Utiliza un plugin para ejecutar código

En Oxygen no tenemos el archivo functions.php porque deshabilitamos el theme.

Para ejecutar código, necesitamos otros plugins que lo hagan por nosotros.

Yo suelo usar Code Snippets (gratuito y muy bueno).

También uso Advanced Scripts de los creadores de Hydrogen Pack (enlace de afiliado)

Crea un fragmento de código

Ahora toca crear el snippet de código.

Snippets -> Añadir nuevo

Copia y pega el siguiente código. Debe ejecutarse en todo el sitio.

// register custom thumbnail size
add_image_size( '480', 480, 9999, false );
add_image_size( '640', 640, 9999, false );
add_image_size( '720', 720, 9999, false );
add_image_size( '960', 960, 9999, false );
add_image_size( '1168', 1168, 9999, false );
add_image_size( '1440', 1440, 9999, false );
add_image_size( '1920', 1920, 9999, false );

// add custom thumbnail sizes to image sizes array to use in page builders
function dplugins_register_thumbs($sizes){
    $sizes[ '480' ] = 'Image name 1';
    $sizes[ '640' ] = 'Image name 2';
    $sizes[ '720' ] = 'Image name 3';
    $sizes[ '960' ] = 'Image name 4';
    $sizes[ '1168' ] = 'Image name 5';
    $sizes[ '1440' ] = 'Image name 6';
    $sizes[ '1920' ] = 'Image name 7';
	
    return $sizes;
}
add_filter( 'image_size_names_choose', 'dplugins_register_thumbs' );

Puedes darle el nombre que quieras a las imágenes y añadir nuevos tamaños. Aunque con esos son suficientes.

Ahora podrás elegir los tamaños de tus imágenes tanto en Gutenberg como dentro de Oxygen.

Nuevos tamaños srcset en Oxygen
Oxygen
Nuevos tamaños srcset en Gutenberg
Gutenberg

Regenera los thumbnails de imágenes anteriores

Si antes de incluir este código has subido imágenes a WordPress, deberás regenerar los thumbnails o miniaturas.

Como te he comentado antes, WordPress generaba 3 tamaños. Ahora genera tantos como hayas añadido en el snippet.

El problema es que las imágenes anteriores a usar este truco, siguen teniendo solo 3 tamaños.

Para generarlos todos, tenemos que regenerar los thumbails con algún plugin como Regenerate Thumbnails Advanced de los creadores de Shortpixel.

Seleccionamos los tamaños nuevos, guardamos las settings y le damos a regenerate.

*Nota: No olvides poner la calidad en 100.

Ahora ya podremos seleccionar los nuevos tamaños también en aquellas imágenes que tuvieramos previamente.

Nuevos tamaños de las imágenes
Nuevos tamaños de imágenes

Conclusión

Ya tienes optimizadas las imágenes para tu web y las puedes usar con Oxygen.

Fácil y sencillo. WPO al poder 😁

Coméntame si tienes alguna duda y te ayudaré encantado.

Recursos:

No hay comentarios

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
[fluentform id="3"]
crossmenu