ഏതൊരു സ്ക്രീൻ റെക്കോർഡിംഗും സുതാര്യമായ (Transparent) ആനിമേറ്റഡ് WebP ഫ്രെയിമാക്കി മാറ്റാം (After Effects അല്ലെങ്കിൽ ഡിസൈനറുടെ സഹായമില്ലാതെ)

ഉയർന്ന നിലവാരമുള്ള UI മോഷൻ ഓവർലേകൾ നിർമ്മിക്കുന്നതിന് സാധാരണയായി After Effects പോലെയുള്ള സങ്കീർണ്ണമായ സോഫ്റ്റ്‌വെയറുകളോ ഒരു മോഷൻ ഡിസൈനറുടെ സേവനമോ ആവശ്യമാണ്. നിങ്ങളുടെ വെബ്‌സൈറ്റിൽ കാണിക്കുന്നതിനായി ഒരു ആപ്പ് ഫീച്ചറോ, UI മൈക്രോ-ഇന്ററാക്ഷനോ, അല്ലെങ്കിൽ ഡൈനാമിക് വോയ്‌സ്-റൂം വിജറ്റോ സുതാര്യമായ ആനിമേറ്റഡ് WebP ഫോർമാറ്റിൽ വേണമെങ്കിൽ, ഏതാനും മിനിറ്റുകൾക്കുള്ളിൽ സൗജന്യമായി നിങ്ങൾക്ക് തന്നെ ഇത് നിർമ്മിക്കാവുന്നതാണ്.

ഈ ഗൈഡിലൂടെ സ്ക്രീൻ റെക്കോർഡിംഗുകൾ എടുക്കുന്നതും, പൂർണ്ണമായ 8-bit alpha ചാനലുകൾ എക്‌സ്‌ട്രാക്‌റ്റ് ചെയ്യുന്നതിനായി ഓപ്പൺ സോഴ്‌സ് CLI ടൂളുകൾ ഉപയോഗിച്ച് അവ പ്രോസസ്സ് ചെയ്യുന്നതും എങ്ങനെയാണെന്ന് നിങ്ങൾക്ക് മനസ്സിലാക്കാം. ബാക്ക്ഗ്രൗണ്ട് നീക്കം ചെയ്യുന്നതിനുള്ള അൽഗോരിതങ്ങൾ, FFmpeg ഓപ്റ്റിമൈസേഷൻ പാരാമീറ്ററുകൾ, സുതാര്യതയുള്ള ഏറ്റവും ലൈറ്റ്‌വെയ്റ്റ് ആയ ആനിമേറ്റഡ് WebP നൽകുന്ന ക്രോസ്-പ്ലാറ്റ്‌ഫോം വെബ് ഇന്റഗ്രേഷൻ തന്ത്രങ്ങൾ എന്നിവയും ഇതിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.

എന്താണ് ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP? (ഇത് GIF-നേക്കാൾ മികച്ചതാകുന്നത് എന്തുകൊണ്ട്)

ആനിമേറ്റഡ് WebP എളുപ്പത്തിൽ മനസ്സിലാക്കാം

ഗൂഗിളിന്റെ WebP ഇമേജ് ഫോർമാറ്റിന്റെ വിപുലീകരിച്ച രൂപമാണ് ആനിമേറ്റഡ് WebP. ലോസി (lossy), ലോസ്‌ലെസ്സ് (lossless) കംപ്രഷൻ അൽഗോരിതങ്ങൾക്കൊപ്പം സീക്വൻസ് ആനിമേഷനെയും ഇത് പിന്തുണയ്ക്കുന്നു. പരമ്പരാഗത ഇമേജ് ഫോർമാറ്റുകളിൽ നിന്ന് വ്യത്യസ്തമായി, VP8 വീഡിയോ കോഡെക്കിൽ നിന്നുള്ള അഡ്വാൻസ്ഡ് പ്രെഡിക്ഷൻ സാങ്കേതികവിദ്യകൾ WebP ഉപയോഗിക്കുന്നു. ഇത് വിഷ്വൽ ക്വാളിറ്റിയെ ബാധിക്കാതെ തന്നെ ഓരോ ഫ്രെയിം ആനിമേഷനെയും വളരെ ചെറിയ ഫയൽ സൈസിലേക്ക് കംപ്രസ് ചെയ്യാൻ സഹായിക്കുന്നു.

Alpha ചാനലുമായി ചേർക്കുമ്പോൾ, ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP വെബ്‌സൈറ്റിലെ അല്ലെങ്കിൽ മൊബൈൽ UI-ലെ ഏത് ബാക്ക്ഗ്രൗണ്ടിന് മുകളിലും പൂർണ്ണമായോ ഭാഗികമായോ സുതാര്യത നൽകുന്നു. അതായത് UI ഘടകങ്ങൾ, പാർട്ടിക്കിൾ ഇഫക്റ്റുകൾ, ആപ്പ് ഡെമോകൾ എന്നിവ ബാക്ക്ഗ്രൗണ്ട് കളറുകൾക്കോ വീഡിയോകൾക്കോ ഡാർക്ക്/ലൈറ്റ് തീമുകൾക്കോ മുകളിൽ അതിരുകളോ ബാക്ക്ഗ്രൗണ്ട് കളർ ബ്ലീഡിംഗോ ഇല്ലാതെ സുഗമമായി കാണിക്കാൻ സാധിക്കും.

GIF-ന് എന്തുകൊണ്ട് ശരിയായ ട്രാൻസ്പാരൻസി നൽകാൻ കഴിയുന്നില്ല (1-bit alpha vs 8-bit alpha)

പഴയ GIF ഫോർമാറ്റിന്റെ പ്രധാന പരിമിതി അതിന്റെ ബൈനറി ട്രാൻസ്പാരൻസി സംവിധാനമാണ്. GIF ഉപയോഗിക്കുന്നത് 1-bit alpha സുതാര്യതയാണ്, അതായത് ഒരു ഫ്രെയിമിലെ ഓരോ പിക്സലും 100% ഒപേക് (opaque) അല്ലെങ്കിൽ 100% ട്രാൻസ്പാരന്റ് ആയിരിക്കണം. ഇതിനിടയിലുള്ള ഒരു അവസ്ഥ സാധ്യമല്ല. തൽഫലമായി, വളഞ്ഞ ലൈനുകൾ, നിഴലുകൾ, ഗ്ലോയിംഗ് എഡ്ജുകൾ അല്ലെങ്കിൽ ഗ്ലാസ്മോർഫിക് ബ്ലർ ഇഫക്റ്റുകൾ എന്നിവ ഡാർക്ക് സർഫസുകളിൽ സ്ഥാപിക്കുമ്പോൾ അരികുകളിൽ പിക്സലേറ്റഡ് അരികുകളോ വൈറ്റ്/കളർ ഫ്രിഞ്ചിംഗ് ഹാലോയോ ആയി പ്രത്യക്ഷപ്പെടുന്നു.

എന്നാൽ ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP പൂർണ്ണമായ 8-bit alpha ട്രാൻസ്പാരൻസിയാണ് ഉപയോഗിക്കുന്നത്. ഇത് ഓരോ പിക്സലിനും 256 വ്യത്യസ്ത അളവിലുള്ള ഒപാസിറ്റി നൽകുന്നു (പൂർണ്ണമായി അദൃശ്യമായ 0 മുതൽ പൂർണ്ണമായി വ്യക്തമായ 255 വരെ). ഇത് സോഫ്റ്റ് ഷാഡോകൾ, സുതാര്യമായ ഗ്ലാസ് ലെയറുകൾ, സ്മൂത്ത് എഡ്ജ് ആന്റി-അലിയാസിംഗ്, റിയലിസ്റ്റിക് പാർട്ടിക്കിൾ ട്രെയിലുകൾ എന്നിവ ഏത് UI ബാക്ക്ഗ്രൗണ്ടിലും സുഗമമായി ബ്ലെൻഡ് ചെയ്യാൻ സഹായിക്കുന്നു. കൂടാതെ, GIF ഒരു ഫ്രെയിമിൽ പരമാവധി 256 നിറങ്ങളിലേക്ക് പരിമിതപ്പെടുത്തിയിരിക്കുമ്പോൾ, WebP യഥാർത്ഥ 24-bit RGB കളർ ഡെപ്തിനെ (16.7 ദശലക്ഷം നിറങ്ങൾ) പിന്തുണയ്ക്കുന്നു, ഇത് കളർ ബാൻഡിംഗ് ഇല്ലാതെ സ്മൂത്ത് ഗ്രാഡിയന്റുകളും വൈബ്രന്റ് UI റെക്കോർഡിംഗുകളും നൽകുന്നു.

ഫയൽ സൈസ് താരതമ്യം — WebP vs GIF vs APNG vs MP4

ശരിയായ ആനിമേഷൻ കണ്ടെയ്നർ തിരഞ്ഞെടുക്കുന്നത് പേജ് സ്പീഡ് മെട്രിക്സ്, Core Web Vitals, മൊബൈൽ ആപ്പ് ബാൻഡ്‌വിഡ്ത്ത് ഉപയോഗം എന്നിവയെ നേരിട്ട് ബാധിക്കുന്നു. പരമ്പരാഗത ആനിമേറ്റഡ് GIF-കൾ കംപ്രഷൻ കുറഞ്ഞതും വലുപ്പമേറിയതുമാണ്, ഇത് 3 സെക്കൻഡ് UI ക്ലിപ്പിന് പോലും പലപ്പോഴും 10 MB-ക്ക് മുകളിലേക്ക് പോകുന്നു. APNG (Animated Portable Network Graphics) കളർ ഡെപ്ത്, 8-bit സുതാര്യതാ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നുണ്ടെങ്കിലും, ഇതിന്റെ കംപ്രഷൻ കാരണം റിച്ച് UI മോഷന് വലിയ ഫയൽ സൈസ് വരുന്നു.

H.264 എൻകോഡ് ചെയ്ത MP4 വീഡിയോ ഉയർന്ന വീഡിയോ കംപ്രഷൻ നൽകുന്നു, എന്നാൽ സ്റ്റാൻഡേർഡ് വെബ് MP4 കണ്ടെയ്നറുകൾ എല്ലാ ബ്രൗസറുകളിലും ഒരുപോലെ alpha ചാനൽ ട്രാൻസ്പാരൻസിയെ പിന്തുണയ്ക്കുന്നില്ല (Safari-ക്ക് alpha ഉള്ള HEVC ആവശ്യമാണ്, അതേസമയം Chrome-ന് WebM-ൽ alpha ഉള്ള VP9 ആവശ്യമാണ്). ഹ്രസ്വമായ, ലൂപ്പ് ചെയ്യുന്ന, സുതാര്യമായ UI ആനിമേഷനുകൾക്ക് അനുയോജ്യമായ ഏറ്റവും മികച്ച തിരഞ്ഞെടുപ്പാണ് ആനിമേറ്റഡ് WebP: ഇത് പൂർണ്ണമായ 8-bit alpha ബ്ലെൻഡിംഗ് നൽകുന്നു, യഥാർത്ഥ കളർ ഗ്രാഡിയന്റുകൾ കൈകാര്യം ചെയ്യുന്നു, കൂടാതെ GIF-നേക്കാൾ 64% വരെയും APNG-നേക്കാൾ 45% വരെയും ചെറിയ ഫയൽ സൈസ് കൈവരിക്കുന്നു.

2026-ലെ ബ്രൗസർ, ഡിവൈസ് പിന്തുണ

2026-ൽ, സുതാര്യതയുള്ള ആനിമേറ്റഡ് WebP-ക്ക് എല്ലാ ആധുനിക വെബ് ബ്രൗസറുകളിലും ഡെസ്ക്ടോപ്പ് ഓപ്പറേറ്റിംഗ് സിസ്റ്റങ്ങളിലും മൊബൈൽ പ്ലാറ്റ്‌ഫോമുകളിലും സാർവത്രിക പിന്തുണ ലഭിക്കുന്നുണ്ട്. Chrome, Safari, Firefox, Edge, Opera, iOS Safari, Android WebView എന്നിവയെല്ലാം സ്റ്റാൻഡേർഡ് HTML <img> ടാഗുകൾ, CSS ബാക്ക്ഗ്രൗണ്ട് പ്രോപ്പർട്ടികൾ, നെറ്റീവ് കാൻവാസ് റെൻഡററുകൾ എന്നിവയ്ക്കുള്ളിൽ ആനിമേറ്റഡ് WebP ആസറ്റുകളുടെ ഡീകോഡിംഗിനെ പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നു.

