Badilisha ukubwa wa picha _

Jinsi kubadilisha ukubwa wa picha unaotegemea kivinjari unavyofanya kazi

Kila kubadilisha ukubwa ni pipeline fupi inayofanya kazi kabisa katika JavaScript. Hakuna maktaba ya codec inayopakuliwa na hakuna seva inayohusika. Canvas API ya kivinjari yenyewe husimbua faili, huichora upya kwa ukubwa unaolengwa, na huisimba upya kwenye kumbukumbu, kisha hukupa Blob ambayo ukurasa unaweza kuonyesha katika hakiki au kufunga kwenye zip. Kwa sababu kila hatua iko ndani ya sanduku la kichupo, faili asili hazifikii 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. Buni vipimo vya lengo kutoka hali uliyochagua — kikomo cha upande mrefu zaidi, upana na urefu halisi, au kiwango cha asilimia. Kufunga uwiano wa kipengele huhifadhi uwiano unaposahihisha sehemu moja.
3. Tengeneza Canvas nje ya skrini kwa ukubwa unaolengwa na uita ctx.drawImage(source, 0, 0, width, height) kuchora upya pikseli zilizosimbuliwa. Kivinjari hushughulikia interpolation inayosawazisha matokeo yaliyopimwa.
4. Ita canvas.toBlob kusimba upya kwa muundo wa chanzo. PNG inabaki bila hasara, JPEG na WebP husimbwa upya kwa ubora wa juu. Kisha ukurasa huonyesha kadi ya kabla/baada na kutoa upakuaji wa picha moja au ZIP moja iliyojengwa kwenye kumbukumbu kwa fflate.

Kwa nini kubadilisha ukubwa wa picha?

• Picha zilizo na saizi kubwa kupita kiasi ndizo sababu ya kawaida zaidi ya kurasa polepole. Picha ya simu ya 4000×3000 iliyowekwa moja kwa moja katika mpangilio wa pikseli 600 ina pikseli takriban mara 40 zaidi ya unavyohitajika na skrini. Kuweka kikomo cha upande mrefu zaidi hadi pikseli 1600 kabla ya kupakia hupunguza sana uzito wa ukurasa na kuboresha LCP ya Core Web Vitals.
• Fomu za kupakia zina mahitaji madhubuti ya vipimo. Nafasi za avatar, portali za vitambulisho, orodha za soko, na kadi za OG zote zinataka saizi maalum za pikseli: 1200×630 kwa hakiki ya Open Graph, 512×512 kwa ikoni ya programu, 150×150 kwa picha ndogo. Kupiga nambari hiyo kwa usahihi huepuka mzunguko wa kupakia kulikokataliwa.
• Zana za barua pepe na mazungumzo husimba upya chochote kikubwa kimya kimya, ambacho kinaweza kuharibu picha ndogo safi. Kubadilisha ukubwa mwenyewe huhifadhi matokeo yanayotarajiwa badala ya kuacha kwa pipeline ya mtu mwingine yenye hasara.
• Usawa wa kundi ni muhimu kwa matunzio na orodha. Kuendesha folda ya picha za saizi tofauti kupitia lengo moja la 800×800 inamaanisha kila kadi imepangwa kwenye gridi, bila picha moja kubwa inayovunja mpangilio.

Matumizi ya kawaida

Kubadilisha ukubwa hutokea kila wakati vipimo vya chanzo na matarajio ya marudio havifanani. Mifumo mitatu huonekana mara kwa mara.

• Kuandaa picha za bidhaa kwa duka la Shopify au WooCommerce. Folda ya asili za kamera za pikseli 4000 hupunguzwa hadi upande mrefu wa pikseli 1600 ili duka lifunguke haraka, huku uwiano wa kipengele ukibaki usioathiriwa ili kitu kisionekane kinyooshwa.
• Kutoa nyenzo za kijamii na programu kutoka faili moja kuu. Weka 1200×630 halisi kwa kadi ya Open Graph, kisha 512×512 kwa ikoni ya programu, ukisafirisha kila moja kwa mibofyo michache bila kufungua kihariri kizito.
• Kupunguza kundi la picha za skrini za QA au usaidizi kabla ya kuziambatanisha kwenye tikiti. Kupima folda ya picha 50 hadi 50% kwa kawaida hupunguza ukubwa wa hifadhi kwa takriban robo tatu kabla hazijakwenda kwenye kifuatilia hitilafu.

Mfano uliofanyiwa kazi: picha ya pikseli 4000 hadi picha ya wavuti ya pikseli 1600

