Maghatid ng Next-Gen Formats sa Web

Ang ibig sabihin ng babala ng Lighthouse ay i-convert ang iyong mga JPEG at PNG file sa WebP o AVIF, pagkatapos ay ihatid ang mga ito gamit ang picture element na may fallback na orihinal. Isa ang audit na ito sa mga mas madaling ayusin, dahil mekanikal ang solusyon sa halip na arkitektural.

Inilalabas ng Lighthouse ang babala kapag nakakita ito ng mga larawang naniniwala itong magiging mas maliit sa isang modernong format. Nakabatay ang pagtatantya sa na-download nitong file, kaya karaniwang makatotohanan at minsan ay konserbatibo pa ang naiuulat nitong matitipid.

Ano ang sinusukat ng Lighthouse

Muling ini-encode ng Lighthouse ang bawat larawan bilang WebP sa sarili nito at iniuulat ang pagkakaiba kapag lumampas sa threshold ang natipid. Ang numero sa ulat ay isang tunay na pagtatantya sa halip na basta-bastang rekomendasyon.

Hindi pinapansin ang mga larawang mas mababa sa threshold, kaya maaaring 4 lamang sa 30 larawan ng isang pahina ang makita sa audit. Ang mga nakalistang file ang sulit unahing ayusin. Karaniwang tuluyang nawawala ang babala kapag naayos ang mga ito, kahit pa manatili sa mga lumang format ang ibang larawan sa pahina.

Ang markup na pumapasa sa audit

Gumamit ng picture element kung saan una ang AVIF, pangalawa ang WebP, at ang orihinal na JPEG sa img tag. Pipiliin ng browser ang unang format na naiintindihan nito, kaya makukuha ng mga mas bagong browser ang maliit na file habang may larawan pa ring maipapakita ang mga luma.

Dapat manatili ang img tag dahil taglay nito ang alt text, mga sukat, at ang fallback. Ang pagtanggal sa mga katangiang width at height ay nagdudulot ng layout shift habang naglo-load ang mga larawan, na sumisira naman sa ibang sukatan ng Core Web Vitals habang inaayos ito. Itakda ang dalawang katangiang ito sa likas na sukat ng pixel ng fallback na larawan.

Paano ipasa ang audit

Upang maayos nang tama ang babala, sundin ang 6 na hakbang na ito.

1. Buksan ang ulat ng Lighthouse at ilista ang mga pinangalanang larawan, na siyang may masusukat na matitipid.
2. Suriin ang laki ng display ng bawat larawan, dahil marami ang masyadong malaki bukod sa mali ang format.
3. Baguhin ang laki ng bawat larawan sa tunay nitong lapad ng display, na dinoble para sa mga screen na may mataas na density.
4. I-convert sa WebP sa quality na 80, at sa AVIF sa quality na 65 para sa pinakamalalaking larawan sa pahina.
5. Ihatid ang mga resulta gamit ang isang picture element kung saan ang orihinal ang img fallback.
6. Muling patakbuhin ang Lighthouse upang kumpirmahing nawala na ang babala at walang lumitaw na layout shift.

Mas mahalaga ang hakbang 3 kaysa sa hakbang 4. Ang mga dimensyon ang may hawak ng bulto ng laki ng file, at ang WebP na masyadong malaki ay isa pa ring malaking larawan. Ilang minuto lang ang aabutin ng maramihang pag-convert, habang karaniwang mas matagal ang pagsulat ng markup.

Aling format para sa aling larawan

Ginagawa na ba ito ng iyong platform

Awtomatikong nagko-convert ng mga larawan ang maraming content system at host, kaya suriin muna bago gumawa ng anuman nang manu-mano. Karaniwan at sayang sa oras ang paggawa ng trabaho nang dalawang beses.

Subukan sa loob ng 2 minuto. Buksan ang na-publish na pahina, i-right click ang isang larawan at buksan ito sa bagong tab, pagkatapos ay tingnan ang extension ng file sa address bar. Ang .webp na extension sa isang file na na-upload mo bilang JPEG ay nangangahulugang nagko-convert na ang platform. Ginagawa na ito bilang default ng Shopify, ng karamihan sa mga pinamamahalaang WordPress host, at ng ilang site builder.

Bakit minsan bumabalik ang babala

Muling ibinabalik ng mga bagong upload ang problema kapag manu-mano sa halip na awtomatiko ang hakbang sa pag-convert. Ang isang site na naayos noong Enero ay magpapakita ulit ng babala pagdating ng Hunyo kung mag-a-upload ang mga editor nang direkta mula sa camera.

Ayusin ang proseso sa halip na ang mga file lamang. Paganahin ang awtomatikong pag-convert sa antas ng platform, o magkasundo sa isang simpleng patakaran na babaguhin muna ang laki at iko-convert ang mga larawan bago i-upload. Mahalagang maisulat ang patakaran sa anumang site kung saan mahigit sa isang tao ang nagpa-publish, dahil sinusukat ng audit ang pinakamasamang larawan kaysa sa karaniwan.

Dapat mo bang gamitin ang AVIF, WebP, o pareho

Gamitin lamang ang WebP sa karamihan ng mga site, at magdagdag lamang ng AVIF para sa pinakamalalaking larawan sa pahina. Dinodoble ng pagsuporta sa pareho ang bilang ng mga file na kailangang buuin, iimbak, at panatilihing magkakatugma para sa kaunting bawas sa mga karaniwang larawan.

