6 na Paraan para Mag-optimize ng Mga Larawan para sa Mas Mahusay na Pagganap sa Web

Ang mga tao ay mga visual na nilalang, at sinusuportahan ng pananaliksik ang katotohanang iyon. Pagkatapos lamang ng tatlong araw, ang mga rate ng pagpapanatili para sa teksto ay nasa hanay lamang na 10%-20%. Ngunit para sa mga larawan, ang mga rate ng pagpapanatili ay maaaring kasing taas ng 65%. Ang utak ay tumatanggap ng 90% ng visual na impormasyon at pinoproseso ito ng 60,000 beses na mas mabilis. Walang alinlangan, ang mga visual ay gumaganap ng isang mahalagang papel sa pakikipag-ugnayan sa website.

Gayunpaman, ito ay nangangailangan ng higit pa kaysa sa pagpili lamang ng ilang mga larawan at paglalagay ng mga ito sa paligid ng iyong site. Ang mga mabibigat na larawan ay gumagamit ng maraming bandwidth, na nagpapabagal sa mga bilis ng paglo-load ng pahina. Mapapansin ng mga search engine ang mabagal na pagganap at paparusahan ka ng mababang ranggo.

Mga tip sa pag-optimize ng larawan para sa mas mahusay na pagganap sa web sa

Ipagpalagay nating nagdidisenyo ka ng mga website para sa mga non-profit na organisasyon at gusto mong gumamit ng maraming larawan para ipakita ang iyong gawa. Ginagamit ng mga donor, sponsor, at iba pang stakeholder ang naturang impormasyon bilang batayan para sa patuloy na suporta. Gayunpaman, kung hindi mo i-optimize ang mga larawan, magdurusa ang karanasan at pakikipag-ugnayan ng user. Ang pinakamalaking isyu ay ang mabagal na pag-load ng mga page at mga tugon sa timeout.

Ang pag-optimize ng imahe ay tumutukoy sa anumang mga hakbang na gagawin mo upang bawasan ang laki, format, o resolution ng mga file. Magagawa mo ito nang hindi nakompromiso ang kalidad ng mga larawan.

Tingnan natin ang ilan sa iyongmga opsyon.

Ilustrasyon ng Kampanya sa Marketing ni Deemak Daksina

1. Magsimula sa isang pag-audit sa pag-optimize ng imahe

Ang isang pag-audit sa pag-optimize ng imahe ay magbibigay ng may-katuturang impormasyon para sa kung saan mo kailangang pagbutihin.

Halimbawa, maaaring ipakita ng pag-audit na mayroon kang masyadong maraming mga larawan. Ipapakita rin nito ang iyong pag-format ng larawan at magbibigay-daan sa iyong matukoy ang susunod na kurso ng pagkilos. Halimbawa, ang pag-alis o pagpapalit ng mga format ng file ay maaaring makabuluhang mapabuti ang bilis ng paglo-load ng pahina.

2. Piliin ang tamang format para sa mga larawan

May iba't ibang format ang mga file ng larawan. Ito ang tatlong pinakakaraniwang uri ng mga format ng larawan para sa mga web application na kailangan mong malaman:

• Ang PNG ay may kalamangan sa pagiging isang napakataas na kalidad na larawan. Sa kasamaang palad, upang makamit ito, ang laki ng file ay napakalaki. Gumagana nang maayos ang mga ito para sa mga simpleng larawan at logo at nagbibigay-daan para sa lossless compression.
• Ang mga JPEG ay ang pinakakaraniwan sa karamihan ng mga website. Ang mga ito ay mahusay para sa kumplikado, makulay na mga imahe. Gayunpaman, kailangan mong maging maingat sa pag-compress ng mga JPEG na larawan dahil maaaring magresulta ang pagkawala ng kalinawan, nagiging mas maliit ang larawan. Tinutukoy ito ng ilang tao bilang lossy.
• Gumagana ang GIF para sa mga animation, maliliit na icon, at mga larawang mababa ang res. Nagbibigay-daan ito para sa lossless compression, ngunit maaari mo lamang gamitinhanggang 256 na kulay.

I-save ang Mga Icon ni Andreas Storm

3. Baguhin ang laki at i-compress ang mga larawan

Maaaring napansin mo na ang mga larawan ay tila naglo-load nang paunti-unti. Ilang oras ang lilipas bago mo makita ang buong larawan; isang senyales na malamang ay masyadong mabigat ang mga larawan. Ang pag-resize o pag-compress ang bahala sa problema.