Picha ya 4000×3000 moja kwa moja kutoka simu ni mzigo wa kawaida ambao ni mkubwa zaidi kuliko inavyohitajika na mpangilio wowote wa wavuti. Ni kipimo kizuri cha kile kubadilisha ukubwa huokoa.

Tupa picha kwenye eneo la kupakia, acha hali kwenye Punguza upande mrefu zaidi, na uweke thamani kwenye 1600. Pipeline ya Canvas huchora picha upya kwa 1600×1200 ukiwa na uwiano uhifadhiwa, kisha huisimba upya katika muundo wa asili. Kadi ya matokeo inaonyesha vipimo vipya na ukubwa wa faili, ambayo kwa JPEG ya kawaida hushuka kutoka megabaiti chache hadi mamia ya kilobaiti. Bonyeza Pakua kwenye kadi kupata faili moja, au bonyeza Pakua .zip ukibadilisha picha kadhaa kwa upitio mmoja. Mzunguko wote, kutoka tupa hadi pakua, unafanya kazi katika sehemu ya sekunde na hutumia upana wa bendi sifuri baada ya ukurasa wenyewe kupakia.

Hali gani za kubadilisha ukubwa zinapatikana?

Tatu. Punguza upande mrefu zaidi hufunga upande mrefu zaidi wa upana au urefu hadi thamani ya pikseli na kupima upande mwingine kulingana, ambayo ni chaguo salama la kawaida kwa sababu haizuii kamwe. Upana × urefu halisi hukuruhusu kuandika nambari zote mbili, ukiwa na kufunga uwiano wa kipengele kinachobuni upya sehemu ya pili kutoka uwiano wa chanzo unapobadilisha ya kwanza — zima kufunga wakati fomu inahitaji ukubwa halisi usio na uwiano. Kiwango kwa asilimia huzidisha vipimo vyote viwili kwa kipengele kimoja, rahisi kwa kukata nusu au kuongeza mara mbili kundi lote mara moja. Preseti sita za kubofya moja (kutoka 1920×1080 hadi picha ndogo ya 150×150) zinashughulikia malengo ya kawaida zaidi.

Je, hii inafanyika kwenye kifaa changu?

Ndio, kabisa. Ukurasa hutumia Canvas API asili ya kivinjari na Web File API kusimbua, kuchora upya, 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: fungua DevTools, nenda kwenye paneli ya Mtandao, na endesha kubadilisha ukubwa. 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, ambacho ndiyo kinachofanya hii kuwa salama kwa skani za vitambulisho, picha za kimatibabu, na nyenzo nyingine ambazo kamwe husingependa kupakia.

Je, kubadilisha ukubwa kutapunguza ubora?

Kupunguza picha (downscaling) kunaonekana vizuri sana — kivinjari hupiga wastani wa pikseli za chanzo kuwa pikseli chache, kwa hivyo maelezo yanabaki wazi na faili inakuwa ndogo sana. Kuongeza zaidi ya azimio la chanzo (upscaling) haiwezi kuvumbua maelezo ambayo hayakupigwa kamwe, kwa hivyo picha ndogo iliyopandishwa itaonekana laini; hiyo ni mipaka ya kila kibadilishi cha ukubwa, si hii maalum. Matokeo huhifadhi muundo wa chanzo: PNG inabaki bila hasara, wakati JPEG na WebP husimbwa upya kwa mipangilio ya ubora wa juu ili tofauti inayoonekana na asili iwe ngumu kuona.

Muundo gani wa faili unasaidiwa?

Upande wa ingizo, muundo wowote ambao kivinjari kinaweza kusimbua unakubaliwa: PNG, JPEG, WebP, GIF, na BMP hushughulikia karibu kila faili ambayo simu, kamera, au zana ya picha ndogo huzalisha. Matokeo huhifadhi muundo wa chanzo mahali ambapo encoder ya Canvas inaunga mkono — PNG, JPEG, na WebP hupita moja kwa moja. GIF na BMP, ambazo Canvas API inaweza kusimbua lakini haiwezi kuisimba upya, huhifadhiwa kama PNG bila hasara badala yake. Jina la faili lililowekwa ukubwa linajumuisha vipimo vipya (kwa mfano, photo-1600x1200.jpg) ili kundi liwe rahisi kupanga.

Tupa picha zako, chagua ukubwa, badilisha. Kila kitu kinaendesha kwenye kichupo chako. Hakuna kupakia, hakuna akaunti, hakuna kusubiri foleni ya seva.