Nag-iiba ang kalkulasyon sa mga site na maraming litrato, kung saan nakakatipid ang AVIF ng karagdagang 20 hanggang 30 porsyento sa mga file na daan-daang kilobyte na ang laki. Sa isang pahinang may 600 KB hero image, isa itong tunay na pagbawas. Sa isang pahina ng 40 KB na thumbnail, mas malaki ang gastos sa pagod ng dagdag na proseso kaysa sa maibabalik nito, at sapat na ang WebP lamang para maipasa ang audit.

Wastong pagsusuri sa resulta

Muling patakbuhin ang Lighthouse sa isang pribadong window na naka-disable ang mga extension, dahil binabago ng mga browser extension ang sukat. Nag-iiba rin ang mga marka sa bawat pagsubok, kaya paghambingin ang 3 beses na pagpapatakbo sa halip na magtiwala sa iisang numero.

Tiyaking natatanggap ng browser ang bagong format sa halip na ipalagay lamang ito. Buksan ang mga developer tool, lumipat sa Network tab, i-filter ayon sa mga larawan, at i-reload ang pahina. Ipinapakita ng column na Type kung ano talaga ang naihatid. Ang pahinang naghahatid pa rin ng JPEG pagkatapos ng conversion ay karaniwang nangangahulugang mali ang markup ng picture element, o may caching layer na humahawak sa nakaraang bersyon.

Mga kaugnay na audit na kasabay nitong lumalabas

• Properly size images. Mas malaki ang larawan kaysa sa espasyong pinaglalagyan nito. Baguhin ang laki sa halip na i-compress.
• Efficiently encode images. Masyadong magaan ang compression. Babaan ang setting ng quality.
• Defer offscreen images. Magdagdag ng lazy loading sa mga larawang nasa ibaba ng fold.
• Largest Contentful Paint element. Karaniwang ang iyong hero image, na nararapat unahin.
• Image elements do not have explicit width and height. Idagdag ang parehong katangian upang maiwasan ang layout shift.

Karaniwang magkakasamang lumalabas ang 5 audit na iyon, at ang pagbabago ng laki kasama ang pag-convert ng mga larawang nakalista sa ulat ay nag-aayos sa karamihan ng mga ito sa isang bagsakan.

Gaano talaga nito pinapaganda ang isang pahina

Karaniwang nagtatanggal ang pag-convert sa mga modernong format ng 25 hanggang 35 porsyento ng bigat ng larawan, at ang pagbabago muna ng laki ay kadalasang nag-aalis ng mas marami pa. Sa isang pahinang maraming larawan, kadalasang umaabot sa 70 hanggang 80 porsyento ang pinagsamang epekto.

Makikita ang pagbuti sa Largest Contentful Paint, na sumusukat kung gaano kabilis lumilitaw ang pangunahing nilalaman. Karaniwang nadedesisyunan ang sukat na iyon ng isang larawan, kaya ang pagbawas sa hero file ay may napakalaking epekto kumpara sa kabuuang bahagi nito sa pahina. Mas hindi mahalaga ang pagbawas sa 20 maliliit na larawan kaysa sa pagbawas sa 1 malaking larawan.

Ang hindi dapat gawin

Huwag alisin ang JPEG fallback, at huwag i-convert ang mga larawang ida-download ng mga bisita. Parehong isinusuko ng mga pagkakamaling ito ang isang tunay na kakayahan para lamang sa maliit na pagtaas ng marka.

Ang mga press kit, napi-print na gabay, mada-download na template, at mga file mula sa supplier ay dapat manatiling JPEG o PNG, dahil mahirap gamitin ang WebP sa labas ng mga browser. Ang paghahatid ng mga iyon bilang mga modernong format ay nagdudulot ng mga kahilingan sa suporta mula sa mga taong hindi makapagbukas sa mga ito, na mas magastos kaysa sa natipid na bandwidth.

Pag-convert sa mga larawang tinukoy ng ulat

Mag-convert mula sa mga orihinal na file sa halip na mula sa mga bersyong nai-publish na, dahil nagdadala ang na-compress na JPEG ng pagkasira sa bagong file. Hindi matukoy ng encoder ang pagkakaiba ng mga dati nang sira sa totoong detalye at nag-aaksaya ito ng bits upang mapanatili ang mga iyon.

Maglagay ng hanggang 500 file nang sabay-sabay, o direktang mag-drag ng ZIP archive, at mako-convert ang buong pangkat sa isang bagsakan. Tumatakbo ang lahat sa loob ng iyong browser gamit ang sarili mong processor, kaya hindi kailanman nakakaabot sa server ang mga site ng kliyente, pansamantalang asset, at mga hindi pa naipapa-publish na pahina. Matatapos ang buong conversion ng site sa loob ng ilang minuto nang walang kahit isang file na dumadaan sa network.

Itabi ang mga na-convert na file kasama ng mga orihinal gamit ang magkatugmang pangalan, upang magawa ang markup ng picture element gamit ang isang regular na pattern sa halip na i-edit nang manu-mano para sa bawat larawan. Ang isang folder na naglalaman ng hero.jpg, hero.webp, at hero.avif ay madaling gawan ng template, at ginagawa nitong maramihang conversion lamang ang susunod na paglipat ng format sa halip na muling isulat ang bawat pahina.