Laki ng Text sa Product Images: 6 Myth at ang 16 mm Test

Ang laki ng text sa product images ay nakasalalay sa isang numerong halos walang tumitingnan: kung gaano kalaki ang tile na aktuwal na nakikita ng buyer. Hindi ang 1600 px export mo — kundi ang kasinlaki-ng-kuko na parisukat sa search grid. Pinapayuhan ang mga retailer na i-render ang product tile sa smartphone sa humigit-kumulang 16 x 16 mm. Iyon ang totoong canvas kung saan naka-print ang dimension label mo.

Anim na paniniwala ang dahilan kung bakit nagdidisenyo pa rin ang mga seller para sa maling canvas. May nakalimbag nang sagot sa bawat isa, dahil matagal nang nasolusyunan ng mga grocery brand ang problemang ito at isinulat nila ang mga panuntunan.

Isang paalala kung saan galing ang mga panuntunang ito: pinatakbo ang Mobile Ready Hero Image ng mga FMCG brand at retailer, kaya shampoo bottle at dog food ang mga halimbawa. Pero hindi pumipili ng kategorya ang pisika. Ang shopper na nakakiwit ang mata sa 16 mm na tile ay hindi rin mababasa ang seat depth ng sofa mo, tulad ng hindi niya mabasa ang wash count sa isang laundry pack.

Myth 1: mag-zoom naman ang buyer kung kailangan niya ang sukat

Oo, mag-zoom sila — pagkatapos nilang mag-click. At sa grid nangyayari ang click, at doon wala pang zoom.

Ang pagkakasunod-sunod na iyon ang buong argumento. Bawat depensang nakasandal sa zoom ay nagpapalagay ng interesadong shopper na pinili ka na kaysa sa labing-isa pang listing sa screen. Kung natalo ang image mo sa paghahambing na iyon dahil hindi matukoy ng buyer kung gaano kalaki ang item, hindi na magagamit pa ang zoom. Ang legibility ay problema sa taas ng funnel na nagbabalatkayong problema ng detail page.

Myth 2: 1600 px kaya siguradong nababasa ang text

Storage ang pixel, hindi sukat. Ang nagtatakda ng readability ay ang rendered size sa pisikal na screen, at mas maliit iyon kaysa sa inaakala ng karamihan sa seller.

Hinihiling ng Mobile Ready Hero Image guidance sa mga retailer na ipakita ang image tile nang humigit-kumulang ganito kalaki:

Device	Rekomendadong rendered tile size	Halos kasinlaki ng
Smartphone	16 x 16 mm	Kuko sa daliri
Tablet	23 x 23 mm	Selyo sa sulat
Desktop o laptop	50 x 50 mm	Maikling gilid ng credit card

Malinaw ang guidance kung bakit hindi na lang nito sinabing "palakihin niyo": ang mas malaking tile ay nakakasagabal sa mabilis na pag-scroll ng listing page, samantalang ang mas maliit na tile ay imposibleng makapaghatid ng kahit anong mensahe nang biswal, kaya babalik ang shopper sa pagbabasa ng product title — mas mabagal at mas magulo kaysa sa pagsipat ng mga larawan.

Kaya nakapako na ang limitasyon. Nagdidisenyo ka para sa 16 mm, gusto mo man o hindi, at ang 1600 px na file na ni-render sa 16 mm ay pinaliit nang mga dalawang order of magnitude bago pa ito mabasa ninuman. Kailangang sukatin ang laki ng text sa product images laban sa rendered tile na iyon, hindi laban sa canvas sa editor mo. Mahalaga rin ang tamang frame — tingnan ang aspect ratio ng product image para makita kung ano ang nangyayari kapag ginupit ng platform ang gilid kung saan nakalagay ang sukat mo.

Myth 3: okay lang ang maliit na text basta malakas ang contrast

Magkahiwalay na paraan ng pagpalpak ang contrast at ang sukat, at hindi nasasagip ng isa ang kabila.

Espesipiko ang mga nailathalang target para sa text sa e-commerce image. Karaniwang dapat lampas 60 ang iskor sa Accessible Perceptual Contrast Algorithm, 45 ang pinakamababang tanggap, at itinuturo ng GS1 hero image guideline ang W3C minimum contrast ratio na 4.5:1 bilang sahig ng accessibility. Kailangan ding gumana ang kombinasyon ng kulay para sa mga shopper na may colour vision deficiency, kaya natatanggal doon ang ilang pares na para sa iyo ay mukhang matinding kontrast.

Kailangan ang contrast. Hindi ito sapat. Ang text na masyadong maliit sa 16 mm ay mananatiling hindi mabasa kahit ano pa ang contrast ratio, dahil angular resolution ang bumagsak, hindi luminance.

Myth 4: mukhang premium ang manipis at eleganteng typeface

Mukha ngang premium sa 100%. Sa 16 mm, sa loob ng isang JPEG, naglalaho ito.

Bihirang ganito kadiretso ang isang standards document pagdating sa typeface:

