எந்த ஸ்கிரீன் ரெக்கார்டிங்கையும் ஒரு வெளிப்படையான (Transparent) அனிமேட்டட் WebP ஃப்ரேமாக மாற்றுவது எப்படி (After Effects, டிசைனர் தேவையில்லை)

உயர்தர UI மோஷன் ஓவர்லேக்களை உருவாக்க பொதுவாக After Effects போன்ற சிக்கலான மென்பொருள்கள் அல்லது ஒரு மோஷன் டிசைனரின் உதவி தேவைப்படும். உங்கள் வலைத்தளத்தில் மிதக்கும் செயலி அம்சம், UI மைக்ரோ-இன்டராக்ஷன் அல்லது டைனமிக் Voice Room விட்ஜெட்டைக் காட்ட ஒரு வெளிப்படையான அனிமேட்டட் WebP தேவைப்பட்டால், சில நிமிடங்களில் இலவசமாக நீங்களே அதை உருவாக்கலாம்.

இந்த முழுமையான வழிகாட்டியில், ஸ்கிரீன் ரெக்கார்டிங்கைப் பதிவுசெய்து, திறந்த மூல CLI கருவிகள் மூலம் முழு 8-bit ஆல்ஃபா சேனல்களைப் பிரித்தெடுப்பது எப்படி என்பதைக் கற்றுக்கொள்வீர்கள். பின்னணி நீக்க அல்காரிதம்கள், FFmpeg உகப்பாக்க அளவுருக்கள் மற்றும் மிகக் குறைந்த அளவிலான அனிமேட்டட் WebP ஐ உருவாக்கும் குறுக்கு-தள வலை ஒருங்கிணைப்பு உத்திகள் ஆகியவற்றை இதில் விரிவாகப் பார்ப்போம்.

வெளிப்படையான அனிமேட்டட் WebP என்றால் என்ன? (மேலும் இது ஏன் GIF ஐ விடச் சிறந்தது)

அனிமேட்டட் WebP எளிமையான சொற்களில் விளக்கம்

அனிமேட்டட் WebP கோப்பு என்பது கூகிளின் WebP பட வடிவத்தின் ஒரு நீட்டிப்பாகும், இது லாஸி (lossy) மற்றும் லாஸ்லெஸ் (lossless) சுருக்க அல்காரிதம்களுடன் தொடர் அனிமேஷனை ஆதரிக்கிறது. பாரம்பரிய பட வடிவங்களைப் போலன்றி, WebP ஆனது VP8 வீடியோ கோடெக்கிலிருந்து பெறப்பட்ட மேம்பட்ட கணிப்பு நுட்பங்களைப் பயன்படுத்துகிறது. இது காட்சித் தரத்தைக் குறைக்காமல் ஃபிரேம்-பை-ஃபிரேம் அனிமேஷனை பாரம்பரிய கோப்பு அளவுகளில் ஒரு சிறிய பகுதியாகச் சுருக்க அனுமதிக்கிறது.

ஆல்ஃபா சேனலுடன் இணைக்கப்படும்போது, ஒரு வெளிப்படையான அனிமேட்டட் WebP வலைத்தளம் அல்லது மொபைல் UI இல் உள்ள எந்தவொரு பின்னணி கூறுகளின் மீதும் முழுமையான அல்லது பகுதி வெளிப்படைத்தன்மையை அனுமதிக்கிறது. இதன் பொருள் UI கூறுகள், துகள்கள் விளைவுகள் (particle effects) மற்றும் பயன்பாட்டு டெமோக்கள் ஆகியவை எந்தவிதமான எல்லைக்கோடுகளோ அல்லது பின்னணி நிறக் கசிவோ இன்றி டைனமிக் பின்னணி வண்ணங்கள், வீடியோக்கள் அல்லது டார்க்/லைட் மோட் தீம்களின் மீது தடையின்றி மிதக்க முடியும்.

GIF-ஆல் ஏன் சரியான வெளிப்படைத்தன்மையை தர முடியாது (1-bit ஆல்ஃபா vs 8-bit ஆல்ஃபா)

பாரம்பரிய GIF வடிவத்தின் முக்கிய வரம்பு அதன் பைனரி வெளிப்படைத்தன்மை அமைப்பில் உள்ளது. GIF ஆனது 1-bit ஆல்ஃபா வெளிப்படைத்தன்மையைப் பயன்படுத்துகிறது, அதாவது ஒரு ஃபிரேமில் உள்ள ஒவ்வொரு பிக்சலும் 100% ஒளிபுகாதாக அல்லது 100% வெளிப்படையானதாக மட்டுமே இருக்க வேண்டும். இதில் இடைப்பட்ட நிலை எதுவும் இல்லை. இதன் விளைவாக, வளைந்த கோடுகள், மென்மையான நிழல்கள் அல்லது கண்ணாடி போன்ற மங்கலான விளைவுகள் இருண்ட தளத்தில் வைக்கப்படும்போது சொரசொரப்பான பிக்சல் விளிம்புகளுடனோ அல்லது வெள்ளை/வண்ண வளையங்களுடனோ தோன்றும்.

வெளிப்படையான அனிமேட்டட் WebP முழு 8-bit ஆல்ஃபா வெளிப்படைத்தன்மையைப் பயன்படுத்துகிறது, இது ஒரு பிக்சலுக்கு 256 நிலைகளில் ஒளிபுகாத் தன்மையை வழங்குகிறது (முழுமையாக கண்ணுக்குத் தெரியாத 0 முதல் முழுமையான திடமான 255 வரை). இது மென்மையான நிழல்கள், ஒளிஊடுருவும் கண்ணாடி அடுக்குகள் மற்றும் மென்மையான விளிம்புகள் எந்தவொரு மாறுபட்ட வண்ண UI பின்னணியிலும் தடையின்றி கலக்க அனுமதிக்கிறது. மேலும், GIF ஃபிரேமுக்கு 256 வண்ணங்கள் கொண்ட வரையறுக்கப்பட்ட தட்டுக்கு மட்டுமே கட்டுப்படுத்தப்படுகிறது, ஆனால் WebP உண்மையான 24-bit RGB வண்ண ஆழத்தை (16.7 மில்லியன் வண்ணங்கள்) ஆதரிக்கிறது.

