Bana picha _

Jinsi ubanaji wa picha unaotegemea kivinjari unavyofanya kazi

Kila upitio wa ubanaji unaendesha kabisa katika JavaScript. Hakuna maktaba ya codec inayopakuliwa na hakuna seva inayohusika. Canvas API ya kivinjari yenyewe husimbua picha, huisimba upya kwa ubora wa chini, na hukupa Blob ambayo ukurasa unaweza kuonyesha, kupakua, au kufunga kwenye zip. Kwa sababu kila hatua inakaa ndani ya sanduku la kichupo, faili asili haziwahi kugusa mtandao.

1. Soma kila faili iliyopakiwa kama Blob na utengeneze URL ya kitu ili kivinjari kisimbue ndani ya kompyuta, bila kunakili baiti kwenye seva au kuzihifadhi kwenye diski.
2. Chora picha iliyosimbuliwa kwenye kipengele cha Canvas kisichoonekana kwa vipimo vyake vya asili vya pikseli, tayari kwa kusimba upya.
3. Ita canvas.toBlob(callback, mimeType, quality) kusimba upya pikseli. Katika hali ya ubora, thamani ya kitelezi huonganika moja kwa moja kwenye mpangilio wa quantization wa encoder; katika hali ya ukubwa lengwa, ukurasa hugawanya thamani ya ubora vipande viwili hadi blob ya matokeo ifae chini ya bajeti yako ya baiti.
4. Onyesha usomaji wa kabla/baada na ukubwa wa asili, ukubwa uliobanwa, na asilimia ya akiba, kisha toa upakuaji kwa kila picha au ZIP moja kwa kundi lote. ZIP inajengwa kwenye kumbukumbu ukitumia fflate, maktaba ya KB 8 inayopakiwa wakati wa matumizi ya kwanza.

Kwa nini kubana picha?

• Picha ndogo hupakia haraka zaidi. Kupunguza picha ya kishujaa ya MB 4 hadi KB 600 huboresha Largest Contentful Paint moja kwa moja, ambayo ni moja ya Core Web Vitals ambayo Google hutumia kwa kupanga. Kwenye ukurasa wenye picha kadhaa, akiba hujikusanya kuwa uchoraji wa kwanza wa haraka zaidi.
• Kisha kuna vikomo vya kupakia. Majukwaa mengi ya CMS, zana za tikiti, na mifumo ya barua pepe hukataa chochote zaidi ya MB 1 au 2, na upitio wa haraka wa ubanaji huleta picha chini ya kikomo bila wewe kufungua kihariri kamili.
• Upana wa bendi na hifadhi hugharimu pesa kwa kiwango kikubwa. Kutuma WebP kwa ubora wa 0.8 badala ya PNG ya ukubwa kamili kunaweza kupunguza mzigo wa picha kwa theluthi moja au zaidi, ambayo hupunguza bili za egress za CDN na matumizi ya data ya simu kwa wageni wako.
• Baadhi ya picha hazipaswi kupakiwa kabisa. Kwa sababu kila kitu hapa kinaendesha kwenye kivinjari chako, uchanganuzi wa vitambulisho, picha za matibabu, na picha za skrini za ndani hubaki kwenye kifaa chako. Hakuna seva ya wahusika wengine kama TinyPNG kwenye mzunguko ya kuwa na wasiwasi nayo.

Matumizi ya kawaida

Ubanaji hutokea kila wakati picha ni kubwa kuliko mahali inapoenda. Mifumo mitatu tunaona mara kwa mara.

• Kuandaa picha za bidhaa kwa duka la mtandaoni. Asili za JPEG hubanwa hadi ubora wa 0.8 (au lengo la KB 200) ili duka libaki haraka na lipite Core Web Vitals kwenye simu.
• Kupunguza picha za skrini kabla ya kuziambatanisha kwenye kifuatilia hitilafu au wiki. Kundi la picha za PNG zilizobadilishwa kuwa JPEG kwa ubora wa 0.85 mara nyingi hushuka kutoka megabaiti kadhaa hadi mbili.
• Kuleta picha chini ya kikomo cha kupakia — lango la maombi ya kazi linalokataa faili zaidi ya MB 1, mfumo wa barua pepe wenye kikomo kikali cha kiambatisho, au avatar ya jukwaa inayopaswa kufaa bajeti ya baiti.

Mfano uliofanyiwa kazi: JPEG ya MB 4 hadi KB 400

JPEG ya MB 4 moja kwa moja kutoka kamera ya simu ni mzigo wa kawaida unaopita vikomo vya kupakia na kupunguza kasi ya kurasa. Ni kipimo kizuri cha kile ubanaji huokoa.