മൊബൈൽ പ്ലാറ്റ്‌ഫോമുകളിൽ, Android സ്റ്റാൻഡേർഡ് ImageView വിജറ്റുകൾ വഴി WebP ഫയലുകളെ റെൻഡർ ചെയ്യുന്നു, അതേസമയം iOS 14 മുതൽ SwiftUI, UIKit ഇമേജ് വ്യൂകൾക്കുള്ളിൽ WebP റെൻഡറിംഗ് iOS പിന്തുണയ്ക്കുന്നു. ഇത് വെണ്ടർ-സ്പെസിഫിക് വീഡിയോ കോഡെക്കുകളോ വലിയ GIF ആസറ്റുകളോ കൈകാര്യം ചെയ്യുന്നത് ഒഴിവാക്കാൻ ആഗ്രഹിക്കുന്ന ക്രോസ്-പ്ലാറ്റ്‌ഫോം ആപ്പ് ഡെവലപ്പർമാർക്ക് ആനിമേറ്റഡ് WebP-യെ ഒരു വിശ്വസനീയ ഫോർമാറ്റാക്കി മാറ്റുന്നു.

ഫോർമാറ്റ് താരതമ്യ പട്ടിക

നിങ്ങൾക്ക് എപ്പോഴാണ് ഒരു ട്രാൻസ്പാരന്റ് ഫ്രെയിം ആവശ്യമായി വരുന്നത്

ലാന്റിംഗ് പേജുകളിൽ ഫ്ലോട്ട് ചെയ്യുന്ന ആപ്പ് ഡെമോകൾ

ഒരു SaaS ലാന്റിംഗ് പേജിൽ ഒരു മൊബൈൽ ആപ്പ് UI കാണിക്കുമ്പോൾ, റെക്റ്റാങ്ഗുലർ ആയ ഒരു വീഡിയോ ഹീറോ സെക്ഷനിൽ വെയ്ക്കുന്നത് ഡാർക്ക് മോഡ് അല്ലെങ്കിൽ ഗ്രാഡിയന്റ് ഡിസൈനുകളുടെ ഭംഗിയെ ബാധിച്ചേക്കാം. നിങ്ങളുടെ സ്ക്രീൻ റെക്കോർഡിംഗിൽ നിന്ന് ബാക്ക്ഗ്രൗണ്ട് നീക്കംചെയ്ത് സുതാര്യമായ ആനിമേറ്റഡ് WebP ആയി എക്‌സ്‌പോർട്ട് ചെയ്യുന്നതിലൂടെ, നിങ്ങളുടെ ആപ്പ് ഇന്റർഫേസിന് കസ്റ്റം ലാന്റിംഗ് പേജ് ഡിസൈനുകൾക്കും ബാക്ക്ഗ്രൗണ്ട് ലൈറ്റിംഗിനും മുകളിൽ ഡൈനാമിക്കായി ഫ്ലോട്ട് ചെയ്യാൻ സാധിക്കും.

ഈ വിഷ്വൽ ലെയർ ഇഫക്റ്റ് ഉപയോക്താക്കൾക്ക് കൂടുതൽ ആകർഷകമായ അനുഭവം നൽകുകയും, സങ്കീർണ്ണമായ WebGL അല്ലെങ്കിൽ 3D കാൻവാസ് ലൈബ്രറികളുടെ ആവശ്യമില്ലാതെ തന്നെ സൈൻ-അപ്പ് കൺവേർഷൻ നിരക്കുകൾ വർദ്ധിപ്പിക്കുകയും ചെയ്യുന്നു.

ഫോൺ മോക്കപ്പുകളും ഡിവൈസ് ഫ്രെയിമുകളും

ഡിസൈനർമാർ പലപ്പോഴും സ്ക്രീൻ റെക്കോർഡിംഗുകളെ ആകർഷകമായ ഫോൺ ഫ്രെയിമുകളിൽ (iPhone അല്ലെങ്കിൽ Android ഹാർഡ്‌വെയർ ബസലുകൾ പോലെയുള്ളവ) ഉൾപ്പെടുത്താറുണ്ട്. നിങ്ങൾ ഒരു ഡിവൈസ് അല്ലെങ്കിൽ സിമുലേറ്റർ സ്ക്രീൻ റെക്കോർഡ് ചെയ്യുകയാണെങ്കിൽ, റൗണ്ട് ചെയ്ത കോർണറുകളുള്ള സ്ക്രീൻ കണ്ടന്റ് മാത്രം ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP ആയി എക്‌സ്‌പോർട്ട് ചെയ്യുന്നത് ആനിമേഷൻ ലെയറിനെ സഎസ്എസ് ഡിവൈസ് റാപ്പറുകളിലേക്കോ Figma ഡിസൈൻ സിസ്റ്റങ്ങളിലേക്കോ നേരിട്ട് ചേർക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

കോർണറുകൾ യഥാർത്ഥ alpha സുതാര്യതയോടെ റെൻഡർ ചെയ്യുന്നതിനാൽ, അടിസ്ഥാന ഇന്റർഫേസ് ക്യാപ്‌ചർ വീണ്ടും റെൻഡർ ചെയ്യാതെ തന്നെ നിങ്ങൾക്ക് CSS-ൽ ഹാർഡ്‌വെയർ ഫ്രെയിമുകൾ മാറ്റാനോ ഷാഡോകൾ ക്രമീകരിക്കാനോ സാധിക്കും.

UI മൈക്രോ-ഇന്ററാക്ഷനുകളും ലോഡിംഗ് സ്റ്റേറ്റുകളും

ആനിമേറ്റഡ് ബട്ടൺ സ്റ്റേറ്റുകൾ, ഡൈനാമിക് മൈക്ക് റിംഗുകൾ, അച്ചീവ്മെന്റ് ബാഡ്ജുകൾ, അല്ലെങ്കിൽ ലൈവ് വോയ്‌സ് റൂം സ്റ്റാറ്റസ് ഇൻഡിക്കേറ്ററുകൾ പോലെയുള്ള മൈക്രോ-ഇന്ററാക്ഷനുകൾക്ക് വ്യക്തമായ ബാക്ക്ഗ്രൗണ്ട് ട്രാൻസ്പാരൻസി ആവശ്യമാണ്. കറങ്ങുന്ന ലോഡറിന് ചുറ്റുമോ ആനിമേറ്റഡ് ബാഡ്ജിന് ചുറ്റുമോ ഒരു സ്ക്വയർ ബാക്ക്ഗ്രൗണ്ട് ബോക്സ് കാണിക്കുന്നത് ആപ്പിന്റെ യൂസർ എക്സ്പീരിയൻസിനെ ബാധിക്കും.

സുതാര്യതയുള്ള ലൈറ്റ്‌വെയ്റ്റ് ആനിമേറ്റഡ് WebP ഉപയോഗിക്കുന്നത്, ഡൈനാമിക് UI എലമെന്റുകൾ, ആക്റ്റീവ് വീഡിയോ ഫീഡുകൾ, വോയ്‌സ് റൂം അവതാർ ഗ്രിഡുകൾ എന്നിവയ്ക്ക് മുകളിൽ നേരിട്ട് ആനിമേറ്റഡ് സ്റ്റേറ്റ് മാറ്റങ്ങൾ റെൻഡർ ചെയ്യാൻ ഫ്രണ്ട്-എൻഡ് എൻജിനീയർമാരെ സഹായിക്കുന്നു.

പ്രൊഡക്റ്റ് ടൂർ ഓവർലേകളും ഓൺബോർഡിംഗും

ഇന്ററാക്ടീവ് പ്രൊഡക്റ്റ് ടൂറുകളും ഓൺബോർഡിംഗ് വാക്ക്‌ത്രൂകളും പലപ്പോഴും നിർദ്ദിഷ്ട ബട്ടണുകളെയോ ഫ്ലോട്ടിംഗ് ടൂൾടിപ്പുകളെയോ ഹൈലൈറ്റ് ചെയ്യാറുണ്ട്. ആനിമേറ്റഡ് പോയിന്റർ ഹാൻഡ്‌സ്, ക്ലിക്ക് ടാർഗെറ്റുകൾ, ഇൻസ്ട്രക്ഷണൽ ടൂൾടിപ്പുകൾ എന്നിവയ്‌ക്കായി ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP ലൂപ്പുകൾ ഉപയോഗിക്കുന്നത്, യൂസർ ഡാഷ്‌ബോർഡുകളിലെ പ്രധാന ഡാറ്റയോ നാവിഗേഷനെയോ മറയ്ക്കാതെ തന്നെ ഓവർലേകൾ കൃത്യമായി പ്രദർശിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

കട്ടൗട്ട് ആനിമേഷനുകളുള്ള സോഷ്യൽ പോസ്റ്റുകളും തംബ്‌നെയിലുകളും

ഡിജിറ്റൽ ഡിസ്പ്ലേ ക്യാമ്പെയ്നുകൾ, ഡോക്യുമെന്റേഷൻ സൈറ്റുകൾ, ഇന്ററാക്ടീവ് ബ്ലോഗ് പോസ്റ്റ് തംബ്‌നെയിലുകൾ എന്നിവയ്ക്കായി നിർമ്മിക്കുന്ന മാർക്കറ്റിംഗ് ആസറ്റുകളിൽ ഡൈനാമിക് എലമെന്റുകൾ ഉൾപ്പെടുത്തുന്നത് അവയെ കൂടുതൽ ശ്രദ്ധേയമാക്കുന്നു. ഒരു ആനിമേറ്റഡ് ഫീച്ചറിന്റെ സ്ക്രീൻ റെക്കോർഡിംഗിനെ ഒരു കട്ടൗട്ട് ട്രാൻസ്പാരന്റ് ലൂപ്പാക്കി മാറ്റുന്നത്, സ്റ്റാറ്റിക് പ്രൊമോ ചിത്രങ്ങൾക്കോ ബ്രാൻഡഡ് ബാക്ക്ഗ്രൗണ്ട് ബാനറുകൾക്കോ മുകളിൽ മോഷൻ ഗ്രാഫിക്സ് ഓവർലേ ചെയ്യാൻ നിങ്ങളെ സഹായിക്കുന്നു.

നിങ്ങൾക്ക് ആവശ്യമായവ (എല്ലാം സൗജന്യമാണ്)

FFmpeg — എല്ലാം ചെയ്യാൻ കഴിയുന്ന ഒരൊറ്റ ടൂൾ

വീഡിയോ, ഓഡിയോ, മൾട്ടിമീഡിയ സ്ട്രീമുകൾ പ്രോസസ്സ് ചെയ്യുന്നതിനുള്ള ഇൻഡസ്ട്രി-സ്റ്റാൻഡേർഡ്, ഓപ്പൺ സോഴ്സ് കമാൻഡ്-ലൈൻ ഫ്രെയിംവർക്കാണ് FFmpeg. ജനപ്രിയ കമേഴ്‌സ്യൽ വീഡിയോ സോഫ്റ്റ്‌വെയറുകൾ, ബ്രൗസർ എഞ്ചിനുകൾ, മീഡിയ പൈപ്പ്‌ലൈനുകൾ എന്നിവയ്ക്ക് പിന്നിലെ അടിസ്ഥാന മൾട്ടിമീഡിയ എഞ്ചിനായി ഇത് പ്രവർത്തിക്കുന്നു. വീഡിയോ ഫിൽട്ടറിംഗ് ഗ്രാഫുകൾ, alpha ചാനൽ ക്രിയേഷൻ, കളർ കീയിംഗ് അൽഗോരിതങ്ങൾ, നെറ്റീവ് WebP എൻകോഡർ കോൺഫിഗറേഷനുകൾ എന്നിവയിലേക്ക് FFmpeg പൂർണ്ണ ആക്സസ് നൽകുന്നു.