கோப்பு அளவு ஒப்பீடு — WebP vs GIF vs APNG vs MP4

சரியான அனிமேஷன் கொள்கலனைத் தேர்ந்தெடுப்பது பக்கத்தின் வேகம், Core Web Vitals மற்றும் மொபைல் செயலியின் பேண்ட்வித் நுகர்வை நேரடியாகப் பாதிக்கிறது. பாரம்பரிய அனிமேட்டட் GIF-கள் சுருக்கப்படாதவை மற்றும் அதிக எடைகொண்டவை, பெரும்பாலும் 3-வினாடி UI கிளிப்பிற்கு 10 MB க்கும் அதிகமாக இருக்கும். APNG (Animated Portable Network Graphics) வண்ண ஆழம் மற்றும் 8-bit வெளிப்படைத்தன்மை சிக்கல்களைச் சரிசெய்கிறது, ஆனால் அதன் லாஸ்லெஸ் DEFLATE சுருக்கம் இன்னும் பெரிய கோப்பு அளவுகளையே தருகிறது.

H.264 இல் என்கோட் செய்யப்பட்ட MP4 வீடியோ அதிக வீடியோ சுருக்கத்தை வழங்குகிறது, ஆனால் தரநிலையான வலை MP4 கொள்கலன்கள் உலாவி முழுவதும் இணக்கமான முறையில் ஆல்ஃபா சேனல் வெளிப்படைத்தன்மையை இயல்பாக ஆதரிப்பதில்லை (Safari க்கு ஆல்ஃபாவுடன் கூடிய HEVC தேவைப்படுகிறது, அதே நேரத்தில் Chrome க்கு WebM க்குள் ஆல்ஃபாவுடன் கூடிய VP9 தேவைப்படுகிறது). அனிமேட்டட் WebP குறுகிய, லூப்பிங், வெளிப்படையான UI அனிமேஷன்களுக்கு உகந்த தேர்வாக அமைகிறது: இது முழு 8-bit ஆல்ஃபா கலவையை வழங்குகிறது, உண்மையான வண்ண கிரேடியன்ட்களைக் கையாள்கிறது மற்றும் GIF ஐ விட 64% வரையிலும், APNG ஐ விட 45% வரையிலும் சிறிய கோப்பு அளவுகளை அடைகிறது.

2026 இல் உலாவிகள் மற்றும் சாதனங்களின் ஆதரவு

2026 ஆம் ஆண்ட நிலவரப்படி, வெளிப்படைத்தன்மையுடன் கூடிய அனிமேட்டட் WebP அனைத்து நவீன வலை உலாவிகள், டெஸ்க்டாப் இயங்குதளங்கள் மற்றும் மொபைல் தளங்களிலும் உலகளாவிய ஆதரவைப் பெறுகிறது. Chrome, Safari, Firefox, Edge, Opera, iOS Safari மற்றும் Android WebView ஆகியவை நிலையான HTML <img> குறிச்சொற்கள், CSS பின்னணி பண்புகள் மற்றும் நேட்டிவ் கேன்வாஸ் ரெண்டரர்களுக்குள் அனிமேட்டட் WebP சொத்துகளின் நேட்டிவ் டிகோடிங்கை முழுமையாக ஆதரிக்கின்றன.

மொபைல் தளங்களில், Android ஆனது WebP கோப்புகளை தரநிலையான ImageView விட்ஜெட்டுகள் மூலம் இயல்பாக பாகுபடுத்துகிறது, அதே நேரத்தில் iOS ஆனது iOS 14 முதல் SwiftUI மற்றும் UIKit படக் காட்சிகளுக்குள் WebP ரெண்டரிங்கை இயல்பாக ஆதரிக்கிறது.

வடிவங்களின் ஒப்பீட்டு அட்டவணை

உங்களுக்கு எப்போது வெளிப்படையான ஃப்ரேம் தேவைப்படும்?

லேண்டிங் பக்கத்தின் ஹீரோ பகுதியில் மிதக்கும் செயலி டெமோக்கள்

ஒரு SaaS லேண்டிங் பக்கத்தில் மொபைல் செயலி UI ஐக் காட்டும்போது, ஹீரோ பகுதிக்குள் கடினமான விளிம்புகள் கொண்ட செவ்வக வீடியோவை வைப்பது டார்க் மோட் அல்லது கிரேடியன்ட் டிசைன்களின் ஓட்டத்தைக் குலைக்கிறது. உங்கள் ஸ்கிரீன் ரெக்கார்டிங்கிலிருந்து பின்னணியை நீக்கி, அதை வெளிப்படையான அனிமேட்டட் WebP ஆக எக்ஸ்போர்ட் செய்வதன் மூலம், உங்கள் பயன்பாட்டு இடைமுகம் தனிப்பயன் லேண்டிங் பக்க வடிவவியல் அல்லது பின்னணி விளக்குகளின் மீது டைனமிக்காக மிதக்க முடியும்.

இந்தக் காட்சி அடுக்கு விளைவு, சாத்தியமான பயனர்களுக்கு நேட்டிவ் தரத்தைத் தெரிவிக்கும் ஒரு மெருகூட்டப்பட்ட உணர்வை உருவாக்குகிறது, சிக்கலான WebGL அல்லது 3D கேன்வாஸ் லைப்ரரிகள் தேவையில்லாமல் பதிவுபெறுதல் மாற்று விகிதங்களை (conversion rates) அதிகரிக்கிறது.

போன் மொக்கப்கள் மற்றும் சாதன ஃப்ரேம்கள்

வடிவமைப்பாளர்கள் பெரும்பாலும் ஸ்கிரீன் ரெக்கார்டிங்குகளை நேர்த்தியான போன் ஃப்ரேம்களுக்குள் (iPhone அல்லது Android வன்பொருள் விளிம்புகள் போன்றவை) மடிக்கிறார்கள். நீங்கள் ஒரு சாதனத்தின் திரையைப் பதிவுசெய்தால், வளைந்த விளிம்புகளுடன் கூடிய திரை உள்ளடக்கத்தை மட்டும் வெளிப்படையான அனிமேட்டட் WebP ஆக எக்ஸ்போர்ட் செய்வது, அனிமேட்டட் அடுக்கை நேரடியாக CSS சாதன ஃப்ரேம்கள் அல்லது Figma டிசைன் அமைப்புகளில் சேர்க்க உங்களை அனுமதிக்கிறது.

