Convertisseur d’images par lot

code HTML

<-- code html ... -->

code JavaScript

/* img.js */
function checkWebpSupport() {
  return new Promise(resolve => {
      const webP = new Image();
      webP.onload = webP.onerror = function () {
        resolve(webP.height === 2);
      };
      webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
  });
}

// Sélectionner toutes les images avec l'attribut data-base-src
const images = document.querySelectorAll('img[data-base-src]');

// Fonction principale pour mettre à jour les sources des images
const updateImageSrc = async () => {
// Vérifier le support WebP une seule fois
const supportsWebp = await checkWebpSupport();

images.forEach(img => {
    // Calculer la largeur réelle requise, en prenant en compte la densité de pixels
    const imgWidth = img.clientWidth * (window.devicePixelRatio > 1 ? 2 : 1);
    const baseSrc = img.getAttribute('data-base-src').replace(/\.\w+$/, '');
    
    // Déterminer la résolution la plus adaptée
    let width = '640';
    if (imgWidth >= 1280) {
        width = '2560';
    } else if (imgWidth >= 800) {
        width = '1280';
    } else if (imgWidth >= 640) {
        width = '800';
    }
    
    // Construire l'URL de l'image avec l'extension appropriée
    const extension = supportsWebp ? 'webp' : 'jpg';
    const src = `${baseSrc}-w${width}.${extension}`;
    
    // Mettre à jour la source de l'image uniquement si elle a changé
    if (img.src !== src) {
      img.src = src;
    }
});
};

// Utiliser un debounce pour éviter les appels trop fréquents lors du redimensionnement
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(updateImageSrc, 100);
});

// Appel initial
updateImageSrc();