Matsa hotuna _

Yadda matsa hoto da ke gefen mai binciken ke aiki

Kowane wucewar matsawa yana 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 buɗe ɓoye hoto, yana sake-ɓoye shi a ƙaramin inganci, kuma yana ba ku Blob da shafin zai iya kallo, sauke, ko zip ɗin. 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 a girman pixel ɗinsa na asali, a shirye don sake-ɓoyewa.
3. Kira canvas.toBlob(callback, mimeType, quality) don sake-ɓoye pixels. A yanayin inganci, ƙimar slider yana auna kai tsaye zuwa saitin quantization na encoder; a yanayin girman da ake so, shafin yana raba ƙimar inganci biyu har sai blob na fitowar ya fada ƙasa da kasafin bytes ɗinka.
4. Nuna karatu na kafin/bayan da girman asali, girman da aka matsa, da kashi na ajiyewa, sannan ba da 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 da ake loda a lokacin amfani na farko.

Me ya sa matsa hotuna?

• Ƙananan hotuna suna loda da sauri. Yanke hoton jaruntaka na MB 4 zuwa KB 600 yana inganta Largest Contentful Paint kai tsaye, wanda shine ɗaya daga cikin Core Web Vitals da Google ke amfani da shi don matsayi. A shafi mai hotuna da yawa, ajiyewa tana haɗuwa zuwa zane na farko mai sauri.
• Sannan akwai iyakokin loda. Dandali na CMS da yawa, kayan aikin tikiti, da tsarin imel suna ƙin duk abin da ya wuce MB 1 ko 2, kuma wucewar matsawa mai sauri tana kawo hoto ƙasa da iyaka ba tare da ka buɗe cikakken editan ba.
• Bandwidth da ajiya suna kuɗi a babban sikeli. Aika WebP a inganci 0.8 maimakon PNG na cikakken girma na iya yanke nauyin hoto da kashi ɗaya bisa uku ko fiye, wanda ke rage kuɗaɗen egress na CDN da amfani da bayanan wayar hannu ga maziyartanka.
• Wasu hotuna bai kamata a loda su kwata-kwata ba. Saboda komai anan yana aiki a cikin mai binciken ka, sikanin shaida, hotunan likita, da screenshots na ciki suna kasancewa a kan na'urarku. Babu uwar garken ɓangare na uku kamar TinyPNG a cikin madauki da za a damu da shi.

Amfani na yau da kullun

Matsawa tana bayyana duk lokacin da hoto ya fi girma fiye da inda yake zuwa. Tsaruka uku da muke gani akai-akai.

• Shirya hotuna na kayan aiki don kanti na kan layi. Asalin JPEG ana matsa su zuwa inganci 0.8 (ko lokaci na KB 200) don kantin ya kasance mai sauri kuma ya wuce Core Web Vitals akan wayar hannu.
• Ƙanƙanta screenshots kafin a haɗe su zuwa mai bin diddigin kuskure ko wiki. Batch na kamun PNG da aka juyar zuwa JPEG a inganci 0.85 sau da yawa yana sauka daga megabytes goma zuwa biyu.
• Kawo hoto ƙasa da iyakar loda — tashar neman aiki da ke ƙin fayiloli sama da MB 1, tsarin imel mai iyaka mai tsauri na haɗewa, ko avatar na dandali da dole ya fada cikin kasafin bytes.

Misali da aka yi aiki: JPEG na MB 4 zuwa KB 400

JPEG na MB 4 kai tsaye daga kamarar waya abu ne na yau da kullun da ke wuce iyakokin loda kuma yana rage saurin shafuka. Ya zama ma'auni mai kyau don abin da matsawa ke adanawa.

Saka JPEG a yankin loda, bar tsari a kan JPEG, kuma ko dai ja slider na inganci ƙasa zuwa 0.7 ko canza zuwa yanayin girman da ake so kuma rubuta 400 KB. A yanayin inganci, layin Canvas yana sake-ɓoyewa sau ɗaya kuma yana nuna sakamako, yawanci kusan KB 500 zuwa 700 ya danganta da hoton. A yanayin girman da ake so, shafin yana gwada wasu ƙimomin inganci, yana zama a kan mafi girma da har yanzu ya fada ƙasa da KB 400, kuma yana ba da rahoton kashi na ajiyewa. Danna Sauke a kan katin don dauki fayil guda ɗaya, ko danna Sauke .zip idan kun matsa hotuna da yawa lokaci ɗaya. Duk zagayowar yana aiki a cikin ƙasa da daƙiƙa ɗaya don hoto na wannan girma kuma yana cinye bandwidth sifili bayan shafin kansa ya gama loda.

Menene bambanci tsakanin yanayin inganci da yanayin girman da ake so?

Yanayin inganci yana ba ka slider ɗaya daga 0.1 zuwa 1.0 da ke auna zuwa saitin quantization na encoder na JPEG ko WebP — ƙananan lambobi suna nufin ƙananan fayiloli da artifacts masu ganuwa fiye. Yanayin girman da ake so yana juya matsalar: kuna sa girma a kilobytes kuma shafin yana raba ƙimar inganci biyu, yana ɓoyewa sau kaɗan har sai ya samo mafi girman inganci da har yanzu ya fada ƙasa da kasafinka. Yanayin girman da ake so yana da amfani lokacin da iyaka mai tsauri ke da muhimmanci (iyakar loda na MB 1, misali); yanayin inganci yana da sauri kuma mafi kyau lokacin da kake son sakamako mai ganuwa da za a iya hango. PNG ba tare da asara ba ne, don haka babu yanayin da ke aiki da shi.

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 matsawa. 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.

Me ya sa matsa PNG wani lokaci da ƙyar yake ƙanƙantar da shi?

PNG tsari ne ba tare da asara ba, don haka Canvas API ba zai iya jefar da bayani don ya sa shi ƙarami ba — zai iya kawai sake-tattara pixels ɗaya. Ga hotuna, PNG tuni babba ne kuma sake-ɓoyewa ba tare da asara ba yana adana kaɗan. Nasara ta gaskiya tana zuwa daga canza tsarin fitarwa zuwa JPEG ko WebP, waɗanda ke amfani da matsawa mai asara da ta dace da hotuna kuma akai-akai suna saukar sau 4 zuwa 10 ƙarami. Ajiye PNG kawai lokacin da kake buƙatar inganci ba tare da asara ba ko gaskiya; in ba haka ba zaɓi JPEG don hotuna ko WebP don mafi kyawun ma'auni na girma-zuwa-inganci.

Wane tsari zan zaɓa?

Ga hotuna, WebP a inganci 0.8 yana ba da mafi kyawun ma'auni na girma-zuwa-inganci kuma kowane mai binciken da aka aika tun 2021 yana goyan bayan sa; JPEG shine madadin duniya mai aminci lokacin da marubuci ya tsufa ko ya fi tsauri. Zaɓi PNG kawai lokacin da kake buƙatar inganci ba tare da asara ba ko alpha channel — sana'ar layi, screenshots na UI, tambari masu gaskiya. Idan kana inganta don saurin shafi kuma masu sauraronka suna amfani da masu bincike na zamani, WebP kusan kullum shine zaɓi mai kyau; idan kana ciyar da CMS na zamani ko layin buga da ke ƙin WebP, ka tsaya da JPEG.

Saka hotunanka, zaɓi matakin inganci ko girman da ake so, matsa. Komai yana aiki a tab ɗinka. Babu loda, babu asusun, babu jiran layin uwar garken.