Cómo desactivar el responsive automático de imágenes de WordPress

Desde la versión 4.4 WordPress añade automáticamente el atributo srcset a las imágenes de tu contenido.

El atributo srcset te permite definir diferentes imágenes para usar en diferentes puntos de ruptura del navegador, y así ofrecer distintas imágenes según el dispositivo.

Ejemplo:

Los atributos srcsetsizes contienen la información que le indica al navegador qué tamaño de imagen es mejor para cada tamaño (punto de ruptura, o viewport) del dispositivo desde el que se visite la página.

Una explicación en detalle:

  • scrset:  Si el ancho de la imagen es de 300px o menos entonces el navegador cargará y mostrará image-300×188.jpg, si es de más de 300px pero menos de 700px — image-700×600.jpg, etc.
  • sizes: Ancho máximo de la imagen para la media query dada, es como una declaración if en la que si el viewport es de 709px o menos, el ancho máximo de la imagen es el 85% del viewport, si ninguno de los argumentos se cumple entonces el ancho de la imagen será de 840px.

¿Cómo funciona el atributo srcset de WordPress?

WordPress utiliza the_content para añadir los atributos de adaptabilidad a las imágenes que hayas subido:

  • Si tu imagen tiene una clase wp-image-{ATTACHMENT_ID}.
  • Si tu imagen no tiene ya un atributo scrset.

Entonces ¿cuál es el problema? ¿No es mejor que sean responsive?

El problema aparece cuando usas una CDN del tipo Amazon S3 o Jetpack Photon para entregar tus imágenes, y entonces resulta que tienes unas URLs de imágenes alojadas en tu CDN y los atributos srcset de sus copias en tu alojamiento.

Entonces esas imágenes de tu servidor funcionarán en dispositivos móviles pero no en tamaños de ordenador de escritorio.

No es mi caso ¿hay más motivos para desactivar el responsive automático de imágenes de WordPress?

Pues claro, yo no soy anti-responsive, aquí tienes unas cuantas razones por las que podrías querer desactivar el responsive automático de imágenes de WordPress:

  • No todos los sitios quieren o necesitan imágenes responsive.
  • No todos los usuarios quieren o necesitan que WordPress lo haga todo por ellos.
  • Porque las soluciones generalizadas no se adaptan al 100% de usuarios y posibles escenarios.
  • Porque hay muchas maneras diferentes de entregar imágenes responsive.
  • Porque el método de WordPress no funciona en todas las situaciones.
  • Porque hay usuarios que prefieren implementar sus propias soluciones responsive.
  • Porque el método de WordPress genera tamaños adicionales de imagen para cada imagen subida, lo que consume espacio y recursos.

¿Cómo desactivo el responsive automático de WordPress en ciertas imágenes?

Puedes hacerlo con el gancho WordPress en wp_calculate_image_srcset.

Este filtro te ofrece 5 argumentos:

  • $sources Uno o más arrays datos de origen a incluir en srcset
  • $size_array Array de los valores de anchura y altura en píxeles (en ese orden).
  • $image_src El origen de la imagen.
  • $image_meta Los metadatos de la imagen devueltos por wp_get_attachment_metadata()
  • $attachment_id El post_id de la imagen

Aquí tienes un código de ejemplo que puedes usar en el archivo function.php de tu tema o en un plugin personal para adaptarlo a tu necesidad:

¿Cómo desactivo completamente el responsive automático de WordPress?

Si tienes claro que no quieres el responsive automático de imágenes de WordPress, del todo, simplemente añade esto a tu plugin personal o al archivo functions.php del tema:

¿No hay algún plugin majete para desactivar esto?

Claro, siempre, en este caso se llama Disable Responsive Images Complete. Una vez instalado y activo (no hay opciones) hace esto:

  • Desactiva las imágenes responsive en la parte visible de la web.
  • Desactiva la creación del tamaño de imagen  medium_large de 768px
  • Totalmente listo para funcionar, sin tener que configurar nada.

A partir de aquí tú tienes la libertad, y responsabilidad, de aplicar el método de adaptación a dispositivos (responsive) que consideres más efectivo en tu caso, sin que WordPress lo haga por ti.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(5 votos, promedio: 4.6)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido