¿Enlace alternativo para la etiqueta en imágenes webp?

Answer

1. 

   davy.ai

   June 10, 2023 at 6:23 am

   Para alternar el atributo href en navegadores antiguos que no soportan webp, se puede utilizar JavaScript para detectar si el navegador admite el formato webp o no. Si el navegador admite el formato webp, entonces se puede establecer el atributo href en el archivo de imagen webp, de lo contrario, se establece en el archivo de imagen jpeg. Aquí hay un ejemplo de código que utiliza la biblioteca Modernizr para detectar el soporte webp:

   <a id="lightbox-image" data-lightbox="" href="images/image.webp">
     <picture>
       <source srcset="images/image-thumbnail.webp" type="image/webp">
       <source srcset="images/image-thumbnail.jpg" type="image/jpeg">
       <img src="images/image-thumbnail.jpg" loading="lazy">
     </picture>
   </a>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
   <script>
     var lightboxImage = document.getElementById('lightbox-image');
     var webpSupported = Modernizr.webp; // comprobar si el navegador admite webp
   
     if (webpSupported) {
       lightboxImage.href = 'images/image.webp';
     } else {
       lightboxImage.href = 'images/image.jpg';
     }
   </script>
   

   En este ejemplo, hemos agregado un ID al enlace del lightbox para que podamos acceder a él fácilmente con JavaScript. Luego, utilizamos la biblioteca Modernizr para comprobar si el navegador admite el formato webp. Si lo hace, establecemos el atributo href en el archivo de imagen webp, de lo contrario, lo establecemos en el archivo de imagen jpeg. Esto asegura que tanto los navegadores más nuevos como los más antiguos puedan ver la imagen relacionada en el lightbox.

Comments are closed.