Pagpipilian	Ang sabi ng guidance
Font weight	Kadalasan ay semi-bold o bold ang pinakamadaling basahin — iwasan ang ultra light at extra bold
Font style	Sans serif tulad ng Open Sans o Arial; iwasan ang dekoratibo, istilisado, o serif na font dahil pangit lumabas sa maliit na larawan, lalo na't .jpg ang karaniwang gamit ng mga retailer
Background sa likod ng text	Panatilihing malinis — iwasan ang gradient ng kulay, iwasan ang text sa ibabaw ng may-pattern na background
Effects	Iwasan ang outline at drop shadow na text effect

Pansinin na kasama rin ang extra bold sa iwasan. Ang sobrang bigat na weight ay pinupuno ang sariling butas kapag pinaliit, at ang 8 na napunan ang butas ay nababasang 0. Sa isang dimension label, hindi iyon problemang pang-ayos lang — maling numero na iyon.

Myth 5: mas maraming callout, mas maraming impormasyon

Maliit ang canvas at nag-aagawan dito ang bawat elemento. Anumang nasa larawan na walang dalang mensaheng kailangan ng buyer ay umaagaw ng espasyo sa mga may dala.

Walang awa ang hero image standard dito. Apat na kritikal na mensahe ang tinutukoy nito, ang "4Ws" — Who (ang brand), What (ang uri ng produkto), Which (ang variant), at HoW much (ang net content) — at kandidato sa pagbura ang lahat ng iba. Mas mahigpit pa ang automated-compliance rules nito: iisang elemento lang ang pinapayagan sa labas ng pack, isang itim na parisukat na size lozenge sa kanang ibabang sulok. Walang lumulutang na text, walang ibang off-pack asset, walang lalampas sa gilid ng pack, puting background. Sinasabi rin nito na hindi dapat ipakita nang sabay-sabay ang iba't ibang anggulo ng parehong produkto, dahil nakakagulo iyon sa mata at nakakalito sa shopper kung ilang piraso ba talaga ang matatanggap niya.

Ilipat mo iyon sa isang spec diagram at nakakailang man ay malinaw ang prayoridad: isang sukat na kayang basahin ng buyer ay mas mabuti kaysa anim na hindi. Ang pagpili kung aling label ang karapat-dapat sa espasyo ang mas mahirap na kalahati ng trabaho — tinatalakay ng mga callout sa product photo kung paano pumili.

Myth 6: hindi mahalaga kung saan mo ilagay ang sukat

Mahalaga, at hindi ito usapin ng ganda.

Inilalagay ng guidance ang off-pack na impormasyon ng sukat sa kanang ibabang sulok, at may dalawang dahilan. Una, konsistensi: kapag pare-pareho ang lugar ng sukat sa lahat ng larawan sa kategorya, alam agad ng shopper kung saan titingin nang hindi naghahanap. Ikalawa, geometry — ang kanang ibaba lang ang posisyong kasya sa parehong portrait at landscape na hugis ng produkto. Ang ibang lugar ay gumagana sa isang oryentasyon at bumabangga sa produkto sa kabila.

Kung nakatlong-usog ka na ng dimension label dahil sumasagi ito sa isang matangkad na SKU, iyon ang panuntunang muli mong natuklasan sa mahirap na paraan.

Ang 16 mm test: 60 segundo lang

Hindi mo kailangan ng research budget para malaman kung pasado ang larawan mo. May dalawang paraan ng pagsusuri.

Ang pisikal na bersyon. I-print ang larawan sa 16 x 16 mm at hawakan ito sa layong 40 cm — normal na distansya ng pagtingin sa telepono. Anumang hindi mo mabasa ay wala talaga doon.

Ang digital na bersyon. Diretsong itinatakda ng GS1 guideline ang simulasyon: lagyan ng Gaussian blur na may radius na 34 pixels ang isang 3000 x 3000 pixel na larawan. Naka-calibrate ang antas ng blur na iyon para katawanin ang panonood sa mobile device na hawak sa layong 40 cm. Suriin ang na-blur na larawan sa monitor mo. Kung hindi mabasa ang isang sukat matapos i-blur, hindi rin iyon mababasa ng malaking bahagi ng tunay na shopper.

May lisensyadong tool na ginawa para dito — ang Clari-Fi, mula sa parehong grupo sa University of Cambridge, sa halagang £263 dagdag VAT para sa single-user licence — at ginagamit ito ng malalaking brand bilang gate, hindi bilang panrepaso. Sinabi ng global e-commerce director ng Unilever noong October 2022 na dapat pumasa sa Clari-Fi check ang bawat bago o na-update na e-commerce image bago ipadala sa mga retailer, at mahigit 30,000 larawan ng produkto na ang pinadaan nila roon sa loob ng tatlong taon. Para sa maliit na seller, patas na kapalit ang manual na blur. Ang mahalaga ay talagang maisagawa ang check bago ilabas ang larawan, hindi pagkatapos dumating ang mga return.

