Web Irudiak optimizatzeko gida

Webeko irudi formatuak ulertzea

Irudi-formatu egokia aukeratzea da web optimizazioaren oinarria. Formatu bakoitzak helburu desberdinak ditu eta abantaila bereziak eskaintzen ditu. JPEG aproposa da kolore askotako argazki eta irudi konplexuetarako, konpresio-erlazio bikainak eskaintzen ditu baina galerak izatearen kostuarekin. PNG gardentasuna, ertz zorrotzak eta kolore paleta mugatuak dituzten irudietan nabarmentzen da, logotipo eta grafikoetarako ezin hobea da, nahiz eta fitxategien tamaina handiagoak izan. WebP-k web-irudien hurrengo belaunaldia adierazten du, JPEG eta PNG-rekin alderatuta, konpresio handiagoa eskainiz, kalitate handia mantenduz. Bai galerarik eta galerarik gabeko konpresioa, gardentasuna eta animazioa onartzen ditu. Hala ere, arakatzailearen laguntza, zabala izan arren, ez da unibertsala. AVIF are berriagoa da, konpresio-tasa paregabeak eskaintzen ditu JPEG baino %50 txikiagoak, baina arakatzailearen adopzioa hazten ari da. Logotipoak, ikonoak eta ilustrazio sinpleak bezalako grafiko bektorialetarako, SVG ezin hobea da. Bektorial formatu gisa, SVG irudiek infinitu eskalatzen dute kalitatea galdu gabe eta askotan fitxategi-tamaina txikiak izaten dituzte. Kodearekin ere editagarriak dira eta interaktibitatea onartzen dute, eta oso polifazetikoak dira web diseinu modernorako.

• JPEG: onena argazkietarako eta irudi konplexuetarako
• PNG: Gardentasuna eta ertz zorrotzak dituzten grafikoetarako aproposa
• WebP: formatu modernoa goi-konpresioarekin
• AVIF: formatu berriena konpresio bikainarekin
• SVG: ezin hobea bektorial grafiko eta ikono eskalagarrietarako

Irudien Konpresioaren Teknikak eta Kalitate Ezarpenak

Konpresioa ulertzea funtsezkoa da irudiaren kalitatea fitxategiaren tamainarekin orekatzeko. JPEG bezalako formatuek erabiltzen duten konpresio galerak betirako kentzen ditu irudien datuak fitxategiaren tamaina murrizteko. Gakoa konpresioa maximizatzen den leku gozoa aurkitzea da, kalitate bisual onargarria mantenduz. Webeko irudi gehienetarako, % 75-85 arteko JPEG kalitate ezarpenak oreka bikaina eskaintzen du, nahiz eta hori alda daiteke irudiaren edukiaren arabera. PNG eta WebP irudi batzuek erabiltzen duten galerarik gabeko konpresioak fitxategiaren tamaina murrizten du kalitate-galerarik gabe. Hau aproposa dirudien arren, galerarik gabeko fitxategiak normalean askoz ere handiagoak izan ohi dira galeraren parekoak baino. Horrek galerarik gabeko konpresio egokia egiten du kalitatea funtsezkoa den irudietarako, hala nola produktuen argazkiak merkataritza elektronikorako edo gehiago editatuko diren irudietarako. Konpresio-teknika aurreratuen artean, JPEG karga progresiboa, irudiak kalitate handiagoan bistaratzen dituena, eta kroma-azpilaginketa, giza begiek ez duten kolore-informazioa murrizten du. Tresna modernoek pertzepzio-optimizazioa ere eskaintzen dute, konpresioa giza begiak gehien nabaritzen duenaren arabera egokituz, sarritan kalitatezko ezarpen tradizionalek baino emaitza hobeak lortuz.

Ebazpena eta irudi sentikorren optimizazioa

