Website dengan gambar tidak optimized:
├─ Loading time: 8-15 detik
├─ Bounce rate: 60-80%
├─ Core Web Vitals: FAILED
└─ Google ranking: Page 3-5

Setelah optimasi:
├─ Loading time: 1.5-3 detik
├─ Bounce rate: 20-35%
├─ Core Web Vitals: PASSED
└─ Google ranking: Page 1-2

Before:
- Homepage size: 8MB
- Loading: 12 detik
- LCP: 6.5s (POOR)

After:
- Homepage size: 800KB (90% lebih kecil!)
- Loading: 2 detik
- LCP: 1.8s (GOOD)

Sebelum: 100GB/bulan
Sesudah: 15GB/bulan
Saving: 85GB = Rp 500K-1juta/bulan

Gunakan untuk:
✓ Featured images
✓ Blog post photos
✓ Product images
✓ Thumbnails
✓ Background images

Keunggulan:
- 25-35% lebih kecil dari JPEG
- Support transparency (seperti PNG)
- Lossy & lossless compression
- Support browser 96%+

Contoh:
hero-image.jpg (500KB) → hero-image.webp (150KB)
= 70% size reduction!

Gunakan untuk:
✓ Fallback untuk WebP
✓ Browser lama (<5%)
✓ Photo-heavy content
✗ Jangan untuk: Icons, logos, screenshot text

Settings:
- Quality: 75-85%
- Progressive: Yes
- Optimize: Yes

Gunakan untuk:
✓ Logo dengan transparency
✓ Icons kompleks
✓ Screenshot dengan text
✗ Jangan untuk: Photos (gunakan WebP/JPEG)

Tips:
- PNG-8 untuk simple graphics
- PNG-24 untuk complex transparency
- Always compress dengan TinyPNG

Perfect untuk:
✓ Logo
✓ Icons
✓ Illustrations
✓ Diagrams

Keunggulan:
- Vector (scalable tanpa loss quality)
- File size kecil (1-50KB)
- SEO friendly (bisa index text)
- Responsive otomatis

Contoh:
logo.png (45KB) → logo.svg (8KB)

Featured Image (Hero):
├─ Desktop: 1200x630px (ideal)
├─ Mobile: 800x420px
└─ Format: WebP + JPEG fallback

Blog Post Images:
├─ Full width: 1200x675px
├─ Medium: 800x450px
└─ Thumbnail: 400x225px

Product Images:
├─ Main: 1000x1000px
├─ Gallery: 800x800px
└─ Thumbnail: 300x300px

Logo:
├─ Header: 200-300px width
└─ Footer: 150-200px width

Background Images:
├─ Full HD: 1920x1080px
├─ Tablet: 1024x768px
└─ Mobile: 640x960px

Kelebihan:
✓ Resize + compress sekaligus
✓ Compare before/after
✓ Support WebP, AVIF
✓ Offline mode
✓ No upload limit

Cara:
1. Upload image
2. Set dimensions (1200x630)
3. Choose WebP
4. Quality 80-85%
5. Download

Kelebihan:
✓ Smart compression
✓ Preserve quality
✓ Batch processing (20 images)
✓ API available

Limit:
- Max 5MB per image
- 20 images per batch (free)

Untuk:
✓ Create + resize custom
✓ Add text overlay
✓ Branding consistent
✓ Templates ready

Workflow:
1. Create design (1200x630)
2. Upload/design
3. Download as WebP/PNG

Features:
- Lossless compression
- Batch processing
- EXIF removal
- Format conversion

Free Photoshop alternative:
- Advanced resize
- Batch processing
- Export for web
- Full control

// Custom image sizes
add_image_size('hero-desktop', 1200, 630, true);
add_image_size('hero-mobile', 800, 420, true);
add_image_size('blog-post', 800, 450, true);
add_image_size('thumbnail-square', 400, 400, true);

// Enable WebP support
function enable_webp_upload($mimes) {
    $mimes['webp'] = 'image/webp';
    return $mimes;
}
add_filter('upload_mimes', 'enable_webp_upload');

Lossless Compression:
├─ Quality: 100% preserved
├─ Size reduction: 10-30%
├─ Untuk: Logo, icons, screenshots
└─ Tools: PNG-8, ImageOptim

Lossy Compression:
├─ Quality: 95-98% (barely noticeable)
├─ Size reduction: 50-85%
├─ Untuk: Photos, featured images
└─ Tools: WebP, JPEG quality 80-85%

Rekomendasi: Lossy untuk web (user tidak notice)