Bihira sa larangang ito na may bilang ang mga kahihinatnan. Ang larawang bumagsak sa AA-level clarity check ay nangangahulugang mahigit 46% ng mga shopper ang hindi makukuha ang kritikal na impormasyon sa loob nito. Sa mismong halimbawa ng guidance, bumagsak ang isang karaniwang pack shot sa "aling variety" at "magkano ang laman," at ang bahagi ng taong malamang mahirapang maunawaan ang mga mensaheng iyon ay nasa saklaw na 52% to 100%.

Iyan ang pako: kung bumagsak ang dimension label mo sa blur test, hindi ka naglathala ng sukat. Naglathala ka ng dekorasyon.

Para sa konteksto kung magkano ang halaga ng sukat na hindi nabasa, ang isang return dahil mali ang sukat ay kumakain ng papalabas na shipping, ng pabalik na shipping, ng inspeksyon, ng muling pag-empake, at kadalasan ng margin sa buong unit — binibigyan ito ng bilang kada unit ng return cost calculator.

Laki ng text sa product images: ano ang nakakaligtas sa tile

Elemento	Paraang nakakaligtas sa 16 mm	Ang pumapatay dito
Mga numero ng sukat	Pinakamalaking text sa larawan; semi-bold na sans serif; isang sistema ng yunit kada larawan	Mga numerong kasinlaki lang ng caption text
Yunit (cm, in, mm)	Kasingbigat ng numero, huwag kailanman superscript	Small-caps o superscript na yunit na nalulusaw sa digit
Dimension line at arrow	Sapat ang kapal ng stroke para makaligtas sa pagpapaliit; solid at mataas ang contrast	Manipis na 1 px na stroke na naglalaho
Leader line papunta sa callout	Maikli, tuwid, walang nagkukrus	Mahaba at manipis na leader sa magulong larawan
Size lozenge	Solidong bloke, kanang ibaba, pare-pareho sa buong linya	Lumulutang na text na walang background
Background sa ilalim ng text	Patag at malinis na bahagi ng larawan	Gradient, pattern, texture ng produkto
Pangalawahing marketing text	Tanggalin, o ilipat sa image 2	Anumang nakikipagkumpitensya sa numerong nagbebenta ng tamang sukat

Dalawang panuntunan ang sumasaklaw sa halos lahat. Ang sukat ang pinakamalaking text sa larawan, o hindi talaga sukat ang punto ng larawan. At bawat elementong hindi kabilang sa kritikal mong mensahe ay nanghihiram ng espasyo sa isang kabilang.

FAQ

Gaano kalaki dapat ang text sa product images?

Sapat na laki para makaligtas sa 16 mm na tile — ang laki ng text sa product images ay resulta ng test, hindi isang nakatakdang pixel value. Dahil nakadepende ang rendered size sa pixel dimension ng larawan at sa density ng screen, maling sagot ang iisang "gamitin mo ang 48 px" sa kalahati ng mga device. Ilagay ang text, i-blur ang export sa naka-calibrate na antas, at palakihin hanggang manatiling mabasa ang kritikal na mga numero.

Mag-zoom ba ang buyer para basahin ang sukat?

May iba, pagkatapos mag-click. Ang problema, sa search grid napagdedesisyunan ang click, bago pa may zoom, kaya ang text na gumagana lang kapag naka-zoom ay walang naiaambag sa kung pipiliin ka ba ng shopper.

Anong contrast ang kailangan ko para sa text sa product image?

Layunin ang APCA na lampas 60, ituring ang 45 bilang sahig, at panatilihin ang klasikong 4.5:1 na contrast ratio bilang baseline ng accessibility. Suriin din ang pares laban sa colour vision deficiency — ang pulang numero sa berdeng background ay puwedeng pumasa sa ratio at hindi pa rin makita ng malaking bahagi ng shopper.

Puwede bang ilagay ang sukat sa sulok ng larawan?

Oo, at ang kanang ibabang sulok ang rekomendadong posisyon. Iyon lang ang sulok na gumagana sa parehong portrait at landscape na produkto, at kapag pare-pareho ang lugar nito sa bawat larawan, mahahanap ito ng shopper nang hindi naghahalungkat.

Bumagsak ang spec diagram ko sa blur test — ano ang pinakamabilis na ayos?

Huwag mag-reshoot. Kadalasan ayos naman ang litrato; ang annotation layer ang problema. Ang mabilis na daan ay panatilihin ang mga sukat bilang buhay at nae-edit na layer na nakakabit sa nasukat na gilid ng produkto, sa halip na na-flatten na sa JPEG, para mapalaki mo ang letra, mapakapal ang linya, matanggal ang dekoratibong label, at mai-export muli ayon sa image spec ng bawat platform sa isang hakbang lang. Ang kakayahang iyon — pagsukat laban sa tunay na geometry at pag-export muli kapag kailangan — ang naghihiwalay sa annotation software mula sa photo editor, at mula sa image generator na naglalabas ng numerong mukhang tiyak pero hindi naman nito sinukat. Kung pumipili ka pa ng paraan, pinaghahambing ng listahan ng mga tool para maglagay ng sukat sa product photo ang mga ito nang eksakto sa puntong iyon.