CDN para imagenes con imgix

¿Qué es un CDN?

Un CDN, o Red de Distribución de Contenidos (Content Delivery Network, por sus siglas en inglés), es una red de servidores distribuidos por diferentes ubicaciones geográficas. Su función es entregar contenido de manera eficiente a los usuarios, reduciendo los tiempos de carga y mejorando la experiencia del visitante.

Cuando se utiliza un CDN para entregar imágenes, estas se almacenan en servidores cercanos al usuario, lo que reduce la latencia y mejora la velocidad de carga.

Beneficios de Usar un CDN para Imágenes

• Mayor Velocidad de Carga: Un CDN almacena imágenes en servidores distribuidos globalmente, lo que permite que los usuarios descarguen las imágenes desde el servidor más cercano, reduciendo el tiempo de carga.
• Reducción de la Carga en el Servidor de Origen: Al usar un CDN, las solicitudes de imágenes se redirigen a los servidores del CDN en lugar de tu servidor principal, lo que reduce la carga y mejora el rendimiento general del sitio.
• Optimización Automática de Imágenes: Muchos servicios de CDN ofrecen herramientas para optimizar automáticamente las imágenes, como la compresión y el cambio de tamaño, lo que reduce el peso de las imágenes sin sacrificar calidad.
• Mejor Experiencia de Usuario: Las imágenes que se cargan más rápido mejoran la experiencia de navegación de los usuarios, lo que puede reducir las tasas de rebote y aumentar el tiempo de permanencia en tu sitio.
• Escalabilidad y Fiabilidad: Un CDN está diseñado para manejar grandes volúmenes de tráfico, lo que significa que tu sitio puede escalar fácilmente y manejar picos de tráfico sin perder rendimiento.
• SEO Mejorado: Google y otros motores de búsqueda valoran la velocidad de carga de un sitio web. Al utilizar un CDN, puedes mejorar el rendimiento de tu sitio, lo que potencialmente puede mejorar tu posicionamiento en los resultados de búsqueda.
• Mayor Seguridad: Los CDN suelen ofrecer características de seguridad, como protección contra ataques DDoS (Distributed Denial of Service), lo que agrega una capa adicional de protección para tu sitio.

¿Cómo Funciona el CDN para Imágenes?

Cuando subes una imagen a un servicio de CDN como Imgix, Cloudinary o cualquier otro, el CDN distribuye esas imágenes en múltiples servidores ubicados en diferentes partes del mundo. Cuando un usuario visita tu página, el CDN selecciona el servidor más cercano al visitante y entrega la imagen desde allí, reduciendo el tiempo de carga y mejorando la experiencia del usuario.

Además de la distribución global, muchos CDNs también ofrecen funcionalidades como la optimización automática de imágenes, que ajusta las imágenes según el tamaño de pantalla del dispositivo o el tipo de conexión, lo que ayuda a mejorar aún más la velocidad de carga.

// Función para transformar la URL de Blogger a Imgix
function transformToImgixURL(url) {
    // Verificar si la URL contiene blogger.googleusercontent.com
    if (url.includes("blogger.googleusercontent.com")) {
        // Reemplazar el dominio de Blogger por Imgix
        let newUrl = url.replace("https://blogger.googleusercontent.com", "https://kolectiva.imgix.net");
        return newUrl;  // Sin recodificar la URL, solo transformamos el dominio
    }
    return url;
}

// 1. Transformar las URLs de las imágenes normales (con src)
const images = document.querySelectorAll('img[src*="blogger.googleusercontent.com"]');
images.forEach((img) => {
    const originalSrc = img.src;
    const newSrc = transformToImgixURL(originalSrc);
    if (originalSrc !== newSrc) {
        img.src = newSrc; // Actualizar el atributo src de la imagen
    }
});

// 2. Transformar las URLs de las imágenes con lazy loading (data-src o data-lazy-src)
const lazyImages = document.querySelectorAll('img[data-src*="blogger.googleusercontent.com"], img[data-lazy-src*="blogger.googleusercontent.com"]');
lazyImages.forEach((img) => {
    const originalSrc = img.getAttribute('data-src') || img.getAttribute('data-lazy-src');
    const newSrc = transformToImgixURL(originalSrc);
    if (originalSrc !== newSrc) {
        img.setAttribute('data-src', newSrc); // Actualizar el atributo data-src
        img.setAttribute('data-lazy-src', newSrc); // En caso de que uses otro atributo
    }
});

// 3. Transformar las URLs de las imágenes de fondo (en divs o  con clase lazy-bg)
const lazyBgElements = document.querySelectorAll('.lazy-bg');
lazyBgElements.forEach((el) => {
    const bgImageUrl = window.getComputedStyle(el).backgroundImage;
    if (bgImageUrl && bgImageUrl.includes('blogger.googleusercontent.com')) {
        const cleanBgUrl = bgImageUrl.replace(/^url\(["']?(.*?)["']?\)$/, '$1'); // Limpiar la url
        const newBgImageUrl = transformToImgixURL(cleanBgUrl);
        el.style.backgroundImage = `url(${newBgImageUrl})`;
    }
});

// 4. Transformar las URLs de los enlaces  (para imágenes)
const links = document.querySelectorAll('a[href*="blogger.googleusercontent.com"]');
links.forEach((link) => {
    const originalHref = link.href;
    const newHref = transformToImgixURL(originalHref);
    if (originalHref !== newHref) {
        link.href = newHref; // Actualizar el atributo href del enlace
    }
});