Gist Soporte Imagenes WebP y Avif como Background

imagenes.js

(function (document) {
  var checkCount = 0,
    formatFound = false;

  function setHTMLClass(height, className) {
    checkCount++;
    if (height == 2) {
      formatFound = true;
      document.documentElement.className += " " + className;
    } else {
      document.documentElement.className += " not" + className;
      if (checkCount == 4 && !formatFound) {
        if (
          document.implementation.hasFeature(
            "http://www.w3.org/TR/SVG11/feature#Image",
            "1.1"
          )
        ) {
          document.documentElement.className += " svg";
        } else {
          document.documentElement.className += " notsvg png";
        }
      }
    }
  }

  var JXL = new Image();
  JXL.onload = JXL.onerror = function () {
    setHTMLClass(JXL.height, "jxl");
  };
  JXL.src =
    "data:image/jxl;base64,/woIELASCAgQAFwASxLFgkWAHL0xqnCBCV0qDp901Te/5QM=";

  var AVIF = new Image();
  AVIF.onload = AVIF.onerror = function () {
    setHTMLClass(AVIF.height, "avif");
  };
  AVIF.src =
    "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";

  var WebP = new Image();
  WebP.onload = WebP.onerror = function () {
    setHTMLClass(WebP.height, "webp");
  };
  WebP.src =
    "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";

  var JPX = new Image();
  JPX.onload = JPX.onerror = function () {
    setHTMLClass(JPX.height, "jpx");
  };
  JPX.src =
    "data:image/vnd.ms-photo;base64,SUm8AQgAAAAFAAG8AQAQAAAASgAAAIC8BAABAAAAAQAAAIG8BAABAAAAAgAAAMC8BAABAAAAWgAAAMG8BAABAAAARgAAAAAAAAAkw91vA07+S7GFPXd2jckQV01QSE9UTwAZAMFxAAAAATAAoAAKAACgAAAQgCAIAAAEb/8AAQAAAQDCPwCAAAAAAAAAAAAAAAAAjkI/AIAAAAAAAAABIAA=";

  var JP2 = new Image();
  JP2.onload = JP2.onerror = function () {
    setHTMLClass(JP2.height, "jp2");
  };
  JP2.src =
    "data:image/jp2;base64,/0//UQAyAAAAAAABAAAAAgAAAAAAAAAAAAAABAAAAAQAAAAAAAAAAAAEBwEBBwEBBwEBBwEB/1IADAAAAAEAAAQEAAH/XAAEQED/ZAAlAAFDcmVhdGVkIGJ5IE9wZW5KUEVHIHZlcnNpb24gMi4wLjD/kAAKAAAAAABYAAH/UwAJAQAABAQAAf9dAAUBQED/UwAJAgAABAQAAf9dAAUCQED/UwAJAwAABAQAAf9dAAUDQED/k8+kEAGvz6QQAa/PpBABr994EAk//9k=";
})(
  (window.sandboxApi &&
    window.sandboxApi.parentWindow &&
    window.sandboxApi.parentWindow.document) ||
    document
);

Descripción usando chatGPT

Este código se utiliza para detectar si el navegador del usuario es compatible con distintos formatos de imagen y, en caso afirmativo, añadir una clase de estilo al elemento HTML .

Para hacerlo, se crean varias imágenes en memoria con distintos formatos de imagen y se cargan utilizando una cadena de datos en base64. Cuando se completa la carga de cada imagen, se llama a la función setHTMLClass, pasándole la altura de la imagen y el nombre de la clase que se desea añadir al elemento .

Si la altura de la imagen es 2 (que se corresponde con una imagen de 1x1 pixel), se añade la clase al elemento . Si la altura es distinta de 2, se añade una clase "not" seguida del nombre de la clase original. Esto permite saber si el navegador es compatible con el formato de imagen.

Por último, si se han comprobado todos los formatos de imagen y ninguno de ellos ha sido compatible, se verifica si el navegador es compatible con SVG. Si lo es, se añade la clase "svg" al elemento , en caso contrario se añade la clase "notsvg png".

Esta función se puede utilizar para determinar si el navegador es compatible con distintos formatos de imagen y, en consecuencia, elegir el formato más adecuado para las imágenes de la página.

Description using chatGPT

This code is used to detect if the user's browser is compatible with different image formats, and if so, add a style class to the element.

To do this, several images are created in memory with different image formats and are loaded using a base64 data string. When each image's loading is completed, the setHTMLClass function is called, passing it the image's height and the name of the class that you want to add to the element.

If the image's height is 2 (which corresponds to a 1x1 pixel image), the class is added to the element. If the height is different from 2, a "not" class followed by the original class name is added. This allows you to know if the browser is compatible with the image format.

Finally, if all image formats have been checked and none of them have been compatible, it is verified if the browser is compatible with SVG. If it is, the "svg" class is added to the element, otherwise the "notsvg png" class is added.

This function can be used to determine if the browser is compatible with different image formats and, consequently, choose the most suitable format for the page's images.