How to Verify Image Optimizations in Chrome DevTools

Quick Checklist

✅ Console Logs: Check browser console for 📸 Image loaded: PREVIEW or FULL messages
✅ Network Tab: See actual file sizes and which URLs are loaded
✅ Elements Tab: Inspect <img> elements to see srcset and currentSrc
✅ Performance Tab: Measure load times before/after scrolling

Method 1: Console Logs (Easiest)

I’ve added debug logging that shows which image was loaded.

1. Open Chrome DevTools (F12 or Cmd+Option+I)
2. Go to Console tab
3. Reload the page
4. Scroll down to trigger lazy loading

You’ll see messages like:

📸 Image loaded: PREVIEW (thumbnail) {url: "..._thumb.jpg", devicePixelRatio: 1, viewportWidth: 1920}
📸 Image loaded: FULL (original) {url: "...jpg", devicePixelRatio: 2, viewportWidth: 375}

What to look for:

• On desktop (low DPR): Should see mostly PREVIEW
• On mobile (high DPR): Might see FULL for Retina displays
• On slow connections: Browser should prefer PREVIEW

Method 2: Network Tab (Most Detailed)

This shows exactly what’s being downloaded, file sizes, and timing.

Steps:

1. Open DevTools → Network tab
2. Filter by “Img” (click the “Img” filter button)
3. Enable throttling:
   • Click the throttling dropdown (shows “No throttling”)
   • Select “Fast 3G” or “Slow 3G” for testing
4. Clear network log (circle with line through it)
5. Reload page (Cmd/Ctrl + R)
6. Scroll down to trigger lazy-loaded images

What to Look For:

Image URLs:

• Look for _thumb.jpg in filenames = Preview/thumbnail loaded ✅
• Look for regular .jpg (no _thumb) = Full image loaded

File Sizes:

• Preview images: Usually 20-100 KB
• Full images: Usually 200-2000 KB (much larger!)
• Compare: Preview should be 5-10x smaller

Timing:

• Initial load: Only images above the fold should load immediately
• After scroll: Images should load as you scroll down (lazy loading)
• Total time: Should be much faster than loading all images at once

Example Network Tab View:

Name                          Size      Time     Type
photo-123_thumb.jpg           45 KB     120ms    jpeg  ← Preview (small)
photo-124_thumb.jpg           52 KB     135ms    jpeg  ← Preview (small)
photo-125.jpg                1.2 MB    890ms    jpeg  ← Full (large, maybe Retina)

Method 3: Elements Tab (Verify srcset)

See the actual HTML attributes and which image the browser chose.

Steps:

1. Open DevTools → Elements tab
2. Find an image in the gallery (right-click → Inspect)
3. Look at the <img> element

What to Look For:

Attributes present:

<img srcset="preview.jpg 400w, full.jpg 1012w"
     sizes="(max-width: 768px) 100vw, ..."
     src="preview.jpg"
     loading="lazy"
     decoding="async">

In DevTools, you’ll see:

• srcset attribute with both URLs ✅
• sizes attribute ✅
• loading="lazy" ✅
• decoding="async" ✅

Check currentSrc property:

• In Elements tab, select the <img> element
• In Console, type: $0.currentSrc (or $0.src)
• This shows which URL actually loaded

Method 4: Performance Comparison

Compare before/after to measure improvement.

Test 1: Initial Page Load

Before optimization:

• All images load immediately
• Total size: ~5-20 MB (depending on number of images)
• Time: 10-30 seconds on slow connection

After optimization:

• Only visible images load (above fold)
• Total size: ~200-500 KB initially
• Time: 1-3 seconds on slow connection

How to measure:

1. Network tab → Check “Disable cache”
2. Set throttling to “Slow 3G”
3. Reload page
4. Look at “Finish” time and total size transferred

Test 2: Lazy Loading Verification

What to check:

1. Network tab open
2. Reload page
3. Don’t scroll - check which images loaded
4. Should see: Only 1-3 images (above the fold)
5. Now scroll down - watch Network tab
6. Should see: New images loading as you scroll ✅

Method 5: Mobile Device Testing

Chrome Mobile Emulation:

1. DevTools → Click device icon (or Cmd/Ctrl + Shift + M)
2. Select device: iPhone 12 Pro (or any Retina device)
3. Network throttling: Set to “Fast 3G” or “Slow 3G”
4. Reload page

What to expect:

• On Retina devices (2x DPR): Browser may choose FULL images for quality
• On regular displays (1x DPR): Browser should choose PREVIEW
• Console logs will show devicePixelRatio: 2 for Retina

Real Mobile Device:

1. Connect phone to computer
2. Chrome → chrome://inspect
3. Find your device → Click “inspect”
4. Network tab in mobile DevTools
5. Test on actual slow connection (turn off WiFi, use cellular)

Expected Results Summary

✅ Optimizations Working If:

1. Console shows PREVIEW for most images (on desktop/low DPR)
2. Network tab shows _thumb.jpg files loading first
3. File sizes are small (50-100 KB instead of 1-2 MB)
4. Images load only when scrolled into view (lazy loading)
5. Initial page load is fast (< 3 seconds on slow 3G)

⚠️ If You See FULL Images Loading:

On desktop: Might be normal if:

• High DPR display (Retina)
• Fast connection (browser chooses quality)
• Large viewport (browser calculates it needs full size)

To force preview on desktop for testing:

• Make window narrower (< 400px)
• Use “Slow 3G” throttling
• Browser should prefer preview

❌ If Optimizations Aren’t Working:

Check:

1. Are preview_url values in API response? (Check console from earlier)
2. Is srcset attribute present on images? (Elements tab)
3. Is loading="lazy" present? (Elements tab)
4. Are images loading immediately or on scroll? (Network tab timing)

Quick Test Script

Run this in Console to see summary:

// Count images and see which ones loaded
const images = document.querySelectorAll('.photo-card img');
let previewCount = 0;
let fullCount = 0;

images.forEach(img => {
  const src = img.currentSrc || img.src;
  if (src.includes('_thumb')) {
    previewCount++;
  } else {
    fullCount++;
  }
});

console.log(`📊 Image Loading Summary:`);
console.log(`   Preview thumbnails: ${previewCount}`);
console.log(`   Full images: ${fullCount}`);
console.log(`   Total images: ${images.length}`);
console.log(`   Device Pixel Ratio: ${window.devicePixelRatio || 1}x`);

Removing Debug Logs Later

Once you’ve verified everything works, you can remove the debug logging (lines 1231-1242 in the code) to clean up the console.