Lecția 1, Bune practici pentru livrarea imaginilor

• Mereu next/image (Next.js) sau @astrojs/image (Astro).

• AVIF întâi, WebP ca fallback, JPEG la final.

• Hero, max 200 KB. Sub fold, max 80 KB.

• Surse responsive, srcset 480/768/1080/1440/1920.

• Atributele width / height MEREU, ca să previi CLS.

• Text alt descriptiv, niciodată gol.

Lecția 2, Bune practici pentru livrarea video

• MP4 (h.264) + WebM (VP9 sau AV1).

• Hero, max 2 MB. Deasupra fold-ului.

• Lazy load sub fold prin Intersection Observer.

• Mereu imagine poster (primul cadru ca JPG, max 50 KB).

• Fallback reduce-motion, înlocuiește cu poster static.

• Mobil, opțional servește o versiune 480p.

Lecția 3, Bune practici pentru livrarea audio

• MP3 la 128 kbps pentru web.

• Mereu autoplay = false DACĂ nu e muted.

• Control de mute vizibil mereu.

• Pauză când utilizatorul navighează în altă parte (visibilitychange).

• Lighthouse, audio-ul nu ar trebui să afecteze LCP.

Lecția 4, Strategie de hosting și CDN

• Implicit, rețeaua edge Vercel acoperă 99% din cazuri.

• Pentru media foarte grea (mult video), ia în calcul Cloudflare R2 + CDN.

• Folosește CDN-ul de imagini Sanity pentru transformări din mers.

• Cloudinary pentru orice transformare video complexă.

• Cache cu TTL lung, invalidezi la deploy.

Lecția 5, Documentație pentru client

• Include 'materialele AI folosite' în predarea proiectului.

• Listează, instrument, prompt, data generării, licență.

• Salvează prompturile în repo-ul proiectului ca referință.

• Notează orice editări umane făcute ulterior.

• Asta e esențial pentru protecția legală dacă vreodată clientul auditează materialele.

Mai jos e o listă cu toate materialele generate de AI de pe un site de client. Pentru fiecare material, generează un rând de checklist cu, calea fișierului, format, dimensiune în KB, dimensiuni, text alt, lazy-load da/nu, fallback reduced-motion da/nu. Evidențiază orice material peste dimensiunea recomandată sau fără metadate de accesibilitate. Livrează ca un tabel Notion. Materiale, <paste list>.

Lecția 6, Greșeli frecvente de integrare

• Imagini hero PNG de 4MB. Folosește AVIF, scad imediat la 200 KB.

• Audio cu autoplay fără control de mute. Risc legal în UE.

• Video fără poster, flash alb la încărcare.

• Uiți de fallback-ul reduced-motion. Eșec de accesibilitate.

• Nu faci lazy-load sub fold. Penalizare Lighthouse.

• Găzduiești MP4-ul pe același proiect Vercel, încetinești pe toată lumea. Folosește un CDN pentru video.