Why are images a major cause of slow loading?

Images are one of the main reasons for slow site loading, because they:

---

#1. Are the heaviest resources

They take up 60-80% of a page's total weight. One uncompressed 500 KB banner can weigh more than all the rest of the HTML, CSS, and JS combined.

---

#2. Load before rendering

If images sit at the top of the page, the browser tries to load them before showing content. This blocks rendering and increases LCP and FCP.

---

#3. Can cause layout shift

If an image has no width/height set, it loads later and pushes content around: this raises CLS (Cumulative Layout Shift), hurting perceived quality and SEO.

---

#4. Drain traffic and battery

Especially critical for mobile users. Large images mean slower loading, more battery drain, and wasted mobile data.

---

#5. Are not optimized for format

Using old formats (JPEG, PNG) instead of modern ones (WebP, AVIF) is another cause of excess weight. The same visually identical file can weigh three times as much.

---

Conclusion: Images look great, but without optimization they turn into dead weight. Minimize their size, defer loading (lazy), use modern formats, and specify dimensions, then they will stop slowing the site down.