Paano Mag-optimize ng Mga Larawan ng Produkto: Mga Tagubilin at Mapagkukunan

Nai-post 2 taon na ang nakakaraan by Anastasia Prokofieva

Nakakatulong ang mga larawan ng produkto na i-seal ang deal kapag binisita ng mga customer ang iyong website. Upang mapanatili ang kanilang interes, dapat ay mayroon kang mga kaakit-akit na larawan na mabilis na naglo-load. Sa madaling salita, kailangan mong i-optimize ang iyong mga larawan ng produkto.

Maaaring nagtataka ka kung paano hanapin ang pinakamainam na laki ng larawan, kung paano i-compress ang mga larawan, at kung paano i-optimize ang mga larawan nang hindi nawawala ang kalidad.

Sinakop ka namin. Sa artikulong ito, pumasok tayo sa nitty-gritty ng pag-optimize ng imahe at tingnan ang mga tool na magagamit upang magawa ang trabaho nang mabilis at madali.

Bakit Kailangan Mong I-optimize ang Mga Larawan?

Ang mga imahe ay isang mahalagang bahagi ng bawat website. Ito ay totoo lalo na para sa isang ecommerce site. Ang mga larawan ay nakakaimpluwensya sa mga customer kapag sila ay nag-iisip na bumili ng isang bagay. Nagdaragdag sila sa pangkalahatang disenyo ng webpage, tinutulungan ang mga customer na pumili ng produkto, at pahusayin ang SEO ng iyong site.

Halimbawa, gusto mong iwasan ang pag-upload ng malalaking file. Maaari nilang pabagalin ang iyong pahina, na nakakaapekto sa ranking ng iyong search engine at nagtataboy sa mga potensyal na customer. Walang gustong maghintay na mag-load ng page habang namimili online. Iyon ang dahilan kung bakit dapat mong i-optimize ang iyong mga larawan ng produkto.

Pag-unawa sa Mga Dimensyon at Proporsyon ng Larawan

Alamin natin kung ano ang kailangan mong bigyang pansin kapag ino-optimize ang iyong mga larawan.

Ang laki at sukat ng isang imahe ay talagang mahalaga. Naaapektuhan ng mga parameter na ito ang laki ng file at ang hitsura ng larawan sa iba't ibang device.

laki

Ngayon ang panahon ng mataas na resolusyon at Mataas na bilis Internet, ngunit hindi iyon nangangahulugan na hindi tayo dapat mag-alala tungkol sa pag-optimize ng mga larawan. Makakakuha ng mga modernong camera at maging ang mga smartphone mataas na resolusyon mga larawan. Maaaring naghanda ka pa ng mga ganitong larawan para sa iyong tindahan.

Gayunpaman, kapag ang mga imahe ay masyadong malaki, ang mga ito ay hindi angkop para sa Internet. Pinapabagal nila ang bilis ng paglo-load, lalo na sa isang telepono. Kung ayaw mong mawalan ng pasensya ang iyong mga bisita at umalis sa iyong tindahan, dapat mong bawasan ang laki ng iyong mga larawan.

Ang isang imahe ay may dalawang laki:

Laki ng larawan ay ang puwang na sinasakop ng isang graphic sa screen. Ang laki na ito ay sinusukat sa mga pixel (px), na mga indibidwal na puntos na bumubuo sa screen. Maaari kang mag-upload ng mga larawan ng anumang laki sa tindahan ng Ecwid. Pagkatapos ay ino-optimize ang mga ito upang magkasya sa lapad ng window ng browser. Gayunpaman, pinakamainam na bawasan ang iyong mga larawan ng produkto sa humigit-kumulang 1000 x 1000 px. Ang laki na iyon ay sapat na malaki upang maipakita ang produkto at sapat na maliit upang mai-load nang mabilis.
Laki ng file ay ang memory space na kinukuha ng imahe. Ang laki na ito ay sinusukat sa bytes, karaniwan Kilo- (Kb), Mega- (Mb), at Gigabytes (Gb). Kung mas malaki ang laki ng file ng imahe, mas maraming espasyo sa imbakan ang kailangan nito.

Ang laki ng larawan ng produktong ito ay 1920×1920 at ang laki ng file nito ay 272 kB

Mas matagal mag-load ang mas malalaking file. Ang file compression software ay binuo upang labanan ang isyung ito. Ang isang larawan ay karaniwang na-compress sa pamamagitan ng pag-optimize ng data ng kulay.

Gayunpaman, ang malakas na compression ay nagpapababa sa "kalidad" ng mga imahe. Nagdudulot ito ng ingay o biglaang paglipat ng kulay.

Para sa laki ng file na humigit-kumulang 1000 px, ang isang mahusay na compression ay aabot ng humigit-kumulang 200 kB.