FFmpeg CLI വഴി പ്രവർത്തിക്കുന്നതിനാൽ, ഹെവിയായ ഡെസ്ക്ടോപ്പ് NLE (non-linear editor) ആപ്ലിക്കേഷനുകളിൽ മിനിറ്റുകൾ എടുക്കുന്ന സങ്കീർണ്ണമായ വീഡിയോ എഡിറ്റിംഗുകൾ സെക്കൻഡുകൾക്കുള്ളിൽ ചെയ്യാൻ ഇതിന് കഴിയും.

Windows, macOS, Linux എന്നിവയിൽ FFmpeg ഇൻസ്റ്റാൾ ചെയ്യൽ

കമാൻഡ്-ലൈൻ പാക്കേജ് മാനേജറുകൾ ഉപയോഗിച്ച് ഏത് പ്രധാന ഓപ്പറേറ്റിംഗ് സിസ്റ്റത്തിലും രണ്ട് മിനിറ്റിൽ താഴെ സമയം കൊണ്ട് FFmpeg ഇൻസ്റ്റാൾ ചെയ്യാം:

• macOS: ടെർമിനൽ തുറന്ന് Homebrew വഴി ഇൻസ്റ്റാൾ ചെയ്യുക: brew install ffmpeg
• Windows: PowerShell തുറന്ന് Chocolatey അല്ലെങ്കിൽ Scoop വഴി ഇൻസ്റ്റാൾ ചെയ്യുക: choco install ffmpeg അല്ലെങ്കിൽ winget install FFmpeg
• Linux (Ubuntu/Debian): ഇത് റൺ ചെയ്യുക: sudo apt update && sudo apt install ffmpeg libwebp-dev

മറ്റ് സഹായക ടൂളുകൾ: റെക്കോർഡിംഗിനായി OBS, മാസ്കുകൾക്കായി GIMP, AI കട്ടൗട്ടുകൾക്കായി rembg

FFmpeg ബാക്ക്ഗ്രൗണ്ട് എക്‌സ്‌ട്രാക്‌ഷനും WebP എൻകോഡിംഗും കൈകാര്യം ചെയ്യുമ്പോൾ, ചില സൗജന്യ സഹായക ടൂളുകൾ സ്‌ക്രീൻ ക്യാപ്‌ചറും മാസ്‌ക് ക്രിയേഷനും കൂടുതൽ എളുപ്പമാക്കുന്നു:

• OBS Studio: കസ്റ്റം ഫ്രെയിം റേറ്റ്, സ്പെസിഫിക് വിൻഡോ ബോർഡറുകൾ എന്നിവയിൽ ലോസ്ലെസ്സ് കാൻവാസ് ക്യാപ്ചർ അനുവദിക്കുന്ന സൗജന്യ, ഓപ്പൺ സോഴ്സ് സ്ക്രീൻ റെക്കോർഡർ.
• GIMP: കസ്റ്റം ജ്യാമിതീയ ക്രോപ്പിംഗിനായി കൃത്യമായ 8-bit ബ്ലാക്ക് ആന്റ് വൈറ്റ് PNG മാസ്ക് ഫയലുകൾ നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്ന സൗജന്യ ഇമേജ് എഡിറ്റർ.
• rembg (Python): U-2-Net അധിഷ്ഠിത ഓപ്പൺ സോഴ്സ് AI ടൂൾ. ഇത് വീഡിയോ ഫ്രെയിമുകളിൽ നിന്ന് സങ്കീർണ്ണമായ വിഷ്വലുകളെ സ്വയം കണ്ടെത്തി alpha മാറ്റ് കട്ടൗട്ടുകൾ നിർമ്മിക്കുന്നു.

നിങ്ങളുടെ FFmpeg ബിൽഡ് WebP-യെയും alpha-യെയും പിന്തുണയ്ക്കുന്നുണ്ടോ എന്ന് ഉറപ്പാക്കൽ

കൺവേർഷൻ കമാൻഡുകൾ റൺ ചെയ്യുന്നതിന് മുമ്പ്, നിങ്ങളുടെ ലോക്കൽ FFmpeg ബൈനറി നെറ്റീവ് libwebp എൻകോഡർ എനേബിൾ ചെയ്താണ് കംപൈൽ ചെയ്തിരിക്കുന്നത് എന്ന് ഉറപ്പാക്കുക. നിങ്ങളുടെ ടെർമിനൽ തുറന്ന് താഴെ പറയുന്ന കമാൻഡ് റൺ ചെയ്യുക:

ffmpeg -encoders | grep webp

ഔട്ട്പുട്ടിൽ V..... libwebp അല്ലെങ്കിൽ V..... webp എന്ന് കാണുന്നുണ്ടെങ്കിൽ, സുതാര്യതയോടെ ലോസ്ലെസ്സ്, ലോസി WebP ഇമേജ് സീക്വൻസുകൾ എൻകോഡ് ചെയ്യാൻ നിങ്ങളുടെ ഇൻസ്റ്റാളേഷൻ സജ്ജമാണ്.

ഘട്ടം 1 — ശരിയായ രീതിയിൽ നിങ്ങളുടെ സ്ക്രീൻ റെക്കോർഡ് ചെയ്യുക

പിന്നീട് ട്രാൻസ്പാരൻസി എളുപ്പമാക്കുന്ന റെക്കോർഡിംഗ് സെറ്റിംഗ്സുകൾ

നിങ്ങളുടെ ഫൈനൽ ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP-യുടെ ക്വാളിറ്റി നേരിട്ട് നിങ്ങളുടെ റോ സ്ക്രീൻ റെക്കോർഡിംഗ് സെറ്റിംഗ്സിനെ ആശ്രയിച്ചിരിക്കുന്നു. ഒരു UI എലമെന്റോ ആപ്പ് ഫീച്ചറോ ക്യാപ്‌ചർ ചെയ്യുമ്പോൾ, 100% നെറ്റീവ് ഡിസ്‌പ്ലേ സ്‌കെയിലിൽ റെക്കോർഡ് ചെയ്യുക (പിക്‌സൽ ബോർഡറുകൾ മങ്ങിക്കുന്ന ഡിസ്‌പ്ലേ സ്‌കെയിലിംഗോ DPI സൂം സെറ്റിംഗ്സോ ഒഴിവാക്കുക). ഒരു MP4 അല്ലെങ്കിൽ MOV കണ്ടെയ്നറിനുള്ളിൽ H.264 അല്ലെങ്കിൽ ProRes കോഡെക് ഉപയോഗിച്ച് അൺകംപ്രസ്സ് ചെയ്തതോ ഉയർന്ന ബിറ്റ്‌റേറ്റുള്ളതോ ആയ വീഡിയോ സ്ട്രീം ഔട്ട്പുട്ട് ചെയ്യാൻ നിങ്ങളുടെ റെക്കോർഡിംഗ് സോഫ്റ്റ്‌വെയർ സജ്ജീകരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.

റെക്കോർഡ് അമർത്തുന്നതിന് മുമ്പ് മൗസ് കഴ്‌സർ ഹാലോസ്, സിസ്റ്റം നോട്ടിഫിക്കേഷൻ പോപ്പ്-അപ്പുകൾ, ഡെസ്‌ക്‌ടോപ്പ് നൈറ്റ്-ഷിഫ്റ്റ് വിഷ്വൽ ഫിൽട്ടറുകൾ എന്നിവ ഓഫ് ചെയ്യുക. കളർ റീപ്രൊഡക്ഷൻ കൃത്യമായി നിലനിർത്തുന്നത് ഓട്ടോമേറ്റഡ് കീയിംഗ് സമയത്ത് അപ്രതീക്ഷിതമായ നിറം മാറ്റങ്ങൾ തടയുന്നു.

ഒരു സോളിഡ് കളർ ബാക്ക്ഗ്രൗണ്ട് ഉപയോഗിക്കുക (ഗ്രീൻ സ്ക്രീൻ എളുപ്പവഴി)

