Paano Gumawa ng Mga Larawan Mag-load ng Mas Mas mabilis sa Iyong Site ng WordPress

Kaya gusto mo nang mabilis ang iyong mga imahe?


Buweno, hindi ako mawawala sa dally. Sumisid kaagad sa magagandang bagay!

Mayroong tatlong mga paraan upang gawing mas mabilis ang pag-load ng mga imahe sa WordPress:

  • Baguhin ang laki
  • Compress
  • Tamad na pag-load

Sa post na ito, ipapaliwanag ko kung paano gumagana ang bawat isa sa mga pamamaraan na ito at kung bakit nila gagawing mas mabilis ang iyong site. Ipapakita ko rin sa iyo kung paano ipatupad ang bawat taktika na may parehong manu-manong solusyon at mga rekomendasyon ng plugin.

Ang unang pamamaraan na ito ay napaka-simple ngunit madalas na hindi napapansin ng mga newbies ng WordPress.

Paano i-optimize ang Mga Larawan sa WordPress

Baguhin ang laki ng iyong mga imahe

Ang ganap na pinakasimpleng paraan upang gawing mas mabilis ang pag-load ng iyong mga imahe ay upang baguhin ang laki nito. Hayaan mo akong magpaliwanag.

Ano ang pagbabago ng laki?

Kapag sinabi kong “baguhin ang laki” ibig sabihin ko na baguhin ang mga sukat ng isang imahe, at sa kasong ito, nais mong bawasan ang mga sukat ng labis na malaking imahe.

Bilang isang halimbawa, ang mga blogger ay minsan kumukuha ng litrato sa kanilang mga telepono o digital camera at mai-upload ang mga ito sa kanilang mga blog. Ang mga walang kopya na kopya ng mga larawan ay maaaring kasing laki ng 5,000px ang lapad. Ngayon isipin mo ito …

Ang lapad ng seksyon ng post sa iyong site ay marahil ay hindi mas malawak kaysa sa 800px. Ang teksto na iyong binabasa ngayon ay sumasaklaw lamang ng halos 700px sa buong pahina, kaya isipin ang pagdaragdag ng isang imahe na nasa 5,000px ang lapad dito. Ito ay paraan na mas malaki kaysa sa kinakailangan at habang ito ay mai-downscaled upang magkasya sa pahina, ang file ng imahe na na-load ay napakalaking at labis na masayang. At dahil …

Ang mga imahe na may mas malaking sukat ay mayroon ding mas malaking sukat ng file.

Pagdating sa pagganap at gawing mas mabilis ang iyong mga imahe, ang pagbabawas ng mga sukat ng iyong imahe ay isang mahusay na paraan upang mabawasan ang pagbaba ng laki ng file, at ginagawang mas mabilis ang pag-load ng imahe.

Balikan natin ang aking halimbawa at ipagpalagay na ang imahe ay 5,000px ang lapad at matangkad. Kung binawasan mo ito mula sa 5,000px hanggang sa 700px lamang, ang imahe ay gagamitin ng 99% mas kaunting mga pixel. Sa madaling salita, ang laki ng file ay bababa ng halos 99%. Kung ang imahe ay 5mb, magtatapos ito ng 50kb lamang at mag-load ito ng 99% nang mas mabilis sa iyong site.

Baguhin ang laki ng mga imahe

Kung hindi mo nangangahulugang maingat na baguhin ang laki ng iyong mga imahe, halos tiyak na may ilang mga pakinabang na magagawa.

Mayroong ilang mga paraan na maaari mong baguhin ang laki ng iyong mga imahe upang magkasya nang perpekto ang site.

Manu-manong baguhin ang laki ng iyong mga imahe

Bago mag-upload ng isang bagong imahe sa iyong site, manu-mano itong baguhin ang laki gamit ang built-in na mga tool sa pag-edit ng imahe sa iyong computer.