Ngayon, matuto pa tayo tungkol sa kung paano pumili ng mga tamang sukat para sa iyong mga larawan.

Proporsyon

Ang mga proporsyon ng isang imahe ay nagpapahiwatig ng lapad-sa-taas ratio.

Ang ilang mga ratio ay mas nakalulugod sa mata kaysa sa iba. Ang karaniwang hanay ng mga proporsyon ay laging maganda ang hitsura. Ito ay 1:1, 4:3, 3:2, at 16:9.

Mahalaga ang mga proporsyon dahil nakakatulong ang mga ito na tukuyin ang hitsura ng iyong site. Magsikap para sa parehong mga proporsyon para sa lahat ng iyong mga larawan ng produkto upang bigyan ang iyong storefront ng isang structured at propesyonal na hitsura.

Paano Pumili ng Format ng Larawan

Ang isa pang bagay na dapat tandaan para sa pinakamainam na imaging ay ang format ng imahe. Ito ang uri ng file kung saan nai-save ang isang imahe.

Mayroong maraming mga uri ng mga format ng imahe. Ang bawat isa ay may mga pakinabang at disadvantages sa mga tuntunin ng kalidad, compression, at suporta. Dapat mong piliin ang format na nagbibigay ng pinakamataas na kalidad na may pinakamaliit na sukat.

Ang tatlong pinakakaraniwang format sa web ay JPEG, PNG, at GIF. Ang bawat isa ay dapat gamitin sa isang tiyak na paraan.

Hatiin natin ang mga format:

GIF (Graphics Interchange Format) ay may kakayahang mag-imbak ng naka-compress na data nang hindi nawawala ang kalidad gamit ang hindi hihigit sa 256 na kulay. Karaniwang sinusuportahan ng format ang mga animation. Sa mahabang panahon, ang mga GIF ang pinakakaraniwang format sa Internet... hanggang sa dumating ang PNG.
PNG (Portable Network Graphics) ay gumagamit ng lossless compression at nag-iimbak ng walang limitasyong bilang ng mga kulay.
JPEG (Joint Photographic Experts Group, ang pangalan ng developer) ay ang pinakakaraniwang format para sa pag-iimbak ng mga larawan at iba pang mga larawan. Ang JPEG algorithm ay maaaring gumamit ng parehong lossy at lossless compression (higit pa tungkol doon sa ibang pagkakataon.) Kung mas malaki ang laki ng file, mas maliit ang pagkawala.

Aling format ang dapat mong piliin? Kung mayroon kang isang animated na larawan, iyon ay madali—GIF ay ang format na iyong hinahanap. Ngunit ano ang tungkol sa JPEG at PNG?

Ang mga JPEG at PNG na file ay magkatulad, ngunit mayroon din silang mahahalagang pagkakaiba. Ang mga JPEG ay mas maliit sa laki dahil gumagamit sila ng proseso ng compression na nag-aalis ng ilang data. Ang mga PNG, sa kabilang banda, ay sumusuporta sa mga transparent na background at mas mahusay para sa graphic na disenyo.

Ang pangkalahatang tuntunin ay ang paggamit ng mga JPG para sa mga litrato at larawang walang transparent na background. Tulad ng para sa PNG, mas mainam na gamitin ang mga ito para sa mga graphics, mga file na may transparent na background, at iba pang mga larawan kung saan mahalaga ang kalinawan at kulay. Kaya para sa mga larawan ng produkto, makatuwirang mas gusto ang JPEG kaysa PNG.

Ang larawan ng produktong ito ay nasa format na JPEG

Paano I-compress ang Mga Larawan Nang Hindi Nawawalan ng Kalidad

Nakakatulong ang compression na bawasan ang laki ng isang imahe. Kung mas mababa ang kalidad, mas mataas ang compression, at mas maliit ang laki ng file.

Mayroong dalawang uri ng compression:

Lossy compression binabawasan ang laki ng isang file sa pamamagitan ng pag-alis ng kalabisan na data. Gayunpaman, kapag nag-compress ka ng isang file sa paraang ito, maaari nitong makabuluhang pababain ang kalidad ng imahe.
Walang compression ay isang pamamaraan na nagpapanatili ng mataas na kalidad ng isang file. Gayunpaman, hindi nito babawasan ang laki ng file gaya ng lossy compression. Kung kailangan mong bawasan ang laki ng file nang hindi kapansin-pansing naaapektuhan ang kalidad, mas mabuting pumili ng lossless compression.

Magbasa para matutunan ang tungkol sa mga online na tool na magagamit mo upang i-compress ang isang larawan nang walang pagkawala ng kalidad.

Paano Mag-optimize ng Mga Larawan para sa Web: Pangkalahatang-ideya ng Mga Tool

