WordPress: Evitar servir imágenes webp en descargas basadas en botones

Aquí tienes un ejemplo de cómo puedes modificar el código para agregar un parámetro de consulta a la ruta de la imagen:

<a href="path/to/my/img.png?format=png" download="img.png">
   <button type="button"> Descargar PNG </button>
</a>

<a href="path/to/my/img.png?format=webp" download="img.webp">
   <button type="button"> Descargar WebP </button>
</a>

var pngButton = document.querySelector('#png-button');
var webpButton = document.querySelector('#webp-button');
var downloadLink = document.querySelector('#download-link');

pngButton.addEventListener('click', function() {
  downloadLink.setAttribute('href', 'path/to/my/img.png?format=png');
  downloadLink.setAttribute('download', 'img.png');
});

webpButton.addEventListener('click', function() {
  downloadLink.setAttribute('href', 'path/to/my/img.png?format=webp');
  downloadLink.setAttribute('download', 'img.webp');
});

2. Solución del lado del servidor

Si deseas agregar una condición en el lado del servidor para servir la imagen PNG, puedes modificar el código del tema o plugin de WordPress para verificar las condiciones de solicitud y página y servir la imagen PNG en lugar de la imagen WebP. Por ejemplo, puedes agregar un filtro a la función webp_express_should_convert en el plugin WebP Express para excluir ciertas páginas o imágenes de ser convertidas a WebP.

Aquí tienes un ejemplo de cómo puedes modificar el código del plugin WebP Express para excluir una página con el ID “123” de la conversión a WebP:

function my_webp_express_should_convert($should_convert, $image_url) {
  global $post;

  if ($post && $post->ID == 123) {
    return false;
  }

  return $should_convert;
}

add_filter('webp_express_should_convert', 'my_webp_express_should_convert', 10, 2);

Alternativamente, puedes escribir un plugin o función personalizada de WordPress que intercepte la solicitud de la imagen y sirva la imagen PNG si se cumplen las condiciones de solicitud y página.

Nota sobre la compatibilidad con Firefox