Malabo ang Larawan ng Produkto Pagkatapos I-upload: Saan Napupunta ang mga Pixel

Halos hindi kailanman problema sa camera ang malabo ang larawan ng produkto pagkatapos i-upload. Malinaw ang file na umalis sa desktop mo. Pero hindi iyon ang file na aktwal na na-download ng phone ng buyer — na-resample, na-re-encode, na-cap at na-serve ulit iyon, kadalasan apat o limang beses, ng mga sistemang naka-tune para sa bilis ng page at hindi para sa mga dimension callout mo.

Walang sinumang sadyang nag-a-upload ng malabong larawan. Hindi nawawala ang linaw sa mismong pag-upload; nauubos ito, isang yugto sa bawat pagkakataon, at karamihan sa mga yugtong iyon ay hindi nakikita mula sa seller dashboard. Narito ang buong pipeline sa isang table, tapos kung ano ang gagawin sa tatlong yugtong pinakamalaki ang kinakain.

Malabo ang larawan ng produkto pagkatapos i-upload: ang walong yugto, sunod-sunod

#	Yugto	Ano ang ginagawa nito sa file mo	Ano ang nawawala	Kontrolado mo ba?
1	Pagkuha ng shot	Galaw, sablay na focus, diffraction sa napakaliliit na aperture	Tunay na detalye, hindi na mababawi	Oo
2	Resample sa pag-export	Pagpapaliit sa target na pixel size nang walang output sharpening	Micro-contrast sa mga gilid, arrowhead at maliliit na text	Oo
3	JPEG encode mo	Ang quality setting at chroma subsampling ay nagtatapon ng detalye ng kulay	Manipis na may-kulay na linya, pula at asul na callout text	Oo
4	Ingest ng platform	Dini-decode ng marketplace ang JPEG mo at ini-encode ulit sa sarili nitong settings	Generation loss, ringing halo sa matatalim na gilid	Hindi
5	Pixel ceiling	Sarili nitong maximum na pinakamahabang gilid ang iniimbak ng platform	Lahat ng lampas sa cap, permanente	Sa pagpili lang ng tamang export size
6	Mga derivative size	Thumbnail-size na kopya ang hinihingi ng page, hindi ang master mo	Detalyeng katumbas ng ratio ng pagpapaliit	Bahagya, sa pamamagitan ng slot na tinatarget mo
7	Device pixel ratio	Tatlong image pixel kada isang CSS pixel ang gusto ng 3x na screen ng phone	Dalawang-katlo ng nakikitang linaw sa mga siksik na screen	Bahagya
8	Paghahatid	Lazy-load placeholder, theme settings, fallback sa mabagal na network	Pansamantala o tuloy-tuloy na labo sa unang paglabas	Bahagya

Sa iyo ang Yugto 1 at 2. Sa platform ang Yugto 4 at 5, at hindi iyon negotiable. Sa praktika, karamihan sa mga reklamong malabo ang larawan ng produkto pagkatapos i-upload ay bumabalik sa yugto 3, 4 at 7 — ang encode, ang re-encode, at ang screen — kaya nga rin bihirang may naaayos ang pag-shoot ulit.

Yugto 3: ang chroma subsampling ang dahilan kung bakit unang namamatay ang pulang arrow ng sukat

Ang chroma subsampling ay shortcut sa JPEG encoding na iniimbak ang liwanag sa buong resolusyon pero ang kulay sa maliit na bahagi lang nito — sa karaniwang 4:2:0 mode, isang color sample kada 2x2 na bloke ng pixel. Nakakaligtas ang detalye ng liwanag; nababawasan na sa isang-kapat ang detalye ng kulay bago pa man umalis ang file sa makina mo.

Makatuwirang palitan iyon para sa litrato ng sofa. Napakasamang palitan iyon para sa isang-pixel na pulang arrow na nakaguhit sa kulay-abong panel, dahil ang katamtamang pula sa katamtamang kulay-abo ay halos walang pagkakaiba sa liwanag laban sa background nito. Halos lahat ng kitang-kita rito ay dala ng hue — mismong channel na unang itinatapon ng encoder. Hindi nawawala ang linya; kumakalat ito bilang malambot na pink na pasa na mga dalawang pixel ang lapad, at nawawalan ng tulis ang arrowhead.