നിങ്ങൾ ഒരു എമുലേറ്ററിൽ നിന്നോ (Android Studio അല്ലെങ്കിൽ Xcode Simulator പോലെയുള്ളവ) ബ്രൗസർ വിൻഡോയിൽ നിന്നോ മൊബൈൽ ആപ്പ് UI ക്യാപ്‌ചർ ചെയ്യുകയാണെങ്കിൽ, കണ്ടെയ്‌നർ പേജിന്റെ CSS ബാക്ക്ഗ്രൗണ്ട് ഉയർന്ന കോൺട്രാസ്റ്റ് ഉള്ള സോളിഡ് ഗ്രീൻ (ഉദാഹരണത്തിന് #00FF00 / RGB 0, 255, 0) അല്ലെങ്കിൽ സോളിഡ് മജന്ത (#FF00FF / RGB 255, 0, 255) ആയി നൽകുക.

നിങ്ങൾ തിരഞ്ഞെടുക്കുന്ന പച്ച നിറം നിങ്ങളുടെ ടാർഗെറ്റ് UI ഘടകത്തിനുള്ളിൽ ഒരിടത്തും പ്രത്യക്ഷപ്പെടുന്നില്ലെന്ന് ഉറപ്പാക്കുക (ഉദാഹരണത്തിന്, ഗ്രീൻ ആക്റ്റീവ് സ്റ്റാറ്റസ് ഡോട്ടുകൾ, സക്സസ് ബാഡ്ജുകൾ അല്ലെങ്കിൽ ഗ്രീൻ ബട്ടണുകൾ). നിങ്ങളുടെ UI-ൽ പച്ച ഐക്കണുകൾ അടങ്ങിയിട്ടുണ്ടെങ്കിൽ, നിങ്ങളുടെ ബാക്ക്ഗ്രൗണ്ട് കാൻവാസ് ബ്രൈറ്റ് ബ്ലൂ (#0000FF) അല്ലെങ്കിൽ മജന്തയിലേക്ക് മാറ്റുക.

റൗണ്ട് ചെയ്തതോ ഷേപ്പില്ലാത്തതോ ആയ UI എലമെന്റുകൾ കൃത്യമായി റെക്കോർഡ് ചെയ്യൽ

കാർഡുകൾ, റൗണ്ട് ചെയ്ത ഡയലോഗ് ബോക്സുകൾ, അല്ലെങ്കിൽ സർക്കുലർ അവതാർ ഫ്രെയിമുകൾ എന്നിവ റെക്കോർഡ് ചെയ്യുമ്പോൾ, സോളിഡ് കളർ ബാക്ക്ഗ്രൗണ്ടിന് മുകളിൽ നേരിട്ട് ആ കോമ്പോണന്റ് സ്ഥാപിക്കുക. ഓട്ടോമേറ്റഡ് കളർ കീയിംഗ് ഉപയോഗിക്കാൻ ഉദ്ദേശിക്കുന്നുവെങ്കിൽ സ്ക്രീൻ ക്യാപ്ചർ സമയത്ത് UI എലമെന്റിൽ CSS ബോക്സ് ഷാഡോകളോ ഡ്രോപ്പ് ഷാഡോകളോ നൽകരുത്; കളർ കീയിംഗ് അൽഗോരിതങ്ങൾക്ക് ഇരുണ്ട ഡ്രോപ്പ് ഷാഡോയും ഇരുണ്ട UI ബോർഡറും തമ്മിൽ വേർതിരിച്ചറിയാൻ കഴിയില്ല, ഇത് തെളിമയില്ലാത്തതും പിക്സലേറ്റഡ് ആയതുമായ ഷാഡോകൾക്ക് കാരണമാകുന്നു.

പകരം, സോളിഡ് ഷാർപ്പ് കാർഡ് എഡ്ജുകൾ കൃത്യമായി ക്യാപ്‌ചർ ചെയ്യുക, കൂടാതെ നിങ്ങളുടെ വെബ്‌സൈറ്റിൽ അവസാന WebP സ്ഥാപിക്കുമ്പോൾ കോഡിലൂടെ ഡൈനാമിക്കായി സോഫ്റ്റ് CSS ഡ്രോപ്പ്-ഷാഡോ ഫിൽട്ടറുകൾ പ്രയോഗിക്കുക.

ഫയൽ സൈസ് കുറയ്ക്കുന്ന ഫ്രെയിം റേറ്റും റെസല്യൂഷൻ തിരഞ്ഞെടുപ്പുകളും

ഉയർന്ന ഫ്രെയിം റേറ്റുകളും വലിയ കാൻവാസ് വലുപ്പങ്ങളും ഫയൽ സൈസുകൾ വേഗത്തിൽ വർദ്ധിപ്പിക്കുന്നു. UI ആനിമേഷനുകൾക്കും ആപ്പ് ഫീച്ചർ ഡെമോൺസ്ട്രേഷനുകൾക്കും, 20 fps മുതൽ 30 fps വരെയുള്ള ഫ്രെയിം റേറ്റ് 60 fps ക്യാപ്‌ചറുമായി താരതമ്യം ചെയ്യുമ്പോൾ 50% വരെ ബാൻഡ്‌വിഡ്ത്ത് ലാഭിക്കുന്നതോടൊപ്പം സ്മൂത്ത് ആയ മോഷനും നൽകുന്നു.

നിങ്ങളുടെ സ്ക്രീൻ റെക്കോർഡിംഗ് ടാർഗെറ്റ് അളവുകൾ വെബ്‌സൈറ്റിൽ കാണിക്കാൻ ഉദ്ദേശിക്കുന്ന അളവുകളിലേക്ക് മാറ്റുക. നിങ്ങളുടെ വെബ്‌സൈറ്റിൽ ആനിമേറ്റഡ് ഫ്രെയിം 400x400 പിക്‌സലിൽ റെൻഡർ ചെയ്യുമെങ്കിൽ, സ്കെയിൽ ചെയ്യാത്ത 4K (3840x2160) റെക്കോർഡിംഗ് എക്‌സ്‌പോർട്ട് ചെയ്യരുത്. റെക്കോർഡിംഗ് സമയത്തോ പ്രീപ്രൊസസ്സിംഗിലോ സ്കെയിൽ കുറയ്ക്കുന്നത് പ്രോസസ്സിംഗ് സമയം കുറയ്ക്കുകയും WebP കംപൈലേഷൻ സമയത്ത് സബ്-പിക്സൽ മങ്ങൽ തടയുകയും ചെയ്യുന്നു.

കട്ടൗട്ടിനെ ബാധിക്കുന്ന സാധാരണ റെക്കോർഡിംഗ് പിശകുകൾ

സൂക്ഷ്മമായ അരികുകളിൽ വലിയ H.264 കംപ്രഷൻ പ്രശ്നങ്ങൾ ഉണ്ടാക്കുന്ന ക്വാളിറ്റി കുറഞ്ഞ സ്ക്രീൻ ക്യാപ്ചർ സെറ്റിംഗ്സുകൾ ഒഴിവാക്കുക. കംപ്രഷൻ തകരാറുകൾ സോളിഡ് ഗ്രീൻ ബാക്ക്ഗ്രൗണ്ടിൽ ചെറിയ നിറവ്യത്യാസങ്ങൾ ഉണ്ടാക്കുന്നു, ഇത് കളർ കീയിംഗ് ഫിൽട്ടറുകളെ കുഴപ്പത്തിലാക്കുകയും നിങ്ങളുടെ സബ്ജക്റ്റിന് ചുറ്റും നോയ്സ് ഉണ്ടാക്കുകയും ചെയ്യുന്നു.

എപ്പോഴും ഉയർന്ന ബിറ്റ്-റേറ്റ് സെറ്റിംഗ്സുകൾ (1080p കാൻവാസ് ക്യാപ്ചറിന് കുറഞ്ഞത് 15-20 Mbps) അല്ലെങ്കിൽ OBS Studio-യിലെ നെറ്റീവ് ലോസ്ലെസ്സ് ക്യാപ്ചർ മോഡുകൾ ഉപയോഗിച്ച് റെക്കോർഡ് ചെയ്യുക.

ഘട്ടം 2 — നിങ്ങളുടെ ട്രാൻസ്പാരൻസി മെത്തേഡ് തിരഞ്ഞെടുക്കുക

മെത്തേഡ് A — ക്രോമ കീ (സോളിഡ് കളർ ബാക്ക്ഗ്രൗണ്ട് നീക്കം ചെയ്യൽ)

ഒരു alpha മാറ്റ് നിർമ്മിക്കുന്നതിന് വീഡിയോ സ്ട്രീമിൽ നിന്ന് ഒരു നിർദ്ദിഷ്ട കളർ വാല്യൂ (പച്ച അല്ലെങ്കിൽ നീല പോലെയുള്ളവ) നീക്കം ചെയ്യുന്നതിനെയാണ് ക്രോമ കീയിംഗ് എന്ന് പറയുന്നത്. നിങ്ങൾ ബാക്ക്ഗ്രൗണ്ട് കളർ കൺട്രോൾ ചെയ്യുന്ന സ്റ്റുഡിയോ ബാക്ക്ഗ്രൗണ്ടുകൾക്കോ ആപ്പ് എമുലേറ്ററുകൾക്കോ എതിരായി ക്യാപ്ചർ ചെയ്ത UI റെക്കോർഡിംഗുകൾക്ക് ഈ രീതി അനുയോജ്യമാണ്. ക്രോമ കീയിംഗ് പൂർണ്ണമായും ഓട്ടോമേറ്റഡ് ആണ്, കൂടാതെ FFmpeg-ൽ വളരെ വേഗത്തിൽ പ്രോസസ്സ് ചെയ്യപ്പെടുന്നു.

മെത്തേഡ് B — ജ്യാമിതീയ ക്രോപ്പും മാസ്കും (ചതുരങ്ങൾ, റൗണ്ട് ചെയ്ത കോർണറുകൾ, സർക്കിളുകൾ)

ചതുരാകൃതിയിലുള്ള ഡാഷ്‌ബോർഡ് വിജറ്റ്, റൗണ്ട് ചെയ്ത ആപ്പ് കാർഡ് അല്ലെങ്കിൽ സർക്കുലർ പ്രൊഫൈൽ അവതാർ പോലെയുള്ള കൃത്യമായ ജ്യാമിതീയ രൂപമുള്ള ഒരു സാധാരണ UI ഘടകം റെക്കോർഡ് ചെയ്യുമ്പോൾ, ക്രോമ കീയിംഗ് ആവശ്യമില്ല. പകരം, നിങ്ങൾക്ക് കൃത്യമായ ജ്യാമിതീയ പിക്സൽ ക്രോപ്പിംഗ് കോർഡിനേറ്റുകൾ നിർവ്വചിക്കാനും പ്രീ-റെൻഡർ ചെയ്ത 8-bit ബ്ലാക്ക് ആന്റ് വൈറ്റ് മാസ്ക് ഫയൽ ഓവർലേ ചെയ്യാനും കഴിയും.

ഒരു alpha മാസ്ക് ഇമേജിൽ, വൈറ്റ് പിക്സലുകൾ (#FFFFFF) പൂർണ്ണ ഒപാസിറ്റിയും, ബ്ലാക്ക് പിക്സലുകൾ (#000000) പൂർണ്ണ ട്രാൻസ്പാരൻസിയും നൽകുന്നു, കൂടാതെ ഗ്രേ പിക്സലുകൾ കൃത്യമായ സ്മൂത്ത് ആന്റി-അലിയാസ്ഡ് എഡ്ജുകൾക്കായി സബ്-പിക്സൽ സുതാര്യത നിർമ്മിക്കുന്നു.

മെത്തേഡ് C — സങ്കീർണ്ണമായ സബ്ജക്റ്റുകൾക്കായി AI ബാക്ക്ഗ്രൗണ്ട് റിമൂവൽ

നിങ്ങളുടെ റെക്കോർഡിംഗിൽ ആളുകൾ, സങ്കീർണ്ണമായ 3D ഗ്രാഫിക്സ് അല്ലെങ്കിൽ യഥാർത്ഥ ലോക ബാക്ക്ഗ്രൗണ്ടുകളിൽ റെക്കോർഡ് ചെയ്ത ലൈവ് വീഡിയോ ഫീഡുകൾ പോലെയുള്ള സങ്കീർണ്ണമായ വിഷയങ്ങൾ അടങ്ങിയിട്ടുണ്ടെങ്കിൽ, ക്രോമ കീയിംഗും ജ്യാമിതീയ മാസ്കുകളും പരാജയപ്പെടും. ഇങ്ങനെയുള്ള സന്ദർഭങ്ങളിൽ, rembg അല്ലെങ്കിൽ RVM (Robust Video Matting) പോലെയുള്ള ഓപ്പൺ സോഴ്സ് AI സെഗ്മെന്റേഷൻ ടൂളുകളിലൂടെ നിങ്ങളുടെ വീഡിയോ ഫ്രെയിമുകൾ പ്രോസസ്സ് ചെയ്യുന്നത് മാനുവൽ എഡിറ്റിംഗ് ഇല്ലാതെ തന്നെ കൃത്യമായ സബ്ജക്റ്റ് മാറ്റുകൾ എക്‌സ്‌ട്രാക്‌റ്റ് ചെയ്യുന്നു.

മെത്തേഡ് D — നെറ്റീവ് alpha ക്യാപ്ചർ (നിങ്ങളുടെ സോഴ്സിൽ സുതാര്യത ഉള്ളപ്പോൾ)

Lottie, Rive, After Effects അല്ലെങ്കിൽ നെറ്റീവ് alpha ചാനൽ റെൻഡറിംഗിനെ പിന്തുണയ്ക്കുന്ന ഡൈനാമിക് WebGL കാൻവാസ് റെൻഡററുകൾ (ഉദാഹരണത്തിന് ProRes 4444 അല്ലെങ്കിൽ alpha ഉള്ള WebM VP9) പോലെയുള്ള ടൂളുകളിലാണ് നിങ്ങളുടെ സോഴ്സ് ആസറ്റ് നിർമ്മിച്ചതെങ്കിൽ, ഫിൽട്ടറുകൾ ഇല്ലാതെ തന്നെ FFmpeg-ന് നെറ്റീവ് alpha ചാനലിനെ നേരിട്ട് WebP എൻകോഡറിലേക്ക് നൽകാൻ കഴിയും.

നിങ്ങളുടെ സാഹചര്യത്തിന് അനുയോജ്യമായ രീതി ഏതാണ് (തീരുമാന പട്ടിക)

ഘട്ടം 3 — FFmpeg ഉപയോഗിച്ച് ബാക്ക്ഗ്രൗണ്ട് നീക്കം ചെയ്യുക

ക്രോമ കീ കമാൻഡുകളുടെ വിശദീകരണം

ഒരു സ്ക്രീൻ റെക്കോർഡിംഗിൽ നിന്ന് സോളിഡ് ഗ്രീൻ ബാക്ക്ഗ്രൗണ്ട് നീക്കം ചെയ്ത് ഒരു ട്രാൻസ്പാരന്റ് വീഡിയോ സ്ട്രീം നിർമ്മിക്കുന്നതിന്, നിങ്ങളുടെ ടെർമിനലിൽ താഴെ പറയുന്ന FFmpeg ഫിൽട്ടർ കമാൻഡ് റൺ ചെയ്യുക:

ffmpeg -i input_recording.mp4 -vf "colorkey=0x00FF00:0.15:0.05,format=yuva420p" -c:v rawvideo temp_alpha.nut

ഈ കമാൻഡ് colorkey ഫിൽട്ടർ ഗ്രാഫ് വഴി നിങ്ങളുടെ റെക്കോർഡിംഗിനെ പ്രോസസ്സ് ചെയ്യുന്നു. 0x00FF00 എന്ന പാരാമീറ്റർ ടാർഗെറ്റ് Hex കളർ (പ്യുവർ ഗ്രീൻ) വ്യക്തമാക്കുന്നു. രണ്ടാമത്തെ വാല്യൂ (0.15) കളർ സിമിലാരിറ്റി ടോളറൻസ് സജ്ജമാക്കുന്നു, അതേസമയം മൂന്നാമത്തെ വാല്യൂ (0.05) സോഫ്റ്റ് എഡ്ജ് ബ്ലെൻഡിംഗ് രീതി നിർവ്വചിക്കുന്നു. format=yuva420p എന്ന് നൽകുന്നത് പിക്സൽ ഡാറ്റയിലേക്ക് വ്യക്തമായ 8-bit YUV alpha ചാനൽ ചേർക്കാൻ FFmpeg-നെ നിർബന്ധിതമാക്കുന്നു.

വ്യക്തമായ അരികുകൾക്കായി സിമിലാരിറ്റിയും ബ്ലെൻഡും ട്യൂൺ ചെയ്യൽ

similarity, blend പാരാമീറ്ററുകൾ കൃത്യമായി ക്രമീകരിക്കുന്നത് അരികുകളുടെ വിവരങ്ങൾ നിലനിർത്തുന്നതോടൊപ്പം അനാവശ്യമായ ബാക്ക്ഗ്രൗണ്ട് കളർ ലീക്ക് തടയുന്നു:

• Similarity (0.01 മുതൽ 1.0 വരെ): നീക്കം ചെയ്യുന്നതിനായി ഒരു പിക്സലിന്റെ നിറം 0x00FF00 യുമായി എത്രത്തോളം പൊരുത്തപ്പെടണമെന്ന് നിയന്ത്രിക്കുന്നു. അൺകംപ്രസ്സ് ചെയ്ത സ്ക്രീൻ ക്യാപ്ചറുകൾക്ക് 0.10 മുതൽ 0.18 വരെയുള്ള ക്രമീകരണം ഏറ്റവും നന്നായി പ്രവർത്തിക്കുന്നു.
• Blend (0.0 മുതൽ 1.0 വരെ): നീക്കം ചെയ്ത ഭാഗങ്ങളുടെ അതിരുകളിൽ സോഫ്റ്റ് ഒപാസിറ്റി ഗ്രാഡിയന്റ് സൃഷ്ടിക്കുന്നു. 0.02 മുതൽ 0.08 വരെയുള്ള ക്രമീകരണം പിക്സലേറ്റഡ് അരികുകൾ തടയുന്നു.

പച്ച നിറത്തിന്റെ ലീക്കും ഹാലോ എഡ്ജുകളും പരിഹരിക്കൽ

നിങ്ങളുടെ UI കണ്ടന്റിൽ അരികുകളിൽ നേർത്ത പച്ച വരയോ കളർ ലീക്കോ കാണുന്നുണ്ടെങ്കിൽ, FFmpeg-ന്റെ despill ഫിൽട്ടർ പ്രയോഗിക്കുക അല്ലെങ്കിൽ കളർ കർവുകൾ ക്രമീകരിക്കുക:

ffmpeg -i input_recording.mp4 -vf "colorkey=0x00FF00:0.12:0.04,despill=type=green:expand=0.1,format=yuva420p" output_clean.mov

despill ഫിൽട്ടർ ട്രാൻസ്പാരൻസി അതിരുകൾക്ക് സമീപമുള്ള പിക്സലുകളെ വിശകലനം ചെയ്യുകയും ബാക്കിയുള്ള പച്ച നിറങ്ങളെ ന്യൂട്രൽ ഗ്രേ അല്ലെങ്കിൽ ട്രാൻസ്പാരന്റ് ടോണുകളാക്കി മാറ്റുകയും ചെയ്യുന്നു.

alpha ഓവർലേ ഉപയോഗിച്ച് റൗണ്ട് ചെയ്ത കോർണർ മാസ്ക് 적용ിക്കൽ

കളർ കീയിംഗ് ഇല്ലാതെ തന്നെ ഒരു ആപ്പ് ഡെമോയിലേക്ക് വ്യക്തമായ റൗണ്ട് കോർണറുകൾ നൽകുന്നതിന്, നിങ്ങളുടെ റെക്കോർഡിംഗ് അളവുകളുമായി പൊരുത്തപ്പെടുന്ന ഒരു ബ്ലാക്ക് ആന്റ് വൈറ്റ് മാസ്ക് ഇമേജ് (mask.png) നിർമ്മിക്കുക (ഉദാഹരണത്തിന്, ബ്ലാക്ക് ബാക്ക്ഗ്രൗണ്ടിൽ 24px റൗണ്ട് കോർണറുകളുള്ള വൈറ്റ് റെക്റ്റാങ്കിൾ). ഈ FFmpeg ഓവർലേ ഫിൽട്ടർ ഗ്രാഫ് റൺ ചെയ്യുക:

ffmpeg -i recording.mp4 -i mask.png -filter_complex "[0:v][1:v]alphamerge,format=yuva420p" masked_output.mov

alphamerge ഫിൽട്ടർ രണ്ടാമത്തെ ഇൻപുട്ടിന്റെ (mask.png) ഗ്രേസ്‌കെയിൽ ലുമിനൻസ് വാല്യൂകൾ എടുത്ത് അവയെ നിങ്ങളുടെ വീഡിയോയുടെ കൃത്യമായ 8-bit alpha ചാനൽ ട്രാൻസ്പാരൻസി വാല്യൂകളാക്കി മാറ്റുന്നു.

alpha ചാനൽ കൃത്യമായി പ്രവർത്തിക്കുന്നുണ്ടോ എന്ന് പരിശോധിക്കൽ

WebP കൺവേർഷന് മുമ്പ് നിങ്ങളുടെ ഫയലിൽ യഥാർത്ഥ alpha ചാനൽ ട്രാൻസ്പാരൻസി ഉണ്ടെന്ന് ഉറപ്പാക്കാൻ, FFmpeg-നുള്ളിൽ ഒരു ബ്രൈറ്റ് റെഡ് ബാക്ക്ഗ്രൗണ്ടിൽ ഫയൽ റെൻഡർ ചെയ്ത് ടെസ്റ്റ് ചെയ്യുക:

ffmpeg -f lavfi -i color=c=red:s=1280x720 -i masked_output.mov -filter_complex "[0:v][1:v]overlay=shortest=1" test_check.mp4

test_check.mp4 തുറക്കുക. നിങ്ങളുടെ UI എലമെന്റ് റെഡ് ബാക്ക്ഗ്രൗണ്ടിന് മുകളിൽ ബാക്ക്ഗ്രൗണ്ട് ബോക്സുകൾ ഇല്ലാതെ വ്യക്തമായി ഫ്ലോട്ട് ചെയ്യുന്നുണ്ടെങ്കിൽ, നിങ്ങളുടെ alpha ചാനൽ ട്രാൻസ്പാരൻസി കൃത്യമാണ്, അത് അവസാന എക്സ്പോർട്ടിന് തയ്യാറാണ്.

ഓരോ കമാൻഡും യഥാർത്ഥത്തിൽ എന്താണ് ചെയ്യുന്നത് (കോപ്പി-പേസ്റ്റ് ചെയ്യാവുന്നത്)

ശ്രദ്ധിക്കുക: മുകളിലുള്ള കമാൻഡുകൾ റോ MP4 പിക്സൽ സ്ട്രീമുകളെ പ്രോസസ്സ് ചെയ്യുകയും 지정ിച്ച hex വാല്യൂവിലേക്ക് കളർ ദൂരം കണക്കാക്കുകയും 4-ചാനൽ പിക്സൽ മാട്രിക്സ് (RGBA/YUVA) ചേർക്കുകയും ചെയ്യുന്നു. input_recording.mp4 എന്നത് നിങ്ങളുടെ ഫയലിന്റെ പേര് നൽകി ഈ കമാൻഡുകൾ ടെർമിനലിലേക്കോ PowerShell-ലേക്കോ നേരിട്ട് കോപ്പി ചെയ്ത് പേസ്റ്റ് ചെയ്യാവുന്നതാണ്.

ഘട്ടം 4 — ആനിമേറ്റഡ് WebP ആയി എക്‌സ്‌പോർട്ട് ചെയ്യുക

alpha ഉള്ള ആനിമേറ്റഡ് WebP-യ്ക്കുള്ള FFmpeg കമാൻഡ്

നിങ്ങളുടെ alpha ചാനൽ കീ ചെയ്യുകയോ മാസ്ക് ചെയ്യുകയോ ചെയ്തു കഴിഞ്ഞാൽ, നിങ്ങളുടെ അവസാന ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP ഫയൽ എക്‌സ്‌പോർട്ട് ചെയ്യുന്നതിന് ഈ FFmpeg കമാൻഡ് റൺ ചെയ്യുക:

ffmpeg -i input_recording.mp4 -vf "colorkey=0x00FF00:0.14:0.04,fps=24,scale=640:-1" -vcodec libwebp -filter_complex "[0:v] fps=24,scale=640:-1:flags=lanczos[x];[x]split[a][b];[a]palettegen=reserve_transparent=1[p];[b][p]paletteuse" -loop 0 -q:v 75 -preset default final_animated_frame.webp

ഈ ഒറ്റവരി കമാൻഡ് കളർ കീയിംഗ്, ഫ്രെയിം-റേറ്റ് അഡ്ജസ്റ്റ്മെന്റ്, ഉയർന്ന നിലവാരമുള്ള Lanczos ഡൗൺസ്കേലിംഗ്, alpha പാലറ്റ് ഓപ്റ്റിമൈസേഷൻ, ലോസി WebP കംപ്രഷൻ എന്നിവ ഒരൊറ്റ പ്രോസസ്സിൽ കൈകാര്യം ചെയ്യുന്നു.

ലോസിയും ലോസ്‌ലെസ്സ് WebP-യും — ഏതാണ് എപ്പോൾ ഉപയോഗിക്കേണ്ടത്

ആനിമേറ്റഡ് WebP ലോസി, ലോസ്‌ലെസ്സ് ഇന്റേണൽ കംപ്രഷൻ മോഡുകളെ പിന്തുണയ്ക്കുന്നു:

• Lossless WebP (-lossless 1): കംപ്രഷൻ തകരാറുകൾ ഇല്ലാതെ കൃത്യമായ പിക്സൽ വ്യക്തതയും ലൈനുകളും നിലനിർത്തുന്നു. ഫ്ലാറ്റ് വെക്റ്റർ UI ഗ്രാഫിക്സ്, വ്യക്തമായ ടൈപ്പോഗ്രാഫി, ഉയർന്ന കോൺട്രാസ്റ്റ് ഐക്കണുകൾ എന്നിവയ്ക്ക് അനുയോജ്യമാണ്. എന്നിരുന്നാലും, സങ്കീർണ്ണമായ സ്ക്രീൻ റെക്കോർഡിംഗുകൾക്ക് ഫയൽ സൈസുകൾ വലുതായിരിക്കാം.
• Lossy WebP (-q:v 65 മുതൽ 80 വരെ): ആവശ്യമില്ലാത്ത ഇമേജ് ഡാറ്റ ഒഴിവാക്കാൻ ഫ്രീക്വൻസി ട്രാൻസ്ഫോർമേഷൻ ഉപയോഗിക്കുന്നു. ഗ്രാഡിയന്റുകൾ, സോഫ്റ്റ് ഡ്രോപ്പ് ഷാഡോകൾ അല്ലെങ്കിൽ വീഡിയോ UI ഫീഡുകൾ അടങ്ങിയ സ്ക്രീൻ റെക്കോർഡിംഗുകൾക്ക് ഇത് അനുയോജ്യമാണ്, ഇത് വിഷ്വൽ ക്വാളിറ്റിയെ ബാധിക്കാതെ ഫയൽ സൈസ് 70% വരെ കുറയ്ക്കുന്നു.

ക്വാളിറ്റി, കംപ്രഷൻ ലെവൽ, ലൂപ്പ് സെറ്റിംഗ്സുകൾ

ഫയൽ ഔട്ട്പുട്ടും ആനിമേഷൻ പെരുമാറ്റവും നിയന്ത്രിക്കുന്നതിന് ഈ പ്രധാന FFmpeg പാരാമീറ്ററുകൾ ട്യൂൺ ചെയ്യുക:

• -q:v [1-100]: ലോസി ക്വാളിറ്റി ഘടകം ക്രമീകരിക്കുന്നു. 75 എന്നത് വിഷ്വൽ വ്യക്തതയും കുറഞ്ഞ ഫയൽ സൈസും തമ്മിലുള്ള മികച്ച ബാലൻസ് നൽകുന്നു.
• -compression_level [0-6]: CPU കംപ്രഷൻ ശ്രമം ക്രമീകരിക്കുന്നു. ഏറ്റവും കുറഞ്ഞ ഫയൽ സൈസ് ഉറപ്പാക്കാൻ പ്രൊഡക്ഷൻ വെബ് ബിൽഡുകൾക്ക് എപ്പോഴും -compression_level 6 ഉപയോഗിക്കുക.
• -loop [count]: ആനിമേഷൻ ആവർത്തനം നിർവ്വചിക്കുന്നു. -loop 0 അനന്തമായ ലൂപ്പിംഗ് ക്രമീകരിക്കുന്നു (വെബ് UI കോമ്പോണന്റുകൾക്കുള്ള സ്റ്റാൻഡേർഡ്), അതേസമയം -loop 1 ഒരു തവണ പ്ലേ ചെയ്യുകയും അവസാന ഫ്രെയിമിൽ നിൽക്കുകയും ചെയ്യുന്നു.

സ്മൂത്ത് പ്ലേബാക്കിനായി ഫ്രെയിം റേറ്റ് ക്രമീകരിക്കൽ

ഇമേജ് ഫോർമാറ്റുകളിൽ ഉയർന്ന ഫ്രെയിം റേറ്റ് (60 fps പോലെയുള്ളവ) നിലനിർത്തുന്നത് ബ്രൗസർ റെൻഡറിംഗ് സമയത്ത് ഉയർന്ന CPU ഉപയോഗത്തിന് കാരണമാകുന്നു. വീഡിയോ ഫിൽട്ടർ ചെയിനിനുള്ളിൽ fps=24 ഉപയോഗിച്ച് നിങ്ങളുടെ സോഴ്സ് വീഡിയോ 20 fps അല്ലെങ്കിൽ 24 fps ആയി കുറയ്ക്കുന്നത് മൊത്തം ഫ്രെയിം കൗണ്ട് 60% കുറയ്ക്കുന്നു, ഇത് ലാഗ് ഇല്ലാത്ത UI മോഷൻ അനുഭവപ്പെടുത്തുന്നതോടൊപ്പം ഫയൽ സൈസ് വളരെ കുറയ്ക്കുകയും ചെയ്യുന്നു.

അവസാന ഫയലിൽ ട്രാൻസ്പാരൻസി ഉണ്ടെന്ന് ഉറപ്പാക്കൽ

എക്‌സ്‌പോർട്ട് ചെയ്‌ത .webp ഫയൽ വെബ് എൻവയോൺമെന്റുകളിൽ പൂർണ്ണ alpha ചാനൽ ട്രാൻസ്പാരൻസി നിലനിർത്തുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ, ഒരു പുതിയ Google Chrome ബ്രൗസർ ടാബിലേക്ക് ഔട്ട്‌പുട്ട് ഫയൽ ഡ്രാഗ് ചെയ്ത് ഡ്രോപ്പ് ചെയ്യുക. Chrome Developer Tools (F12) തുറന്ന്, Elements ഇൻസ്‌പെക്ടറിലേക്ക് പോയി, ഡൊക്യുമെന്റ് ബോഡി ബാക്ക്ഗ്രൗണ്ട് കളർ #000000, #FF0000, #FFFFFF എന്നിങ്ങനെ നൽകുക.

നിങ്ങളുടെ ആനിമേഷൻ ബോർഡറുകളിലൂടെ ബാക്ക്ഗ്രൗണ്ട് കളർ തടസ്സങ്ങളില്ലാതെ കാണാൻ സാധിക്കുന്നുണ്ടെങ്കിൽ, നിങ്ങളുടെ ആസറ്റ് വെബ് ഉപയോഗത്തിന് തയ്യാറാണ്.

ഘട്ടം 5 — ക്വാളിറ്റി നഷ്ടപ്പെടാതെ ഫയൽ സൈസ് കുറയ്ക്കുക

ഏറ്റവും അനുയോജ്യമായ ലൂപ്പിലേക്ക് ട്രിം ചെയ്യുക

സ്ക്രീൻ ഇന്ററാക്ഷനുകൾ ക്യാപ്ചർ ചെയ്യുമ്പോൾ, ടാർഗെറ്റ് ഇന്ററാക്ഷന് മുമ്പോ ശേഷമോ ആവശ്യമില്ലാത്ത ഫ്രെയിമുകൾ ഒഴിവാക്കുക. ആക്ഷൻ ലൂപ്പിന്റെ കൃത്യമായ സീക്വൻസിലേക്ക് നിങ്ങളുടെ സോഴ്സ് റെക്കോർഡിംഗ് ട്രിം ചെയ്യുന്നതിന് FFmpeg-ന്റെ കൃത്യമായ സീക്കിംഗ് പാരാമീറ്ററുകൾ (-ss സ്റ്റാർട്ട് ടൈം, -to എൻഡ് ടൈം) ഉപയോഗിക്കുക:

ffmpeg -ss 00:00:01.500 -to 00:00:05.200 -i input_recording.mp4 -vf "colorkey=0x00FF00:0.14:0.04" -vcodec libwebp -loop 0 optimized_loop.webp

1.5 സെക്കൻഡ് വരുന്ന സ്റ്റാറ്റിക് ഭാഗം ട്രിം ചെയ്യുന്നത് പോലും ആവശ്യമില്ലാത്ത ഡസൻ കണക്കിന് ആനിമേറ്റഡ് ഫ്രെയിമുകളെ ഒഴിവാക്കുകയും വലിയ അളവിൽ ഫയൽ സൈസ് കുറയ്ക്കുകയും ചെയ്യുന്നു.

ബുദ്ധിപൂർവ്വം ഫ്രെയിം റേറ്റ് കുറയ്ക്കുക

ഭൂരിഭാഗം സോഫ്റ്റ്‌വെയർ UI മൈക്രോ-ഇന്ററാക്ഷനുകൾക്കും ഉയർന്ന വീഡിയോ ഫ്രെയിം റേറ്റുകൾ ആവശ്യമില്ല. ഫ്രെയിം റേറ്റ് 30 fps-ൽ നിന്ന് 18 fps അല്ലെങ്കിൽ 20 fps ആയി കുറയ്ക്കുന്നത് പോപ്പ്-അപ്പുകൾ, സ്റ്റാറ്റസ് റിംഗുകൾ അല്ലെങ്കിൽ ടൂൾടിപ്പുകൾ എന്നിവയുടെ സ്മൂത്ത്‌നെസിനെ ബാധിക്കാതെ തന്നെ മൊത്തം ഇമേജ് ഡാറ്റ ഗണ്യമായി കുറയ്ക്കുന്നു.

യഥാർത്ഥ കണ്ടന്റ് അതിരുകളിലേക്ക് ക്രോപ്പ് ചെയ്യുക

നിങ്ങളുടെ ആനിമേറ്റഡ് UI എലമെന്റ് മധ്യഭാഗത്തുള്ള 400x300 പിക്സൽ ഏരിയ മാത്രമാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ ഒരു പൂർണ്ണ 1920x1080 സ്ക്രീൻ ക്യാപ്ചർ എക്സ്പോർട്ട് ചെയ്യരുത്. എൻകോഡിംഗിന് മുമ്പ് അനാവശ്യ കാൻവാസ് സ്ഥലം ഒഴിവാക്കാൻ FFmpeg-ന്റെ crop ഫിൽട്ടർ ഉപയോഗിക്കുക:

ffmpeg -i input.mp4 -vf "crop=400:300:760:390,colorkey=0x00FF00:0.14:0.04" -vcodec libwebp cropped_output.webp

crop=w:h:x:y പാരാമീറ്ററുകൾ പിക്സൽ വീതി, ഉയരം, ടോപ്പ്-ലെഫ്റ്റ് ഓഫ്സെറ്റ് കോർഡിനേറ്റുകൾ എന്നിവ നിർവ്വചിക്കുന്നു, ഇത് ഉപയോഗിക്കാത്ത പിക്സലുകളെ പൂർണ്ണമായി മുറിച്ചുമാറ്റുന്നു.

മികച്ച ഫലം നൽകുന്ന ക്വാളിറ്റി സെറ്റിംഗ്സുകൾ

ലോസി WebP എക്‌സ്‌പോർട്ടുകൾക്ക്, 65-നും 75-നും ഇടയിലുള്ള ക്വാളിറ്റി വാല്യൂകൾ ടെക്‌സ്‌റ്റും ലൈനുകളും വ്യക്തമായി നിലനിർത്തുന്നതോടൊപ്പം വലിയ അളവിൽ ഫയൽ സൈസ് കുറയ്ക്കുകയും ചെയ്യുന്നു. 50-ന് താഴേക്ക് പോകുന്നത് ഒഴിവാക്കുക, കാരണം കുറഞ്ഞ വാല്യൂകൾ alpha അരികുകളിൽ വ്യക്തമായ നോയ്സ് ഉണ്ടാക്കുന്നു.

വെബ് ഉപയോഗത്തിനായുള്ള അനുയോജ്യമായ ഫയൽ സൈസുകൾ

മികച്ച വെബ് പെർഫോമൻസിനും മൊബൈൽ പേജ് ലോഡ് സ്പീഡ് മെച്ചപ്പെടുത്തുന്നതിനുമായി, നിങ്ങളുടെ കോമ്പോണന്റ് സൈസിനെ അടിസ്ഥാനമാക്കി താഴെ പറയുന്ന ഫയൽ സൈസുകൾ നിലനിർത്താൻ ശ്രമിക്കുക:

• മൈക്രോ-ഇന്ററാക്ഷനുകൾ / ബാഡ്ജുകൾ (100x100 മുതൽ 200x200 വരെ): 100 KB-ൽ താഴെ
• ഫ്ലോട്ടിംഗ് കാർഡുകൾ / ഡയലോഗുകൾ (400x400 മുതൽ 600x600 വരെ): 350 KB-ൽ താഴെ
• ഫുൾ ഹീറോ ആപ്പ് ഡെമോകൾ (800x600+): 750 KB-ൽ താഴെ

മാറ്റങ്ങൾക്ക് മുമ്പും ശേഷവുമുള്ള ഫയൽ സൈസ് പട്ടിക

ഘട്ടം 6 — നിങ്ങളുടെ വെബ്‌സൈറ്റിലോ ആപ്പിലോ ഇത് ഉപയോഗിക്കുക

ഒരു സാധാരണ img ടാഗ് ഉപയോഗിച്ച് എംബെഡ് ചെയ്യാം

ആനിമേറ്റഡ് WebP നെറ്റീവായി എല്ലാ ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നതിനാൽ, ഒരു ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP എംബെഡ് ചെയ്യുന്നതിന് സങ്കീർണ്ണമായ JavaScript പ്ലെയർ ലൈബ്രറികളോ കാൻവാസ് എഞ്ചിനുകളോ ആവശ്യമില്ല. ഒരു സ്റ്റാൻഡേർഡ് HTML <img> ടാഗ് ഉപയോഗിക്കുക:

<img src="/assets/ui-demo.webp" alt="App Feature Demo" width="640" height="360" loading="lazy" decoding="async" />

കൃത്യമായ width, height ആട്രിബ്യൂട്ടുകൾ നൽകുന്നത് പേജ് ലോഡ് ചെയ്യുന്ന സമയത്ത് ലേഔട്ട് ഷിഫ്റ്റുകൾ (CLS) ഉണ്ടാകുന്നത് തടയുന്നു.

സപ്പോർട്ട് ചെയ്യാത്ത പഴയ ബ്രൗസറുകൾക്കായി picture എലമെന്റ് ഫാൾബാക്ക്

നെറ്റീവ് WebP ആനിമേഷൻ പിന്തുണയില്ലാത്ത പഴയ ബ്രൗസറുകളെ നിങ്ങൾക്ക് പിന്തുണയ്ക്കണമെങ്കിൽ, APNG അല്ലെങ്കിൽ MP4 ഫാൾബാക്ക് നൽകുന്നതിന് HTML5 <picture> എലമെന്റ് ഉപയോഗിക്കുക:

<picture>
<source srcset="/assets/ui-demo.webp" type="image/webp" />
<source srcset="/assets/ui-demo.png" type="image/png" />
<img src="/assets/ui-demo.gif" alt="App Feature Demo" />
</picture>

ലേസി ലോഡിംഗും പെർഫോമൻസ് കാര്യങ്ങളും

ആദ്യ കാഴ്ചയിൽ കാണാത്ത ആനിമേറ്റഡ് WebP എലമെന്റുകൾക്ക് loading="lazy" ആട്രിബ്യൂട്ട് നൽകുക. ഉപയോക്താവ് ആ ഭാഗത്തേക്ക് സ്ക്രോൾ ചെയ്യുന്നത് വരെ ഡൗൺലോഡിംഗും ഫ്രെയിം ഡീകോഡിംഗും ഇത് നീട്ടിവെക്കുന്നു, ഇത് ആദ്യ പേജ് ലോഡിംഗ് സമയത്ത് CPU പെർഫോമൻസ് മെച്ചപ്പെടുത്തുന്നു.

React, Next.js, Tailwind ലേഔട്ടുകളിൽ ഇത് ഉപയോഗിക്കൽ

ആധുനിക React അല്ലെങ്കിൽ Next.js ഫ്രണ്ട്-എൻഡ് ആപ്ലിക്കേഷനുകൾക്കുള്ളിൽ ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP ആസറ്റുകൾ ചേർക്കുമ്പോൾ, സ്റ്റൈൽ ചെയ്ത Tailwind ലേഔട്ട് കണ്ടെയ്നറുകൾക്കുള്ളിൽ ഇമേജ് എംബെഡ് ചെയ്യുക:

import Image from 'next/image';

export default function HeroComponent() {
return (
<div class="relative bg-slate-900 p-8 rounded-2xl overflow-hidden">
<Image
src="/ui-demo.webp"
alt="Dynamic UI Overlay"
width={640}
height={360}
className="drop-shadow-2xl hover:scale-105 transition-transform duration-300"
unoptimized
/>
</div>
);
}

കുറിപ്പ്: പ്രീ-കംപ്രസ്സ് ചെയ്ത ആനിമേറ്റഡ് WebP ആസറ്റുകൾ ഉപയോഗിക്കുമ്പോൾ, alpha ചാനലുകളെ സ്റ്റാറ്റിക് JPEG ഫ്രെയിമുകളാക്കി മാറ്റിയേക്കാവുന്ന സെർവർ-സൈഡ് ഇമേജ് കംപ്രഷൻ ഒഴിവാക്കാൻ Next.js Image കോമ്പോണന്റുകളിൽ unoptimized എന്ന് വ്യക്തമാക്കുക.

Android, iOS ആപ്പുകളിൽ ഇത് ഉപയോഗിക്കൽ

നെറ്റീവ് ടൂളുകളോ ക്രോസ്-പ്ലാറ്റ്‌ഫോം ഫ്രെയിംവർക്കുകളോ ഉപയോഗിച്ച് നിർമ്മിച്ച മൊബൈൽ ആപ്ലിക്കേഷനുകൾ WebP ട്രാൻസ്പാരന്റ് ആനിമേഷനുകളെ നേരിട്ട് കൈകാര്യം ചെയ്യുന്നു:

• Android (Kotlin/Jetpack Compose): Coil അല്ലെങ്കിൽ Glide ഇമേജ് ലോഡിംഗ് ഫ്രെയിംവർക്കുകൾ ഉപയോഗിക്കുക. Coil ImageLoader.Builder(context).components { add(AnimatedWebpDecoder.Factory()) } വഴി നെറ്റീവായി ആനിമേറ്റഡ് WebP റെൻഡർ ചെയ്യുന്നു.
• iOS (SwiftUI): SwiftUI AsyncImage അല്ലെങ്കിൽ SDWebImageSwiftUI പോലെയുള്ള ലൈറ്റ്‌വെയ്റ്റ് റാപ്പറുകൾ വഴി WebP കൈകാര്യം ചെയ്യുന്നു.
• Flutter / React Native: സ്റ്റാൻഡേർഡ് Image.asset('assets/ui-demo.webp') വിജറ്റുകൾ ഉപയോഗിക്കുക; നെറ്റീവ് ഫ്രെയിംവർക്ക് എഞ്ചിനുകൾ ഡിവൈസ് GPU ലെയറുകളിൽ നേരിട്ട് WebP alpha സീക്വൻസുകൾ പ്രോസസ്സ് ചെയ്യുന്നു.

നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ആർക്കിടെക്ചറിന് റിയൽ-ടൈം ഇന്ററാക്ടീവ് മോഷൻ ഗ്രാഫിക്സ്, പാർട്ടിക്കിൾ സ്ട്രീമുകൾ, അല്ലെങ്കിൽ WebP-യേക്കാൾ മെമ്മറി ഉപയോഗം കുറഞ്ഞ സർവർ-ഡ്രൈവ് ലൈവ് സ്ട്രീമിംഗ് ഗിഫ്റ്റ് ആനിമേഷനുകൾ എന്നിവ ആവശ്യമാണെങ്കിൽ, SVGA Maker അല്ലെങ്കിൽ അനുയോജ്യമായ വെക്റ്റർ എഞ്ചിനുകൾ പിന്തുണയ്ക്കുന്ന പ്രത്യേക ഫോർമാറ്റുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

പൂർണ്ണമായ കസ്റ്റം റിയൽ-ടൈം മൊബൈൽ പ്ലാറ്റ്‌ഫോമുകൾ നിർമ്മിക്കുന്ന ടീമുകൾക്ക്, AppLooma LLC പോലെയുള്ള പരിചയസമ്പന്നരായ ഒരു ഡെവലപ്‌മെന്റ് സ്ഥാപനത്തിന്റെ സഹായം തേടുന്നത്, ഫ്രെയിം ഡ്രോപ്പുകളോ മെമ്മറി ഓവർലോഡോ ഇല്ലാതെ നിങ്ങളുടെ റെൻഡറിംഗ് പൈപ്പ്‌ലൈൻ ഡൈനാമിക് ആനിമേഷനുകൾ കൈകാര്യം ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

ഡാർക്ക്, ലൈറ്റ് ബാക്ക്ഗ്രൗണ്ടുകളിൽ ഇത് ശരിയായി കാണപ്പെടുന്നു എന്ന് ഉറപ്പാക്കൽ

വ്യത്യസ്ത ബാക്ക്ഗ്രൗണ്ട് കളറുകളിൽ (ഉദാഹരണത്തിന്, പ്യുവർ ബ്ലാക്ക് #000000, പ്യുവർ വൈറ്റ് #FFFFFF, മറ്റ് ബ്രാൻഡ് കളറുകൾ) നിങ്ങളുടെ ട്രാൻസ്പാരന്റ് WebP ആസറ്റ് എപ്പോഴും ടെസ്റ്റ് ചെയ്യുക. വൈറ്റ് ബാക്ക്ഗ്രൗണ്ടുകളിൽ ഡാർക്ക് ബോർഡർ ഫ്രിഞ്ചിംഗ് കാണുകയാണെങ്കിൽ, അരികുകളിലെ പിക്സൽ പ്രശ്നങ്ങൾ പരിഹരിക്കാൻ അല്പം ഉയർന്ന blend, despill പാരാമീറ്ററുകൾ നൽകി നിങ്ങളുടെ FFmpeg ക്രോമ കീ പൈപ്പ്‌ലൈൻ വീണ്ടും റൺ ചെയ്യുക.

ട്രബിൾഷൂട്ടിംഗ് — സാധാരണ പ്രശ്നങ്ങളും പരിഹാരങ്ങളും

എന്റെ WebP-യിൽ ട്രാൻസ്പാരൻസിക്ക് പകരം ബ്ലാക്ക് അല്ലെങ്കിൽ വൈറ്റ് ബാക്ക്ഗ്രൗണ്ട് കാണിക്കുന്നു

കളർ സ്പേസ് കൺവേർഷൻ സമയത്ത് FFmpeg alpha ചാനൽ ഒഴിവാക്കുമ്പോഴോ ഇന്റർമീഡിയറ്റ് ഇമേജ് പൈപ്പ് പിക്സൽ ഫോർമാറ്റുകളെ സ്റ്റാൻഡേർഡ് 3-ചാനൽ RGB-യിലേക്ക് മാറ്റുമ്പോഴോ ആണ് ഈ പ്രശ്നം ഉണ്ടാകുന്നത്. പിക്സൽ ബഫറുകൾ libwebp എൻകോഡറിലേക്ക് നൽകുന്നതിന് മുമ്പ് നിങ്ങളുടെ ഫിൽട്ടർ ഗ്രാഫിൽ format=yuva420p അല്ലെങ്കിൽ format=rgba അടങ്ങിയിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.

അരികുകൾ പിക്സലേറ്റഡ് ആയി കാണപ്പെടുന്നു അല്ലെങ്കിൽ പച്ച ഹാലോ കാണപ്പെടുന്നു

പിക്സലേറ്റഡ് അരികുകളോ കളർ ഔട്ട്‌ലൈനുകളോ കാണിക്കുന്നത് ക്രോമ കീ സിമിലാരിറ്റി ലിമിറ്റ് വളരെ കുറവായി ക്രമീകരിച്ചതിനാലോ സോഫ്റ്റ് എഡ്ജ് ബ്ലെൻഡിംഗ് ഒഴിവാക്കിയതിനാലോ ആണ്. FFmpeg-ൽ നിങ്ങളുടെ blend പാരാമീറ്റർ 0.01-ൽ നിന്ന് 0.05 അല്ലെങ്കിൽ 0.08 ആയി വർദ്ധിപ്പിക്കുക. അല്ലെങ്കിൽ, അരികുകൾ കൃത്യമായി ക്രമീകരിക്കാൻ ഉയർന്ന റെസല്യൂഷനുള്ള 8-bit ഗ്രേസ്‌കെയിൽ alpha മാസ്‌ക് ഉപയോഗിക്കുക.

ആനിമേഷൻ ലൂപ്പ് ചെയ്യുന്നില്ല അല്ലെങ്കിൽ ഒരു തവണ മാത്രം പ്ലേ ചെയ്യുന്നു

സാധാരണയായി, ചില FFmpeg ബിൽഡുകൾ WebP സീക്വൻസുകളെ ഒരൊറ്റ ആനിമേഷൻ സൈക്കിൾ മാത്രം പ്ലേ ചെയ്ത് നിൽക്കുന്ന രീതിയിലാണ് എൻകോഡ് ചെയ്യുന്നത്. വെബ് ബ്രൗസർ എഞ്ചിനുകൾക്കുള്ളിൽ അനന്തമായി ലൂപ്പ് ചെയ്യുന്നതിന് നിങ്ങളുടെ എക്‌സ്‌പോർട്ട് കമാൻഡിലേക്ക് -loop 0 എന്ന് നൽകുക.

ഫയൽ സൈസ് വളരെ കൂടുതലാണ്

നിങ്ങളുടെ എക്‌സ്‌പോർട്ട് ചെയ്‌ത ഫയൽ സൈസ് 1-2 MB-യിൽ കൂടുതലാണെങ്കിൽ, നിങ്ങൾ ഫുൾ സ്‌ക്രീൻ റെസല്യൂഷനിൽ എൻകോഡ് ചെയ്യുകയോ, 60 fps നിലനിർത്തുകയോ, ലോസ്‌ലെസ്സ് കംപ്രഷൻ (-lossless 1) ഉപയോഗിക്കുകയോ ചെയ്യുന്നുണ്ടാകാം. ഉപയോഗിക്കാത്ത കാൻവാസ് സ്ഥലം ക്രോപ്പ് ചെയ്യുക, ഫ്രെയിം റേറ്റ് 20 fps ആയി കുറയ്ക്കുക, റെസല്യൂഷൻ കുറയ്ക്കുക, കൂടാതെ -q:v 70 നൽകി ലോസി WebP എൻകോഡിംഗ് ഉപയോഗിക്കുക.

പ്ലേബാക്ക് ലാഗ് ആകുന്നു

വീഡിയോ എക്‌സ്‌ട്രാക്‌ഷൻ സമയത്തെ അസമമായ ഫ്രെയിം ഡ്യൂറേഷൻ ടൈംസ്റ്റാമ്പുകൾ അല്ലെങ്കിൽ ഉപയോക്തൃ ഉപകരണങ്ങളിലെ ഉയർന്ന CPU ഡീകോഡിംഗ് ഭാരം കാരണമാണ് ആനിമേഷൻ പ്ലേബാക്ക് ലാഗ് ആകുന്നത്. വേരിയബിൾ ഫ്രെയിം റേറ്റ് ക്യാപ്‌ചർ മോഡുകൾക്ക് പകരം FFmpeg-ന്റെ fps=24 ഫിൽട്ടർ ഉപയോഗിച്ച് സ്ഥിരമായ ഫ്രെയിം റേറ്റ് നൽകുക.

ഇത് Chrome-ൽ പ്രവർത്തിക്കുന്നു, എന്നാൽ മറ്റൊരു ബ്രൗസറിലോ ആപ്പിലോ പ്രവർത്തിക്കുന്നില്ല

പഴയ ഓപ്പറേറ്റിംഗ് സിസ്റ്റം വെബ്‌വ്യൂകൾ അല്ലെങ്കിൽ അപ്‌ഡേറ്റ് ചെയ്യാത്ത ഇമേജ് പാർസിംഗ് ലൈബ്രറികൾ ലോസി WebP alpha ചാനലുകൾ ശരിയായി ഡീകോഡ് ചെയ്യുന്നതിൽ പരാജയപ്പെട്ടേക്കാം. സ്റ്റാൻഡേർഡ് ലോസ്‌ലെസ്സ് പാരാമീറ്ററുകൾ (-lossless 1) ഉപയോഗിച്ച് ആസറ്റ് വീണ്ടും എക്‌സ്‌പോർട്ട് ചെയ്യുന്നതോ ഒരു picture എലമെന്റ് ഫാൾബാക്ക് നൽകുന്നതോ ഈ പ്രശ്നം പരിഹരിക്കുന്നു.

ട്രബിൾഷൂട്ടിംഗ് ഗൈഡ്

സെർച്ച് ടിപ്പ്: 'FFmpeg webp black background transparency fix' അല്ലെങ്കിൽ 'remove green halo ffmpeg chroma key' പോലെയുള്ള സാധാരണ സംശയങ്ങൾ ആളുകൾ തിരയാറുണ്ട്. കമാൻഡ് ലൈൻ ഉപയോഗിക്കുമ്പോൾ ഉണ്ടാകുന്ന പ്രശ്നങ്ങൾ വേഗത്തിൽ പരിഹരിക്കാൻ ഈ ലളിതമായ ഗൈഡ് നിങ്ങളെ സഹായിക്കും.

ബോണസ് — പ്രോസസ്സ് മുഴുവൻ ഓട്ടോമേറ്റ് ചെയ്യാം

ബാച്ച് കൺവേർഷനായി ഉപയോഗിക്കാവുന്ന ഒരു ഷെൽ സ്ക്രിപ്റ്റ്

ഒരൊറ്റ ടെർമിനൽ കമാൻഡ് ഉപയോഗിച്ച് റോ സ്ക്രീൻ റെക്കോർഡിംഗുകളെ ട്രാൻസ്പാരന്റ് WebP ഫയലുകളാക്കി മാറ്റുന്ന ഒരു Bash ഓട്ടോമേഷൻ സ്ക്രിപ്റ്റ് (convert_to_webp.sh) നിർമ്മിച്ച് സമയം ലാഭിക്കുക:

#!/bin/bash
# Usage: ./convert_to_webp.sh input.mp4 output.webp

INPUT=$1
OUTPUT=$2

ffmpeg -i "$INPUT" \
-vf "colorkey=0x00FF00:0.14:0.04,despill=type=green,fps=24,scale=640:-1:flags=lanczos" \
-vcodec libwebp \_complex "[0:v] fps=24,scale=640:-1:flags=lanczos[x];[x]split[a][b];[a]palettegen=reserve_transparent=1[p];[b][p]paletteuse" \
-loop 0 \
-q:v 75 \
-compression_level 6 \
"$OUTPUT"

echo "Successfully processed $INPUT into $OUTPUT with transparency!"

നിങ്ങളുടെ ടെർമിനലിൽ chmod +x convert_to_webp.sh റൺ ചെയ്തുകൊണ്ട് സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ടബിൾ ആക്കുക.

ഒരു ഫോൾഡറിലെ മുഴുവൻ റെക്കോർഡിംഗുകളും ഒരേസമയം പ്രോസസ്സ് ചെയ്യൽ

റോ MP4 സ്ക്രീൻ ക്യാപ്ചറുകൾ അടങ്ങിയ ഒരു ഡയറക്ടറി മുഴുവൻ പ്രോസസ്സ് ചെയ്യാനും അവയെ ട്രാൻസ്പാരന്റ് WebP ഫയലുകളാക്കി ഓട്ടോമാറ്റിക്കായി മാറ്റാനും, ഈ ടെർമിനൽ ലൂപ്പ് റൺ ചെയ്യുക:

for f in *.mp4; do ./convert_to_webp.sh "$f" "${f%.mp4}.webp"; done

ഈ ബാച്ച് ലൂപ്പ് നിങ്ങളുടെ ഫോൾഡറിലെ ഓരോ MP4 ഫയലിലൂടെയും കടന്നുപോകുകയും, കളർ കീയിംഗും alpha എക്‌സ്‌ട്രാക്‌ഷനും പ്രയോഗിക്കുകയും, കംപ്രസ് ചെയ്ത WebP ഫയലുകൾ ഓട്ടോമാറ്റിക്കായി നൽകുകയും ചെയ്യുന്നു.

നിങ്ങളുടെ ഡിസൈൻ അല്ലെങ്കിൽ ബിൽഡ് വർക്ക്ഫ്ലോയിലേക്ക് ഇത് ചേർക്കൽ

നിങ്ങൾക്ക് ഈ FFmpeg സ്ക്രിപ്റ്റ് CI/CD ബിൽഡ് സ്ക്രിപ്റ്റുകളിലേക്കോ GitHub Actions വർക്ക്ഫ്ലോകളിലേക്കോ ലോക്കൽ NPM ബിൽഡ് പ്രൊസീജറുകളിലേക്കോ നേരിട്ട് സംയോജിപ്പിക്കാൻ കഴിയും. ഇത് ഡിസൈൻ, എഞ്ചിനീയറിംഗ് ടീമുകൾക്ക് റോ UI സ്ക്രീൻ ക്യാപ്ചറുകൾ ഒരു പ്രൊജക്റ്റ് റെപ്പോസിറ്ററിയിലേക്ക് നൽകാനും ആപ്പ് ഡിപ്ലോയ്‌മെന്റ് സമയത്ത് വെബ്ബ്-റെഡി WebP ആസറ്റുകൾ ഓട്ടോമാറ്റിക്കായി നിർമ്മിക്കാനും സഹായിക്കുന്നു.

നിങ്ങൾക്ക് എപ്പോഴാണ് ഒരു ഡിസൈനറെ തന്നെ ആവശ്യമായി വരുന്നത്

പ്രധാനപ്പെട്ട കാര്യം — സങ്കീർണ്ണമായ മോഷൻ ഗ്രാഫിക്സ്, ബ്രാൻഡ് ആനിമേഷനുകൾ, കസ്റ്റം ആനിമേഷൻ കർവുകൾ എന്നിവയ്ക്ക് ഈ രീതി മാത്രം മതിയാകില്ല.

സ്ക്രീൻ റെക്കോർഡിംഗുകളെ ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP ഫയലുകളാക്കി മാറ്റുന്നത് UI ഫീച്ചറുകൾ, ആപ്പ് വർക്ക്ഫ്ലോകൾ, മൈക്രോ-ഇന്ററാക്ഷനുകൾ എന്നിവ കാണിക്കുന്നതിന് മികച്ച രീതിയിൽ പ്രവർത്തിക്കുമെങ്കിലും, പ്രൊഫഷണൽ മോഷൻ ഗ്രാഫിക് ഡിസൈനിന് ഇത് ഒരു പകരമല്ല. സ്ക്രീൻ ക്യാപ്ചറുകൾ റെക്കോർഡ് ചെയ്ത UI ഫ്രെയിമുകളിലും സ്റ്റാൻഡേർഡ് ഇന്റർഫേസ് മാറ്റങ്ങളിലും പരിമിതപ്പെട്ടിരിക്കുന്നു. കൈകൊണ്ട് നിർമ്മിച്ച ക്യൂബിക്-ബെസിയർ കർവുകൾ, സങ്കീർണ്ണമായ 3D ക്യാരക്ടർ റിഗ്ഗുകൾ, ഡൈനാമിക് വെക്റ്റർ മോർഫിംഗ് അല്ലെങ്കിൽ പാർട്ടിക്കിൾ ഇഫക്റ്റ് ഫിസിക്സ് എന്നിവ നിർമ്മിക്കാൻ അവയ്ക്ക് കഴിയില്ല.

നിങ്ങളുടെ പ്രൊജക്റ്റിന് കസ്റ്റം ബ്രാൻഡ് ആനിമേഷനുകൾ, ഉയർന്ന പെർഫോമൻസുള്ള വെക്റ്റർ പാർട്ടിക്കിൾ ഇഫക്റ്റുകൾ, അല്ലെങ്കിൽ വോയ്‌സ് റൂം, ലൈവ്-സ്ട്രീമിംഗ് ആപ്പുകൾ എന്നിവയ്‌ക്കായി ഇന്ററാക്ടീവ് റിയൽ-ടൈം ഗിഫ്റ്റ് ആനിമേഷനുകൾ ആവശ്യമാണെങ്കിൽ, റോ സ്‌ക്രീൻ റെക്കോർഡിംഗുകളെ മാത്രം ആശ്രയിക്കുന്നത് മതിയാകില്ല. സങ്കീർണ്ണമായ വെക്റ്റർ അധിഷ്ഠിത മോഷൻ ഗ്രാഫിക്സിനും ഭാരം കുറഞ്ഞ ഇന്ററാക്ടീവ് മൊബൈൽ ആനിമേഷനുകൾക്കും, SVGA Maker പോലെയുള്ള സ്പെഷ്യലൈസ്ഡ് സ്റ്റുഡിയോ ടൂളുകൾ ഉപയോഗിക്കുകയോ പ്രൊഫഷണൽ മോഷൻ ഡിസൈനർമാരുമായി സഹകരിക്കുകയോ ചെയ്യുന്നത് മികച്ച വിഷ്വൽ ക്വാളിറ്റിയും പെർഫോമൻസും ഉറപ്പാക്കുന്നു.

Frequently asked questions

Conclusion

റോ സ്ക്രീൻ റെക്കോർഡിംഗുകളെ ലൈറ്റ്‌വെയ്റ്റ് ട്രാൻസ്പാരന്റ് ആനിമേറ്റഡ് WebP ആയി മാറ്റുന്നത്, ചിലവേറിയ മോഷൻ ഡിസൈൻ ടൂളുകളെ ആശ്രയിക്കാതെ തന്നെ നിങ്ങളുടെ SaaS ലാന്റിംഗ് പേജുകൾ, മൊബൈൽ ഓൺബോർഡിംഗ് സ്ക്രീനുകൾ, UI ഡെമോകൾ എന്നിവയുടെ ഭംഗി കൂട്ടുന്നതിനുള്ള ഏറ്റവും വേഗമേറിയ മാർഗ്ഗങ്ങളിലൊന്നാണ്. FFmpeg ക്രോമ കീയിംഗും പാലറ്റ് ഓപ്റ്റിമൈസേഷനുമായി ബാക്ക്ഗ്രൗണ്ട് ക്യാപ്‌ചറുകൾ ബന്ധിപ്പിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് മിനിറ്റുകൾക്കുള്ളിൽ 8-bit ട്രാൻസ്പാരന്റ് ആനിമേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും.

നിങ്ങളുടെ ആസറ്റ് പൈപ്പ്‌ലൈനുകൾ ഓട്ടോമേറ്റ് ചെയ്യാനോ ലൈവ് സ്ട്രീമിംഗ് സൗകര്യങ്ങളുള്ള ഉയർന്ന കൺവേർഷനുള്ള മൊബൈൽ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാനോ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഞങ്ങളുടെ പ്രത്യേക ഡിസൈൻ പൈപ്പ്‌ലൈനുകൾ പരിശോധിക്കുക അല്ലെങ്കിൽ നിങ്ങളുടെ പ്രൊഡക്റ്റ് വിഷൻ യാഥാർത്ഥ്യമാക്കാൻ AppLooma LLC-യിലെ ഞങ്ങളുടെ എഞ്ചിനീയറിംഗ് ടീമുമായി ബന്ധപ്പെടുക.