Gamitin ang tool sa pag-crop upang baguhin ang laki ng mga larawan. Nakakatulong ito na bawasan ang laki ng file, na nagreresulta sa isang mas mahusay na bilis ng paglo-load ng pahina. Mayroon kang maraming mga tool na magagamit para sa iyong paggamit.

Ang pag-compress ng mga larawan ay nakakatulong na bawasan ang laki ng file. Ngunit maaari mong i-distort ang imahe kung i-compress mo ito nang labis. Maaaring mainam ang mababang compression kung gusto mong mapanatili ang kalidad ng larawan; gayunpaman, hindi nito gaanong binabawasan ang laki.

Mga uri ng compression

Mayroong dalawang konsepto na nabanggit na namin sa itaas, lossless vs. lossy compression.

• Pinapanatili ng lossless compression ang kalidad ng larawan habang inaalis ang hindi kinakailangang metadata.
• Pinababawasan ng lossy compression ang laki ng file sa pamamagitan ng pag-alis ng ilan sa mga elemento. Maaaring makompromiso nito ang kalidad ng larawan. Gayunpaman, maaari mong hindi mapansin ang pagkakaiba. Kaya, maaari pa rin itong maging isang mahusay na paraan upang i-compress ang mga larawan.

Tutulungan ka ng tamang editor ng larawan na matukoy kung alinpinakamahusay na gumagana para sa iyo ang compression.

4. Mobile-first image optimization

Anumang hakbang na gagawin mo ay dapat sumunod sa isang mobile-first SEO strategy, dahil lumipat ang Google sa mobile first rankings. Dapat pareho ang hitsura ng mga larawan sa anumang mobile device tulad ng sa anumang desktop device. Ang isang napakalaking dami ng trapiko sa internet ay dumarating sa pamamagitan ng mga naturang device.

Kung ang mga user ay hindi nakikipag-ugnayan sa isang mahusay na UX kapag gumagamit ng mga mobile device, mawawala sa iyo ang mga ito.

ASO Optimization ni Abbi_Kerimov

5. Ang mga pangalan ng file at ang epekto ng mga ito sa SEO

Ang pag-optimize ng imahe ay nangangailangan din sa iyo na bigyang pansin kung paano mo pinangalanan ang mga file. Ang lahat ng mga aksyon na iyong gagawin ay dapat magkaroon ng layunin ng pagpapabuti ng visibility sa mga search engine. Kapag nag-upload ka o kumuha ng larawan, awtomatikong bibigyan ito ng device ng filename. Ang pangalang ito ay karaniwang binubuo ng random na code o mga numero. Maaaring mukhang 2224444.jpg.

Ang pag-upload ng larawan sa iyong website ay hindi makakatulong sa mga search engine.

6. Isaalang-alang ang paggamit ng lazy loading

Ang tamad na pag-load ng mga larawan ay eksakto sa iminumungkahi ng pangalan. sa halip naang buong imahe ay naglo-load nang sabay-sabay, ito ay medyo nagbubukas. Ang imahe ay patuloy na naglo-load nang mas maraming online na bisita ang nag-scroll pababa sa pahina.

Ang tamad na pag-load ay nagpapakita lamang kung ano ang nauugnay sa puntong iyon. Makakatipid ka sa bandwidth dahil hindi ka gagamit ng anumang hindi kinakailangang mapagkukunan.

Naglo-load... ni Dona

Mga huling pag-iisip

Ang pagganap sa web ay isang kritikal na kadahilanan sa pagraranggo na ginagamit ng mga search engine. Paparusahan ng Google ang iyong site kung mababa ang bilis ng paglo-load ng page.

Maraming salik ang tumutukoy sa bilis ng page, at ang paggamit ng larawan ay nag-uutos sa isa sa mga nangungunang posisyon. Kung hindi mo i-optimize ang mga larawan, maghihirap ang iyong pagganap sa web. Mabagal na maglo-load ang mga page, at hindi magiging maganda ang karanasan at pakikipag-ugnayan ng user.

Piliin ang tamang format ng larawan. Susunod, gumamit ng mga diskarte tulad ng pagbabago ng laki at pag-compress upang bawasan ang laki ng file. Mag-iskedyul ng mga regular na pagsusuri sa pahina at pag-audit ng site upang suriin ang pagganap ng site.