Hindi mas mataas na quality slider ang solusyon. Ang solusyon ay gawing panalo ang mga callout sa liwanag, hindi sa kulay:

Madilim na linya sa maliwanag na background, o maliwanag na linya sa madilim. Contrast sa luminance, hindi sa hue.
Bigyan ang linya ng manipis at kontrastadong outline o halo para makaligtas ang gilid sa 2x2 na pag-average ng kulay.
Panatilihing hindi bababa sa 2 px ang kapal ng dimension text sa ihahatid na sukat, hindi sa sukat ng master.
Iwasan ang saturated na pula o asul na text nang diretso sa mid-tone na produkto. Iyon ang dalawang hue na unang nasisira.

Yugto 4: ang re-encode na walang nakakakita

Dini-decode ng bawat marketplace ang ini-upload mo at sumusulat ito ng sarili nitong kopya. Lossy ang JPEG, kaya hindi lang inuulit ng pangalawang encode ang mga mali ng una — kina-quantize nito ang larawang may compression artifact na, at ang mga artifact na iyon ay itinuturing na detalyeng dapat pang ingatan. Ang nakikitang resulta ay ringing: mahihinang halo na yumayakap sa bawat matalim na gilid, pinaka-halata sa itim na text sa puti at sa tuwid na linya ng isang spec diagram.

Hindi mo iyon mapapatay. Ang kaya mong gawin ay itigil ang pagpapakain dito ng sirang input:

Mag-ingat ng lossless master (PNG, TIFF o ang orihinal na layered file). Huwag na huwag i-edit ang na-export na JPEG at i-save ulit.
Mag-export nang isang beses, mula sa master, sa pinal na pixel size. Bawat pansamantalang JPEG save ay isang henerasyong binabayaran mo.
Huwag mag-pre-compress para abutin ang isang file size target na inaasikaso na mismo ng ceiling ng platform.

Ang tuntuning lumalabas mula sa yugto 3 at 4: mas mahalaga ang bilang ng beses na na-JPEG-encode ang isang listing image kaysa sa quality slider ng kahit anong iisang encode.

Yugto 5: ang pixel floor na nagpapanatiling buhay ang zoom

Ang zoom ang feature na ginagamit ng mga buyer para tingnan kung nababasa ang isang spec, at ini-gate ito ng bawat platform sa likod ng isang pixel threshold. Kung hindi mo naabot ang threshold, hindi malabo ang larawan — wala lang talagang high-resolution na bersyon na maii-serve.

Platform	Pinakamababang tinatanggap	Threshold ng zoom	Ceiling
Amazon	500 px sa pinakamahabang gilid	Minimum na 1,000 px; 1,600 px pataas para sa pinakamahusay na zoom	10,000 px na pinakamahabang gilid
eBay	500 px sa pinakamahabang gilid	1,600 px sa pinakamahabang gilid	12 MB kada litrato
Shopify	Walang nakalathalang floor	Mas malaki sa 800 x 800 px para gumana ang zoom	5,000 x 5,000 px, hanggang 20 MB; 2,048 x 2,048 px ang rekomendado para sa square

Dalawang bagay ang sumusunod. Una, ang pag-upload ng pisikal na mas malaking file ay hindi nagdadagdag ng resolusyong hindi naman nakuha — iyan din ang kalituhang nasa likod ng debateng 300 DPI vs 72 DPI, kung saan ang isang numerong nakatago sa file header ay napagkakamalang detalye ng larawan. Pangalawa, ang pag-export sa ceiling ng platform ay kadalasang libre at palaging mas ligtas kaysa sa pag-export sa sukat na nagkataong ipinapakita ng theme mo ngayon.

Yugto 7: ang 2x na buwis sa mga siksik na screen