UI மைக்ரோ-இன்டராக்ஷன்கள் மற்றும் லோடிங் நிலைகள்

அனிமேட் செய்யப்பட்ட பொத்தான் நிலைகள், டைனமிக் மைக் ரிங்க்கள், பாப்பிங் பேட்ஜ்கள் அல்லது லைவ் Voice Room நிலை குறிகாட்டிகள் போன்ற மைக்ரோ-இன்டராக்ஷன்களுக்கு தெளிவான பின்னணி வெளிப்படைத்தன்மை தேவைப்படுகிறது. சுழலும் லோடர் அல்லது அனிமேட்டட் பேட்ஜைச் சுற்றி ஒரு சதுர பின்னணிப் பெட்டியைக் காட்டுவது செயலியின் அனுபவத்தைக் கெடுக்கிறது.

வெளிப்படைத்தன்மையுடன் கூடிய குறைந்த எடையுள்ள அனிமேட்டட் WebP ஐப் பயன்படுத்துவது, முன்-முனை பொறியாளர்கள் (front-end engineers) டைனமிக் UI கூறுகள், நேரடி வீடியோ ஊட்டங்கள் அல்லது Voice Room அவதார் கிரிட்களின் மேல் நேரடியாகத் தனிப்பயன் அனிமேஷன் நிலைகளை ரெண்டர் செய்ய அனுமதிக்கிறது.

தயாரிப்பு உலா ஓவர்லேக்கள் மற்றும் ஆன் போர்டிங்

இன்டராக்டிவ் தயாரிப்பு உலாக்கள் மற்றும் ஆன் போர்டிங் வழிகாட்டிகள் பெரும்பாலும் குறிப்பிட்ட பொத்தான்கள் அல்லது மிதக்கும் கருவிக்குறிப்புகளை முன்னிலைப்படுத்துகின்றன. அனிமேட் செய்யப்பட்ட சுட்டி கைகள் அல்லது அறிவுறுத்தல் கருவிக்குறிப்புகளுக்கு வெளிப்படையான அனிமேட்டட் WebP லூப்களைப் பயன்படுத்துவது, இந்த ஓவர்லேக்கள் தரவு அட்டவணைகள் அல்லது வழிசெலுத்தல் தலைப்புகளை மறைக்காமல் பயனரின் டாஷ்போர்டுகளின் மேல் இயல்பாக மிதப்பதை உறுதி செய்கிறது.

கட்டவுட் அனிமேஷன்களுடன் கூடிய சமூகப் பதிவுகள் மற்றும் சிறுபடங்கள் (Thumbnails)

டிஜிட்டல் பிரச்சாரங்கள், ஆவணத் தளங்கள் மற்றும் இன்டராக்டிவ் பிளாக் போஸ்ட் சிறுபடங்களுக்காக உருவாக்கப்படும் சந்தைப்படுத்தல் சொத்துகளில் டைனமிக் கூறுகள் நிலையான எல்லைப் பெட்டிகளிலிருந்து விடுபட்டுத் தோன்றும் போது அவை கணிசமாக தனித்து நிற்கின்றன. ஒரு அனிமேட்டட் அம்சத்தின் ஸ்கிரீன் ரெக்கார்டிங்கை ஒரு கட்டவுட் வெளிப்படையான லூப்பாக மாற்றுவது, நிலையான விளம்பரப் படங்கள் அல்லது பிராண்டட் பின்னணி பேனர்களின் மேல் மோஷன் கிராபிக்ஸ்களை ஓவர்லே செய்ய உங்களை அனுமதிக்கிறது.

உங்களுக்கு என்ன தேவைப்படும் (அனைத்தும் இலவசம்)

FFmpeg — எல்லாவற்றையும் செய்யும் ஒரே கருவி

FFmpeg என்பது வீடியோ, ஆடியோ மற்றும் மல்டிமீடியா ஸ்ட்ரீம்களைச் செயலாக்குவதற்கான தொழில்துறை தரநிலையான, திறந்த மூல கட்டளை வரி (command-line) கட்டமைப்பாகும். இது பிரபலமான வணிக வீடியோ மென்பொருள்கள், உலாவி எஞ்சின்கள் மற்றும் மீடியா பைப்ப்லைன்களின் பின்னால் உள்ள அடிப்படை மல்டிமீடியா எஞ்சினாக செயல்படுகிறது. FFmpeg வீடியோ வடிகட்டுதல் வரைபடங்கள், ஆல்ஃபா சேனல் உருவாக்கம், கலர் கீயிங் அல்காரிதம்கள் மற்றும் நேட்டிவ் WebP என்கோடர் உள்ளமைவுகளுக்கான முழு அணுகலை வழங்குகிறது.

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 கருவி, இது சிக்கலான காட்சிப் பொருட்களைத் தானாகக் கண்டறிந்து வீடியோ ஃபிரேம்களில் இருந்து ஆல்ஃபா மேட் கட்டவுட்களை உருவாக்குகிறது.

உங்கள் FFmpeg உருவாக்கம் WebP மற்றும் ஆல்பாவை ஆதரிக்கிறது என்பதை உறுதிப்படுத்துதல்

