How to Optimize Images in WordPress

Upang malutas ang mga problemang maaaring maging sanhi ng labis na timbang ng aming mga imahe, makakakita kami ng dalawa sa pinakamahusay na mai-optimize ang iyong mga larawan, gamit ang mga plugin ng WordPress at mga tool sa pag-edit ng online.

Bago kumuha ng harina kasama nito, susuriin namin ang mahahalagang konsepto para sa pagtatrabaho sa mga imahe sa online upang maunawaan mo ang dahilan sa likod ng kung ano ang gagawin namin dito.

Ano ang mahahanap mo dito?

Bakit napakahalaga na i-optimize ang mga imahe sa aming website
Pagbutihin ang bilis ng paglo-load
Ano ang tamad na paglo-load at paano nito tataas ang bilis ng aming website?
Taasan ang libreng puwang ng disk kung nasaan ang pahina
Suriin ang bilis ng isang web page gamit ang Google PageSpeed ​​Insights
Mga nakaraang konsepto: bigat, laki at sukat ng mga imahe
Paano namin mai-optimize ang mga imahe nang hindi nawawala ang kalidad
Ang pagsasaayos ng WordPress upang i-optimize ang aming mga larawan
Mga tool upang mapagbuti ang kalidad ng aming mga larawan sa online
Ang pinakamahusay na mga plugin upang mai-optimize ang mga imahe sa WordPress
Konklusyon
Ang lahat ng mga “trick” na ito para sa mga imaheng makikita natin, sa huli, ay bahagi ng paggawa ng isang mahusay na trabaho sa SEO, na dapat isaalang-alang ng bawat website.

Bakit napakahalaga na i-optimize ang mga imahe sa aming website
Kapag nag-upload kami ng isang larawan sa WordPress, lumilikha ang platform ng mga kopya nito, na may iba’t ibang sukat. Ang ideya ay na, depende sa kung gaano kalaki ang imahe ay lumilitaw sa pahina, gamitin ang pinakamaliit (at samakatuwid pinakamagaan) na imahe sa mga sukat na posible.

Larawan sa pamamagitan ng larawan, kopya sa pamamagitan ng kopya, ang lahat ng mga imaheng ito ay maaaring tumagal ng maraming puwang sa iyong web server nang hindi namamalayan.

Bilang karagdagan, kapag na-upload namin ang orihinal na larawan, kung ito ay labis na “mabigat” (mayroon itong malaking sukat ng file) magpapabagal sa pag-load ng aming website, at, bilang karagdagan, mauunawaan ng Google na ang aming pahina ay “mabagal” , at babaan namin ang pagraranggo ng pahina.

Ngunit huwag mag-alala, sa artikulong ito matututunan namin kung paano i-access ang mga ito at makita ang kanilang laki, kung ano ang kanilang sinasakop sa iyong server at kung paano i-optimize ang mga ito.

Pagbutihin ang bilis ng paglo-load
Kapag nag-click kami upang mag-navigate sa isang website, kailangang mai-load ng pahina ang lahat ng nilalaman nito.

Samakatuwid, ang mas mabibigat, mas maliit na laki at mas kaunting bilang ng mga imahe na mayroon kami, ang aming pahina ay magtatagal ng mas kaunting oras upang mai-load.

Hindi lamang ito mahalaga upang mapagbuti ang karanasan ng gumagamit (napag-alaman na 50% ng mga gumagamit ang inaasahan na maglo-load ito nang mas mababa sa 2 segundo), ngunit dahil mas mabilis ang aming website, mas maraming magugustuhan ng Google. .

Kaugnay nito, mangangahulugan ito na lumitaw ka nang mas mataas o mas mababa sa mga paghahanap ng gumagamit at, samakatuwid, mas nakikita ka sa mundo.

Ano ang tamad na paglo-load at paano nito tataas ang bilis ng aming website?
Ang tamad na pag-load ay isang pamamaraan na ginamit upang, depende sa kung paano kami nagba-browse sa isang website, ang mga imahe na naglalaman nito ay nai-load dahil nakikita ito, at hindi bigla kapag pinasok namin ang pahina.

Tulad ng nakita na natin, ang mga ganitong uri ng mga file ay sumasakop sa pinakamalaking sukat, at lohikal na ang mga tumatagal ng pinakamahaba at pinaka-kumakain kapag na-load.

Samakatuwid, kung ang mga video at imahe ay hindi nai-upload hanggang sa kinakailangan, ito ay isang hindi kapani-paniwalang pag-save para sa aming website.