Kung mayroon kang isang napakalaking imahe tulad ng sa aking halimbawa, ito ay agad na makagawa ng isang malaking pagkakaiba. Matapos baguhin ang laki ng imahe, maaari mo itong mai-upload sa iyong Media Library.

Kahit na gagamitin mo ang imahe sa isang lightbox o slider, karaniwang walang dahilan upang maging mas malawak kaysa sa 2,000px. Kung ang imahe ay magiging nasa isang lugar o lugar ng nilalaman ng pahina, maaari mong magawa nang maayos sa imahe na lapad ng 800px.

Ang pamamaraang ito ng pagbabago ng laki ng mga imahe ay gumagana, ngunit hindi ito makakatulong sa mga imahe na na-upload sa iyong site. Ang isang madaling pamamaraan para sa umiiral na mga imahe ay ang simpleng pumili ng ibang sukat.

Gumamit ng mas maliit na sukat

Kapag nag-upload ka ng isang imahe sa iyong Media Library, ang WordPress ay lumilikha ng hanggang sa 3 karagdagang mga bersyon: Thumbnail, Medium, at Malaki.

Kung binisita mo ang iyong pahina ng mga setting ng Media, makikita mo na maaari mong piliin ang mga laki dito:

Mga Setting ng WordPress Media

Habang maaari mong baguhin ang mga setting, ang default na Malaking sukat ay 1024px na kung saan ay sapat na malaki upang magamit para sa mga post nang hindi masyadong aksaya. Maaari mong gamitin ang laki na ito para sa lahat ng mga imahe na kasama mo sa iyong mga post.

Upang mapalitan ang laki ng isang imahe na naidagdag mo sa isang post, i-click ito sa editor, at makikita mo ang pagbaba ng Laki ng Imahe sa kanang sidebar.

Ang laki ng Imahe ng WordPress

Piliin ang laki na “Malaki” at i-update ang post. Kung mayroon kang anumang napakaraming mga imahe, ang pamamaraan na ito ay hahayaan kang mabilis na maghatid ng isang mas naaangkop na sukat na mas mabilis na mag-load nang hindi nangangailangan ng muling pag-re-load at palitan ang orihinal.

Iyon ay sinabi, maaari itong maging kakila-kilabot na nakakapagod kung mayroon kang dose-dosenang mga post na may dose-dosenang mga imahe. Mayroong isang mas mabilis at mas epektibong pamamaraan na magagamit.

Awtomatikong pagbabago ng laki sa isang plugin

Sa halip na baguhin ang laki ng mga imahe sa iyong sarili, maaari mong hayaan ang isang plugin na gawin itong awtomatikong para sa iyo. Pagdating sa awtomatikong pagpapalit ng imahe, walang pumalo sa Optimole isaksak.

Optimole ng Imahe ng Optimizer

Hindi ito gumana sa paraang inaasahan mo.

Sa halip na i-edit ang mga imahe sa iyong Media Library, pinapanatili ng Optimole ang sariling mga kopya ng iyong mga imahe at nagsisilbi sa kanila mula sa isang mataas na pagganap na CDN. Sa ganitong paraan, ang iyong mga orihinal ay hindi kailanman binago sa anumang paraan.

Bukod dito, hindi mo kailangang bigyan ang Optimole ng isang solong laki na gagamitin para sa iyong mga imahe. Sa halip, nakakakuha ito ng laki ng screen ng mga bisita at bumubuo ng isang mahusay na laki ng bersyon ng bawat imahe nang mabilis. Nangangahulugan ito na ang isang tao sa isang mobile device ay maaaring mag-load ng isang 400px bersyon ng isang imahe habang ang isa pang bisita sa isang laptop ay nakakakuha ng isang 700px na bersyon ng parehong imahe.

Ang pamamaraang ito ng pagbabago ng laki ay madaling paraan upang maipatupad at mas epektibo para sa mga aparatong mobile na lalong mahalaga sapagkat ang mga bisita sa mobile ay madalas na mas mabagal sa mga koneksyon.

