Salin dan Bagikan

Cara Optimasi Gambar untuk SEO: Panduan Image Optimization

Gambar yang tidak dioptimasi bisa memperlambat website hingga 80%. Image SEO adalah bagian penting dari technical dan on-page SEO.

Kenapa Image SEO Penting?

Impact of Image Optimization:
✓ Page speed improvement: 40-80%
✓ Google Images traffic: 20-30% potential
✓ User experience: Better engagement
✓ Core Web Vitals: Better LCP score

Langkah-Langkah Optimasi Gambar

1. Pilih Format yang Tepat

Format	Best For	Compression
WebP	All-purpose	Terbaik
AVIF	Modern browsers	Lebih baik
JPEG	Photos	Good
PNG	Transparent	Larger
SVG	Icons/logos	Vector

Rekomendasi: Gunakan WebP sebagai default

2. Compress Images

Tools gratis:

Squoosh.app - Browser-based
TinyPNG - PNG/JPEG
ImageOptim - Mac
ShortPixel - WordPress plugin

Target size:

Hero images: < 200KB
Content images: < 100KB
Thumbnails: < 30KB

3. Resize Sebelum Upload

Jangan upload gambar 4000x3000px untuk ditampilkan 800x600px

Best practice:
- Upload sesuai display size
- Gunakan srcset untuk responsive
- Max width: 2000px (untuk retina)

4. Tulis Alt Text Deskriptif

<!-- Buruk -->
<img alt="image1" src="...">
<img alt="gambar" src="...">
<img alt="" src="...">

<!-- Baik -->
<img alt="Cara optimasi gambar untuk SEO - screenshot dashboard" src="...">
<img alt="Diagram proses image compression" src="...">

Tips alt text:

Deskriptif tapi concise
Include keyword naturally
Max 125 karakter
Describe image content

5. Gunakan Descriptive Filename

❌ IMG_20260107.jpg
❌ photo123.png
❌ untitled.webp

✓ cara-optimasi-gambar-seo.webp
✓ image-compression-comparison.webp
✓ webp-vs-jpeg-quality.webp

6. Implement Lazy Loading

<img src="image.webp" loading="lazy" alt="Description">

Benefits:

Faster initial load
Reduced bandwidth
Better Core Web Vitals

7. Responsive Images dengan Srcset

<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: 1200px) 800px,
         1200px"
  alt="Responsive image example">

8. Gunakan CDN untuk Images

CDN benefits:

Faster delivery
Global coverage
Automatic optimization
Format conversion

Popular CDNs:

Cloudflare Images
Imgix
Cloudinary
BunnyCDN

9. Add Width and Height

<!-- Mencegah layout shift (CLS) -->
<img
  src="image.webp"
  width="800"
  height="600"
  alt="Description">

10. Image Sitemap

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/page</loc>
    <image:image>
      <image:loc>https://example.com/image.webp</image:loc>
      <image:title>Image title</image:title>
    </image:image>
  </url>
</urlset>

Checklist Image SEO

Pre-Upload:
☐ Resize to display dimensions
☐ Compress (target <100KB)
☐ Convert to WebP
☐ Rename with descriptive filename

On-Page:
☐ Add descriptive alt text
☐ Include width/height attributes
☐ Implement lazy loading
☐ Use responsive srcset

Technical:
☐ Enable browser caching
☐ Use CDN if possible
☐ Submit image sitemap
☐ Check Core Web Vitals

Tools untuk Image SEO Audit

Google PageSpeed Insights - Image recommendations
Lighthouse - Image audit
Screaming Frog - Find missing alt text
WebPageTest - Image loading analysis

Kesimpulan

Image SEO adalah low-hanging fruit yang sering diabaikan. Dengan optimasi yang tepat, Anda bisa:

Meningkatkan page speed 40-80%
Mendapat traffic dari Google Images
Improve user experience
Better Core Web Vitals score