Sa buong post na ito makikita namin ang paraan na isinasaalang-alang namin ang pinaka mahusay upang makamit ang tamad na paglo-load sa iyong website.

Taasan ang libreng puwang ng disk kung nasaan ang pahina
Ang lahat ng nilalaman na ipinapakita sa isang web page, o bahagi ng istraktura nito, ay dapat na maiimbak sa isang site, na mayroong isang tiyak na puwang.

Sa maraming mga kaso, ang mga imahe ay bumubuo ng higit sa 50% ng kabuuang timbang ng pahina.

Kung, halimbawa, mayroon kaming isang blog sa paglalakbay kung saan patuloy kaming nag-a-upload ng mga file ng ganitong uri, magkakaroon kami ng mas malaking peligro na kumuha ng mas maraming puwang. Gayunpaman, kung mayroon kaming isang blog na maraming teksto at kaunting mga imahe, ang masasakop na espasyo ay magiging mas kaunti.

Bilang karagdagan, dapat nating tandaan ang mga kopya na ginagawa ng WordPress sa aming mga imahe.

Mahalagang suriin natin ang mga talagang kinakailangan.

Upang mabigyan ka ng isang ideya ay magbibigay kami ng isang halimbawa. Nag-upload kami ng isang post sa WordPress na may 5 mga larawan. Mag-a-upload ang platform ng isa pang 4 na kopya ng bawat isa sa aming mga larawan (mayroon na itong kabuuang 20 mga larawan), kung saan gumagamit lang kami ng 20%, ngunit kumukuha sila ng puwang.

Parehong sa WordPress.com at WordPress na may hosting (wordpress.org) ang mga plano ay karaniwang may ilang mga limitasyon ng puwang, samakatuwid, ang pag-save ay hindi lamang puwang, ito ay pera.

Suriin ang bilis ng isang web page gamit ang Google PageSpeed ​​Insights
Kaugnay sa nabanggit, at bilang isang tool upang masukat ang bilis ng paglo-load ng aming website, mayroong PageSpeed ​​Insights mula sa Google. Salamat sa pahinang ito, masusuri namin kung gaano kabilis mag-load ang aming site at makilala ang mga posibleng pagkabigo.

Kailangan lang naming kopyahin ang address ng pahina na nais naming pag-aralan at kopyahin ito sa iyong search bar. Ibinabalik sa amin ang isang medyo detalyadong pag-aaral sa

ano ang maaaring maging sanhi ng pagbagal ng pag-load o kung ano ang maaari naming pagbutihin.

Kapag pinag-aralan namin ang isang URL, ipinapakita sa amin ang lahat ng mga sukatang ito, kasama ang pandaigdigang antas ng aming pahina.

Kapag nag-click kami sa “pag-aralan”, binabalik nito sa amin ang isang pangkalahatang pagsusuri ng website na ito, kasama ang isang medyo detalyadong pag-aaral sa kung ano ang maaaring makapagpabagal ng pag-load at kung ano ang maaaring mapabuti.

Mga nakaraang konsepto: bigat, laki at d

imaging ng mga imahe
Ang bigat ng file ay ang dami ng puwang sa memorya o disk na sinasakop ng aming file kapag iniimbak ito. Sinusukat ito sa mga byte at nakasalalay sa laki nito sa mga pixel at ang lalim ng kulay (pati na rin sa mga pixel) ng file.

Kung ang isang larawan ay mas mabigat kaysa sa pinakamainam, babagal nito ang proseso ng paglo-load ng pahina kung nasaan ito. At ang mga gumagamit ay hindi gusto iyon (at hindi rin ang Google).

Tungkol sa laki o sukat ng litrato, ang isa na masyadong malaki ay magpapabagal din sa aming website, dahil pinapataas nito ang timbang, at masyadong maliit ang sukat ay babawasan ang kalidad nito at ang aming larawan ay hindi magiging maganda; bukod sa hindi maging anumang bagay na Aesthetic.

Ang format ay ang paraan ng pag-save ng aming imahe; at para sa bawat uri ng imahe mayroon kaming isa na higit na angkop kaysa sa iba pa.

Ang pinakalawak na ginagamit ngayon ay PNG (inirerekumenda para sa mga screenshot) at JPG (inirerekomenda para sa mga litrato).

Kung mayroon kang mga pag-aalinlangan tungkol dito, tingnan ang post na ito kung saan tinutukoy namin ang paksa:

