Imagini: conversie WebP, redimensionare la lățimea afișată și lazy-loading sub linia de plutire

Magazinul servește pozele exact așa cum au fost puse în repo: PNG și JPEG la rezoluție mult peste cea la care sunt afișate, fără nicio variantă în format modern și fără compresie la margine. Un vizitator de mobil care deschide /gift-guide descarcă peste 10 MB de imagini, iar fiecare glisare prin galeria unui produs poate aduce încă un PNG de aproape 4 MB. Pe internet mobil asta înseamnă zeci de secunde de așteptare și trafic plătit degeaba — omul închide înainte să vadă produsul. Checklistul de lansare cere explicit imagini optimizate WebP/AVIF și lazy-loading.

Ce am găsit

Niciun format modern, nicăieri — nici în repo, nici la margine

Inventarul din frontend/public:

find frontend/public -type f | sed 's/.*\.//' | sort | uniq -c
  311 png    309 jpg    59 mp4    19 svg    2 woff2    1 webp    0 avif

find frontend/public -type f \( -iname "*.png" -o -iname "*.jpg" \) -size +1000k | wc -l
76

Totalul raster e de circa 206 MB, mapa întreagă 254 MB.

Nici Cloudflare nu compensează. Cerut cu antetul care anunță suport pentru formate moderne:

curl -D- -H "Accept: image/avif,image/webp,*/*" https://hyperice.md/products/shop/hypervolt-3.png
content-type: image/png          (fără antet cf-polished)

curl -sI -H "Accept: image/avif,image/webp,*/*" https://hyperice.md/products/pdp/normatec-premier-hips/5.png
content-type: image/png
content-length: 3888764

Măsurat și în browser, la 375 px lățime: prima pagină încarcă 48 de imagini, dintre care 0 în format modern; /gift-guide încarcă 40 de imagini, dintre care 0 în format modern.

Cele mai grele fișiere din repo:

3.888.764  products/pdp/normatec-premier-hips/5.png
3.888.764  products/pdp/open-box-normatec-premier-hips/5.png
3.787.205  gift-guide/vvd-picks.png
3.739.406  gift-guide/naomi-picks.png
3.663.234  products/pdp/hyperice-x-2-knee/6.png

Doar cele trei fișiere de pe /gift-guide (vvd-picks.png, naomi-picks.png, jayden-daniels.jpg = 3.341.431 octeți) însumează 10.868.042 de octeți.

În cod, mecanismele de servire optimizată aproape lipsesc: 57 de elemente <img, 22 cu loading="lazy", 2 blocuri <picture> și o singură referință la .webp/.avif în tot frontend/src.

Galeria de produs: costul apare la fiecare glisare, nu la încărcare

frontend/src/pages/ProductDetail.tsx:171-172 randează o singură imagine activă (gallery[activeSlide]), deci pagina nu trage toată galeria dintr-o dată. Măsurat pe https://hyperice.md/products/normatec-premier-hips: 91 de resurse la încărcare și 410.798 de octeți de imagini în total, din care galeria contribuie doar cu 1.png = 122.406 octeți.

Fișierele grele vin însă pe rând, la navigarea prin galerie: 5.png din aceeași galerie are 3.888.764 de octeți și e servit ca image/png, neconvertit. Pentru clientul care se uită prin toate pozele unui produs pe telefon, asta se adună la câțiva MB pe o singură pagină de produs.

Imagini încărcate nerăbdător, deși vizitatorul nu le vede la sosire

Pe pagina randată https://hyperice.md/products/normatec-premier-hips sunt 33 de elemente <img>, dintre care 23 fără loading="lazy". Din cei 410.798 de octeți de imagini ai paginii, circa 285 KB sunt pentru conținut invizibil la sosire:

features/1.jpg              69.821 octeți   rect.top = 3.771 px
features/2.jpg             100.947 octeți
features/3.jpg              81.511 octeți
nav/shop-*.jpg (6 fișiere)  33.021 octeți   în meniul mega, închis

Imaginea principală din frontend/src/components/HeroBanner.tsx:154 rămâne deliberat fără lazy — e elementul LCP al paginii.

De făcut

• Adaugă în build-ul frontend un pas de conversie care produce variante .webp (calitate ~80, și AVIF unde merită) pentru tot ce e sub frontend/public/products, frontend/public/gift-guide și frontend/public/nav, servite prin <picture><source type="image/webp"> cu PNG/JPEG ca rezervă. Începe cu cele 76 de fișiere de peste 1 MB.
• Redimensionează sursele la lățimea maximă la care sunt efectiv afișate — nicio poză de produs nu are nevoie de 3,8 MB. Țintă: nicio imagine peste 300 KB.
• Pune loading="lazy" pe elementele <img> de sub linia de plutire care nu îl au, inclusiv blocurile features/* și miniaturile din meniul mega. Imaginea din HeroBanner.tsx:154 rămâne fără.
• Ca măsură imediată, până intră conversia în build: activează Cloudflare Polish (Lossy + WebP) pe zona hyperice.md. Taie greutatea fără atingerea codului, dar nu înlocuiește redimensionarea surselor.

Criteriu de acceptare

• find frontend/public -type f \( -iname "*.png" -o -iname "*.jpg" \) -size +1000k | wc -l → 0.
• find frontend/public -type f \( -iname "*.png" -o -iname "*.jpg" \) -size +300k nu întoarce niciun fișier.
• Pe https://hyperice.md/gift-guide, suma decodedBodySize a resurselor de tip imagine scade sub 2,5 MB.
• Galeria /products/normatec-premier-hips descărcată integral (toate cadrele) cântărește sub 2 MB, măsurat pe producție.
• Pe pagina de produs, numărul de <img> sub linia de plutire fără loading="lazy" este 0.
• PageSpeed Insights pe mobil: LCP sub 2,5 s pe prima pagină și pe o pagină de produs.