Lewati ke konten
Kembali ke Blog

Cara Optimasi Gambar untuk SEO: Panduan Image Optimization

· · 3 menit baca

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

  1. Google PageSpeed Insights – Image recommendations
  2. Lighthouse – Image audit
  3. Screaming Frog – Find missing alt text
  4. 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

Ditulis oleh

Hendra Wijaya

Tinggalkan Komentar

Email tidak akan ditampilkan.