Naghahanap ka bang mag-upload ng mga larawan sa iyong WordPress site, ngunit hindi ka sigurado kung anong mga sukat o filetype ang dapat na mga larawan? Hindi ka ba pamilyar sa proseso ng pagbabago ng laki at pag-compress ng mga larawan para sa web? Sa artikulong ito, ipapaliwanag ko kung bakit mahalaga ang paggamit ng wastong sukat ng larawan para sa iyong website, at ipapakita sa iyo kung paano baguhin ang laki at i-compress ang iyong mga larawan gamit ang libreng photo editor na GIMP.
Bakit Mahalaga ang Pag-resize ng Mga Larawan ng Iyong Website
Magsimula tayo sa kung bakit napakahalaga ng pagbabago ng laki ng mga larawan ng iyong website.
Ayon sa WordPress.org, ang pangkalahatang "pisikal na sukat" ng isang imahe ay gumaganap ng isang malaking papel sa pagganap ng isang pahina ng website. “Ang laki ng file [ng isang imahe] ay nagdidikta sa oras na kinakailangan upang mai-load ang iyong pahina; mas malaki ang laki ng file... mas matagal ang [isang page] mag-load." Sa madaling salita, ang pag-upload ng malaking sukat ng file sa iyong website ay magpapabagal sa pagganap ng anumang pahina kung saan mo idaragdag ang nilalaman, kadalasang lumalabas bilang mas mabagal na bilis ng pag-load ng pahina sa data ng analytics ng iyong site.
“Ang laki ng file [ng isang imahe] ay nagdidikta sa oras na kinakailangan upang mai-load ang iyong pahina; mas malaki ang laki ng file... mas matagal ang [isang page] mag-load."
-WordPress.org
Bilis ng pag-load ng page, na tinutukoy din bilang "bilis ng pahina," ay "kung gaano kabilis mag-load ang content sa iyong page," ayon sa SEO site na Moz. Ang pagkakaroon ng mas mabagal na mga pahina ay maaaring magresulta sa mas mataas na "mga bounce rate,” na isang magarbong sukatan na kumakatawan sa mga session kung saan ang isang bisita sa site ay umalis sa iyong site pagkatapos tingnan ang isang pahina. Ang mga mabagal na pahina ay maaari ring bawasan ang dami ng oras na ginugugol ng mga bisita sa mga pahina ng iyong site, dahil ang mga tao ay maaaring maiinip sa paghihintay para sa nilalaman ng isang pahina na mag-load at umalis sa iyong site nang mas mabilis.
Mahalaga ang mga sukatan na ito dahil karaniwang gusto mong gumugol ng mas maraming oras ang mga user sa iyong site at tumitingin sa mas maraming page sa iyong site.
Mahalaga rin ang mga ito dahil may papel ang mga ito sa kung paano nagra-rank ang iyong site sa mga page ng resulta ng search engine, o “SERPs.” SERP ay simpleng mga pahina ng resulta na ipinapakita kapag nag-type ka ng salita o parirala sa Google at pinindot ang enter key. Dahil ang malalaking larawan ay nagpapahiwatig ng hindi magandang mga kasanayan sa disenyo ng web at negatibong nakakaapekto sa karanasan ng user habang nasa iyong site, maaaring ang mga search engine tulad ng Google parusahan iyong site para sa pagkakaroon ng mga mas malalaking larawang ito at ranggo ang iyong website sa ibaba ng iba pang mga website na mas mahusay na gumaganap.
Kung mas mababa ang ranggo ng iyong website sa Google, halimbawa, mas kaunting trapiko ang nakukuha ng iyong site at mas maraming trapiko ang mapupunta sa iyong mga kakumpitensya na mas mataas ang ranggo sa iyo sa mga resulta ng paghahanap.
Sa pamamagitan ng pagbawas sa laki ng file ng iyong mga larawan sa iyong website, maaari mong pagbutihin ang iyong bilis ng pahina at sa gayon ay mapabuti ang iba pang mga sukatan tulad ng bounce rate at oras sa page upang sa huli ay mapabuti ang iyong mga ranggo sa mga search engine.
Tandaan na maraming iba pang mahahalagang variable na napupunta sa mga ranggo sa paghahanap, kaya ang pag-aayos ng iyong mga larawan ay bahagi lamang ng isang solid SEO (Search Engine Optimization) na diskarte. Gayunpaman, ito ay tiyak na napakahalaga para sa pagtulong sa iyong site na mas mataas ang ranggo sa mga lugar tulad ng Google upang makatulong na mapataas ang trapiko ng iyong site.
Paano Baguhin ang Laki ng Mga Larawan para sa WordPress sa GIMP
Kaya paano mo maayos na baguhin ang laki ng mga imahe para sa WordPress?
Maaari mong bawasan ang laki ng file ng isang imahe sa pamamagitan lamang ng pagpapababa sa kabuuang sukat ng larawang ginagamit scaling at pagtatabas bago mo i-upload ito sa iyong website. Dagdag pa, maaari mong ilapat ang tinatawag na “pagpiga” sa iyong larawan upang mas mabawasan ang laki nito.
Ang GIMP, ang libre at open source na editor ng larawan, ay maaaring magawa ang lahat ng mga gawaing ito habang nag-e-export din sa mga inirerekomendang "next-gen" na mga format ng file upang higit pang bawasan ang laki ng file ng iyong mga larawan at pagbutihin ang pagganap ng iyong site.
I-scale ang Iyong Larawan
Upang makapagsimula sa prosesong ito, buksan ang larawang gusto mong i-upload sa iyong site sa GIMP. Magagawa mo ito sa pamamagitan ng pag-drag at pag-drop ng iyong imahe mula sa iyong computer papunta sa window ng imahe ng GIMP, o maaari kang pumunta lamang sa File>Buksan kapag nasa loob ng GIMP.
Kung gumagamit ng File>Open na paraan, mag-navigate sa lokasyon ng imahe sa iyong computer mula sa loob ng "Buksan na Larawan" na dialog na lilitaw, at i-double-click ang file ng imahe sa sandaling mahanap mo ito upang buksan ito sa GIMP (o i-click ang "Buksan" na buton sa kanang sulok sa ibaba ng dialog window).
Sa pinakatuktok ng GIMP window ay isang tampok na tinatawag na "Title Bar" (pulang arrow sa larawan sa itaas). Dito, makikita mo ang mga kasalukuyang dimensyon ng iyong larawan (pinalaki ang berdeng kahon sa larawan). Ang aking larawan ay 1920×1280 – na may unang numero, 1920, na kumakatawan sa lapad ng aking larawan (sa mga pixel), at ang pangalawang numero, 1280, na kumakatawan sa taas ng aking larawan. Ang panghuling mga sukat ng larawan na gusto mong gamitin para sa iyong larawan ay depende sa kung saan sa WordPress mo balak gamitin ang larawan, pati na rin kung anong tema ang iyong ginagamit.
Para sa tutorial na ito, babaguhin ko ang aking imahe sa karaniwang laki ng 1200 × 630 pixels na inirerekomenda para sa mga larawan ng post sa blog.
Sa pag-iisip na ito, ang unang bagay na gusto kong gawin ay i-crop ang aking larawan upang ang aspect ratio ng aking orihinal na larawan ay tumugma sa aspect ratio ng inirerekomendang laki. Upang gawin ito, kukunin ko ang aking tool sa pag-crop sa pamamagitan ng pagpindot sa shift+c sa aking keyboard o pag-click sa icon ng crop tool sa GIMP Toolbox (pulang arrow sa larawan sa itaas).
Susunod, sa Tool Options para sa tool na ito, lalagyan ko ng check ang kahon sa tabi ng “Fixed” (berdeng arrow) at i-click ang dropdown para piliin ang “Aspect ratio” (asul na arrow).
Ita-type ko ang “1200:630” para itakda ang aking aspect ratio sa field ng text sa ibaba ng dropdown (dilaw na arrow). Tumutugma ito sa aspect ratio ng inirerekomendang laki ng larawan na gusto kong maging panghuling larawan.
Gamit ang tool sa pag-crop, i-click at i-drag ko na ngayon ang aking mouse sa buong imahe upang iguhit ang lugar ng pag-crop. Kapag binitawan ko ang aking mouse, ang lahat sa labas ng lugar ng pag-crop ay dimmed (pulang arrow sa imahe sa itaas - kung ipagpalagay na ang "Highlight" ay naka-check sa Mga Pagpipilian sa Tool, na karaniwan ay bilang default).
Bilang default, ang aking crop area ay may mga gabay na itinakda bilang "Mga linya sa gitna" (dilaw na arrow sa larawan sa itaas). Mababago ko ang setting na ito gamit ang dropdown ng mga gabay patungo sa ibaba ng Tool Options. Halimbawa, babaguhin ko ang aking mga gabay sa “Rule of Thirds” (berdeng arrow). Ang iba't ibang mga opsyon sa gabay dito ay batay sa mga prinsipyo ng photography, na ginagawang madali upang i-frame ang iyong komposisyon gamit ang mga prinsipyong ito.
Maaari mong i-hover ang iyong mouse sa alinman sa mga gilid o sulok ng lugar ng pag-crop (ibig sabihin, ang naka-highlight na lugar na tinutukoy ng pulang arrow sa larawan sa itaas), pagkatapos ay i-click at i-drag upang baguhin ang laki ng hangganan ng lugar ng pag-crop. Tandaan na palagi mong makikita ang laki ng iyong crop area sa mga field na “Laki” na matatagpuan sa Tool Options (nakabalangkas sa berde sa larawan sa itaas). Gusto mong panatilihing mas malaki ang kabuuang sukat ng lugar ng pag-crop kaysa sa panghuling sukat ng larawan na 1200x630.
Maaari mo ring i-click at i-drag ang iyong mouse sa gitna ng crop area (pulang arrow) upang muling iposisyon ang crop sa larawan.
Kapag handa ka nang i-crop ang larawan, mag-click nang isang beses sa loob ng crop area at ang iyong larawan ay ma-crop.
Tandaan na kung ang opsyong "Tanggalin ang mga naka-crop na pixel" sa Mga Opsyon sa Tool ay walang check (berdeng arrow sa larawan sa itaas), ipapakita pa rin ang iyong orihinal na hangganan ng larawan sa paligid ng iyong larawan sa pamamagitan ng isang dilaw na tuldok na linya (pulang arrow). Maaari mong ibalik ang orihinal na larawan, kaya maaalis ang pag-crop, sa pamamagitan ng pagpunta sa Image>Fit Canvas to Layers. Ang lugar lang ng iyong larawan sa loob ng hangganan ng canvas ang ie-export.
Ang aming imahe ay na-crop na ngayon sa aspect ratio na gusto namin, ngunit kung titingnan mo muli ang aming mga dimensyon ng imahe sa "Title Bar" makikita mo na ang imahe ay 1532 × 804 (nakabalangkas sa berde at pinalaki sa larawan sa itaas - ang iyong mga dimensyon ay malamang na bahagyang naiiba batay sa kung gaano kalaki ang iyong iginuhit na lugar ng iyong crop sa iyong larawan). Kakailanganin namin ngayon na sukatin ang aming imahe upang tumugma sa aming mga ninanais na dimensyon.
Upang gawin ito, pumunta sa Image>Scale Image (pulang arrow).
Sa kahong "Scale Image" na lalabas, sa ilalim ng "Laki ng Larawan," tiyaking naka-link ang icon ng chain link sa tabi ng mga kahon na "lapad" at "taas" (pulang arrow sa larawan sa itaas). Pagkatapos, baguhin ang "Lapad" ng iyong larawan sa 1200 (berdeng arrow). Pindutin ang tab key. Ang taas ng larawan ay awtomatikong mag-a-update sa "630." Sa ilalim ng "Kalidad," tiyaking ang dropdown na "Interpolation" (asul na arrow) ay nakatakda sa alinman sa "NoHalo" o "LoHalo" para sa pinakamahusay na kalidad ng larawan pagkatapos ng scaling. (Para sa karagdagang impormasyon sa interpolation, tingnan ang aking tutorial sa paksa).
Pindutin ang pindutan ng "Scale" upang sukatin ang iyong larawan (dilaw na arrow).
Kapag kumpleto na ang pag-scale, tingnan ang mga sukat ng larawan sa Title Bar. Dapat mo na ngayong makita ang laki ng larawan na 1200×630 – ang eksaktong sukat na gusto namin! Anong gagawin natin ngayon?
I-compress ang Iyong Larawan sa pamamagitan ng Pag-export sa WebP
Binawasan ng pag-crop at pag-scale ng larawan ang laki ng file sa pamamagitan ng pagbabawas ng taas ng larawan mula 1920 hanggang 1200 pixels, at ang lapad mula 1280 hanggang 630 pixels, ngunit maaari naming bawasan ang laki ng larawan nang higit pa sa pamamagitan ng paglalapat ng compression kapag na-export namin ang larawan.
Kaya, kailangan na nating i-export ang imahe sa isang format ng file na maglalapat ng compression sa imahe nang hindi kapansin-pansing binabawasan ang kalidad ng imahe. Habang ang mga JPEG ay palaging isang mahusay na pagpipilian, mayroong isang mas mahusay na opsyon na magagamit na ngayon: WebP.
Ang format ng WebP ay naglalapat ng mas maraming compression kaysa sa JPEG habang naaapektuhan ang kalidad ng imaheng mas mababa kaysa sa JPEG. Sa madaling salita, makakakuha ka ng mas magandang larawan na may mas maliit na laki ng file. Dagdag pa, ang mga format ng WebP ay sinusuportahan ng lahat ng nangungunang 5 web browser.
Para mag-export sa WebP, pumunta sa File>Export As (pulang arrow).
Mag-click sa alinman sa mga folder sa seksyong "Mga Lugar" (nakabalangkas sa berde) upang piliin ang larawan sa iyong computer kung saan mo gustong i-save ang iyong larawan. Maaari mo lamang i-double click ang isang folder upang ipasok ito, at tingnan kung anong folder ang nasa tabi ng pamagat na “I-save sa Folder” (pulang arrow). Pagkatapos, palitan ang pangalan ng iyong larawan sa anumang gusto mo – tiyaking tapusin mo ang pangalan ng iyong larawan gamit ang extension na ".webp" (asul na arrow) upang i-export ang larawan sa format na WebP. Kapag handa ka na, i-click ang "I-export" sa kanang sulok sa ibaba ng window (dilaw na arrow).
Susunod, lalabas ang dialog na "I-export ang Larawan bilang WebP". Tiyaking walang check ang "Lossless" (pulang arrow). Karaniwan kong itinatakda ang "Kalidad ng Larawan" sa 80 (asul na arrow - ito ay isang porsyento, kaya mas mababa ang porsyento ay mas mababa ang kalidad ng imahe, ngunit mas maliit ang laki ng file ng imahe). Kung walang transparency ang iyong larawan (ibig sabihin, isang logo na walang background), hindi mo kailangang mag-alala tungkol sa slider na "Alpha quality" (sa katunayan, sa isang eksperimento na ginawa ko, binabaan ang kalidad ng alpha mula 100 hanggang 90 na talagang bahagyang pinataas ang laki ng file ng isang imahe na may transparent na background mula 8.50 kb hanggang 8.52 kb). Ang dropdown na "Uri ng Pinagmulan" na maaari mong panatilihing nakatakda sa "Default."
Kung gusto mong suriin o alisan ng check ang alinman sa mga opsyon sa metadata, kabilang ang Exif data, ITPC data, at XMP data, ay nasa iyo. Ang data ng Exif at XMP ay metadata na karaniwang itinalaga ng iyong camera na naglalarawan ng impormasyon tungkol sa iyong larawan tulad ng kung anong modelo ng camera ang ginamit o kung anong uri ng lens ang ginamit. Ang ITPC, sa kabilang banda, ay ginagamit ng mga miyembro ng press at nagtatalaga ng impormasyon sa iyong larawan tulad ng pagmamay-ari, mga karapatan, at paglilisensya. Kung hindi ka sigurado kung ano ang gagawin, hayaan lang na naka-check ang mga opsyong ito.
Gayundin, mainam na iwan mo ang opsyong "I-save ang profile ng kulay" na walang check dahil karamihan sa mga browser ay awtomatikong gagamit ng espasyo ng kulay ng sRGB upang ipakita ang iyong larawan, na siyang ginagamit ng GIMP. Kung gumagamit ka ng ibang kulay na profile, gugustuhin mong iwan itong naka-check. Gayundin, kung nag-aalala ka tungkol sa hindi naipapakita nang maayos ang larawan para sa ilang partikular na browser, ang pag-iwan dito ng check ay nagdaragdag lamang ng ilang kb sa kabuuang sukat ng larawan.
Sa wakas, ang opsyong "I-save ang thumbnail" ay maaaring manatiling walang check, na higit pang makakapagtipid sa amin ng ilang kilobytes.
I-click ang "I-export" (dilaw na arrow sa larawan sa itaas) upang i-export ang larawan sa WebP na format. Kapag inihambing ang na-export na WebP file sa isang JPEG file na may parehong laki at mayroon ding kalidad na nakatakda sa "80," ang WebP na imahe ay pumapasok sa humigit-kumulang 30 kb, o humigit-kumulang 25%, na mas maliit sa laki kaysa sa JPEG.
Maaari ka na ngayong mag-log in sa iyong WordPress site at mag-navigate sa page o post kung saan mo gustong i-upload ang iyong larawan, o mag-navigate lang sa seksyong “Media” gamit ang pangunahing nabigasyon at i-drag at i-drop ang iyong larawan sa Media Library. Sa aking kaso, magna-navigate ako sa “Post” gamit ang pangunahing nabigasyon (pulang arrow sa larawan sa itaas) at magki-click sa “Blog Post 1” (asul na arrow) upang i-edit ang post sa blog na iyon.
Pagkatapos ay bubuksan ko ang Post Settings Sidebar (pulang arrow) at mag-scroll pababa sa seksyong “Itinatampok na Larawan” at palawakin ang seksyong ito (asul na arrow). Pagkatapos, i-click ko ang larawan upang palitan ito ng aking bagong larawan.
Mag-navigate ako sa tab na "Mag-upload ng Mga File" (pulang arrow), at maaari kong i-drag at i-drop ang aking imahe mula sa aking computer patungo sa WordPress (mga asul na arrow).
Sa wakas, i-click ko ang "Itakda ang Itinatampok na Larawan" upang ilapat ang pagbabagong ito (pulang arrow).
I-click ang “I-update” (pulang arrow) upang i-update ang iyong pahina gamit ang bagong itinatampok na larawan.
Kung iki-click ko ang "Tingnan ang Post," (asul na arrow)...
…makikita mo na ngayon ang bagong itinatampok na larawan na ipinapakita sa tuktok ng aking blog.
Iyon lang para sa tutorial na ito! Kung gusto mong matuto nang higit pa tungkol sa pagdidisenyo ng isang WordPress website, inirerekumenda kong tingnan ang aking WordPress 6.0 para sa Non-Coder na Kurso! O, kung gusto mong matuto nang higit pa tungkol sa GIMP, tingnan ang aking GIMP 2.10 Masterclass sa Udemy!