Tupa JPEG kwenye eneo la upakiaji, acha muundo kwenye JPEG, na ama vuta kitelezi cha ubora chini hadi 0.7 au badilisha kwenda hali ya ukubwa lengwa na uandike 400 KB. Katika hali ya ubora, pipeline ya Canvas husimba upya mara moja na huonyesha matokeo, kwa kawaida karibu KB 500 hadi 700 kutegemea picha. Katika hali ya ukubwa lengwa, ukurasa hujaribu thamani chache za ubora, hukaa kwenye ya juu zaidi inayofaa bado chini ya KB 400, na huripoti asilimia ya akiba. Bonyeza Pakua kwenye kadi kupata faili moja, au bonyeza Pakua .zip ikiwa umebana picha kadhaa kwa pamoja. Mzunguko wote unaendesha kwa chini sana ya sekunde moja kwa picha ya ukubwa huu na hutumia upana wa bendi sifuri baada ya ukurasa wenyewe kumaliza kupakia.

Tofauti kati ya hali ya ubora na hali ya ukubwa lengwa ni ipi?

Hali ya ubora hukupa kitelezi kimoja kutoka 0.1 hadi 1.0 kinachoonganika kwenye mpangilio wa quantization wa encoder ya JPEG au WebP — namba ndogo zaidi humaanisha faili ndogo zaidi na artifacts zinazoonekana zaidi. Hali ya ukubwa lengwa hupindua tatizo: unataja ukubwa kwa kilobaiti na ukurasa hugawanya thamani ya ubora vipande viwili, ukisimba mara chache hadi upate ubora wa juu zaidi unaofaa bado chini ya bajeti yako. Hali ya ukubwa lengwa ni rahisi wakati kikomo kigumu kinajali (kikomo cha kupakia cha MB 1, tuseme); hali ya ubora ni ya haraka zaidi na bora wakati unataka tu matokeo ya kuona yanayotabirika. PNG haina hasara, kwa hivyo hakuna hali inayoitumika.

Je, hii inafanyika kwenye kifaa changu?

Ndio, kabisa. Ukurasa hutumia Canvas API asili ya kivinjari na Web File API kusimbua na kusimba upya kila picha kwenye kumbukumbu. Hakuna data ya picha inayotumwa kwa seva, hakuna upakiaji wa muda, hakuna safari ya pande zote ya wingu. Unaweza kuithibitisha mwenyewe: fungua DevTools, nenda kwenye paneli ya Mtandao, na endesha ubanaji. Maombi pekee ya kutoka nje utakayoyaona ni upakiaji wa kwanza wa ukurasa na wito wa matangazo. Hakuna kitu chenye sura ya picha kinachotoka kwenye kichupo.

Kwa nini kubana PNG wakati mwingine hupunguza kidogo tu?

PNG ni muundo bila hasara, kwa hivyo Canvas API haiwezi kutupa maelezo ili kuifanya ndogo — inaweza tu kupanga upya pikseli zilezile. Kwa picha za kupiga, PNG tayari ni kubwa na kusimba upya bila hasara huokoa kidogo. Faida halisi hutoka kwa kubadilisha muundo wa matokeo kuwa JPEG au WebP, ambazo hutumia ubanaji wenye hasara unaofaa picha na mara kwa mara hushuka mara 4 hadi 10 ndogo. Hifadhi PNG tu wakati unahitaji ubora bila hasara au uwazi; vinginevyo chagua JPEG kwa picha au WebP kwa usawa bora wa ukubwa-kwa-ubora.

Nichague muundo gani?

Kwa picha za kupiga, WebP kwa ubora wa 0.8 hutoa usawa bora wa ukubwa-kwa-ubora na inasaidiwa na kila kivinjari kilichotumwa tangu 2021; JPEG ni mbadala salama wa ulimwengu wote wakati marudio ni ya zamani au makali zaidi. Chagua PNG tu wakati unahitaji ubora bila hasara au chaneli ya alpha — sanaa ya mistari, picha za skrini za UI, nembo zenye uwazi. Ikiwa unaboresha kwa kasi ya ukurasa na hadhira yako hutumia vivinjari vya kisasa, WebP karibu kila wakati ni chaguo sahihi; ikiwa unalisha CMS ya zamani au pipeline ya uchapishaji inayokataa WebP, baki na JPEG.

Tupa picha zako, chagua kiwango cha ubora au ukubwa lengwa, bana. Kila kitu kinaendesha kwenye kichupo chako. Hakuna kupakia, hakuna akaunti, hakuna kusubiri foleni ya seva.