Juyar da tsarukan hoto _

Yadda juyar da hoto da ke gefen mai binciken ke aiki

Kowane juyi wani bututun matakai huɗu ne da ke gudana a cikin burauzar ka. Ga JPEG da PNG Canvas API na burauzar kanta tana gudanar da ɓoye kai tsaye. Ga WebP akan Safari da AVIF akan kowane burauza, shafin yana loda wani ɗan ƙaramin WebAssembly codec kan buƙata — duk a gida, hotunanka ba sa barin na'urar.

1. Karanta kowane fayil da aka loda a matsayin Blob kuma ƙirƙiri object URL don mai binciken ya iya buɗe ɓoyewa gida, ba tare da kwafa bytes zuwa uwar garken ko ajiye su zuwa faifai ba.
2. Zana hoton da aka buɗe ɓoye akan element na Canvas marasa allon, ana amfani da duk iyakar canza girma yayin kiyaye ratio na asali na daidaituwa. Idan ka zaɓi yawan fadi ko girman maksimum, nan ne raguwar take faruwa.
3. Kira canvas.toBlob(callback, targetMimeType, quality) don sake ɓoye pixels don PNG, JPEG, da Chrome/Firefox WebP. Ga Safari WebP da ɓoye AVIF, wani ma'aikacin codec na WebAssembly yana loda a farkon amfani kuma yana gudanar da ɓoye a cikin wani zaren baya. Fitowar PNG koyaushe mara asara; JPEG, WebP da AVIF suna bin ma'aunin inganci, wanda yake kai tsaye zuwa saitin ƙididdige ƙididdiga na mai ɓoye.
4. Nuna thumbnail kafin/bayan da girman fitowar da girman fayil, sannan ba da maɓallin sauke a kowace hoto ko ZIP guda ɗaya don duk batch. Ana gina ZIP a cikin ƙwaƙwalwa ta amfani da fflate, ɗakin laburare na KB 8 wanda ke aiki gaba ɗaya a tab.

Me ya sa juyar da tsarukan hoto?

• Canza daga PNG zuwa WebP yana yanke girman fayil yau da kullun da kashi 25 zuwa 35% ba tare da asarar inganci mai ganuwa ba a inganci 0.8, wanda ke rage nauyin shafi kai tsaye da inganta maki na LCP na Core Web Vitals. A shafi yau da kullun na bayani na kayan aiki tare da hotuna guda takwas na jaruntaka, haka ne bambancin tsakanin zane na farko na MB 4 da na MB 2.6.
• PNG yana kiyaye gaskiya inda JPEG ke yafe shi. Tafiya PNG zuwa JPEG yana nuna pixels gaskiya da ke adawa da bango fari, wanda shine daidai abin da kake so lokacin da marubuci (abokin imel, tsohon CMS, samfurin buga) ba zai iya karɓar PNG tun da farko ba.
• Dandali na zamantakewa da cibiyoyin tallace-tallace suna da buƙatun tsari masu tsauri. Facebook da LinkedIn sun fi son JPEG don loda hotunan, layin OG preview na Twitter yana karɓar WebP, kuma wasu uwar garken tallace-tallace na shirye-shirye suna ƙi duk abin da ba JPEG ba. Wucewa ta juyarwa mai sauri kafin loda yana guje wa ping-pong na kayan aiki da aka ƙi.
• Daidaita jerin hotuna masu tsari mai cakuɗe (screenshots na PNG, hotuna na JPEG, fitar da WebP daga mai zane) zuwa tsari guda ɗaya na fitowar kafin loda zuwa CMS ko DAM yana cire reshe na sarrafa tsari daga layin shigar. Tsari ɗaya a cikin, tsari ɗaya a waje, hanyoyin code masu yanayi kasa da yawa daga ƙarƙashin haka.

Amfani na yau da kullun

Juyar da tsari yana bayyana ko'ina tsarin tushe da sa ran marubuci ba su daidaita ba. Tsaruka uku da muke gani akai-akai.

• Shirya hotuna na kayan aiki don kantin Shopify ko WooCommerce. Asalin JPEG ana juyar da su zuwa WebP a inganci 0.85 don ɗaki na jama'a na kantin, yayin da kwafin PNG ana ajiye su gefe don fitar da shirye-shiryen buga da jerin kantunan da har yanzu suna ƙi WebP.
• Juyar da fitar na PNG da mai zane ya bayar zuwa JPEG ko WebP kafin su shiga ginin React ko Next.js. Layin hoto na framework yana ɗaukar tushe ƙanana kuma bundle na samarwa yana aika bytes kaɗan a kowace hanya.
• Sarrafawa batch folder na screenshots daga gudu na QA. PNG zuwa JPEG a inganci 0.9 yawanci yana ƙanƙanta archive na screenshots 50 daga kusan MB 120 zuwa ƙasa da MB 20 kafin a haɗe shi a tikitin mai bin diddigin kuskure.