Web-diseinu modernoak telefono mugikorretatik hasi eta 4K monitoretaraino zirraragarriak diren irudiak eskatzen ditu. Gakoa pixelen dentsitatea eta gailuen gaitasunak ulertzea da. 1200 px-ko zabalerako irudia ezin hobea izan daiteke mahaigainean ikusteko, baina gehiegizkoa da 375 px-eko pantaila mugikor batentzat, banda-zabalera alferrik galdu eta karga-denborak motelduz. Irudi-tamaina anitz sortzeak gailu bakoitzak tamaina egokia duen irudia jasotzen duela ziurtatzen du. Irudi sentikorrak HTMLren srcset atributua eta irudi elementua erabiltzen dituzte pantailaren tamainan eta bereizmenean oinarritutako irudi desberdinak hornitzeko. Teknika honek irudien karga % 50 edo gehiago murriztu dezake mugikorren erabiltzaileentzat. Adibidez, 400 px-ko irudia gailu mugikorretarako, 800 px-eko tabletetara eta 1200 px-eko mahaigaineko pantailetara. Erretina pantailak bezalako dentsitate handiko pantailek bikoitzeko bereizmeneko irudiak behar dituzte itxura txukuna izateko. Irudiaren tamainak zure webguneko benetako bistaratzeko dimentsioak ere kontuan hartu behar ditu. 300 px-ko zabaleran bistaratzen den irudi batek ez du 1200 px-ko zabalera izan behar, erabiltzailearen pantaila edozein dela ere. Optimizatu beti irudiak benetako bistaratze-tamainarako, eta kontuan hartu CSS erabiltzea eskalatze txikia kudeatzeko, tamaina handiko irudiak hornitzeko beharrean.

Errendimendu-eragina eta karga-estrategiak

Irudiek nabarmen eragiten dute webgunearen errendimenduan, askotan orriaren pisu osoaren % 50-70 ordezkatzen dutenak. Optimizatu gabeko irudi handiak kargatzeko webgune motelen errudun nagusien artean daude, erabiltzailearen esperientzia eta bilatzaileen sailkapenean zuzenean eragiten dutenak. Karga-denboraren segundo gehigarri bakoitzak errebote-tasak % 32 arte handitu ditzake, eta irudien optimizazioa negoziorako funtsezkoa da. Lazy loading teknika indartsua da, irudiak kargatzea atzeratzen duena bista-atalara sartu arte. Horrek ikaragarri hobetzen du hasierako orrien karga-denborak, batez ere irudi asko dituzten orrialdeetarako. Arakatzaile modernoek karga natiboa onartzen dute loading=”lazy” atributuarekin, eta JavaScript liburutegiek kontrol aurreratuagoa eta arakatzailearen laguntza zabalagoa eskaintzen dute. Irudiak aurrez kargatzeko estrategiek erabiltzailearen esperientzia hobetu dezakete. Tolesturako irudi kritikoak optimizatu behar dira azkarren kargatzeko, eta tolesturako irudiak alferrak kargatu daitezkeen bitartean. Kontuan izan kalitate baxuko irudien leku-markak (LQIP) edo lausotze-zorrotz efektuak erabiltzea berehalako iritzi bisuala emateko bereizmen osoko irudiak kargatzen diren bitartean. JPEG kodetze progresiboak irudiak kalitate baxuan azkar agertzea ahalbidetzen du, gero datu gehiago kargatu ahala zorrozten.

SEO eta irisgarritasun-gogoetak

Bilatzaileek orrialdearen abiadura sailkapeneko faktore gisa hartzen dute, eta irudien optimizazioa funtsezkoa da SEO arrakastarako. Behar bezala optimizatutako irudiek orriak azkarrago kargatzen laguntzen dute, bilaketa-sailkapena eta erabiltzailearen esperientzia hobetzen laguntzen dutenak. Gainera, irudi-fitxategien izenek eta alt-testuak testuinguru baliotsua eskaintzen diete bilatzaileei, zure edukia irudien bilaketa-emaitzetan agertzen lagunduz. Irisgarritasunak pantaila-irakurleentzako eta ikusmen urritasuna duten erabiltzaileentzako irudi-edukia deskribatzen duen beste testu hausnartua eskatzen du. Alt testuak deskribatzailea baina zehatza izan behar du, irudian zer dagoen eta bere helburua testuinguruan azalduz. Informazio-baliorik gehitzen ez duten irudi apaingarrietarako, erabili alt atributu hutsak (alt=””) pantaila-irakurleek alferrik iragar ez ditzaten. Datu egituratuek eta eskema-markak bilatzaileek zure irudiak nola ulertzen eta bistaratzen duten hobetu dezakete. Irudien mapa egokiak bilatzaileei zure irudiak modu eraginkorragoan aurkitzen eta indexatzen laguntzen die. Fitxategiak izendatzeko konbentzioak deskribatzaileak eta gako-hitz-aberastuak izan behar dira garrantzitsua denean, “image1.jpg” bezalako izen generikoak saihestuz “red-running-shoes-front-view.jpg” bezalako izen deskribatzaileen alde.