Gusto mo bang malaman kung paano i-optimize ang mga larawan para sa isang website? Maswerte ka, gumagamit ka ng mga online na tool upang awtomatikong i-optimize ang iyong mga larawan nang hindi gumugugol ng oras sa panonood ng mga tutorial sa Photoshop.

Maaaring i-automate ng mga sumusunod na site ang pag-optimize para sa iyo:

Paano I-optimize ang Laki ng Imahe: 4 Simpleng Tool

Kung naghahanap ka ng pampabawas ng laki ng file, tingnan ang isa sa mga sumusunod na serbisyo. Ang mga ito ay libre o may mga libreng pagsubok:

TinyJPG: binabawasan nito ang laki ng file ng mga JPEG na imahe. Ayon sa kanilang site, maaari itong mabawasan ng higit sa 70%!
TinyPNG: ang parehong tagapiga ng larawan ngunit para sa mga file na PNG.
Squoosh: isang image compressor web app na nagpapababa ng laki ng larawan sa pamamagitan ng maraming format.
JPEGmini: isang photo compressor para sa mga JPEG file. Mayroon itong mas advanced na mga feature na nakakatulong para sa mga photographer, kabilang ang pag-export ng mga larawan nang direkta mula sa Lightroom at Photoshop.
ImageOptim: isang image optimizer para sa mga Mac device. Kailangan mong i-download ito upang magamit.

Pag-optimize ng mga larawan gamit ang JPEGmini

Kung nagpapatakbo ka ng isang Ecwid store, maaari mong gamitin ang SEO bilis at image optimizer app mula sa Ecwid App Market. Ang app ay nagbibigay-daan para sa Isang klik pag-optimize at compression ng mga larawan ng produkto na nag-aambag sa mas mabilis na oras ng paglo-load ng page ng produkto.

Paano Mag-optimize ng Mga Larawan para sa WordPress

Kung mayroon kang WordPress website, maaari kang gumamit ng image optimizer at compression plugin. Tinutulungan ka nila na awtomatikong i-optimize ang mga larawan sa mga site ng WordPress, na nagbibigay-daan para sa mas mahusay na bilis at pagganap.

Siyanga pala, kung naghahanap ka ng ecommerce plugin para sa iyong WordPress website, tingnan ito Ecwid ng Lightspeed plugin. Pinapayagan ka nitong madaling magdagdag ng isang online na tindahan sa iyong WordPress site. Kapag na-install na, awtomatikong gagawa ang plugin ng page ng Store kung saan maaaring mamili ang iyong mga customer sa iyong website.

Ewww Image Optimizer
Ewww Image Optimizer ay isa sa mga pinakamahusay na plugin ng WordPress upang i-compress ang mga larawan at i-optimize ang mga larawan sa iyong website. Ang buong proseso ng pag-optimize ng mga imahe ay awtomatiko. Kabilang dito ang pag-compress ng mga larawan at pag-scale upang magkasya sa tamang laki ng page at device. Ang plugin ay batay sa subscription ngunit nag-aalok ito ng a 7-araw libreng subok.

I-compress ang JPEG at PNG
I-compress ang JPEG at PNG ay isang plugin na ginawa ng koponan sa likod ng mga serbisyong nauna na namin nabanggit—TinyPNG at TinyJPG. Awtomatiko itong nag-compress ng mga larawan sa pag-upload. Maaari mo ring maramihang i-optimize ang mas lumang mga larawan. Sa isang libreng account, maaari mong i-optimize ang 500 mga larawan bawat buwan.

reSmush.it
reSmush.it ay isang libreng WordPress image compression plugin para sa mga file hanggang sa 5MB. Maaari mong awtomatikong i-optimize ang mga larawan sa pag-upload, maramihang i-optimize ang mas lumang mga larawan, at ibukod ang ilang mga larawan mula sa optimizer.

Higit pang Automated Image Optimization Tools

Ngunit paano kung wala kang WordPress website? Ang manu-manong pag-optimize ng malaking bilang ng mga larawan ay tiyak gumugol ng oras Sa kabutihang palad, mayroong ilang mga online na tool na magagamit upang awtomatikong bawasan ang mga laki ng file pagbutihin ang bilis ng site.

ImageRecycle
ImageRecycle sumusuporta sa iba't ibang mga format ng imahe, tulad ng JPEG, PNG, GIF, at kahit na mga PDF file.

Matutukoy ng tool kung aling mga larawan sa iyong website ang kailangang i-optimize batay sa laki at dimensyon ng larawan. Ipasok lamang ang address ng iyong website at magpapadala sa iyo ang ImageRecycle ng libreng ulat sa pamamagitan ng email. Mayroon din silang libreng pagsubok para makita mo ang kanilang optimization tool sa pagkilos.