✓ Lossy, Glossy, Lossless modes
✓ Auto convert to WebP
✓ Lazy loading built-in
✓ CDN integration
✓ Bulk optimization
✓ 100 images/bulan (free)

Pricing:
Free: 100 images/bulan
Paid: $4.99/5000 images (one-time)

Settings optimal:
- Compression: Lossy
- Resize: 1200px max width
- WebP: Yes
- Lazy load: Yes

1. Install plugin ShortPixel
2. Daftar API key (gratis)
3. Settings → ShortPixel:
   - Compression level: Lossy
   - Resize large images: Yes, 1200px
   - Convert to WebP: Yes
   - Remove EXIF: Yes
4. Media → Bulk ShortPixel
5. Start optimization

Features:
✓ 3 compression levels
✓ WebP conversion
✓ Resize automation
✓ Backup originals
✓ 25MB/month (free)

Best for:
- High-traffic sites
- E-commerce
- Photo galleries

Features:
✓ Unlimited images (free)
✓ Lossy & lossless
✓ Auto optimize on upload
✓ Lazy load
✓ WebP conversion

Best for:
- Budget conscious
- High volume
- Developer friendly

Features:
✓ Lossless compression
✓ Lazy load
✓ CDN (pro)
✓ 50 images/batch (free)

Best for:
- Beginners
- Simple setup
- Quality preservation

Tanpa Lazy Load:
Browser load semua 50 gambar sekaligus
├─ Loading time: 12 detik
├─ Bandwidth: 8MB
└─ User experience: Poor

Dengan Lazy Load:
Browser load hanya 3-5 gambar terlihat
├─ Loading time: 2 detik
├─ Bandwidth: 1.5MB
└─ User experience: Excellent

Gambar lain load saat user scroll!

<!-- WordPress auto add loading="lazy" -->
<img
  src="image.webp"
  alt="Description"
  loading="lazy"
  width="800"
  height="450"
/>

Features:
✓ Images, iframes, videos
✓ Replace YouTube with preview
✓ Exclude above the fold
✓ Native lazy loading enhance

Settings:
- Enable for images: Yes
- Enable for iframes: Yes
- Exclude first X images: 3

Features:
✓ Images, widgets, thumbnails
✓ Infinite scroll support
✓ Mobile optimization
✓ Custom placeholder

Best for: Galleries, portfolios

<!-- Load immediately (above fold) -->
<img src="hero.webp" alt="Hero image" loading="eager" fetchpriority="high" />

<!-- Lazy load (below fold) -->
<img src="content.webp" alt="Content image" loading="lazy" />

