function checkImagesSource() {
    const images = document.querySelectorAll('img');
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;

    console.log(`Viewport dimensions: ${viewportWidth} x ${viewportHeight}`);
    console.log('Images displayed and their sources:');

    images.forEach((img, index) => {
        const rect = img.getBoundingClientRect();
        // Check if the image is within the viewport
        if (rect.top < viewportHeight && rect.bottom >= 0 && rect.left < viewportWidth && rect.right >= 0) {
            const isSrcset = img.hasAttribute('srcset');
            const sourceUsed = img.currentSrc || img.src;  // This will get the image URL after srcset and sizes have been applied by the browser

            if (isSrcset) {
                console.log(`${img.tagName.toLowerCase()} srcset - ${sourceUsed}`);
            } else {
                console.log(`${img.tagName.toLowerCase()} - ${sourceUsed}`);
            }
        }
    });
}

checkImagesSource();