ImageKit.io
ImageKit.io ay hindi isang regular na image compressor kundi isang image CDN (content delivery network). Ito ay nag-o-optimize, nagre-resize, at nagpapadala ng mga larawan sa pamamagitan ng global network ng mga server nito. Maaari kang mag-sign up para sa walang hanggang libreng plano.

Mga Tool para sa Pag-edit ng Mga Larawan ng Produkto

Kung hindi mo iniisip ang pag-edit ng mga larawan sa iyong sarili at hindi natatakot sa isang maliit na DIY, maaari kang makahanap ng mga tool para sa pag-edit ng larawan na kapaki-pakinabang. Narito ang ilan sa mga ito:

Photoshop
Nag-aalok ang Photoshop ng libre online na editor para sa pangunahing pagmamanipula ng imahe (tulad ng pag-crop o pagbabago ng laki ng mga larawan). Nagbibigay-daan din ito sa iyong alisin ang background sa mga larawan at i-finetune ang iyong mga larawan gamit ang iba't ibang setting gaya ng contrast, brightness, saturation, warmth, o sharpening.

Ang editor ng online na Photoshop ay may mga template ng disenyo na magagamit mo

Malambot
Malambot ay isang libreng program na angkop para sa Windows, Mac, at Linux. Nag-aalok ito ng lahat ng kailangan mo para sa mga propesyonal na graphics at litrato, kabilang ang mga tool para sa mga layer at mask, pagwawasto ng kulay, pag-retouch, at pagpipinta. Sinusuportahan ng GIMP ang lahat ng mga pangunahing format ng file ng imahe.

PicMonkey
PicMonkey ay isang online na editor na may isang simpleng interface at lahat ng mga pangunahing pag-andar, tulad ng pag-crop, pag-ikot, kontrol ng sharpness, pagtatrabaho sa kulay, at pagpili ng mga larawan ng resolusyon. Nagbibigay ito ng mga template para sa paglikha ng mga larawan para sa mga ad, social post, logo, infographics, at higit pa. Mayroon itong isang 7-araw libreng subok.

Pixlr
Pixlr nag-aalok ng libreng online na editor at mga mapagkukunan ng disenyo para sa mga nagsisimula at propesyonal. Mayroon itong mga tool para sa kulay, pagguhit, at pag-edit ng larawan. Sa Pixlr, nagtatrabaho ka sa mga layer at gumagamit ng iba't ibang mga effect at filter. Kung interesado ka, pwede test-drive isang premium na plano nang libre sa loob ng 30 araw.

Higit pa tungkol sa Image Optimization

Maaaring pabagalin ng malalaking larawan ang iyong website, kaya mahalagang i-optimize ang mga ito para sa web. Ang paghahanap ng tamang format ng imahe para sa iyong mga larawan sa pamamagitan ng pagbabago ng laki at pag-compress ay maaaring gumawa ng mga kamangha-manghang para sa bilis ng pag-load ng iyong website.

At ngayon alam mo na ang magandang balita: ang pag-optimize ay napakadaling gawin! Maaari ka ring bumalik at sumangguni sa artikulong ito kapag kailangan mo.

Kung ikaw ay isang mas advanced na user at sabik na matuto nang higit pa tungkol sa kung paano i-optimize ang mga imahe para sa SEO, inirerekomenda naming panoorin ang video na ito ng Google. Dumadaan ito sa ilang mga advanced na tip sa pag-optimize ng iyong mga larawan para sa isang website. Panoorin ito dito:

Gaano man ka karanasan bilang may-ari ng ecommerce, huwag kalimutan ang tungkol sa pag-optimize ng imahe. Kahit na ang pinakasimpleng mga tool ay maaaring gawing angkop ang iyong mga larawan para sa web. Sa pamamagitan ng pag-optimize ng iyong mga larawan, maaari mong lubos na maimpluwensyahan ang karanasan sa pamimili ng iyong mga customer. Tiyaking maganda at mabilis mag-load ang iyong mga larawan ng produkto!

Kung nasa simula ka pa lang ng iyong paglalakbay sa ecommerce at kailangan mong gumawa ng online na tindahan, tingnan Ecwid ng Lightspeed. Binibigyang-daan ka nitong mag-set up ng isang libreng online na tindahan nang mag-isa, walang coding o mga kasanayan sa disenyo na kailangan. Perpekto kung kailangan mong magsimulang magbenta online sa lalong madaling panahon!

Tungkol sa Ang May-akda

Si Anastasia Prokofieva ay isang manunulat ng nilalaman sa Ecwid. Nagsusulat siya tungkol sa online marketing at promosyon upang gawing mas madali at mas kapakipakinabang ang pang-araw-araw na gawain ng mga negosyante. Mayroon din siyang malambot na lugar para sa mga pusa, tsokolate, at paggawa ng kombucha sa bahay.