// For older browsers
document.addEventListener("DOMContentLoaded", function () {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function (lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

1. SEO: Google baca alt text untuk ranking image search
2. Accessibility: Screen reader untuk visually impaired
3. Fallback: Tampil jika image gagal load
4. Context: Bantu Google understand content

[Main Subject] + [Context/Action] + [Location/Detail]

Contoh:
❌ Bad: "image1.jpg", "foto", "screenshot"
✅ Good: "Tutorial cara optimasi gambar WordPress dengan plugin ShortPixel"

✓ 5-15 kata (optimal 8-10)
✓ Include target keyword (natural)
✓ Descriptive & specific
✓ No keyword stuffing
✓ Lowercase (best practice)

<!-- Product -->
<img
  src="sepatu-nike.webp"
  alt="sepatu running Nike Air Zoom Pegasus 40 warna hitam putih"
  title="Nike Air Zoom Pegasus 40"
/>

<!-- Tutorial -->
<img
  src="wordpress-settings.webp"
  alt="tampilan halaman settings WordPress untuk optimasi permalink SEO"
  title="WordPress SEO Settings"
/>

<!-- Infographic -->
<img
  src="seo-statistics.webp"
  alt="infografik statistik pengaruh kecepatan website terhadap ranking Google 2025"
  title="SEO Speed Statistics 2025"
/>

<!-- Logo (exception) -->
<img src="logo.svg" alt="logo perusahaan ABC" title="ABC Company" />

<img
  src="image.webp"
  alt="descriptive alt text for SEO"
  title="Tooltip text on hover"
/>

SEO → General → Features
Enable "XML sitemaps"

Auto generate:
yoursite.com/image-sitemap.xml

Submit ke Google Search Console

// Add images to sitemap
function add_images_to_sitemap() {
    if (is_singular()) {
        global $post;
        $images = get_attached_media('image', $post->ID);
        foreach($images as $image) {
            echo '<image:image>';
            echo '<image:loc>'.wp_get_attachment_url($image->ID).'</image:loc>';
            echo '<image:title>'.get_the_title($image->ID).'</image:title>';
            echo '</image:image>';
        }
    }
}
add_action('wpseo_sitemap_entry', 'add_images_to_sitemap');

Tanpa CDN:
User Jakarta → Server Singapore
├─ Distance: 1000km
├─ Latency: 200ms
└─ Load time: 5 detik

Dengan CDN:
User Jakarta → CDN Node Jakarta
├─ Distance: 10km
├─ Latency: 20ms
└─ Load time: 1.5 detik

CDN = Distributed servers worldwide

1. Daftar cloudflare.com (gratis)
2. Add website Anda
3. Update nameserver di domain registrar
4. Settings → Optimization:
   ✓ Auto Minify: CSS, JS, HTML
   ✓ Brotli: On
   ✓ Rocket Loader: On
   ✓ Mirage: On (mobile optimization)
   ✓ Polish: Lossless/Lossy
   ✓ WebP: On

5. Caching → Browser Cache TTL: 1 year

- Global CDN (200+ locations)
- Auto image optimization
- WebP conversion otomatis
- DDoS protection
- SSL gratis
- Unlimited bandwidth

Pricing: $1/TB (sangat murah)

Features:
✓ 14 hari free trial
✓ Storage + CDN
✓ Optimizer built-in
✓ Video streaming
✓ 99.9% uptime

Best for: High traffic sites

Plugin: Jetpack (free)

Features:
✓ Auto serve images via CDN
✓ Photon image optimization
✓ Lazy loading
✓ WebP support

Setup:
1. Install Jetpack
2. Connect WordPress.com account
3. Enable "Site Accelerator"
4. Done!

1. Install WP Super Cache
2. Settings → CDN:
   - Enable CDN: Yes
   - CDN URL: cdn.yoursite.com
3. Cloudflare auto serve

Result: Static files via CDN

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
            (max-width: 1024px) 800px,
            1200px"
  alt="Responsive image"
/>

Mobile (375px): Load image-400.webp (50KB)
Tablet (768px): Load image-800.webp (150KB)
Desktop (1920px): Load image-1200.webp (300KB)

= Hemat bandwidth 50-70% untuk mobile!

<picture>
  <!-- AVIF for modern browsers -->
  <source type="image/avif" srcset="image.avif" />

  <!-- WebP fallback -->
  <source type="image/webp" srcset="image.webp" />

  <!-- JPEG fallback -->
  <img src="image.jpg" alt="Description" loading="lazy" />
</picture>

<picture>
  <!-- Mobile -->
  <source media="(max-width: 600px)" srcset="hero-mobile.webp" />

  <!-- Tablet -->
  <source media="(max-width: 1024px)" srcset="hero-tablet.webp" />

  <!-- Desktop -->
  <source media="(min-width: 1025px)" srcset="hero-desktop.webp" />

  <!-- Fallback -->
  <img src="hero-desktop.jpg" alt="Hero image" />
</picture>

/* Bad - selalu load full size */
.hero {
  background-image: url("hero-desktop.jpg");
}

/* Mobile */
.hero {
  background-image: url("hero-mobile.webp");
}

/* Tablet */
@media (min-width: 768px) {
  .hero {
    background-image: url("hero-tablet.webp");
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .hero {
    background-image: url("hero-desktop.webp");
  }
}

/* WebP support */
.webp .hero {
  background-image: url("hero.webp");
}

/* JPEG fallback */
.no-webp .hero {
  background-image: url("hero.jpg");
}

// Detect WebP support
function supportsWebP() {
  var elem = document.createElement("canvas");
  if (elem.getContext && elem.getContext("2d")) {
    return elem.toDataURL("image/webp").indexOf("data:image/webp") == 0;
  }
  return false;
}

if (supportsWebP()) {
  document.body.classList.add("webp");
} else {
  document.body.classList.add("no-webp");
}

Data tersimpan di image:
├─ Camera model
├─ GPS location
├─ Date/time
├─ Aperture, ISO
└─ Copyright info

Total size: 10-100KB extra per image!

Reasons to remove:
1. Privacy (location, device info)
2. File size (10-30% reduction)
3. Security (no metadata leak)
4. Speed (faster upload/download)

Settings → ShortPixel
✓ Remove EXIF data

Auto remove saat upload/optimize

Settings → EWWW
✓ Strip metadata

Removes all EXIF automatically

1. Upload image
2. Click "Remove EXIF"
3. Download clean image

# Install exiftool
sudo apt install libimage-exiftool-perl

# Remove all EXIF
exiftool -all= image.jpg

# Batch remove
exiftool -all= *.jpg

File → Export → Save for Web
☑ Strip metadata

URL: pagespeed.web.dev

Check:
✓ LCP (Largest Contentful Paint)
✓ Image optimization opportunities
✓ Properly sized images
✓ WebP/AVIF suggestions

Target:
- Mobile score: 90+
- Desktop score: 95+

URL: gtmetrix.com

Analyze:
- Image sizes
- Format recommendations
- Lazy loading
- CDN usage

Waterfall chart:
See which images load slowly

URL: webpagetest.org

Features:
- Filmstrip view
- Image analysis
- Connection details
- Optimization checklist

Advanced: Test dari berbagai lokasi

F12 → Network tab

Filter: Img
Check:
- File size
- Load time
- Format
- Caching headers

Lighthouse audit:
F12 → Lighthouse → Run audit

☑ Check new uploaded images (compress?)
☑ Monitor PageSpeed score
☑ Review largest images
☑ Check CDN hit rate (Cloudflare Analytics)
☑ Mobile vs Desktop performance gap

☑ Bulk optimize old images (plugin)
☑ Update lazy loading rules
☑ Review WebP adoption rate
☑ CDN bandwidth usage
☑ Compare with competitors

<!-- Hero image = high priority -->
<img src="hero.webp" alt="Hero" fetchpriority="high" loading="eager" />

<!-- Below fold = low priority -->
<img src="content.webp" alt="Content" fetchpriority="low" loading="lazy" />

<link rel="preload" as="image" href="hero.webp" type="image/webp" />

<!-- Tiny placeholder (1KB) -->
<img src="tiny-blur.jpg" data-src="full-image.webp" class="blur-up lazyload" />

<style>
  .blur-up {
    filter: blur(20px);
    transition: filter 0.3s;
  }
  .blur-up.loaded {
    filter: blur(0);
  }
</style>

Auto create blur placeholders
Smooth transition effect
Better UX than blank space

// functions.php
function http2_push_images() {
    if (is_front_page()) {
        header('Link: </wp-content/uploads/hero.webp>; rel=preload; as=image', false);
    }
}
add_action('send_headers', 'http2_push_images');

// Disable default WordPress sizes
function disable_unused_image_sizes($sizes) {
    unset($sizes['thumbnail']);    // 150x150
    unset($sizes['medium']);       // 300x300
    unset($sizes['medium_large']); // 768px
    unset($sizes['large']);        // 1024px
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'disable_unused_image_sizes');

// Stop generating unused sizes
update_option('thumbnail_size_w', 0);
update_option('thumbnail_size_h', 0);
update_option('medium_size_w', 0);
update_option('medium_size_h', 0);
update_option('large_size_w', 0);
update_option('large_size_h', 0);

// Add only what you need
add_image_size('blog-featured', 1200, 630, true);
add_image_size('blog-thumbnail', 400, 225, true);
add_image_size('product-main', 800, 800, true);

// Make available in admin
function custom_image_sizes($sizes) {
    return array_merge($sizes, array(
        'blog-featured' => __('Blog Featured'),
        'blog-thumbnail' => __('Blog Thumbnail'),
        'product-main' => __('Product Main'),
    ));
}
add_filter('image_size_names_choose', 'custom_image_sizes');

Plugin: Regenerate Thumbnails

1. Install plugin
2. Tools → Regen. Thumbnails
3. Regenerate All Thumbnails
4. Wait (bisa lama jika banyak images)

Delete old unused sizes = save disk space

❌ Upload langsung dari kamera:
- File: IMG_5432.JPG
- Size: 8MB
- Dimensions: 6000x4000px
- EXIF: Full metadata

✅ Pre-optimize sebelum upload:
- File: beach-sunset-bali.webp
- Size: 200KB (96% smaller!)
- Dimensions: 1200x800px
- EXIF: Removed

Workflow wajib:
1. Resize ke max 1200px
2. Convert to WebP
3. Compress (quality 80-85%)
4. Remove EXIF
5. Rename descriptive
6. Then upload

<!-- ❌ Bad - causes layout shift -->
<img src="image.webp" alt="Image" />

<!-- ✅ Good - prevents CLS -->
<img src="image.webp" alt="Image" width="800" height="450" />

No width/height:
- CLS (Cumulative Layout Shift) = BAD
- Core Web Vitals = FAILED
- User experience = Poor
- SEO ranking = Lower

With width/height:
- CLS = 0 (perfect!)
- Core Web Vitals = PASSED
- UX = Smooth
- SEO = Better

<!-- ❌ Bad - hero image lazy loaded -->
<img src="hero.webp" alt="Hero" loading="lazy" />

<!-- ✅ Good - hero load immediately -->
<img src="hero.webp" alt="Hero" loading="eager" fetchpriority="high" />

Lazy load: Below the fold images (position > 100vh)
Eager load: Above the fold (hero, logo, first 2-3 images)

❌ WordPress default generates 10+ sizes:
- thumbnail (150x150)
- medium (300x300)
- medium_large (768px)
- large (1024px)
- Plus theme sizes
- Plus plugin sizes
= 15-20 versions per upload!

✅ Keep only what you need:
- Featured: 1200x630
- Thumbnail: 400x225
= 2-3 versions per upload

Disk space saved: 80-90%

☑ Resize to max 1200px width
☑ Convert to WebP (+ JPEG fallback)
☑ Compress to <200KB
☑ Remove EXIF metadata
☑ Descriptive filename (keywords)
☑ Prepare alt text

☑ Install optimization plugin (ShortPixel/Imagify)
☑ Enable WebP conversion
☑ Set auto-resize max width (1200px)
☑ Enable lazy loading
☑ Disable unused image sizes
☑ Setup CDN (Cloudflare)
☑ Add image sitemap

☑ All images have alt text
☑ Width/height attributes set
☑ First image = fetchpriority high
☑ Below fold = loading lazy
☑ Check PageSpeed score
☑ Test on mobile device
☑ Verify WebP serving
☑ Check CDN delivery

☑ Bulk optimize old images
☑ Remove unused media files
☑ Check largest images (>300KB)
☑ Update outdated images
☑ Monitor Core Web Vitals
☑ Review CDN bandwidth
☑ Competitor comparison

Store: Fashion e-commerce
Products: 500 items
Images: 2500+ (5 per product)

Problems:
├─ Product page: 15 detik load
├─ Images: 200KB-2MB each
├─ Format: 100% JPEG
├─ Mobile score: 25/100
├─ Bounce rate: 75%
└─ Conversion: 0.8%

1. Install ShortPixel
2. Settings:
   - Lossy compression
   - Convert to WebP
   - Max width: 1000px
   - Lazy load: Yes
3. Bulk optimize 2500 images
   Duration: 8 jam

1. Setup Cloudflare
2. Enable Polish (lossy)
3. Disable unused image sizes
4. Regenerate thumbnails
5. Add fetchpriority to main images

Before → After:

Page load:
15s → 2.3s (-85%)

Image sizes:
800KB avg → 120KB avg (-85%)

PageSpeed score:
Mobile: 25 → 92 (+268%)
Desktop: 45 → 98 (+118%)

Core Web Vitals:
LCP: 8.5s → 1.8s ✅
CLS: 0.45 → 0.02 ✅
FID: 350ms → 45ms ✅

Bounce rate: 75% → 32% (-57%)
Avg session: 45s → 3m 20s (+344%)
Pages/session: 1.2 → 4.8 (+300%)
Conversion: 0.8% → 3.2% (+300%)
Revenue: +285% (Rp 12jt → Rp 46jt/bulan)

ROI Calculation:
Investment: Rp 150K (plugin + time)
Revenue increase: Rp 34jt/bulan
ROI: 22,667% 🚀

1. ✅ WebP = game changer (-70% size)
2. ✅ CDN = crucial untuk international
3. ✅ Lazy load = must have
4. ✅ Bulk optimize existing = quick win
5. ⚠️ Don't over-compress (quality matters)

Optimization:
├─ Squoosh.app (compress + convert)
├─ TinyPNG.com (smart compress)
├─ ImageOptim (Mac app)
└─ GIMP (Photoshop alternative)

Testing:
├─ PageSpeed Insights (Google)
├─ GTmetrix (performance)
├─ WebPageTest (advanced)
└─ Chrome DevTools (built-in)

CDN:
├─ Cloudflare (free plan)
├─ Jetpack Site Accelerator
└─ WordPress.com CDN

Essential:
1. ShortPixel ($4.99/5000 images)
2. Lazy Load by WP Rocket (free)
3. WP Super Cache (free)

Alternative:
- Imagify (25MB/month free)
- EWWW (unlimited free)
- Smush (50/batch free)

Documentation:
- Google Web.dev (web.dev/fast)
- MDN Image Optimization
- WordPress Codex

Communities:
- Reddit r/Wordpress
- WordPress.org Forums
- Stack Overflow

Immediate (1-7 hari):
- PageSpeed score +30-50 points
- Loading time -50-70%
- Mobile usability improved

1-3 bulan:
- Google ranking +5-15 positions
- Organic traffic +50-150%
- Bounce rate -30-50%

3-6 bulan:
- Page 1 rankings established
- Traffic +200-300%
- Conversion +25-100%