mga digital na format ng imahe
Ano ang pinakamahalagang mga digital na format ng larawan at imahe?
Upang magsimulang magtrabaho kasama ang mga imahe, ang unang bagay ay upang malaman ang pinakamahalagang mga format ng imahe. Magkakaiba sila sa iba …

Paano namin mai-optimize ang mga imahe nang hindi nawawala ang kalidad
Mayroong maraming mga paraan upang magawa ito, ngunit nais naming magdala ng pinakasimpleng at pinakamaliit na mga problema sa hinaharap:

Ang ilang mga online tool upang magawa ito nang manu-mano.
Mga plugin ng WordPress.
Habang, sa mga plugin, pipiliin mo lamang kung alin ang pinakaangkop sa iyong mga pangangailangan at mai-install ito, sa mga tool na ikaw ang gagawa nito nang manu-mano.

Ang bawat pamamaraan ay may mga kalamangan at dehado, kaya inirerekumenda naming subukan mo at piliin ang isa na sa tingin mo ay pinaka komportable ka.

HINDI KA BA NAGBISITA SA IYONG WEB?

Gamit ang libreng e-book makakarating ka sa tuktok ng mga resulta ng Google:

Sa 1 oras matutunan mo ang SEO na talagang kailangan mo.
Malalaman mo kung paano malaman kung ano ang hinahanap ng mga tao sa Internet.
Malalaman mo kung aling mga paghahanap ang interes mo at alin ang hindi.
Darating ka sa tuktok ng mga resulta ng paghahanap.
Palakihin mo ang mga pagbisita sa iyong website.
Gusto ko ngayon!
Ngunit, bago kami magsimula, dapat naming suriin ang mga setting ng WordPress tungkol sa media, kung saan tinukoy ang mga kundisyon ng pag-upload ng aming mga larawan, anuman ang pinili mong paraan ng pag-optimize ng imahe.

Basahin ang sa upang malaman ang higit pa!

Ang pagsasaayos ng WordPress upang i-optimize ang aming mga larawan
Bago, at bilang isang pandagdag, sa pag-optimize ng mga imahe, mahalaga na suriin namin ang mga setting ng WordPress.

Kapag napunta kami sa pangunahing panel, nakikita namin sa kanan ang seksyong “Mga Setting”, na siya namang naglalaman ng seksyong “Media”. Mag-click doon.

Una, hahanapin namin ang setting ng laki ng imahe, kung saan tinukoy na “matukoy ang maximum na mga sukat na gagamitin kapag nagdaragdag ng isang imahe sa library ng media.”

Tulad ng napagsasalita namin dati, kapag nag-upload kami ng isang larawan, lumilikha ang WordPress ng iba’t ibang mga kopya na may iba’t ibang laki, upang maiakma ang imahe depende sa kung saan ito ipinakita.

Malaking kopya ng WordPress ng isang imahe ng pabalat sa post.

Halimbawa, ang isang imahe ng header sa mismong post, tulad ng halimbawa sa itaas, ay hindi pareho sa isang listahan, o kung kailan ito lumitaw na sumangguni. Tulad ng nakikita natin sa sumusunod na imahe.

Sa dalawang halimbawang ito madaling makilala kung paano ginagamit ng WordPress ang mga kopya ng iba’t ibang laki ng larawan na na-upload namin, at sa pamamagitan nito mas napadali ang aming gawain. Upang manu-manong makamit ang resulta na ito, kakailanganin naming baguhin ang laki ang larawan sa aming sarili sa iba’t ibang laki at pagkatapos ay i-upload ang mga ito.

Katamtamang laki ng kopya ng imahe, bilang takip ng isang post sa isang sanggunian.

Kaya, dito ay aayusin namin ang maximum na laki, sa mga pixel, na magkakaroon ang mga kopya na ito.

Mayroong tatlong mga kategorya: maliit, katamtaman at malaki. Ang bawat isa ay may preset na halaga, tulad ng nakikita natin sa imahe:

Sa bawat kahon maaari mong baguhin ang lapad at taas ng mga kopya na bubuo ng WordPress.

Ang imaheng na-upload namin ay maiakma sa mga sukat na itinataguyod namin, ngunit pinapanatili ang mga orihinal na sukat nito sa daluyan at malalaking sukat na kopya.

Gayunpaman, sa maliit na sukat ng mga kopya mayroon kaming pagpipilian na i-crop ang mga thumbnail sa eksaktong sukat na natutukoy namin dito.