மாற்றக் கட்டளைகளை இயக்குவதற்கு முன், உங்கள் உள்ளூர் 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 இல் பச்சை ஐகான்கள் இருந்தால், உங்கள் பின்னணி கேன்வாஸை பிரகாசமான நீலத்திற்கு (#000000FF) அல்லது தூய மெஜந்தாவிற்கு மாற்றவும்.

வளைந்த அல்லது ஒழுங்கற்ற UI கூறுகளைத் தெளிவாகப் பதிவு செய்தல்

கார்டுகள், வளைந்த உரையாடல் பெட்டிகள் அல்லது வட்ட வடிவ அவதார் ஃப்ரேம்களைப் பதிவுசெய்யும்போது, அந்தப் பொருளை உங்கள் திடமான பின்னணி நிறத்தின் மீது நேரடியாக வைக்கவும். நீங்கள் தானியங்கி கலர் கீயிங்கைப் பயன்படுத்த விரும்பினால், திரை பிடிப்பின் போது UI கூறுக்கு CSS பாக்ஸ் நிழல்கள் அல்லது டிராப் நிழல்களைப் பயன்படுத்த வேண்டாம்; கலர் கீயிங் அல்காரிதம்களால் இருண்ட டிராப் நிழலுக்கும் இருண்ட UI எல்லைக்கும் இடையே வேறுபடுத்திப் பார்க்க முடியாது.

கோப்பு அளவைக் குறைவாக வைத்திருக்க ஃபிரேம் விகிதம் மற்றும் தெளிவுத்திறன் தேர்வுகள்

அதிக ஃபிரேம் விகிதங்கள் மற்றும் பெரிதாக்கப்பட்ட கேன்வாஸ் பரிமாணங்கள் கோப்பு அளவுகளை விரைவாகப் பெருக்குகின்றன. UI அனிமேஷன்கள் மற்றும் பயன்பாட்டு அம்ச விளக்கக்காட்சிகளுக்கு, 20 fps முதல் 30 fps வரையிலான ஃபிரேம் விகிதம் 60 fps பிடிப்புடன் ஒப்பிடும்போது பேண்ட்வித்தில் 50% வரை சேமிக்கும் அதே வேளையில் மென்மையான இயக்கத்தை வழங்குகிறது.

கட்டவுட்டைப் பாழாக்கும் பொதுவான ரெக்கார்டிங் தவறுகள்

சிறந்த விளிம்புகளைச் சுற்றி அதிக H.264 சுருக்க கலைப்பொருட்கள் அல்லது மேக்ரோ-ப்ளாக்கிங்கை அறிமுகப்படுத்தும் லாஸி ஸ்கிரீன் கேப்சர் அமைப்புகளைத் தவிர்க்கவும். சுருக்க கலைப்பொருட்கள் திடமான பச்சை பின்னணியாக இருக்க வேண்டிய இடத்தில் நுட்பமான வண்ண வேறுபாடுகளை உருவாக்குகின்றன, கலர் கீயிங் ஃபில்டர்களைக் குழப்பி உங்கள் விஷயத்தைச் சுற்றி சாய்வுகளின் கறைகளை ஏற்படுத்துகின்றன.

படி 2 — உங்கள் வெளிப்படைத்தன்மை முறையைத் தேர்ந்தெடுக்கவும்

முறை A — குரோமா கீ (திடமான வண்ண பின்னணி நீக்கம்)

ஆல்ஃபா மேட்டை உருவாக்க வீடியோ ஸ்ட்ரீமிலிருந்து ஒரு குறிப்பிட்ட வண்ண மதிப்பை (தூய பச்சை அல்லது நீலம் போன்றவை) நீக்குவதை குரோமா கீயிங் நம்பியுள்ளது. நீங்கள் பின்னணி நிறத்தைக் கட்டுப்படுத்தும் செயற்கை ஸ்டுடியோ பின்னணிகள் அல்லது ஆப் எமுலேட்டர்களுக்கு எதிராகப் பிடிக்கப்பட்ட UI ரெக்கார்டிங்குகளுக்கு இந்த முறை சிறந்தது. குரோமா கீயிங் முழுமையாக தானியங்கமயமாக்கப்பட்டது மற்றும் FFmpeg இன்னுள் மிக வேகமாக கணக்கிடப்படுகிறது.

முறை B — வடிவியல் பயிர் மற்றும் மாஸ்க் (செவ்வகங்கள், வளைந்த மூலைகள், வட்டங்கள்)

நிலையான வடிவியல் கொண்ட நிலையான UI கூறைப் பதிவுசெய்யும்போது — செவ்வக டாஷ்போர்டு விட்ஜெட், வளைந்த ஆப் கார்டு அல்லது வட்ட வடிவ சுயவிவர அவதார் போன்றவை — குரோமா கீயிங் தேவையில்லை. அதற்கு பதிலாக, நீங்கள் துல்லியமான வடிவியல் பிக்சல் க்ராப்பிங் ஆயத்தொலைவுகளை வரையறுத்து, முன்பே ரெண்டர் செய்யப்பட்ட 8-bit கருப்பு மற்றும் வெள்ளை மாஸ்க் கோப்பை ஓவர்லே செய்யலாம்.

முறை C — சிக்கலான பாடங்களுக்கான AI பின்னணி நீக்கம்

மனித ஹோஸ்ட்கள், சிக்கலான 3D கிராபிக்ஸ் அல்லது நிஜ உலக பின்னணியில் பதிவுசெய்யப்பட்ட நேரடி வீடியோ ஊட்டங்கள் போன்ற சிக்கலான விஷயங்களை உங்கள் ரெக்கார்டிங் கொண்டிருந்தால், குரோமா கீயிங் மற்றும் வடிவியல் மாஸ்க்குகள் தோல்வியடையும். இந்த சூழ்நிலைகளில், rembg அல்லது RVM (Robust Video Matting) போன்ற திறந்த மூல AI பிரிவு கருவிகள் மூலம் உங்கள் வீடியோ ஃபிரேம்களை இயக்குவது கையேடு ரோட்டோஸ்கோப்பிங் இல்லாமல் துல்லியமான மேட்களைப் பிரித்தெடுக்கிறது.

முறை D — நேட்டிவ் ஆல்ஃபா பிடிப்பு (உங்கள் மூலத்தில் ஏற்கனவே வெளிப்படைத்தன்மை இருக்கும்போது)

உங்கள் மூலச் சொத்து Lottie, Rive, After Effects அல்லது நேட்டிவ் ஆல்ஃபா சேனல் ரெண்டரிங்கை ஆதரிக்கும் டைனமிக் WebGL கேன்வாஸ் ரெண்டரர்களில் (எ.கா., ProRes 4444 அல்லது ஆல்ஃபாவுடன் கூடிய WebM VP9) உருவாக்கப்பட்டிருந்தால், FFmpeg நேட்டிவ் ஆல்ஃபா சேனலை கீயிங் அல்லது மாஸ்கிங் ஃபில்டர்கள் இல்லாமல் நேரடியாக 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 என்ற அளவுரு இலக்கு ஹெக்ஸ் நிறத்தைக் (தூய பச்சை) குறிப்பிடுகிறது. இரண்டாவது மதிப்பு (0.15) வண்ண ஒற்றுமை சகிப்புத்தன்மையை அமைக்கிறது, அதே நேரத்தில் மூன்றாவது மதிப்பு (0.05) மென்மையான விளிம்பு கலவை நடத்தையை வரையறுக்கிறது. format=yuva420p ஐ அமைப்பது FFmpeg ஐ பிக்சல் தரவில் வெளிப்படையான 8-bit YUV ஆல்ஃபா சேனலை இணைக்க நிர்பந்திக்கிறது.

தெளிவான விளிம்புகளுக்கு ஒற்றுமை மற்றும் கலவையை சரிசெய்தல்

ஒற்றுமை (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 ஃபில்டர் வெளிப்படைத்தன்மை வரம்புகளுக்கு அருகிலுள்ள பிக்சல்களை பகுப்பாய்வு செய்து, எஞ்சியிருக்கும் பச்சை டோன்களை நடுநிலையான சாம்பல் அல்லது வெளிப்படையான டோன்களாக மாற்றுகிறது.

ஆல்ஃபா ஓவர்லே மூலம் வளைந்த மூலை மாஸ்க்கைப் பயன்படுத்துதல்

கலர் கீயிங் இல்லாமல் ஆப் டெமோவிற்கு வளைந்த மூலைகளைப் பயன்படுத்த, உங்கள் ரெக்கார்டிங் பரிமாணங்களுக்குப் பொருந்தக்கூடிய கருப்பு மற்றும் வெள்ளை மாஸ்க் படத்தை (mask.png) உருவாக்கவும். இந்த 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 ஆல்ஃபா சேனல் வெளிப்படைத்தன்மை மதிப்புகளாக மாற்றுகிறது.

ஆல்ஃபா சேனல் உண்மையில் நீடித்துள்ளதா என்பதை உறுதிப்படுத்துதல்

WebP மாற்றத்திற்கு முன் உங்கள் கோப்பில் உண்மையான ஆல்ஃபா சேனல் வெளிப்படைத்தன்மை உள்ளதா என்பதை உறுதிப்படுத்த, 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 கூறு எந்தவிதமான கட்டப் பெட்டிகளுமின்றி சிவப்பு பின்னணியில் தெளிவாக மிதந்தால், உங்கள் ஆல்ஃபா சேனல் வெளிப்படைத்தன்மை அப்படியே உள்ளது மற்றும் இறுதி எக்ஸ்போர்ட்டிற்குத் தயாராக உள்ளது.

ஒவ்வொரு கட்டளையும் உண்மையில் என்ன செய்கிறது (நகல்-ஒட்டு செய்யத் தயார்)

இயக்கக் குறிப்பு: மேலே உள்ள கட்டளைகள் மூல MP4 பிக்சல் ஸ்ட்ரீம்களைப் பாகுபடுத்துகின்றன, குறிப்பிட்ட ஹெக்ஸ் மதிப்பிற்கு எதிராக வண்ணத் தொலைவுகளைக் கணக்கிடுகின்றன, 4-சேனல் பிக்சல் மேட்ரிஸை (RGBA/YUVA) இணைக்கின்றன, மேலும் ஒரு தற்காலிக வீடியோ பஃப்பரை வெளியிடுகின்றன. input_recording.mp4 என்பதை உங்கள் மூலக் கோப்பின் பெயருக்கு மாற்றுவதன் மூலம் இந்த கட்டளைகளை நேரடியாக டெர்மினல் அல்லது PowerShell இல் நகலெடுத்து ஒட்டலாம்.

படி 4 — அனிமேட்டட் WebP ஆக எக்ஸ்போர்ட் செய்யுங்கள்

ஆல்ஃபாவுடன் அனிமேட்டட் WebP க்கான FFmpeg கட்டளை

உங்கள் ஆல்ஃபா சேனல் கீயீடு செய்யப்பட்ட அல்லது மாஸ்க் செய்யப்பட்டவுடன், உங்களின் இறுதி வெளிப்படையான அனிமேட்டட் 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

இந்த ஒற்றை வரி இயக்கம் கலர் கீயிங், ஃபிரேம்-ரேட் சரிசெய்தல், உயர்தர லான்சோஸ் ஸ்பேஷியல் டவுன்ஸ்கேலிங், ஆல்ஃபா பேலட் உகப்பாக்கம் மற்றும் லாஸி WebP சுருக்கம் ஆகியவற்றை ஒருங்கிணைக்கப்பட்ட செயலாக்க பைப்ப்லைனில் கையாள்கிறது.

Lossy vs lossless WebP — எப்போது எதைப் பயன்படுத்த வேண்டும்

அனிமேட்டட் WebP ஆனது லாஸி (lossy) மற்றும் லாஸ்லெஸ் (lossless) உள் சுருக்க முறைகள் இரண்டையும் ஆதரிக்கிறது:

• Lossless WebP (-lossless 1): சுருக்க கலைப்பொருட்கள் இல்லாமல் துல்லியமான பிக்சல் நம்பகத்தன்மையைப் பாதுகாக்கிறது. தட்டையான வெக்டார் UI கிராபிக்ஸ், தெளிவான எழுத்துருக்கள் மற்றும் உயர் மாறுபட்ட ஐகான்களுக்கு ஏற்றது. இருப்பினும், சிக்கலான ஸ்கிரீன் ரெக்கார்டிங்குகளுக்கு கோப்பு அளவுகள் கணிசமாக பெரியதாக இருக்கும்.
• Lossy WebP (-q:v 65 to 80): கண்ணுக்குத் தெரியாத படத் தரவை நிராகரிக்க ஸ்பேஷியல் ஃப்ரீக்வென்சி மாற்றத்தைப் பயன்படுத்துகிறது. கிரேடியன்ட்கள், மென்மையான டிராப் நிழல்கள் அல்லது வீடியோ UI ஊட்டங்களைக் கொண்ட ஸ்கிரீன் ரெக்கார்டிங்குகளுக்கு ஏற்றது, இது புறக்கணிக்கத்தக்க காட்சித் தர இழப்புடன் 70% வரை சிறிய கோப்பு அளவுகளை அளிக்கிறது.

தரம், சுருக்க நிலை மற்றும் லூப் அமைப்புகள்

கோப்பு வெளியீடு மற்றும் அனிமேஷன் நடத்தையைக் கட்டுப்படுத்த இந்த முக்கிய FFmpeg அளவுருக்களைச் சரிசெய்யவும்:

• -q:v [1-100]: லாஸி தரக் காரணியை அமைக்கிறது. 75 காட்சித் தெளிவுக்கும் குறைந்த பைட் அளவுக்கும் இடையே சிறந்த சமநிலையை வழங்குகிறது.
• -compression_level [0-6]: CPU சுருக்க முயற்சியை அமைக்கிறது. சிறிய கோப்பு அளவை பெற எப்போதுமே -compression_level 6 ஐப் பயன்படுத்தவும்.
• -loop [count]: அனிமேஷன் மறுமுறையை வரையறுக்கிறது. -loop 0 முடிவில்லா லூப்பிங்கை அமைக்கிறது, அதே நேரத்தில் -loop 1 ஒரு முறை இயங்கி இறுதி ஃபிரேமில் உறைகிறது.

மென்மையான இயங்குதலுக்கு ஃபிரேம் விகிதத்தை அமைத்தல்

பட வடிவங்களில் அதிக ஃபிரேம் விகிதங்களைப் (60 fps போன்றவை) பராமரிப்பது கிளையண்ட் பக்க உலாவி ரெண்டரிங்கின் போது அதிக CPU சுமைகளை உருவாக்குகிறது. வீடியோ ஃபிரேம் சங்கிலிக்குள் fps=24 ஐப் பயன்படுத்தி உங்கள் மூல வீடியோவை 20 fps அல்லது 24 fps ஆகக் குறைப்பது மொத்த ஃபிரேம் எண்ணிக்கையை 60% குறைக்கிறது, மென்மையான UI இயக்க உணர்வைப் பாதுகாக்கும் அதே வேளையில் கோப்பின் அளவைக் கணிசமாகக் குறைக்கிறது.

இறுதி கோப்பில் வெளிப்படைத்தன்மையை உறுதிப்படுத்துதல்

நீங்கள் எக்ஸ்போர்ட் செய்த .webp கோப்பு வலை சூழல்களில் முழு ஆல்ஃபா சேனல் வெளிப்படைத்தன்மையைப் பராமரிக்கிறது என்பதை உறுதிப்படுத்த, வெளியீட்டு கோப்பை நேரடியாக ஒரு புதிய கூகிள் குரோம் உலாவி தாவலில் இழுத்து விடவும். Chrome Developer Tools (F12) ஐத் திறந்து, Elements ஆய்வாளருக்குச் சென்று, ஆவணத்தின் பின்னணி நிறத்தை #000000, #FF0000, மற்றும் #FFFFFF என மாற்றவும்.

படி 5 — தரத்தை இழக்காமல் கோப்பு அளவை உகப்பாக்குங்கள்

குறுகிய அர்த்தமுள்ள லூப்பிற்கு கத்தரித்தல் (Trimming)

திரை இடைவினைகளைப் பதிவுசெய்யும்போது, இலக்கு இடைவினைக்கு முன்னரோ அல்லது பின்னரோ தேவையற்ற ஓய்வு ஃபிரேம்களைத் தவிர்க்கவும். உங்கள் மூல ரெக்கார்டிங்கைச் சரியான ஃபிரேம் வரிசைக்கு கத்தரிக்க 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 ஆகக் குறைப்பது பாப்அப்கள், நிலை வளையங்கள் அல்லது கருவிக்குறிப்புகளின் மென்மை உணர்வைப் பாதிக்காமல் மொத்த படத் தரவை பெருமளவில் குறைக்கிறது.

உண்மையான உள்ளடக்க எல்லைகளுக்கு பயிர் செய்தல் (Cropping)

உங்கள் அனிமேட் செய்யப்பட்ட 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 க்குக் கீழே குறைப்பதைத் தவிர்க்கவும், ஏனெனில் குறைந்த மதிப்புகள் விளிம்புகளைச் சுற்றி புலப்படும் பிளாக்கிங் சத்தத்தை அறிமுகப்படுத்துகின்றன.

வலை பயன்பாட்டிற்கான இலக்கு கோப்பு அளவுகள்

உகந்த வலை செயல்திறன் மற்றும் மொபைல் பக்க ஏற் பேண்ட்வித்தில் குறைந்தபட்ச தாக்கத்திற்கு, உங்கள் கூறு அளவின் அடிப்படையில் பின்வரும் இலக்கு கோப்பு அளவு வரம்புகளை இலக்காகக் கொள்ளவும்:

• Micro-interactions / Badges (100x100 முதல் 200x200): 100 KB க்கும் கீழே
• Floating Cards / Dialogs (400x400 முதல் 600x600): 350 KB க்கும் கீழே
• Full Hero App Demos (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 பண்புக்கூறுகளை அமைப்பது பக்க தளவமைப்பு கணக்கீட்டின் போது Cumulative Layout Shift (CLS) ஐத் தடுக்கிறது.

பிக்சர் உருப்படியைப் பயன்படுத்தி ஆதரிக்கப்படாத உலாவிகளுக்கான மாற்று (Fallback)

நேட்டிவ் 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 சொத்துக்களை வழங்கும்போது Next.js Image கூறுகளுக்குள் unoptimized ஐக் குறிப்பிடவும்.

Android மற்றும் iOS பயன்பாடுகளில் இதைப் பயன்படுத்துதல்

நேட்டிவ் கருவிகள் அல்லது குறுக்கு-தள கட்டமைப்புகளுடன் கட்டமைக்கப்பட்ட மொபைல் பயன்பாடுகள் WebP வெளிப்படையான அனிமேஷன்களை இயல்பாகக் கையாளுகின்றன:

• Android (Kotlin/Jetpack Compose): Coil அல்லது Glide பட ஏற்றுதல் கட்டமைப்புகளைப் பயன்படுத்தவும். Coil அனிமேட் செய்யப்பட்ட WebP ஐ இயல்பாக ரெண்டர் செய்கிறது ImageLoader.Builder(context).components { add(AnimatedWebpDecoder.Factory()) }.
• iOS (SwiftUI): SwiftUI ஆனது AsyncImage அல்லது SDWebImageSwiftUI போன்ற குறைந்த எடையுள்ள ரேப்பர்கள் மூலம் WebP ஐக் கையாள்கிறது.
• Flutter / React Native: வழக்கமான Image.asset('assets/ui-demo.webp') விட்ஜெட்களைப் பயன்படுத்தவும்.

உங்கள் பயன்பாட்டிற்கு WebP ஐ விடக் குறைந்த நினைவகப் தடயங்களுடன் கூடிய சிக்கலான நிகழ்நேர ஊடாடும் மோஷன் கிராபிக்ஸ் தேவைப்பட்டால், SVGA Maker போன்ற கருவிகளால் ஆதரிக்கப்படும் பிரத்யேக வடிவங்களை மதிப்பீடு செய்யவும்.

முழுமையான தனிப்பயன் நிகழ்நேர மொபைல் தளங்களை உருவாக்கும் குழுக்களுக்கு, AppLooma LLC போன்ற அனுபவம் வாய்ந்த மேம்பாட்டு நிறுவனத்துடன் கலந்தாலோசிப்பது, உங்கள் கிளையண்ட் பக்க ரெண்டரிங் பைப்ப்லைன் நினைவகத்தை ஓவர்லோட் செய்யாமல் டைனமிக் அனிமேஷன் சொத்துக்களைக் கையாளுவதை உறுதி செய்கிறது.

இருண்ட மற்றும் வெளிர் பின்னணியில் இது சரியாக இருப்பதை உறுதி செய்தல்

உங்கள் வெளிப்படையான WebP சொத்தை எப்போதும் பல மாறுபட்ட பின்னணி நிறங்களுக்கு எதிராகச் சோதிக்கவும் (எ.கா., தூய கருப்பு #000000, தூய வெள்ளை #FFFFFF, மற்றும் பிராண்ட் நிறங்கள்). வெள்ளை பின்னணியில் இருண்ட எல்லைக் கசிவு தோன்றினால், விளிம்பு பிக்சல் வளையங்களைச் சுத்தம் செய்ய சற்று அதிக blend மற்றும் despill அளவுருக்களுடன் உங்கள் FFmpeg குரோமா கீ பைப்ப்லைனை மீண்டும் இயக்கவும்.

பிழைத்திருத்தம் — பொதுவான சிக்கல்களும் தீர்வுகளும்

எனது WebP வெளிப்படைத்தன்மைக்கு பதிலாக கருப்பு அல்லது வெள்ளை பின்னணியைக் காட்டுகிறது

வண்ண இட மாற்றத்தின் போது FFmpeg ஆல்ஃபா சேனலை நிராகரிக்கும் போது அல்லது ஒரு இடைநிலை பட குழாய் பிக்சல் வடிவங்களை தரநிலையான 3-சேனல் RGB ஆக மாற்றும்போது இந்த சிக்கல் ஏற்படுகிறது. பிக்சல் பஃப்பர்களை libwebp என்கோடருக்கு அனுப்புவதற்கு முன் உங்கள் ஃபில்டர் வரைபடம் வெளிப்படையாக format=yuva420p அல்லது format=rgba ஐ உள்ளடக்கியிருப்பதை உறுதிசெய்யவும்.

விளிம்புகள் சொரசொரப்பாகத் தெரிகின்றன அல்லது பச்சை வளையத்தைக் கொண்டுள்ளன

சொரசொரப்பான விளிம்புகள் அல்லது வண்ண வெளிப்புறக் கோடுகள், குரோமா கீ ஒற்றுமை வரம்பு மிகவும் குறைவாக அமைக்கப்பட்டிருப்பதையோ அல்லது மென்மையான விளிம்பு கலவை தவிர்க்கப்பட்டிருப்பதையோ குறிக்கின்றன. FFmpeg இல் உங்கள் blend அளவுருவை 0.01 இலிருந்து 0.05 அல்லது 0.08 ஆக அதிகரிக்கவும்.

அனிமேஷன் லூப் ஆகவில்லை அல்லது ஒரு முறை மட்டுமே இயங்குகிறது

முன்னிருப்பாக, சில FFmpeg உருவாக்கங்கள் ஒற்றை அனிமேஷன் சுழற்சியை இயக்கி நிறுத்த WebP வரிசைகளை என்கோட் செய்கின்றன. வலை உலாவி எஞ்சின்களுக்குள் முடிவில்லா லூப்பிங் இயக்கத்தை நிர்பந்திக்க உங்கள் எக்ஸ்போர்ட் கட்டளையில் -loop 0 என்ற கொடியை வெளிப்படையாக இணைக்கவும்.

கோப்பு அளவு மிகவும் பெரியதாக உள்ளது

நீங்கள் எக்ஸ்போர்ட் செய்த கோப்பு அளவு 1-2 MB ஐ விட அதிகமாக இருந்தால், நீங்கள் முழுத் திரைத் தெளிவுத்திறனில் என்கோட் செய்கிறீர்கள், 60 fps ஐப் பராமரிக்கிறீர்கள் அல்லது லாஸ்லெஸ் சுருக்கத்தைப் பயன்படுத்துகிறீர்கள் (-lossless 1) என்று அர்த்தம். பயன்படுத்தப்படாத கேன்வாஸ் இடத்தை வெட்டவும், ஃபிரேம் விகிதத்தை 20 fps ஆகக் குறைக்கவும், பரிமாணங்களைக் குறைக்கவும், மேலும் -q:v 70 உடன் லாஸி WebP என்கோடிங்கைப் பயன்படுத்தவும்.

இயக்கம் சீரற்றதாக உள்ளது (Choppy Playback)

சீரற்ற அல்லது தடுமாறும் அனிமேஷன் இயக்கம் வீடியோ பிரித்தெடுப்பின் போது சீரற்ற ஃபிரேம் கால நேர முத்திரைகளால் அல்லது கிளையண்ட் சாதனங்களில் அதிகப்படியான CPU டிகோடிங் மேல்நிலையால் ஏற்படுகிறது. மாறுபட்ட ஃபிரேம் விகித பிடிப்பு முறைகளைக் காட்டிலும் FFmpeg இன் fps=24 ஃபில்டரைப் பயன்படுத்தி நிலையான, சீரான ஃபிரேம் விகிதத்தை நிர்பந்திக்கவும்.

இது Chrome இல் இயங்குகிறது ஆனால் வேறு உலாவி அல்லது செயலியில் இயங்கவில்லை

பழைய இயங்குதள வெப்வியூக்கள் அல்லது புதுப்பிக்கப்படாத பட பாகுபடுத்தும் லைப்ரரிகள் லாஸி WebP ஆல்ஃபா சேனல்களை சரியாக டிகோட் செய்யத் தவறக்கூடும். தரநிலையான லாஸ்லெஸ் அளவுருக்களைப் பயன்படுத்தி (-lossless 1) உங்கள் சொத்தை மீண்டும் எக்ஸ்போர்ட் செய்வது அல்லது ஒரு பட உருப்படி மாற்று அமைப்பை உட்பொதிப்பது இந்த சிக்கலைத் தீர்க்கிறது.

தேடல் போக்குவரத்திற்கான முக்கியத் தீர்வுகள்

தேடல் நோக்கம் குறிப்பு: '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 கோப்பிலும் இயங்குகிறது, கலர் கீயிங் மற்றும் ஆல்ஃபா பிரித்தெடுத்தலைப் பயன்படுத்துகிறது, மேலும் அதனுடன் தொடர்புடைய சுருக்கப்பட்ட WebP கோப்புகளைத் தானாக வெளியிடுகிறது.

அதை உங்கள் வடிவமைப்பு அல்லது உருவாக்க பணிப்பாய்வில் சேர்த்தல்

இந்த FFmpeg ஸ்கிரிப்டை நேரடியாக CI/CD பில்ட் ஸ்கிரிப்ட்கள், GitHub Actions பணிப்பாய்வுகள் அல்லது உள்ளூர் NPM பில்ட் நடைமுறைகளில் ஒருங்கிணைக்கலாம். இது வடிவமைப்பு மற்றும் பொறியியல் குழுக்கள் பயன்பாட்டு வரிசைப்படுத்தலின் போது மூல UI ஸ்கிரீன் கேப்சர்களை ஒரு திட்ட களஞ்சியத்தில் இடவும், உற்பத்திக்கான WebP சொத்துக்களைத் தானாக உருவாக்கவும் அனுமதிக்கிறது.

நீங்கள் எப்போது ஒரு டிசைனரை பணியமர்த்த வேண்டும்?

நேர்மையான பகுதி — சிக்கலான அனிமேஷன்களுக்கு தொழில்முறை வடிவமைப்பு தேவை

ஸ்கிரீன் ரெக்கார்டிங்குகளை வெளிப்படையான அனிமேட்டட் WebP கோப்புகளாக மாற்றுவது UI அம்சங்கள், பயன்பாட்டு பணிப்பாய்வுகள் மற்றும் மைக்ரோ-இன்டராக்ஷன்களைக் காண்பிப்பதற்கு விதிவிலக்காகச் சிறப்பாகச் செயல்படும் அதே வேளையில், இது தொழில்முறை மோஷன் கிராஃபிக் வடிவமைப்பிற்கு மாற்றாகாது. ஸ்கிரீன் கேப்சர்கள் பதிவுசெய்யப்பட்ட UI ஃபிரேம்கள் மற்றும் நிலையான இடைமுக மாற்றங்களால் கட்டுப்படுத்தப்படுகின்றன. அவற்றால் கையால் உருவாக்கப்பட்ட கியூபிக்-பெசியர் ஈசிங் வளைவுகள், சிக்கலான 3D கேரக்டர் ரிக்ஸ், டைனமிக் வெக்டார் மார்ஃபிங் அல்லது துகள்கள் விளைவு இயற்பியலை உருவாக்க முடியாது.

உங்கள் திட்டத்திற்குத் தனிப்பயன் ஹீரோ பிராண்ட் அனிமேஷன்கள், உயர் செயல்திறன் கொண்ட வெக்டார் துகள்கள் விளைவுகள் அல்லது Voice Room மற்றும் லைவ்-ஸ்ட்ரீமிங் பயன்பாடுகளுக்கான ஊடாடும் நிகழ்நேர பரிசு அனிமேஷன்கள் தேவைப்பட்டால், வெறும் ஸ்கிரீன் ரெக்கார்டிங்குகளை மட்டுமே நம்பியிருப்பது போதாது. சிக்கலான வெக்டார் சார்ந்த மோஷன் கிராபிக்ஸ் மற்றும் குறைந்த எடையுள்ள ஊடாடும் மொபைல் அனிமேஷன்களுக்கு, SVGA Maker போன்ற பிரத்யேக ஸ்டுடியோ உருவாக்க பைப்ப்லைன்களைப் பயன்படுத்துவது அல்லது தொழில்முறை மோஷன் டிசைனர்களுடன் இணைந்து பணியாற்றுவது சிறந்த காட்சித் தரத்தையும் உகந்த இயக்க நேர செயல்திறனையும் உறுதி செய்கிறது.

Frequently asked questions

Conclusion

மூல ஸ்கிரீன் ரெக்கார்டிங்குகளை குறைந்த எடையுள்ள வெளிப்படையான அனிமேட்டட் WebP ஆக மாற்றுவது, விலையுயர்ந்த மோஷன் டிசைன் கருவிகளை நம்பியிருக்காமல் உங்கள் SaaS லேண்டிங் பக்கங்கள், மொபைல் ஆன் போர்டிங் திரைகள் மற்றும் UI காட்சிப் பொருட்கள் ஆகியவற்றை மேம்படுத்துவதற்கான விரைவான வழிகளில் ஒன்றாகும். FFmpeg குரோமா கீயிங் மற்றும் பேலட் உகப்பாக்கத்துடன் திடமான பின்னணி கேப்சர்களை இணைப்பதன் மூலம், நீங்கள் சில நிமிடங்களில் 8-bit வெளிப்படையான அனிமேஷன்களை வரிசைப்படுத்தலாம்.

நீங்கள் சொத்து பைப்ப்லைன்களை தானியங்குபடுத்த விரும்பினால் அல்லது நேரடி ஸ்ட்ரீமிங் திறன்களுடன் அதிக மாற்றும் மொபைல் பயன்பாடுகளை உருவாக்க விரும்பினால், எங்கள் பிரத்யேக வடிவமைப்பு பைப்ப்லைன்களை ஆராயுங்கள் அல்லது உங்கள் தயாரிப்பு பார்வையை வாழ்க்கைக்கு கொண்டு வர AppLooma LLC இல் உள்ள எங்கள் பொறியியல் குழுவைக் கலந்தாலோசிக்கவும்.