Ang device pixel ratio ay ang bilang ng pisikal na pixel ng screen na ginagamit ng browser para sa isang CSS pixel. Karaniwang nag-uulat ng 2 o 3 ang mga modernong phone. Ang 1,000-pixel na larawang inilagay sa 500-CSS-pixel na slot ay mukhang malinaw sa lumang laptop pero halatang malabo sa phone, dahil 1,500 pixel ang hiningi ng phone at 1,000 lang ang natanggap.

Ito ang pinakakaraniwang dahilan kung bakit sinasabi ng isang seller na "maayos naman ito sa monitor ko." Malamang tama siya. Mas kaunting pixel ang hiningi ng monitor mo kaysa sa hiningi ng phone ng buyer mo. Tingnan ang bawat listing image sa phone, sa 100%, bago mo sabihing okay na ang file.

Nadadagdagan pa iyon ng cropping. Kung iba ang hugis ng display slot ng platform sa hugis ng export mo, puwedeng maputol ang malinaw na bahagi ng larawan bago pa ito ma-scale — ibang klaseng pagkabigo na pareho ang dating sa mata. Hiwalay na desisyon iyon, at tinalakay sa aspect ratio ng larawan ng produkto.

Ano ang babaguhin, ayon sa laki ng bunga

Mag-export sa ceiling ng platform, isang beses, mula sa lossless master. Pinakamalaking iisang panalo, at walang gastos.
Ayusin ang contrast ng callout bago galawin ang quality slider. Panalo ang luminance laban sa hue sa bawat encode.
Mag-sharpen pagkatapos mag-resize, hindi bago. Ang pag-sharpen ng 6,000 px na master tapos pagpapaliit nito ay nagtatapon ng sharpening at nagdadagdag pa ng halo.
Itigil ang paulit-ulit na pag-save ng JPEG. Isang export kada ihahatid na sukat, mula sa master.
I-verify sa phone. Hindi sa desktop preview, at hindi sa upload dialog.

May panlimang palanca na nakaupo sa itaas ng lahat ng ito: kung paano unang ginawa ang callout. Ang mga dimension line at spec text na iginuhit bilang geometry at inilabas nang isang beses sa ihahatid na pixel size ay nananatiling malinaw kahit dumaan sa re-encode ng platform, dahil matatalim ang gilid ng mga ito, mataas ang luminance contrast, at nairender sa native na resolusyon. Ang parehong mga numero, kapag tina-type sa isang photo editor habang naka-zoom in tapos pinaliit, ay dumarating nang malabo bago pa magsimula ang compression. Ang mga tool na nagsi-snap ng sukat sa tunay na gilid ng produkto at nag-e-export ng naka-annotate na larawan sa sukat ng spec diagram ng bawat platform ay nilalaktawan ang yugto 2 at 3 nang tuluyan — at dahil sinukat ang geometry sa halip na ginawa-gawa, ang numero sa arrow ay ang numero sa tape measure, hindi isang mukhang kapani-paniwalang pigurang inimbento ng isang image model. Kung tinitimbang mo ang mga paraan, ang maikling listahan ng mga tool para maglagay ng sukat sa larawan ng produkto ay matinong panimula.

Ang 60-segundong diagnosis

Gawin ito bago ka mag-shoot ulit ng kahit ano. Pinaghihiwalay nito ang tatlong sanhi ng malabo ang larawan ng produkto pagkatapos i-upload — kulang na pixel, sobrang dami ng encode, sobrang siksik na screen — sa loob ng humigit-kumulang isang minuto:

Buksan ang live na listing sa phone at mag-pinch to zoom. Gumagana ba talaga ang zoom? Kung hindi, nasa ilalim ka ng zoom threshold ng platform — problema ito sa bilang ng pixel, hindi sa linaw.
I-right-click ang live na larawan at buksan ito sa bagong tab. Ihambing ang pixel dimensions nito sa in-upload mo. Ang mas maliit na numero ay ibig sabihing na-cap o na-re-derive ito ng platform.
Tingnan ang matalim na itim-sa-puting gilid sa 200%. Ang mahihinang maliliwanag na halo sa magkabilang gilid ay re-encoding, hindi sablay na focus.
Tingnan ang may-kulay na callout line sa 200%. Kung kumalat ito pagilid pero malinis ang itim na text sa tabi, chroma subsampling iyon.
Suriin ang file na in-upload mo. Kung nabuksan at na-save ulit ito bilang JPEG kahit minsan, ulitin ang export mula sa master.
Ihambing ang pinakamahabang gilid ng master sa ceiling ng platform. Kung malayo pa ito sa ilalim, mag-export ulit nang mas malaki.