Halimbawa, kung iniiwan namin ang mga default na sukat na 150 x 150 at lagyan ng tsek ang kahon, ang aming kopya ay 150 x 150.

Mag-ingat at kalkulahin nang mabuti ang mga sukat!

Gayundin, kung ang imahe

ang orihinal ay mas maliit kaysa sa mga sukat ng mga kopya, hindi ko alam kung paano ito bubuo.

Halimbawa, kapag nag-upload ako ng larawan ng 800 x 600px, hindi ko alam kung paano ito bubuo ng malaking sukat na kopya (1024 x 1024), dahil hindi ito magiging katuturan, hindi nito mapapabuti ang kalidad sa anumang paraan.

Upang mapili ang tamang sukat, dapat mong isipin ang tungkol sa disenyo ng iyong blog o website, at iakma ang mga sukat ng mga imahe dito.

Mga tool upang mapagbuti ang kalidad ng aming mga larawan sa online
Kapag naayos na namin nang tama ang mga setting kung saan mai-upload ang aming mga larawan, ia-optimize namin ang mga ito. Ang pagpipiliang ito ay upang mai-edit ang manu-mano ang aming mga larawan, sa pamamagitan ng ilang mga application na naa-access sa lahat.

Ang bentahe ng paggamit ng mga tool na ito ay mayroon kang buong cont

rol sa proseso. Ang downside ay aabutin ka ng medyo mas matagal, ngunit kung mayroon kang isang blog na may ilang mga larawan hindi ka magkakaroon ng anumang problema.

Mula sa Citizen 2.0 inirerekumenda namin ang dalawa sa pinakatanyag: TinyPNG, upang mabawasan ang timbang, at Picresize, upang mabawasan ang laki. Maaari mo ring gamitin ang Image Resizer na pareho ang ginagawa, ngunit hindi kasing optimally na magkahiwalay ang dalawa.

Ngunit tandaan na, kung mayroon ka nang isang application para sa naka-install na ito sa iyong computer, o karaniwang ginagamit mo ang isa, perpekto. Narito ang aming mga rekomendasyon:

TinyPNG: Paano mabawasan ang bigat ng isang larawan
Binabawasan ng tool na ito ang bigat ng mga larawan na na-upload namin, na may isang napaka-simpleng upang magamit na interface, at pinapayagan kaming mag-upload ng hanggang sa 20 mga file nang sabay:

Mag-click sa kahon sa gitna upang simulang i-compress ang mga imahe.

Upang magsimula, nag-click kami sa loob ng parisukat ng mga linya, kung saan sinasabi na “I-drop ang iyong .png o .jpg na mga file dito!”.

Kapag nag-click kami, bubuksan nito ang mga folder sa aming computer, pipiliin namin ang aming file at i-upload ito:

Kapag ang “tapos” ay lilitaw sa berdeng bar, nakumpleto ang compression.

Kapag naabot ng berdeng bar ang dulo, nangangahulugan ito na natapos na ang proseso at ihahanda na namin ang aming imahe.

Mayroon kaming pagpipilian na i-save ang mga imahe sa aming Dropbox o pag-download ng isang zip gamit ang folder na naglalaman ng mga imahe, sa pamamagitan ng pag-click sa berdeng pindutan, kung saan sinasabi na “I-download lahat”.

Paano mabawasan ang laki ng isang larawan gamit ang Picresize
Salamat sa website na ito, maaari naming mabawasan ang laki ng aming mga larawan nang mabilis at madali, na makapag-upload ng isang solong file o marami nang sabay.

Kapag nagpunta kami sa pangunahing pahina, makakakita kami ng isang parisukat na may simbolo ng isang ulap at isang arrow. Nag-click kami doon at hahanapin kung nasaan ang aming file sa aming computer.

Kapag nahanap na namin ito, nag-click kami sa asul na pindutan na “Magpatuloy upang i-edit ang larawan”:

Picresize ang home page. Mag-click sa gitna upang magsimula.

Magbubukas ang isang bagong pahina, kung saan makikita namin ang napiling larawan. Mag-scroll pababa hanggang sa lumitaw ang imaheng ito sa iyong screen, kung saan dapat naming piliin ang mga katangiang nais naming magkaroon ng larawan.

