Acceptable loads for websites

Datum 10.11.25

🧭 1. Reference values for transfer volumes

💻 WLAN / Desktop users (Germany)

Average broadband connection: 50–100 Mbit/s
→ theoretically 6–12 MB/s.
In practice, 1–3 MB per page (i.e., HTML + CSS + JS + media) is no problem.
If your page is artistic (large images, videos), it can be up to 10 MB in size, if it loads quickly (lazy loading, etc.).

📱 Mobile users

Many are still on LTE or 5G, but not always stable.
Target size: under 2 MB per page, ideally 1 MB or less for main content.
Large media files (videos, galleries, etc.) should be loaded on demand or integrated as preview images (poster frames, thumbnails).

🎞️ 2. Comparison of media types – load and behavior

Medium	Data load	Running as a loop?	Caching	Comment
GIF animation	High (inefficient)	Yes, endless	Weak	No longer up to date. No compression advantage. 2 seconds can quickly add up to >1 MB.
APNG (Animated PNG)	Average	Yes	Good	Better quality than GIF, but not universally supported.
SVG-SMIL / CSS / JS animation	Very low	Yes	Good	Ideal for logos, vectors, text. Runs smoothly and is damn lightweight, usually < 100 KB.
MP4 (H.264)	Medium–high	Yes	Very good	Optimal all-round solution for moving images. 720p with 1 Mbit/s is ideal for the web.
WebM (VP9/AV1)	low–medium	Yes	Very good	Modern, more efficient alternative to MP4, but limited Safari support.
Sozi / SVG presentation	very low	depending on interaction	good	Text + vectors = very light. Only embedded images increase the load.
Canvas/WebGL	variable	real-time calculation	Not directly	More suitable for interactive experiments, but can be GPU-intensive.

🌀 3. Load behavior with loops

🎞️ MP4/WebM

→ Loads once (browser cached), then runs endlessly from cache.
💡 No permanent network flow – unless preload=“none” is set or cache is disabled.

🖼️ GIF / APNG

→ Is constantly re-decoded, but not reloaded.
💡 Load on CPU/GPU, not on network.
⚠️ Disadvantage: high memory consumption, inefficient compression.

🕹️ SVG-SMIL / CSS / JS

→ Vector-based, extremely small.
💡 The animation is calculated locally. No new download.
⚙️ Good, as long as you don’t insert any embedded bitmap images.

🪄 Sozi animations

→ Technically speaking: SVG + JS transformations.
💡 Low data load, but CPU-intensive for complex zoom/pan scenes or embedded images.
📉 For embedded PNGs/JPGs, it depends heavily on the image size — 5 MB SVG with embedded JPGs is not uncommon.

⚖️ 4. Strategies for your site

YouTube videos → always via iframe
→ no load on your server, adaptive streaming is handled by YouTube.
Sozi animations → load individually, not all at once
→ Possibly with loading=“lazy” or click trigger.
SVG animations → prefer if stylistically appropriate
→ SMIL or CSS is sufficient, and you retain control over color & rhythm.
GIF → avoid, instead:
- MP4 (with autoplay+loop+muted)
- or Lottie/Bodymovin (JSON-based, ultra-light)
Optimize images
- WebP or AVIF, 1200 px width ≈ 150–300 KB
- Enable lazy loading

💡 Bonus: File sizes you can use as a guide

medium	target value	Comment
single frame	150–300 KB	for 1200 px width
Short SVG animation	< 150 KB	perfect
5 s MP4-Loop	400–800 KB	Very good
20 s MP4 clip	1–2 MB	acceptable
YouTube video	–	outsourced, ideal
Social animation	0.2–2 MB	depending on embedded images

← Älter Neuer →

arteurope