Kung nais mong malaman kung paano gamitin ang Optimole, maaari mong sundin ang aking buong walkthrough video:

Inirerekumenda ko muna ang pagbabago ng laki dahil kung manu-mano mong gawin ito o awtomatiko mo ito gamit ang isang plugin, simple ito at maaaring mag-alok ng malaking kita.

Kung ang iyong mga imahe ay naaangkop na laki para sa iyong site, maaari mo pa ring pagbutihin ang pagganap ng iyong site nang higit pa sa compression.

I-compress ang iyong mga imahe

Ang compression ay isang paraan upang mabawasan ang laki ng file ng isang imahe nang hindi binabago ang mga sukat nito.

Mayroong dalawang uri ng compression ng imahe na magagamit.

Ang unang uri ng compression ng imahe ay tinatawag na “lossless” compression.

Walang pag-compress

Sa isang walang pagkawala ng pag-optimize, ang imahe mismo ay talagang hindi na-edit. Sa halip, ang diskarteng ito ay tinanggal ang lahat ng metadata na nakaimbak sa file ng imahe. Halimbawa, ang mga imahe ay madalas na nag-iimbak ng pangalan ng aparato na ginamit upang kunin ang imahe, ang petsa na nakuha ang larawan, at kung minsan kahit na ang mga GPS coordinate ng shot.

Dahil ang data na ito ay karaniwang medyo limitado, ang pagkawala ng pag-optimize ay maaaring mabawasan lamang ang laki ng iyong imahe ng 1-5%, ngunit wala talagang dahilan na huwag gamitin ito dahil walang epekto sa kalidad ng imahe.

Ang totoong mga natamo ay nagmula sa lossy optimization.

Ang compression ng Lossy

Tulad ng inaasahan mo, ang pag-compress ng lossy ay nag-optimize sa imahe mismo at nagreresulta sa pagkasira ng kalidad. Ngunit narito ang bagay …

Napakahusay ng mga algorithm ng compression sa mga araw na ito na maaari mong madalas na mabawasan ang laki ng file ng imahe sa pamamagitan ng 50-70% nang walang nalalaman pagkakaiba. Maliban kung ikaw ay isang propesyonal na litratista at kailangan ang iyong mga imahe upang maging ganap na malutong sa mga monitor ng 4k, hindi mo rin mapapansin ang pagkawala ng kalidad.

Paano i-compress ang iyong mga imahe

Maaari mong manu-manong i-compress ang iyong mga imahe gamit ang isang tool tulad ng TinyPNG bago mo i-upload ang mga ito, o gumamit ng isang plugin upang i-automate ang mga bagay.

Ang ShortPixel ay isang mahusay na plugin para sa pag-optimize ng mga imahe sa iyong site. Maaari itong mai-optimize ang mga ito kaagad kapag na-upload mo ang mga ito at maramihang i-optimize ang lahat ng mga imahe na nasa iyong Media Library.

shortpixel

Inirerekumenda ko ang Optimole para sa pagpapalit ng laki ng imahe at pinilit din nito ang mga imahe. Muli, hindi nito mai-optimize ang mga orihinal na nakaimbak sa iyong Media Library, ngunit sa halip ay pinipilit ang mga kopya na ito ay nagsisilbi sa iyong mga bisita.

Maaari kang makahanap ng ilang higit pang mga plugin sa pag-optimize ng imahe dito.

Gamit ang laki ng iyong mga imahe at compress, ang iyong site ay mabilis na mag-load ng mas mabilis, ngunit mayroong isang huling pag-optimize para sa mga imahe na maaari mong gawin.

Ipatupad ang tamad na paglo-load

Ang malas na paglo-load ay isang matalinong paraan upang higit pang mai-optimize ang iyong mga imahe.

