Azi pregăteam blogul pentru imagini de copertă pe Cloudflare Workers și un lucru mă îngrijora: imaginile stau în repo, chiar lângă articole. Țineam minte că limita de mărime a unui Worker e 10 MB, iar câteva screenshot-uri ar fi umplut-o repede. Așa că am făcut build la site cu și fără imagini și am comparat.
Imaginile nu intră deloc în limita de mărime a Worker-ului. Astro le pune în static assets, pe care Cloudflare le stochează și le servește separat de codul Worker-ului. Iar limita în sine e acum de 64 MiB necomprimat, nu de 10 MB.
Pe scurt: imaginile nu intră niciodată în Worker, așa că limita lui de mărime le ignoră.
- Măsurat: două imagini de 2 MB au lăsat Worker-ul la 1,3 MB, iar static assets au crescut de la 1,6 MB la 6,5 MB.
- Limitele care contează: 25 MiB pe fișier și 100.000 de fișiere per deploy pe planul plătit (20.000 pe cel gratuit).
- Ce te costă totuși imaginile: Astro publică originalele lângă versiunile WebP pe care le generează, iar fiecare imagine rămâne în git pentru totdeauna. Convertește-le înainte de commit.
Unde ajung imaginile când Astro face build pentru Workers
Adaptorul Cloudflare împarte build-ul în două foldere:
dist/servereste Worker-ul: codul de server și paginile randate la cerere. Pe ăsta îl măsoară limita.dist/clientsunt static assets: paginile pre-randate, CSS-ul, fonturile și toate imaginile. Wrangler le urcă separat, iar Cloudflare le servește fără să încarce codul Worker-ului.
O imagine pe care o imporți sau o pui în Markdown ajunge în dist/client/_astro/, ca fișier original plus versiunile WebP redimensionate pe care Astro le generează pentru ea.
Ce am măsurat
Am făcut build la blog de două ori: o dată așa cum e, o dată cu un articol de test cu două PNG-uri de 2,5 MB și 2,1 MB, unul drept copertă și unul în text.
npm run build
du -sh dist/server dist/client| Build | dist/server (Worker) |
dist/client (static assets) |
|---|---|---|
| Fără imagini | 1,3 MB | 1,6 MB |
| Cu imagini | 1,3 MB | 6,5 MB |
Worker-ul nu s-a schimbat cu niciun byte pe care să-l vadă du. Aproape toată creșterea de 4,9 MB sunt cele două PNG-uri originale, copiate așa cum sunt. Versiunile WebP făcute de Astro au ieșit mici: coperta are între 11 KB și 161 KB, în funcție de lățime.
Ce limite contează?
Din pagina de limite Workers a Cloudflare:
| Limită | Gratuit | Plătit |
|---|---|---|
| Mărimea Worker-ului (necomprimat) | 64 MiB | 64 MiB |
| Fișiere per versiune de Worker | 20.000 | 100.000 |
| Mărimea unui fișier static | 25 MiB | 25 MiB |
Nu mai există limită pentru mărimea comprimată, doar pentru cea necomprimată. Cele 100.000 de fișiere cer Wrangler 4.34.0 sau mai nou.
Astro face mai multe fișiere per imagine (originalul plus câte un WebP pentru fiecare lățime de care are nevoie), așa că numără câteva fișiere per imagine când faci estimarea. Chiar și la cinci per imagine, 20.000 de fișiere înseamnă mii de imagini.
Micșorează imaginile înainte de commit
Ce te costă de fapt imaginile e mărimea repo-ului. Fiecare screenshot pe care îl faci commit rămâne în istoria git pentru totdeauna, iar originalul ajunge în producție lângă versiunile optimizate.
Convertesc copertele și screenshot-urile în WebP înainte să le pun în folderul articolului:
cwebp -q 82 -resize 1600 0 screenshot.png -o screenshot.webpCoperta acestui articol e un WebP de 80 KB, lat de 1600 de pixeli. Astro tot își face versiunile mai mici din ea, dar fișierul care ajunge în producție și cel din git sunt amândouă mici.
Dacă ajungi la video sau la fișiere de peste 25 MiB, atunci are sens R2. Pentru imaginile unui blog, static assets sunt de ajuns.