Kung pumasa ang lahat ng anim at malabo pa rin ang larawan, saka lang ito problema sa pagkuha ng shot — at sa puntong iyon, ang shoot ang aayusin, hindi ang export. Sariling disiplina ang pag-set up ng shot na nananatiling masusukat, at tinalakay iyon sa paano kunan ng litrato ang produkto para sa pagsukat.

Mga madalas itanong

Bakit malabo ang larawan ng produkto ko pagkatapos i-upload sa Shopify pero malinaw sa desktop?

Dahil master ang ipinapakita ng desktop mo at derivative ang ipinapakita ng storefront. Awtomatikong binabago ng Shopify ang laki ng mga larawan para kasya sa mas maliliit na screen, kaya kadalasan ay na-scale na kopya ang nakukuha ng buyer, hindi ang file mo. Tumatanggap ang Shopify ng larawan hanggang 5,000 x 5,000 px at 20 MB, nirerekomenda ang 2,048 x 2,048 px para sa square na larawan ng produkto, at kailangan nito ng larawang mas malaki sa 800 x 800 px para gumana man lang ang zoom; kung malayo sa ilalim niyan ang upload mo, kulang na ang detalyeng pinagsisimulan ng bawat derivative.

Nagiging mas malinaw ba ang larawan kapag mas malaking file ang ini-upload?

Hanggang sa resolusyong aktwal mong nakuha lang. Nakakatulong ang dagdag na pixel kapag ginugutom ng zoom threshold ng platform o ng mga derivative size nito ang display — halimbawa, ang paglipat mula 800 px patungong 1,600 px sa Amazon o eBay ay nagbubukas ng zoom. Ang pag-upscale ng 900 px na litrato patungong 3,000 px ay nagdadagdag ng laki ng file at walang detalye, at madalas pa itong nagdadagdag ng nakikitang labo mula sa interpolation.

Bakit mukhang maayos ang dimension text ko sa main image pero lusaw sa gallery thumbnail?

Hiwalay na derivative ang thumbnail, ginawa sa pamamagitan ng pagpapaliit. Ang text na 14 px ang taas sa 1,600 px na master ay mga 4 px na lang sa 450 px na thumbnail, at nasa ilalim na iyon ng sukat kung saan nakakaligtas ang hugis ng letra sa kahit anong resampling. Sukatin ang callout text laban sa pinakamaliit na slot kung saan ito lalabas, hindi laban sa master.

Dapat ba akong mag-upload ng PNG sa halip na JPEG para sa mga spec diagram?

Kung pinapayagan ng platform, oo para sa mga larawang halos puro patag na kulay, matalim na linya at text, dahil lossless ang PNG at hindi ito tinatablan ng chroma subsampling. Ang problema, karamihan sa mga marketplace ay nagre-re-encode pa rin patungong JPEG sa ingest, kaya pinoprotektahan ng PNG ang yugto 2 at 3 pero hindi ang yugto 4. Sulit pa rin itong gawin: mas nakakaligtas ang malinis na input sa isang re-encode kaysa sa input na sira na.

Bakit mas pangit ang mga larawan ko sa mobile data kaysa sa wi-fi?

May mga browser at network na nagpapalit ng mas mababang kalidad na bersyon sa limitadong koneksyon, at maraming storefront ang nagpapakita ng maliit at malabong placeholder habang naglo-load ang tunay na file. Kung lumilinaw ito pagkaraan ng isang segundo, placeholder iyon at walang dapat ayusin. Kung nananatiling malabo, balikan ang yugto 5 hanggang 7.