Sabihin nating mayroon kang isang post sa blog na may 12 mga larawan dito. Kapag may bumisita sa iyong site, hindi lahat ng mga larawang iyon ay makikita kaagad sa kanilang screen. Kailangan nilang mag-scroll nang higit pa upang ipakita ang karamihan sa kanila. Kaya bakit ka-load ang lahat ng 12 kaagad?

Sa tamad na paglo-load, tanging ang mga imahe na lilitaw sa screen ang nai-load. Sa halip na 12 mga imahe na nai-load, marahil 2-3 lamang ang nai-load sa halip. Pagkatapos habang ang bisita ay nag-scroll sa pahina, ang natitirang mga imahe ay nai-load nang dumating sa screen. Nangangahulugan ito na mas mabilis ang paunang pag-load, at dahil ang karamihan sa mga bisita ay hindi mag-scroll sa buong pahina, maraming mga imahe ay hindi kailanman nai-load na nakakatipid sa iyo ng mahalagang mga mapagkukunan ng server.

Ang video na ito ay may visualization na nagpapaliwanag ng mas mahusay kung nais mo ng isang mas malinaw na larawan kung paano gumagana ang tamad na paglo-load:

Ngayon na naibenta ka sa konsepto, narito kung paano mo maipapatupad ang tamad na pag-load sa iyong site.

Paano gamitin ang tamad na paglo-load

Muli, ang diskarte sa pag-optimize ng pagganap na ito ay madaling idinagdag sa WordPress na may isang plugin.

Kung naghahanap ka ng isang libreng pagpipilian pagkatapos subukan ang Optimole o a3 Malas na Pag-load.

Sa Optimole, ang tamad na pag-load ay awtomatikong naka-on, at ang plugin ng a3 ay madaling i-configure.

Dagdag pa, kung hindi ka nag-iisip magbayad pagkatapos mag-check out WP Rocket. Ito ay may mataas na pagganap na caching at iba’t ibang iba pang mga tool sa bilis.

Upang i-on ang tamad na paglo-load sa WP Rocket, ang kailangan mo lang gawin ay i-flip ang switch na ito:

WP Rocket Media

Hindi ito magiging madali!

Masiyahan sa iyong mas mabilis na pag-load ng mga imahe

Upang buod kung ano ang iyong natutunan …

Ang mga nabagong imahe na na-upload sa iyong site ay sobrang mabagal. Ang isa lamang sa mga larawang ito ay maaaring magdala ng iyong site sa isang paghinto sa screeching.

Ang pinakamahalagang bagay na maaari mong gawin upang mapabilis ang iyong mga imahe ay upang baguhin ang laki ng sobrang mga imahe kaya ang mga ito ay naaangkop na laki para sa iyong site. Maaari mong gawin ito nang manu-mano o awtomatiko ito sa Optimole.

Susunod, ang mga algorithm ng compression ng imahe ay dumating sa isang mahabang paraan at sa mga araw na ito, maaari mong bawasan ang laki ng file ng isang imahe sa pamamagitan ng 50-70% nang hindi nakakaapekto sa kalidad sa isang kapansin-pansin na paraan. Ito ay walang utak. Gumamit ng ShortPixel o Optimole upang i-compress ang bawat imahe sa iyong site.

Panghuli, ang tamad na paglo-load ay isang mahusay na paraan upang selektibong mag-load ng mga imahe. Maaari mong gamitin ang Optimole, a3 Lazy Load, o WP Rocket upang agad na ipatupad ang tamad na pag-load sa iyong site.

Kung hindi ka pa gumagamit ng mga pamamaraan na ito, ang iyong site ay mabilis na mag-load nang mas mabilis nang maipatupad. Ito ay sasabog sa iyo.

Mayroon ka bang anumang mga katanungan tungkol sa mga konsepto at pamamaraan sa post na ito? May isa pang tip upang ibahagi? Mag-post sa seksyon ng mga komento sa ibaba!

Maaari mo ring gusto,

Paano Ayusin ang isang Mabagal na Site ng WordPress at Panel ng Admin (Patuloy)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map