Mostrar imagenes del tema segun el navegador

Hola @danidub gracias por tu respuesta. Tienes razon, el codigo no está bien planteado, ya que lo he hecho con ayuda de chatgpt y el resultado no es muy bueno.

Durante este tiempo he seguido «peleandome» con el y me ha ofrecido varias alternativas, no se si quizas esta sea mas valida, aunque me devuelve una pantalla en blanco si la copio en functions.php.

function serve_image_in_correct_format($filename) {
  // Obtener la extensión del archivo
  $extension = pathinfo($filename, PATHINFO_EXTENSION);

  // Verificar si el navegador es compatible con WebP
  $webp_supported = isset($_SERVER['HTTP_ACCEPT']) && strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false;
  
  // Si el navegador es compatible con WebP, intentar servir la imagen en formato WebP
  if ($webp_supported && $extension !== 'gif') {
    $webp_filename = substr($filename, 0, strrpos($filename, '.')) . '.webp';
    if (file_exists($webp_filename)) {
      $filename = $webp_filename;
    }
  }

  // Obtener el tipo de contenido del archivo
  $mime_type = mime_content_type($filename);

  // Enviar las cabeceras HTTP necesarias
  header('Content-Type: ' . $mime_type);
  header('Content-Length: ' . filesize($filename));
  header('Cache-Control: public, max-age=86400');

  // Mostrar la imagen
  readfile($filename);
  exit;
}

add_action('template_redirect', function() {
  // Obtener la ruta de la imagen solicitada
  $requested_image_path = $_SERVER['DOCUMENT_ROOT'] . $_SERVER['REQUEST_URI'];

  // Si la imagen existe, servirla en el formato correcto
  if (file_exists($requested_image_path)) {
    serve_image_in_correct_format($requested_image_path);
  }
});

Según dice:
«Este código primero verifica si el navegador del usuario admite WebP utilizando la cabecera HTTP «Accept». Si el navegador es compatible con WebP, intenta servir la imagen solicitada en formato WebP. Si la imagen WebP no está disponible, se sirve en el formato original.

Si el navegador no admite WebP o si la imagen solicitada es un GIF, se sirve la imagen en el formato original.»

He mirado la opción del plugin que propones, pero me plantea dos dudas.

La primera es que uso un servidor litespeed y por lo que leo en su descripcion «LiteSpeed Cache can be set up to maintain separate page caches for browsers that supports webp and browsers that don’t. Through this functionality it is possible to use «Alter HTML» with the option «Replace image URLs» and «Only do the replacements in webp enabled browsers» mode.» pero soy incapaz de encontrar esa opción en la configuración de LiteSpeed por lo que no se si funcionaria adecuadamente.

La segunda es que en principio habia pensado en un codigo por no sobrecargar el WordPress de plugins y porque queria aplicarlo solo a las imagenes que conforman el tema.

Os agradeceré cualquier ayuda. Saludos

Puede que tengas razón, pero lo estoy probando y no acabo de ver como configurarlo. De hecho si te fijas en el segundo parrafo te habla de generar dos paginas separadas en cache y un link a una pagina de github donde alguien explica como usar LiteSpeed Cache + BunnyCDN (que es tambien de pago).

LiteSpeed Cache can be set up to maintain separate page caches for browsers that supports webp and browsers that don’t. Through this functionality it is possible to use «Alter HTML» with the option «Replace image URLs» and «Only do the replacements in webp enabled browsers» mode.

The setup was kindly shared and explained in detail by @ribeiroeder here

https://github.com/rosell-dk/webp-express/issues/433

Quiere decir eso que para usarlo con Litespeed tengo que usarlo con ese CDN? Y Litespeed tiene una funcion de optimización de imagenes, no se generará incompatibilidades?