Ikusmen paradigma modernoa
- WebP formatua: Googlek garatua. Galerarik gabeko konpresioa PNG baino %26 txikiagoa eskaintzen du, eta galerazko konpresioa JPEG baino %34 txikiagoa, SSIM (hautemandako kalitatea) indize bera mantenduz.
- AVIF formatua (AV1 Irudi fitxategiaren formatua): Etorkizun absolutua. AV1 bideo-kodeketik sortua, AVIFek tamaina % 50 murriztu dezake WebPrekin alderatuta eta aproposa da testua gainjarritako irudietarako bere kontraste handiko fideltasunari esker.
- Irudi erantzuleak (`<irudia>`): Ez eman 4000 px-ko irudirik erabiltzaile bati telefono mugikorrean.
srcsetetasizesatributuak erabiltzeak arakatzaileak behar duen fitxategia zehazki deskargatzen duela ziurtatzen du. - Native Lazy Loading: Erabili
loading="lazy". Pantailatik kanpoko irudiak ez dira deskargatzen erabiltzaileak bertara joan arte, hasierako kargan banda zabalera handia askatuz.
Zergatik irudiak optimizatzea da eragin handiena duen irabazi azkarra
Kargatze-abiadura ez da hutsuneko metrika teknikoa soilik; Oinarrizko negozio-metria da. Google-ren datuen arabera, kargatzeko denbora segundo 1etik 3 segundora handitzeak errebote probabilitatea % 32 handitzen du.
JavaScript edo datu-base ultra-azkarren aurrerapenak izan arren, Focuswebs-en egiten ditugun web-auditorien % 90en lepo handienak bere horretan jarraitzen du: baliabide estatikoen gehiegizko pisua optimizatu gabeko irudien ondorioz.
Duela gutxi arte, eztabaida JPEG vs PNG zen. Gaur egun, eztabaida hori zaharkituta dago. WebP-k dagoeneko %96ko arakatzaileen laguntza globala du, eta AVIFek laguntza-masa kritikoa lortu du. Webgune baten mediateka osoa hurrengo belaunaldiko formatu hauetara aldatzeak orriaren tamaina erdira murriztu dezake berehala, gizakiaren begiak ikusten duen zorroztasun-galerarik gabe.
Formatuaren konpresioaz gain, irudiak emateko modua ezinbestekoa da. HTML decoding="async" atributuak arakatzaileak irudia hari paralelo batean deskodetzea ahalbidetzen du, testuaren errendatze nagusia blokeatu gabe. web arkitektura sendoarekin eta UX praktika onekinrekin batera, ikus-optimizazioa webgune ezin hobea izateko errezeta da.
Optimizazio Profesionala Pipeline
Ez da nahikoa Photoshop edo oinarrizko WordPress plugin bat erabiltzea. Irudien kanalizazio automatizatu bat aplikatzen dugu gure proiektuetan (adibidez, Astrorekin sortutakoak):
| Fasea | Ikuspegia | Emaitza |
|---|---|---|
| 1 | Tamaina zuzena (Tamaina aldatu) | Ez ditugu inoiz irudiak CSS erabiliz eskalatzen. Bertsio fisikoak bereizmen anitzetan sortzen ditugu (adibidez, 480w, 800w, 1200w) srcsetrako. |
| 2 | Metadatuak kentzea | Fitxategiari alferrikako pisua gehitzen dioten EXIF datuak, kapsulatutako kolore profilak eta geoetiketak ezabatzen ditugu. Ezinbestekoak baino ez ditugu uzten. |
| 3 | AVIF Kodetzea eta WebP Fallback | <picture> etiketa erabiltzen dugu lehen <source type="image/avif"> jarriz. Arakatzaileak (zaharrak) onartzen ez badu, WebPra eroriko da, eta azkenik JPEGra. |
| 4 | Diseinu-aldaketak prebenitzea (CLS) | Irakurketa-etenaldiak saihesten ditugu zabalera eta altuera zenbakizko atributuak esplizituki HTML etiketak zuzenean deklaratuz. Arakatzaileak lekua gordetzen du kargatu aurretik. |
| 5 | CDN Edge-k bidalketa | Irudiak Cloudflare bezalako Edukien Bidalketa Sare (CDN) globalen bidez eskaintzen ditugu, irudiak erabiltzailearen kokapen fisikotik oso gertu gordetzen dituztenak. |
Core Web Vitals (LCP) eraginaren emaitzak
WebP/AVIF-era pasatzeak bigarren mailako efektu zoragarriak ditu Largest Contentful Paint-en, Google-ren errendimenduaren zutabe nagusia:
- LCP hobetua (Eduki-Margorik handiena): Pankartaren irudi heroikoa bi aldiz azkarrago kargatzen da, zure LCP Google-k proba gainditzeko behar dituen 2,5 segundo baino gutxiagora jaitsiz.
- Zerbitzarien kostuetan aurreztea brutala: Trafiko handiko webgunea baduzu, banda-zabaleraren kontsumoa erdira murrizteak milaka euro aurreztuko ditu AWS edo Vercel fakturetan.
- Ukipen-interakzio azkarragoak: Mugikorreko prozesadorearen hari nagusia askatuz (irudi erraldoiak deskonprimitu behar ez dituena), botoiek eta menuek ukipenean berehalako iritzia eskaintzen dute.
- Ekologikoa: Datu gutxiago transferitzen diren datu-zentroetan eta gailu mugikorretan energia-kontsumo txikiagoa dakar, zure konpainiaren karbono-aztarna digitala murriztuz.
Irudien errendimenduaren ohiko galdera teknikoak
Irudi guztietan `loading="lazy"` erabiltzen badut, itxura hobea izango al du nire webguneak?
EZ! Hau hasiberrien akats basati bat da (Lazy Load anti-eredua). Inoiz ez dituzu alferrak kargatu 'Tolesturaren gainean' irudiak (adibidez, logotipoa edo pankarta nagusia). Hori eginez gero, arakatzaileak azkar deskubritzea eragozten duzu, zure LCP denbora suntsituz. Srollean oso baxuan dauden irudietarako bakarrik erabiltzen da.
Oraindik SVG erabili behar al dut WebP badut?
Bai, baldintzarik gabe. SVG ez da pixel irudi bat, matematika (bektoreak) da. Logotipoetarako, ikonoetarako eta kolore lauko ilustrazioetarako, SVG-a beti izango da infinitu eskalagarria eta 2KB baino gutxiago pisatzen du. WebP/AVIF argazkietarako edo errendatze konplexuetarako soilik gordetzen dira.
JPEG eta PNG guztiz baztertu behar al ditut?
Jatorrizko iturburu fitxategi gisa, gorde itzazu. Baina erabiltzaileei web entregatzeko, 2026an ez dago arrazoi tekniko justifikaturik JPEGak zerbitzatzen jarraitzeko AVIF eta WebP konfiguratuta badituzu zure eraikuntza-azpiegituran (adibidez, Rollup, Vite edo Next.js Image Optimization).