Misali da aka yi aiki: PNG na MB 2 zuwa WebP na KB 300

Hoto na PNG na jaruntaka na MB 2 a pixels 2400×1600 abin da aka fi sani ne a shafukan samarwa na marketing. Ya zama ma'auni mai kyau don abin da juyarwa ke adanawa a shafi na ainihin.

Saka PNG a yankin loda, zaɓi WebP a matsayin tsarin da ake so, saita inganci zuwa 0.8, da saita yawan fadi maksimum zuwa 1200 don raba girman pixel zuwa rabin. Layin Canvas yana zana hoto a 1200×800 tare da daidaituwa an kiyaye shi, sannan yana sake-ɓoyewa zuwa WebP. Katin fitowar yana nuna sakamakon, yawanci a kewayen KB 280 zuwa 320, wanda shine kusan raguwa ta kashi 85% da ke adawa da na asali. Danna Sauke a kan katin don dauki fayil guda ɗaya, ko danna Sauke .zip a ƙasan panel idan kun juyar da hotuna da yawa a cikin wucewa guda ɗaya. Duk zagayowar, daga saka zuwa sauke, yana aiki a cikin daruruwan milliseconds don hoto wannan girma kuma yana cinye bandwidth sifili bayan shafin kansa ya gama loda.

Wanne tsaruka ana goyan baya?

A gefen shigarwa, ana karɓar kowane format da burauza zai iya ɓoye: PNG, JPEG, WebP, GIF, da BMP sun rufe kusan kowane fayil da mai zane ko kayan aikin hoton allo ke samarwa. Formats na fitarwa sune PNG (koyaushe mara asara), JPEG, WebP, da AVIF. Ana tallafawa fitowar AVIF ta hanyar mai ɓoye WebAssembly wanda ke loda kan buƙata a kowane burauza — babu buƙatar mai ɓoye Canvas na asali.

Shin wannan yana faruwa a kan na'urata?

Eh, gaba ɗaya. Shafin yana amfani da Canvas API na asali na mai binciken da Web File API don buɗe ɓoye da sake-ɓoye kowane hoto a cikin ƙwaƙwalwa. Babu bayanan hoto da aka aika zuwa uwar garken, babu loda na wucin gadi, babu zagayowar girgije. Kuna iya tabbatar da shi da kanku: buɗe DevTools, canza zuwa panel na Cibiyar Sadarwa, kuma gudanar da juyarwa. Buƙatun fitarwa kawai da za ku gani sune loda shafi na farko da kiran talla. Babu kome mai siffar hoto da ke barin tab.

Menene kasuwancin inganci tsakanin PNG da JPEG?

PNG tsari ne ba tare da asara ba. Kowane pixel yana tsira daga zagayowar encode daidai, wanda ke mai da PNG zaɓi mai kyau don screenshots, kamun UI, da kowane hoto mai gefuna masu kaifi ko yankuna masu launi kwamfar. JPEG yana amfani da matse DCT kuma yana yafa ƙananan bayanan da ido ba ta taɓa lura da su ba, wanda ke mai da shi zaɓi mai kyau don hotuna. Inganci 0.8 shine wuri mai kyau na yau da kullun inda bambancin mai ganuwa daga asalin yana da wahalar lura da shi amma fayil ɗin ya saukewa sau 4 zuwa 6 ƙarami fiye da abin da PNG ya yi daidai. WebP na iya aiki a cikin yanayin ba tare da asara ba da mai asara; slider na inganci anan yana tuka encoder mai asara, kuma a inganci 0.85 WebP yawanci yana cin nasara akan JPEG da kashi 25 zuwa 30% akan abun ciki na hoto na yanayi.

Yaya fitarwa ta AVIF take aiki?

ɓoye AVIF na amfani da codec na WebAssembly wanda ke loda kan buƙata a farkon lokacin da ka zaɓi format na AVIF — babu plugin, babu tutar burauza, babu jiran fitowar Chrome ta gaba. Ana ba da WASM binary daga asalinmu, yana ɓoye hotonka gaba ɗaya a cikin wani zaren baya, kuma yana mayar da madaidaicin image/avif blob a shirye don saukewa. Buƙatar hanyar sadarwa kaɗai ita ce ɗaukar codec ɗin kanta sau ɗaya; babu bayanan hoto da ya taɓa barin na'urarka. Da zarar an loda, mai ɓoye yana kasancewa a cache don zaman domin juye-juye na gaba su yi sauri. Fayilolin AVIF galibi suna 20–30% ƙanana da WebP kuma 50% ƙanana da JPEG a daidaitaccen inganci, yana sa su zama mafi kyawun zaɓi ga shafuka masu kula da aiki.

Saka hotunanka, zaɓi tsari, juyar. Komai yana aiki a tab ɗinka. Babu loda, babu asusun, babu jiran layin uwar garken.