Image Optimization para sa Website Speed: Kumpletong Gabay

Ang mga images = halos 50% ng bigat ng isang page. Ang pag-optimize sa kanila ang pinakamahalagang performance improvement na magagawa mo.

---

Bakit Kailangang I-optimize ang Images?

• 53% ng mga mobile user ay umaalis kapag mahigit 3 segundo ang loading time
• 1-segundo na pagkaantala = 7% na pagbaba ng conversions
• Ang Core Web Vitals (LCP, CLS) ay direktang nakakaapekto sa Google ranking

---

Hakbang 1: Pumili ng Tamang Format

• WebP — pinakamahusay para sa lahat ng web images (25–35% mas maliit kaysa JPEG)
• PNG — transparency, logos, screenshots
• JPEG — litrato kapag hindi available ang WebP
• SVG — icons at logos
• AVIF — next-gen, gamitin kasama ng WebP fallback

---

Hakbang 2: Mag-compress

Gamitin ang TinyImg — libre, private, instant.

---

Hakbang 3: Responsive Images

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

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" width="800" height="600" />
</picture>

---

Hakbang 4: Lazy Loading

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600" />

Huwag i-lazy-load ang mga images na nasa itaas ng page (above the fold). Laging i-set ang width/height.

---

Hakbang 5: Image Dimensions

<img src="photo.webp" alt="Photo" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Hakbang 6: Gumamit ng CDN

Cloudflare (libre ang tier), Cloudinary, imgix, Vercel.

---

Hakbang 7: Sukatin ang Performance

• Target na LCP: mas mababa sa 2.5 segundo
• Target na CLS: mas mababa sa 0.1
• Kabuuang images: mas mababa sa 500KB

Mga tool: PageSpeed Insights, Lighthouse, WebPageTest.

---

Optimization Checklist

• WebP format
• Mag-compress gamit ang TinyImg
• srcset + sizes
• Lazy load lang ang mga image sa ibaba ng fold
• width + height sa lahat ng images
• CDN na naka-enable
• PageSpeed Insights audit

TinyImg — dito magsimula, libre naman.