Image SEO Finder Tool

function processImage(originalImg, targetKeyword = "") {
    // Create the main container for the SEO report
    const container = document.createElement('div');
    container.style.cssText = "font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 24px; max-width: 750px; color: #374151; box-sizing: border-box;";

    // Extract image data
    const altText = originalImg.alt || "";
    const src = originalImg.src || "";
    const isDataUrl = src.startsWith('data:');
    const width = originalImg.naturalWidth || originalImg.width || 0;
    const height = originalImg.naturalHeight || originalImg.height || 0;

    // Estimate File Size
    let sizeBytes = 0;
    if (isDataUrl) {
        const base64Data = src.split(',')[1];
        if (base64Data) {
            sizeBytes = Math.round(base64Data.length * 3 / 4);
            if (src.endsWith('==')) sizeBytes -= 2;
            else if (src.endsWith('=')) sizeBytes -= 1;
        }
    } else {
        // Draw on canvas to estimate size via JPEG conversion
        try {
            const canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);
            const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
            const base64Data = dataUrl.split(',')[1];
            if (base64Data) {
                sizeBytes = Math.round(base64Data.length * 3 / 4);
            }
        } catch(e) {
            sizeBytes = 0; // CORS or other drawing error
        }
    }
    const sizeKB = sizeBytes > 0 ? (sizeBytes / 1024).toFixed(1) : 0;

    // Run SEO Checks
    const checks = [];

    // 1. Alt Text Check
    let altScore = 'fail';
    let altMsg = "Missing or empty Alt Text.";
    let altDesc = "Alt text is crucial for accessibility and helps search engines understand the image content.";
    if (altText.trim().length > 0) {
        if (altText.length < 15) {
            altScore = 'warning';
            altMsg = `Alt text is a bit short ("${altText}").`;
            altDesc = "Consider adding more descriptive text to properly summarize the visual.";
        } else {
            altScore = 'pass';
            altMsg = "Alt text is present and sufficiently long.";
            altDesc = "Good job! This helps search engines properly index your image.";
        }
    }
    checks.push({ name: "Alt Attribute", score: altScore, msg: altMsg, desc: altDesc });

    // 2. Keyword Check (if provided)
    if (targetKeyword.trim()) {
        const kw = targetKeyword.trim().toLowerCase();
        let kwScore = 'fail';
        let kwMsg = `Target keyword "${targetKeyword}" not found in Alt Text.`;
        let kwDesc = "Including your target keyword in the alt text can improve relevance for that term.";
        if (altText.toLowerCase().includes(kw)) {
            kwScore = 'pass';
            kwMsg = `Target keyword "${targetKeyword}" found in Alt Text!`;
            kwDesc = "Excellent! The image is highly relevant to your target topic.";
        }
        checks.push({ name: "Keyword Optimization", score: kwScore, msg: kwMsg, desc: kwDesc });
    }

    // 3. File Name Check
    let fnScore = 'warning';
    let fnMsg = 'Image loaded via Data URL (No filename).';
    let fnDesc = 'Data URLs are not natively indexed by Google Image Search. Use actual file assets for better SEO.';
    if (!isDataUrl) {
        let filename = '';
        try {
            const url = new URL(src);
            filename = url.pathname.split('/').pop();
        } catch(e) {
            filename = src.split('/').pop();
        }

        if (!filename) {
            fnScore = 'fail';
            fnMsg = "Unable to determine filename from path.";
            fnDesc = "Ensure your image has a valid, recognizable file extension and name.";
        } else if (filename.match(/^(image|img|pic|picture|photo|untitled|dsc|_dsc)\d*\.[a-z0-9]+$/i) || filename.match(/^\d+\.[a-z0-9]+$/i)) {
            fnScore = 'fail';
            fnMsg = `Generic filename detected ("${filename}").`;
            fnDesc = "Rename your image to use descriptive, hyphen-separated keywords (e.g., 'red-running-shoes.jpg').";
        } else {
            fnScore = 'pass';
            fnMsg = `Descriptive filename found ("${filename}").`;
            fnDesc = "Descriptive filenames provide important clues to search engines about the image context.";
        }
    }
    checks.push({ name: "File Name Check", score: fnScore, msg: fnMsg, desc: fnDesc });

    // 4. Dimension Check
    let dimScore = 'pass';
    let dimMsg = `Appropriate dimensions (${width} × ${height} px).`;
    let dimDesc = "Dimensions are within a reasonable range for native web delivery.";
    if (width > 1920) {
        dimScore = 'warning';
        dimMsg = `Image is very large (${width} × ${height} px).`;
        dimDesc = "Consider resizing down to a maximum width of 1920px (or your max container size) to save bandwidth.";
    } else if (width === 0 || height === 0) {
        dimScore = 'fail';
        dimMsg = `Invalid dimensions.`;
        dimDesc = "The image might not have loaded correctly or represents a tracking pixel.";
    }
    checks.push({ name: "Image Dimensions", score: dimScore, msg: dimMsg, desc: dimDesc });

    // 5. Size Check
    let sizeScore = 'pass';
    let sizeMsg = `Excellent file size (~${sizeKB} KB).`;
    let sizeDesc = "Small file sizes ensure fast page loading, which is a key ranking metric (Core Web Vitals).";
    if (sizeBytes === 0) {
        sizeScore = 'warning';
        sizeMsg = "Could not estimate file size accurately.";
        sizeDesc = "Due to Cross-Origin (CORS) restrictions, size check was skipped. Ensure images are optimized before uploading.";
    } else if (sizeKB > 500) {
        sizeScore = 'fail';
        sizeMsg = `File size is exceptionally heavy (~${sizeKB} KB).`;
        sizeDesc = "Compress the image or use a next-gen format (WebP/AVIF) to drastically reduce load time.";
    } else if (sizeKB > 150) {
        sizeScore = 'warning';
        sizeMsg = `File size is acceptable but could be improved (~${sizeKB} KB).`;
        sizeDesc = "Consider heavily compressing the image to sit below 150KB for optimal web performance.";
    }
    checks.push({ name: "Estimated File Size", score: sizeScore, msg: sizeMsg, desc: sizeDesc });

    // Build the UI
    let html = `
        <div style="display: flex; align-items: flex-end; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid #d1d5db; padding-bottom: 16px;">
            <h2 style="margin: 0; font-size: 26px; color: #111827;">Image SEO Report</h2>
            <span style="font-size: 14px; color: #6b7280; padding-bottom: 3px;">Analysis Tool</span>
        </div>
        
        <div style="display: flex; gap: 24px; background: #ffffff; padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 24px; flex-wrap: wrap;">
            <div style="flex-shrink: 0; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 6px; overflow: hidden; border: 1px solid #d1d5db;">
                <img src="${src}" style="max-width: 100%; max-height: 100%; object-fit: contain;" alt="Report Preview" />
            </div>
            <div style="flex-grow: 1; display:flex; flex-direction:column; justify-content:center; min-width: 200px;">
                <h3 style="margin: 0 0 12px 0; font-size: 18px; color: #111827;">Detected Properties</h3>
                <p style="margin: 0 0 6px 0; font-size: 14px;"><strong>Dimensions:</strong> ${width} × ${height} px</p>
                <p style="margin: 0 0 6px 0; font-size: 14px;"><strong>Est. Memory/Size:</strong> ${sizeBytes > 0 ? sizeKB + ' KB' : 'Unknown'}</p>
                <p style="margin: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;" title="${altText}">
                    <strong>Alt Text:</strong> ${altText ? `"${altText}"` : '<i style="color: #9ca3af;">None specified</i>'}
                </p>
            </div>
        </div>

        <h3 style="margin: 0 0 16px 0; font-size: 18px; color: #374151;">Audit Results</h3>
        <div style="display: grid; gap: 16px;">
    `;

    // Append Individual Cards for Checks
    checks.forEach(check => {
        let bgColor, icon, textColor, borderColor;
        if (check.score === 'pass') {
            bgColor = '#ecfdf5'; // light green
            borderColor = '#10b981';
            icon = '✅';
            textColor = '#065f46';
        } else if (check.score === 'warning') {
            bgColor = '#fffbeb'; // light yellow/orange
            borderColor = '#f59e0b';
            icon = '⚠️';
            textColor = '#92400e';
        } else {
            bgColor = '#fef2f2'; // light red
            borderColor = '#ef4444';
            icon = '❌';
            textColor = '#991b1b';
        }

        html += `
            <div style="display: flex; gap: 16px; background: ${bgColor}; padding: 16px; border-radius: 8px; border-left: 5px solid ${borderColor}; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                <div style="font-size: 24px; line-height: 1.2;">${icon}</div>
                <div>
                    <h4 style="margin: 0 0 6px 0; color: ${textColor}; font-size: 16px;">${check.name}</h4>
                    <p style="margin: 0 0 6px 0; font-size: 14px; font-weight: 600; color: #111827;">${check.msg}</p>
                    <p style="margin: 0; font-size: 13px; color: #4b5563; line-height: 1.4;">${check.desc}</p>
                </div>
            </div>
        `;
    });

    html += `</div>`;
    container.innerHTML = html;

    return container;
}