Sa unang drop-down mayroon kaming pagpipilian upang piliin ang laki ng aming larawan. Sa kasong ito napili namin ang 800px na lapad, ngunit maaari mo itong ipasadya ayon sa kung ano ang kailangan mo.

Sa kanan nakikita namin ang isang maliit na parisukat kung saan ipinapahiwatig nito ang pagtatantya ng kabuuang mga sukat na magkakaroon tayo.

Kung hindi namin nais ang anumang epekto sa aming larawan, dumiretso kami sa seksyon sa dulo kung saan sinasabi nito

“I-save bilang”, at pipiliin namin ang format kung saan i-download namin ang aming larawan.

Kapag tapos ka na, i-click ang “Tapos na ako, baguhin ang laki ang aking larawan!” Button:

Kung ang mga ito ay mga screenshot, piliin ang format na “PNG” nang mas mahusay.

Sa wakas, makakarating kami sa screen na ito, kung saan nag-click kami sa “I-save sa disk” upang i-download ang imahe na na-retouch namin:

Mag-click sa “I-save sa disk” upang i-download ang mga imahe.

Sa wakas, mai-download ang file sa amin.

Image Resizer at kung paano i-edit ang laki ng aming mga imahe sa online
Ang isa pang mahalagang site para sa pag-edit ng larawan ay Image Resizer. Sa isang katulad na operasyon sa Picresize, nakakita kami ng isang simpleng takip, na may berdeng gitnang pindutan, kung saan lilitaw ang pariralang “Piliin ang Imahe.” Mag-click dito at piliin ang larawan upang mai-edit.

Cover ng pahina ng pag-edit ng Image Resizer.

Hindi lamang tayo may pagpipilian na bawasan ang laki nito, maaari din nating i-crop, paikutin at i-flip ito.

Sa seksyong “Baguhin ang laki”, dapat naming ipahiwatig ang huling laki na gusto namin. Mayroon kaming pagpipilian upang piliin ang lapad sa mga pixel, cm at marami pang mga sukat, pati na rin ang format ng pag-download.

Sa kahon na “Lapad”, ipasok ang mga halagang nais mong magkaroon ng lapad ng iyong larawan.

Kapag tapos ka na, i-click ang “Baguhin ang laki Ngayon Ngayon.”

Ang malaking pagkakaiba sa pagitan ng Image Resizer at iba pang mga tool sa pag-edit ng online ay ipinapakita sa amin sa isang talahanayan ang mga sukat, sa mga pixel, bago at pagkatapos ng pag-edit.

Comparative table ng mga orihinal na sukat at pagkatapos ng pag-edit.

Kapag natitiyak namin na natapos na namin ang proseso, nag-click kami sa “I-download ang Larawan”, at mai-download ang na-edit na larawan. Nasa atin ang

pagpipilian upang i-download ang file bilang .PDF, .PNG at sa naka-compress (zip) na file.

Ang pinakamahusay na mga plugin upang mai-optimize ang mga imahe sa WordPress
Ang pagtatrabaho sa mga plugin ng WordPress ay may maraming kalamangan. Awtomatiko nila ang mga proseso, nagdaragdag ng mga pag-andar … sa madaling salita, lubos nilang pinapadali ang aming gawain. At ang pag-optimize ng imahe ay hindi magiging mas kaunti.

Piliin mo lang ang pinaka gusto mo at mai-install ito. Siyempre, lubos na inirerekumenda na suriin ito pana-panahon mula, tuwing tayo ay awtomatiko, nawawalan tayo ng “kontrol” sa proseso.

Kung kailangan mo ng pagho-host para sa iyong website o sa iyong blog, kumilos ka!

Hostinger: 90% diskwento dito
SiteGround: 54% diskwento dito
Webempresa: na may isang 25% na diskwento dito
Raiola Networks: na may 20% na diskwento dito
Paunawa: Mag-e-expire ang alok ng SiteGround sa loob ng ilang araw.

Ngunit huwag mag-alala, ito ay hindi isang mahirap na gawain at hindi ka nito tatagal nang higit sa dalawang minuto.

Ngayon na ang oras upang siyasatin ang mga katangian ng bawat plugin at piliin ang isa na pinakaangkop sa aming paraan ng pagtatrabaho.

Bawasan ang laki ng mga larawan nang hindi nawawala ang kalidad gamit ang EWWW Image Optimizer
Sa bilang ng mga pag-download, nasa likod ang EWWW Image Optimizer

You May Also Like

About the Author: admin

Leave a Reply

Your email address will not be published. Required fields are marked *