Juyar da tsarukan hoto _

Yadda juyar da hoto da ke gefen mai binciken ke aiki

Kowane juyarwa layin matakai huɗu ne da ke aiki gaba ɗaya a JavaScript. Ba a sauke ɗakin laburare na codec kuma babu uwar garken da ya shiga. Canvas API na mai binciken kansa yana sarrafa buɗe ɓoye, canza girma, da sake-ɓoyewa a cikin ƙwaƙwalwa, sannan yana ba ku Blob da shafin zai iya kallon ko zip ɗin da. Saboda kowane matakin yana zaune a cikin sandbox na tab, fayilolin asali ba sa taɓa cibiyar sadarwa.

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. Fitowar PNG koyaushe ba tare da asara ba ne; JPEG da WebP suna girmama slider na inganci, wanda yana auna kai tsaye zuwa saitin quantization na encoder.
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, kowane tsari da mai binciken zai iya buɗe ɓoyewa ana karɓar: PNG, JPEG, WebP, GIF, da BMP suna rufe kusan kowane fayil da mai zane ko kayan aikin screenshot ke samarwa. Tsarukan fitowar sune PNG (koyaushe ba tare da asara ba), JPEG, da WebP. Fitowar AVIF ba a goyan baya tukuna saboda encoder na AVIF na Canvas API yana cikin Chrome 105 kawai da daga baya kuma yana rasa daga Safari da Firefox. Ana tsara hanyar AVIF mai dogaro da WebAssembly don v1.1 don fasalin ya yi aiki a cikin kowane mai binciken na zamani.

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.

Yaushe goyan bayan AVIF zai zo?

Ɓoyayyun AVIF ta canvas.toBlob(…, 'image/avif') yana aiki kawai a Chrome 105 da daga baya a yau; Safari da Firefox ba sa goyan bayan ta ta asali. Saki na v1.1 zai ƙara hanyar AVIF mai zaɓi ta amfani da encoder mai sauƙin WebAssembly don fasalin ya yi aiki a kowane mai binciken na zamani ba tare da jiran daidaituwa ta asali ba. Har zuwa lokacin, zaɓin AVIF a cikin mai zaɓar tsari ana nuna shi a matsayin 'mai zuwa' kuma encoder na WebP shine zaɓi da aka ba da shawara. Ana goyan bayan WebP ta kowane mai binciken da aka aika tun 2021 kuma yana samar da fayiloli a cikin kashi 10 zuwa 20% na girman AVIF don mafi yawan hotuna na duniya ta ainihi.

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