કોઈપણ સ્ક્રીન રેકોર્ડિંગને પારદર્શક એનિમેટેડ WebP ફ્રેમમાં કેવી રીતે કન્વર્ટ કરવું (After Effects કે ડિઝાઇનર વગર)

ઉચ્ચ-ગુણવત્તાવાળા UI મોશન ઓવરલે બનાવવા માટે સામાન્ય રીતે After Effects જેવા જટિલ સોફ્ટવેર અથવા મોશન ડિઝાઇનરની જરૂર પડે છે. પરંતુ જો તમારે તમારી વેબસાઇટ પર ફ્લોટિંગ એપ ફીચર, UI માઇક્રો-ઇન્ટરેક્શન અથવા ડાયનેમિક વોઇસ-રૂમ વિજેટ દર્શાવવા માટે પારદર્શક એનિમેટેડ WebP ની જરૂર હોય, તો તમે તેને થોડી જ મિનિટોમાં મફતમાં જાતે બનાવી શકો છો.

આ સંપૂર્ણ માર્ગદર્શિકામાં, તમે રો સ્ક્રીન રેકોર્ડિંગ્સ કેપ્ચર કરવાનું અને ફુલ 8-બીટ આલ્ફા ચેનલ્સ કાઢવા માટે ઓપન-સોર્સ CLI ટૂલ્સ દ્વારા તેને પ્રોસેસ કરવાનું શીખશો. અમે બેકગ્રાઉન્ડ રિમૂવલ એલ્ગોરિધમ્સ, FFmpeg ઓપ્ટિમાઇઝેશન પેરામીટર્સ અને ક્રોસ-પ્લેટફોર્મ વેબ ઇન્ટિગ્રેશન પદ્ધતિઓ આવરી લઈશું જે પારદર્શિતા સાથે અતિ-હળવા એનિમેટેડ WebP પ્રદાન કરે છે.

પારદર્શક એનિમેટેડ WebP શું છે (અને તે GIF કરતાં શા માટે ચડિયાતું છે)

સરળ શબ્દોમાં એનિમેટેડ WebP ની સમજૂતી

એનિમેટેડ WebP ફાઇલ એ ગૂગલના WebP ઇમેજ ફોર્મેટનું વિસ્તરણ છે જે લોસી અને લોસલેસ કમ્પ્રેશન એલ્ગોરિધમ્સ સાથે સીક્વન્સ એનિમેશનને સપોર્ટ કરે છે. જૂના ઇમેજ ફોર્મેટ્સથી વિપરીત, WebP માં VP8 વિડિઓ કોડેકમાંથી મેળવેલી અદ્યતન પ્રિડિક્શન તકનીકોનો સમાવેશ થાય છે. આનાથી તે વિઝ્યુઅલ કમ્પ્રેશન ખામીઓ વિના પરંપરાગત ફાઇલ સાઇઝના નાના અંશમાં ફ્રેમ-બાય-ફ્રેમ એનિમેશનને કમ્પ્રેસ કરી શકે છે.

જ્યારે આલ્ફા ચેનલ સાથે જોડવામાં આવે છે, ત્યારે પારદર્શક એનિમેટેડ WebP વેબસાઇટ અથવા મોબાઇલ UI પર કોઈપણ બેકગ્રાઉન્ડ એલિમેન્ટ પર સંપૂર્ણ અથવા અડધી પારદર્શિતા આપે છે. આનો અર્થ એ છે કે UI ઘટકો, પાર્ટીકલ ઇફેક્ટ્સ અને એપ ડેમો કોઈ પણ દૃશ્યમાન આઉટલાઇન અથવા ખરાબ બેકગ્રાઉન્ડ કલર લીક થયા વિના ડાયનેમિક બેકગ્રાઉન્ડ કલર્સ, વિડિઓઝ અથવા ડાર્ક/લાઇટ મોડ થીમ્સ પર સરળતાથી ફ્લોટ થઈ શકે છે.

GIF યોગ્ય પારદર્શિતા શા માટે આપી શકતું નથી (1-બીટ આલ્ફા વિરુદ્ધ 8-બીટ આલ્ફા)

જૂના GIF ફોર્મેટની મુખ્ય મર્યાદા તેની બાઈનરી ટ્રાન્સપેરન્સી સિસ્ટમ છે. GIF 1-બીટ આલ્ફા ટ્રાન્સપેરન્સીનો ઉપયોગ કરે છે, જેનો અર્થ છે કે ફ્રેમમાંનો દરેક પિક્સેલ 100% ઓપેક અથવા 100% પારદર્શક હોવો જોઈએ. વચ્ચેનો કોઈ વિકલ્પ નથી. પરિણામે, વળાંકવાળી રેખાઓ, શેડોઝ, સોફ્ટ ગ્લોઇંગ કિનારીઓ અથવા બ્લર ઇફેક્ટ્સ જ્યારે ડાર્ક સરફેસ પર મૂકવામાં આવે છે ત્યારે તે કદરૂપી અથવા સફેદ/રંગીન હેલોથી ઘેરાયેલી દેખાય છે.

પારદર્શક એનિમેટેડ WebP ફુલ 8-બીટ આલ્ફા ટ્રાન્સપેરન્સીનો ઉપયોગ કરે છે, જે પ્રતિ પિક્સેલ ઓપેસિટીના 256 અલગ-અલગ સ્તરો પ્રદાન કરે છે (સંપૂર્ણ અદ્રશ્ય માટે 0 થી સંપૂર્ણ સોલિડ માટે 255 સુધી). આ સોફ્ટ શેડોઝ, કાચના ટ્રાન્સલ્યુસન્ટ લેયર્સ, સ્મૂથ એજ એન્ટી-એલિયાસિંગ અને વાસ્તવિક પાર્ટીકલ ટ્રેઇલ્સને કોઈપણ બદલાતા રંગવાળા UI બેકગ્રાઉન્ડ પર સરળતાથી બ્લેન્ડ થવા દે છે. વધુમાં, GIF ફ્રેમ દીઠ માત્ર 256 રંગોની કડક પેલેટ સુધી મર્યાદિત છે, જ્યારે WebP ટ્રુ 24-બીટ RGB કલર ડેપ્થ (1.67 કરોડ રંગો) ને સપોર્ટ કરે છે.

ફાઇલ સાઇઝની સરખામણી — WebP વિરુદ્ધ GIF વિરુદ્ધ APNG વિરુદ્ધ MP4

યોગ્ય એનિમેશન કન્ટેનર પસંદ કરવાથી પેજ સ્પીડ મેટ્રિક્સ, Core Web Vitals અને મોબાઇલ એપ બેન્ડવિડ્થ વપરાશ પર સીધી અસર પડે છે. પરંપરાગત એનિમેટેડ GIF બિન-કમ્પ્રેસ્ડ હોય છે, જે 3-સેકન્ડની UI ક્લિપ માટે 10 MB થી વધુ થઈ જાય છે. APNG (Animated Portable Network Graphics) કલર ડેપ્થ અને 8-બીટ પારદર્શિતાની સમસ્યાઓને ઠીક કરે છે, પરંતુ તેનું લોસલેસ DEFLATE કમ્પ્રેશન હજુ પણ ભારે ફાઇલ સાઇઝ આપે છે.

H.264 માં એન્કોડ કરેલ MP4 વિડિઓ ઉચ્ચ વિડિઓ કમ્પ્રેશન આપે છે, પરંતુ સ્ટાન્ડર્ડ વેબ MP4 કન્ટેનર ક્રોસ-બ્રાઉઝર અનુરૂપ રીતે આલ્ફા ચેનલ પારદર્શિતાને નેટીવલી સપોર્ટ કરતા નથી (Safari ને આલ્ફા સાથે HEVC ની જરૂર છે, જ્યારે Chrome ને WebM ની અંદર આલ્ફા સાથે VP9 ની જરૂર છે). એનિમેટેડ WebP ટૂંકા, લૂપિંગ અને પારદર્શક UI એનિમેશન માટે શ્રેષ્ઠ છે: તે ફુલ 8-બીટ આલ્ફા બ્લેન્ડિંગ આપે છે, ટ્રુ કલર ગ્રેડિઅન્ટ્સ હેન્ડલ કરે છે, અને GIF કરતાં 64% સુધી અને APNG કરતાં 45% સુધી નાની ફાઇલ સાઇઝ મેળવે છે.

2026 માં બ્રાઉઝર અને ડિવાઇસ સપોર્ટ

2026 સુધીમાં, પારદર્શિતા ધરાવતા એનિમેટેડ WebP ને તમામ આધુનિક વેબ બ્રાઉઝર્સ, ડેસ્કટોપ ઓપરેટિંગ સિસ્ટમ્સ અને મોબાઇલ પ્લેટફોર્મ્સ પર સાર્વત્રિક સપોર્ટ મળે છે. Chrome, Safari, Firefox, Edge, Opera, iOS Safari, અને Android WebView સ્ટાન્ડર્ડ HTML <img> ટેગ્સ, CSS બેકગ્રાઉન્ડ પ્રોપર્ટીઝ અને નેટીવ કાનવાસ રેન્ડરર્સની અંદર એનિમેટેડ WebP એસેટ્સના નેટીવ ડીકોડિંગને સંપૂર્ણપણે સપોર્ટ કરે છે.

મોબાઇલ પ્લેટફોર્મ્સ પર, Android નેટીવલી સ્ટાન્ડર્ડ ImageView વિજેટ્સ દ્વારા WebP ફાઇલોને પાર્સ કરે છે, જ્યારે iOS, iOS 14 થી SwiftUI અને UIKit ઇમેજ વ્યુઝની અંદર નેટીવલી WebP રેન્ડરિંગને સપોર્ટ કરે છે. આ એનિમેટેડ WebP ને ક્રોસ-પ્લેટફોર્મ એપ ડેવલપર્સ માટે એક વિશ્વસનીય ફોર્મેટ બનાવે છે જેઓ બલ્કી GIF એસેટ્સથી બચવા માગે છે.

ફોર્મેટ સરખામણી કોષ્ટક

તમને ખરેખર ટ્રાન્સપેરન્ટ ફ્રેમની ક્યારે જરૂર હોય છે

લેન્ડિંગ પેજ હિરો પર ફ્લોટ થતા એપ ડેમો

SaaS લેન્ડિંગ પેજ પર મોબાઇલ એપ UI દર્શાવતી વખતે, હિરો સેક્શનની અંદર ચોરસ વિડિઓ મૂકવાથી ડાર્ક મોડ અથવા ગ્રેડિઅન્ટ ડિઝાઇનની સુંદરતા બગડે છે. તમારા સ્ક્રીન રેકોર્ડિંગમાંથી બેકગ્રાઉન્ડ દૂર કરીને અને તેને પારદર્શક એનિમેટેડ WebP તરીકે નિકાસ કરીને, તમારું એપ ઇન્ટરફેસ કસ્ટમ લેન્ડિંગ પેજ જિયોમેટ્રી, સુશોભિત વેક્ટર પેટર્ન અથવા સબટલ બેકગ્રાઉન્ડ લાઇટિંગ પર ડાયનેમિકલી ફ્લોટ થઈ શકે છે.

આ વિઝ્યુઅલ લેયર ઇફેક્ટ એક પ્રીમિયમ લુક આપે છે જે સંભવિત વપરાશકર્તાઓને નેટીવ ક્વાલિટીનો અનુભવ કરાવે છે, જે જટિલ WebGL અથવા 3D કાનવાસ લાઇબ્રેરીઓની જરૂરિયાત વિના સાઇન-અપ કન્વર્ઝન રેટ વધારે છે.

ફોન મોકઅપ્સ અને ડિવાઇસ ફ્રેમ્સ

ડિઝાઇનરો વારંવાર સ્ક્રીન રેકોર્ડિંગ્સને સ્લીક વેક્ટર ફોન ફ્રેમ્સ (જેમ કે iPhone અથવા Android હાર્ડવેર બેઝલ્સ) ની અંદર લપેટે છે. જો તમે ફિઝિકલ ડિવાઇસ અથવા સિમ્યુલેટર સ્ક્રીન રેકોર્ડ કરો છો, તો પારદર્શક એનિમેટેડ WebP તરીકે રાઉન્ડેડ હાર્ડવેર કોર્નર્સ સાથે માત્ર સ્ક્રીન કન્ટેન્ટ નિકાસ કરવાથી તમે એનિમેટેડ લેયરને સીધા CSS ડિવાઇસ વ્રેપર્સ અથવા Figma ડિઝાઇન સિસ્ટમ્સમાં મૂકી શકો છો.

કારણ કે કોર્નર્સ ટ્રુ આલ્ફા પારદર્શિતા સાથે રેન્ડર થાય છે, તમે મૂળ ઇન્ટરફેસ કેપ્ચરને ફરીથી રેન્ડર કર્યા વિના CSS ની અંદર હાર્ડવેર ફ્રેમ્સ બદલી શકો છો, ડ્રોપ શેડોઝ બદલી શકો છો અથવા ડિવાઇસના એંગલ બદલી શકો છો.

UI માઇક્રો-ઇન્ટરેક્શન્સ અને લોડિંગ સ્ટેટ્સ

માઇક્રો-ઇન્ટરેક્શન્સ—જેમ કે એનિમેટેડ બટન સ્ટેટ્સ, ડાયનેમિક માઇક રિંગ્સ, પોપિંગ એચિવમેન્ટ બેજ અથવા લાઇવ વોઇસ રૂમ સ્ટેટસ ઇન્ડિકેટર્સ—માટે ચોક્કસ બેકગ્રાઉન્ડ પારદર્શિતાની જરૂર હોય છે. સ્પિનિંગ લોડર અથવા એનિમેટેડ બેજની આસપાસ ચોરસ બેકગ્રાઉન્ડ બોક્સ દર્શાવવાથી એપનો અનુભવ ખરાબ થાય છે.

પારદર્શિતા સાથે અતિ-હળવા એનિમેટેડ WebP નો ઉપયોગ કરવાથી ફ્રન્ટ-એન્ડ એન્જિનિયરોને ડાયનેમિક UI એલિમેન્ટ્સ, એક્ટિવ વિડિઓ ફીડ્સ અથવા વોઇસ રૂમ અવતાર ગ્રીડની ઉપર સીધા કસ્ટમ-ડિઝાઇન કરેલા એનિમેટેડ સ્ટેટ્સ રેન્ડર કરવાની મંજૂરી મળે છે.

પ્રોડક્ટ ટૂર ઓવરલે અને ઓનબોર્ડિંગ

ઇન્ટરેક્ટિવ પ્રોડક્ટ ટૂર્સ અને ઓનબોર્ડિંગ વોકથ્રુ ઘણીવાર ચોક્કસ બટનો અથવા ફ્લોટિંગ ટૂલટિપ્સને હાઇલાઇટ કરે છે. એનિમેટેડ પોઇન્ટર હેન્ડ્સ, પલ્સિંગ ક્લિક ટાર્ગેટ્સ અથવા ડાયનેમિક સૂચનાત્મક ટૂલટિપ્સ માટે પારદર્શક એનિમેટેડ WebP લૂપ્સનો ઉપયોગ એ સુનિશ્ચિત કરે છે કે આ ઓવરલે નીચે આપેલા ડેટા ટેબલ્સ અથવા નેવિગેશન હેડર્સને છુપાવ્યા વિના યુઝર ડેશબોર્ડ્સ પર કુદરતી રીતે ફ્લોટ થાય છે.

કટઆઉટ એનિમેશન સાથે સોશિયલ પોસ્ટ્સ અને થમ્બનેલ્સ

ડિજિટલ ડિસ્પ્લે કેમ્પેઇન, ડોક્યુમેન્ટેશન સાઇટ્સ અને ઇન્ટરેક્ટિવ બ્લોગ પોસ્ટ થમ્બનેલ્સ માટે બનાવવામાં આવેલી માર્કેટિંગ એસેટ્સ નોંધપાત્ર રીતે અલગ તરી આવે છે જ્યારે ડાયનેમિક એલિમેન્ટ્સ સ્ટાન્ડર્ડ બાઉન્ડિંગ બોક્સમાંથી બહાર આવે છે. એનિમેટેડ ફીચરના સ્ક્રીન રેકોર્ડિંગને કટઆઉટ ટ્રાન્સપેરન્ટ લૂપમાં કન્વર્ટ કરવાથી તમે સ્ટેટિક પ્રોમો ઇમેજ અથવા બ્રાન્ડેડ બેકગ્રાઉન્ડ બેનર્સની ઉપર મોશન ગ્રાફિક્સ ઓવરલે કરી શકો છો.

તમને જેની જરૂર પડશે (બધું જ મફત)

FFmpeg — એક એવું ટૂલ જે બધું જ કરે છે

FFmpeg એ વિડિઓ, ઓડિયો અને મલ્ટીમીડિયા સ્ટ્રીમ્સ પ્રોસેસ કરવા માટેનું ઉદ્યોગ-પ્રમાણભૂત, ઓપન-સોર્સ કમાન્ડ-લાઇન ફ્રેમવર્ક છે. તે લોકપ્રિય કમર્શિયલ વિડિઓ સોફ્ટવેર, બ્રાઉઝર એન્જિન અને મીડિયા પાઇપલાઇન્સ પાછળના મૂળ મલ્ટીમીડિયા એન્જિન તરીકે કાર્ય કરે છે. FFmpeg વિડિઓ ફિલ્ટરિંગ ગ્રાફ્સ, આલ્ફા ચેનલ ક્રિએશન, કલર કીઇંગ એલ્ગોરિધમ્સ અને નેટીવ WebP એન્કોડર કન્ફિગરેશન્સની સંપૂર્ણ ઍક્સેસ આપે છે.

કારણ કે FFmpeg CLI દ્વારા ચાલે છે, તે થોડી જ સેકન્ડોમાં જટિલ વિડિઓ મેનિપ્યુલેશન પાઇપલાઇન્સ એક્ઝિક્યુટ કરી શકે છે જેને ભારે ડેસ્કટોપ NLE (નોન-લીનિયર એડિટર) એપ્લિકેશન્સમાં કન્ફિગર કરવામાં મિનિટો લાગી શકે છે.

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-બીટ બ્લેક-એન્ડ-વ્હાઇટ 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 માં લીલા ચિહ્નો હોય, તો તમારા બેકગ્રાઉન્ડ કાનવાસને બ્રાઇટ બ્લુ (#0000FF) અથવા પ્યોર મેજેન્ટા પર સ્વિચ કરો.

રાઉન્ડેડ અથવા અસમાન UI એલિમેન્ટને સ્વચ્છ રીતે રેકોર્ડ કરવું

કાર્ડ્સ, રાઉન્ડેડ ડાયલોગ બોક્સ અથવા સર્ક્યુલર અવતાર ફ્રેમ્સ રેકોર્ડ કરતી વખતે, ઘટકને સીધા તમારા સોલિડ કીઇંગ કલર બેકગ્રાઉન્ડની ટોચ પર મૂકો. જો તમારો ઇરાદો ઓટોમેટેડ કલર કીઇંગનો ઉપયોગ કરવાનો હોય તો સ્ક્રીન કેપ્ચર દરમિયાન UI એલિમેન્ટ પર CSS બોક્સ શેડોઝ અથવા ડ્રોપ શેડોઝ લાગુ કરશો નહીં; કલર કીઇંગ એલ્ગોરિધમ્સ ડાર્ક ડ્રોપ શેડો અને ડાર્ક UI બોર્ડર વચ્ચે તફાવત કરી શકતા નથી, જેના પરિણામે પિક્સેલેટેડ શેડોઝ બને છે.

તેના બદલે, સોલિડ શાર્પ કાર્ડ એજીસને ક્લીન કેપ્ચર કરો, અને તમારી વેબસાઇટ પર અંતિમ WebP મૂકતી વખતે કોડમાં ડાયનેમિકલી સોફ્ટ CSS ડ્રોપ-શેડો ફિલ્ટર્સ લાગુ કરો.

ફ્રેમ રેટ અને રિઝોલ્યુશન વિકલ્પો જે ફાઇલ સાઇઝ ઓછી રાખે છે

હાઇ ફ્રેમ રેટ અને મોટા કાનવાસ પરિમાણો ફાઇલ સાઇઝ ઝડપથી વધારી દે છે. UI એનિમેશન અને એપ ફીચર ડેમોન્સ્ટ્રેશન માટે, 20 fps થી 30 fps નો ફ્રેમ રેટ 60 fps કેપ્ચરની સરખામણીમાં 50% સુધી બેન્ડવિડ્થ બચાવવાની સાથે સ્મૂથ મોશન પ્રદાન કરે છે.

તમારા દર્શાવવા માટેના પરિમાણો સાથે મેળ ખાવા માટે તમારા સ્ક્રીન રેકોર્ડિંગ લક્ષ્ય પરિમાણોને સ્કેલ કરો. જો એનિમેટેડ ફ્રેમ તમારી વેબસાઇટ પર 400x400 પિક્સેલ પર રેન્ડર થવાની હોય, તો અન્સકેલ્ડ 4K (3840x2160) રેકોર્ડિંગ નિકાસ કરશો નહીં. રેકોર્ડિંગ અથવા પ્રી-પ્રોસેસિંગ દરમિયાન ડાઉનસ્કેલ કરવાથી પ્રોસેસિંગનો સમય ઘટે છે.

સામાન્ય રેકોર્ડિંગ ભૂલો જે કટઆઉટને બગાડે છે

લોસી સ્ક્રીન કેપ્ચર સેટિંગ્સ ટાળો જે ફાઇન એજીસ આસપાસ ભારે H.264 કમ્પ્રેશન આર્ટિફેક્ટ્સ પ્રદાન કરે છે. કમ્પ્રેશન આર્ટિફેક્ટ્સ સોલિડ ગ્રીન બેકગ્રાઉન્ડમાં સબટલ કલર વેરિયેશન્સ બનાવે છે, જે કલર કીઇંગ ફિલ્ટર્સને કન્ફ્યુઝ કરે છે અને તમારા સબ્જેક્ટની આસપાસ નાઇસ નોઇઝ છોડી દે છે.

હંમેશાં હાઇ-બીટરેટ સેટિંગ્સ (1080p કાનવાસ કેપ્ચર માટે ન્યૂનતમ 15-20 Mbps) અથવા OBS Studio ની અંદર નેટીવ લોસલેસ કેપ્ચર મોડ્સનો ઉપયોગ કરીને રેકોર્ડ કરો.

સ્ટેપ 2 — તમારી પારદર્શિતા પદ્ધતિ પસંદ કરો

મેથડ A — ક્રોમા કી (સોલિડ કલર બેકગ્રાઉન્ડ રિમૂવલ)

ક્રોમા કીઇંગ આલ્ફા મેટ જનરેટ કરવા માટે વિડિઓ સ્ટ્રીમમાંથી ચોક્કસ કલર વેલ્યુ (જેમ કે શુદ્ધ લીલો અથવા વાદળી) દૂર કરવા પર આધાર રાખે છે. આ પદ્ધતિ આર્ટિફિશિયલ સ્ટુડિયો બેકગ્રાઉન્ડ અથવા એપ ઇમ્યુલેટર્સ પર કેપ્ચર કરાયેલા UI રેકોર્ડિંગ્સ માટે આદર્શ છે જ્યાં તમે બેકગ્રાઉન્ડ કલરને કન્ટ્રોલ કરો છો. ક્રોમા કીઇંગ સંપૂર્ણપણે ઓટોમેટેડ છે અને FFmpeg ની અંદર અત્યંત ઝડપથી ગણતરી કરે છે.

મેથડ B — જિયોમેટ્રિક ક્રોપ અને માસ્ક (ચોરસ, રાઉન્ડેડ કોર્નર્સ, વર્તુળો)

જ્યારે ફિક્સ્ડ જિયોમેટ્રી સાથે સ્ટાન્ડર્ડ UI એલિમેન્ટ રેકોર્ડ કરતી વખતે—જેમ કે લંબચોરસ ડેશબોર્ડ વિજેટ, રાઉન્ડેડ એપ કાર્ડ અથવા ગોળાકાર પ્રોફાઇલ અવતાર—ક્રોમા કીઇંગ બિનજરૂરી છે. તેના બદલે, તમે ચોક્કસ જિયોમેટ્રિક પિક્સેલ ક્રોપિંગ કોઓર્ડિનેટ્સ વ્યાખ્યાયિત કરી શકો છો અને પ્રી-રેન્ડર્ડ 8-બીટ બ્લેક-એન્ડ-વ્હાઇટ માસ્ક ફાઇલ ઓવરલે કરી શકો છો.

આલ્ફા માસ્ક ઇમેજમાં, સફેદ પિક્સેલ્સ (#FFFFFF) પૂર્ણ ઓપેસિટી જાળવી રાખે છે, કાળા પિક્સેલ્સ (#000000) સંપૂર્ણપણે પારદર્શક બની જાય છે, અને રાખોડી પિક્સેલ્સ સંપૂર્ણ સ્મૂથ એન્ટી-એલિયાસ્ડ કિનારીઓ માટે સબ-પિક્સેલ ટ્રાન્સપેરન્સી જનરેટ કરે છે.

મેથડ 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-બીટ YUV આલ્ફા ચેનલ ઉમેરે છે.

સ્વચ્છ કિનારીઓ માટે સિમિલરિટી અને બ્લેન્ડને ટ્યુન કરવું

smiilarity અને 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) બનાવો (દા.ત., બ્લેક બેકગ્રાઉન્ડ પર 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-બીટ આલ્ફા ચેનલ ટ્રાન્સપેરન્સી વેલ્યુઝમાં કન્વર્ટ કરે છે.

ચકાસો કે આલ્ફા ચેનલ ખરેખર બાકી છે

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 એલિમેન્ટ બેકગ્રાઉન્ડ બોક્સ વિના રેડ બેકગ્રાઉન્ડ પર સ્વચ્છ રીતે ફ્લોટ થાય છે, તો તમારી આલ્ફા ચેનલ પારદર્શિતા અકબંધ છે અને અંતિમ નિકાસ માટે તૈયાર છે.

દરેક કમાન્ડ ખરેખર શું કરે છે (કોપી-પેસ્ટ માટે તૈયાર)

Execution Note: ઉપરના કમાન્ડ્સ રો 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

આ સિંગલ-લાઇન કમાન્ડ એક જ પ્રોસેસિંગ પાઇપલાઇનમાં કલર કીઇંગ, ફ્રેમ-રેટ એડજસ્ટમેન્ટ, હાઇ-ક્વોલિટી Lanczos સ્પેશિયલ ડાઉનસ્કેલિંગ, આલ્ફા પેલેટ ઓપ્ટિમાઇઝેશન અને લોસી 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 ફાઇલ વેબ એન્વાયર્નમેન્ટ્સમાં પૂર્ણ આલ્ફા ચેનલ પારદર્શિતા જાળવી રાખે છે કે કેમ તે ચકાસવા માટે, આઉટપુટ ફાઇલને સીધા નવા 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 થી નીચે જવાનું ટાળો, કારણ કે ઓછી વેલ્યુઝ આલ્ફા બોર્ડર્સ પર દૃશ્યમાન નોઇઝ બનાવે છે.

વેબ ઉપયોગ માટે લક્ષ્ય ફાઇલ સાઇઝ

શ્રેષ્ઠ વેબ પર્ફોર્મન્સ અને મોબાઇલ પેજ લોડ સ્પીડ પર ન્યૂનતમ અસર માટે, તમારા કમ્પોનન્ટ સાઇઝના આધારે નીચેના ટાર્ગેટ ફાઇલ સાઇઝ બજેટનું લક્ષ્ય રાખો:

• માઇક્રો-ઇન્ટરેક્શન્સ / બેજ (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 એટ્રિબ્યુટ્સ સેટ કરવાથી પેજ લેઆઉટ કમ્પ્યુટેશન દરમિયાન Cumulative Layout Shift (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>
);
}

Note: સર્વર-સાઇડ ઇમેજ રી-કમ્પ્રેશન એન્જિન્સને બાયપાસ કરવા માટે પ્રી-કમ્પ્રેસ્ડ એનિમેટેડ WebP એસેટ્સ આપતી વખતે Next.js Image કમ્પોનન્ટ્સની અંદર unoptimized નિર્દિષ્ટ કરો જે આલ્ફા ચેનલ્સને સ્ટેટિક JPEG ફ્રેમ્સમાં બદલી શકે છે.

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 આલ્ફા સીક્વન્સ પાર્સ કરે છે.

જો તમારી એપ્લિકેશન આર્કિટેક્ચરને WebP કરતાં ઓછી મેમરી સાથે જટિલ રિયલ-ટાઇમ ઇન્ટરેક્ટિવ મોશન ગ્રાફિક્સ, પાર્ટીકલ સ્ટ્રીમ્સ અથવા સર્વર-ડ્રાઇવન્ લાઇવ સ્ટ્રીમિંગ ગિફ્ટ એનિમેશનની જરૂર હોય, તો SVGA Maker અથવા સમર્પિત વેક્ટર એન્જિન્સ જેવા ટૂલ્સ દ્વારા સપોર્ટેડ સ્પેશિયલાઇઝ્ડ ફોર્મેટ્સનું મૂલ્યાંકન કરો.

સંપૂર્ણ કસ્ટમ રિયલ-ટાઇમ મોબાઇલ પ્લેટફોર્મ બનાવતી ટીમો માટે, AppLooma LLC જેવી અનુભવી ડેવલપમેન્ટ ફર્મની સલાહ લેવાથી એ સુનિશ્ચિત થાય છે કે તમારી ક્લાયન્ટ-સાઇડ રેન્ડરિંગ પાઇપલાઇન ફ્રેમ્સ ડ્રોપ કર્યા વિના અથવા મેમરી ઓવરલોડ કર્યા વિના ડાયનેમિક એનિમેશન એસેટ્સ હેન્ડલ કરે છે.

તે ડાર્ક અને લાઇટ બેકગ્રાઉન્ડ પર યોગ્ય દેખાય છે કે કેમ તેની ખાતરી કરવી

હંમેશાં વિવિધ વિરોધાભાસી બેકગ્રાઉન્ડ કલર્સ (દા.ત., પ્યોર બ્લેક #000000, પ્યોર વ્હાઇટ #FFFFFF, અને વાઇબ્રન્ટ બ્રાન્ડ કલર્સ) સામે તમારી ટ્રાન્સપેરન્ટ WebP એસેટનું પરીક્ષણ કરો. જો સફેદ બેકગ્રાઉન્ડ પર ડાર્ક બોર્ડર દેખાય છે, તો એજ સબ-પિક્સેલ હેલોઝને સાફ કરવા માટે સહેજ વધારે blend અને despill પેરામીટર્સ સાથે તમારી FFmpeg ક્રોમા કી પાઇપલાઇન ફરીથી રન કરો.

ટ્રબલશૂટિંગ — સામાન્ય સમસ્યાઓ અને ઉકેલો

મારું WebP પારદર્શિતાના બદલે કાળું કે સફેદ બેકગ્રાઉન્ડ બતાવે છે

આ સમસ્યા ત્યારે થાય છે જ્યારે FFmpeg કલર સ્પેસ ટ્રાન્સલેશન દરમિયાન આલ્ફા ચેનલને કાઢી નાખે છે અથવા જ્યારે કોઈ વચગાળાની ઇમેજ પાઇપ પિક્સેલ ફોર્મેટ્સને સ્ટાન્ડર્ડ 3-ચેનલ RGB માં કન્વર્ટ કરે છે. પિક્સેલ બફર્સને libwebp એન્કોડર પર પાસ કરતા પહેલા ખાલી કરો કે તમારો ફિલ્ટર ગ્રાફ સ્પષ્ટપણે format=yuva420p અથવા format=rgba નો સમાવેશ કરે છે.

કિનારીઓ ખાંચાવાળી દેખાય છે અથવા લીલો હેલો ધરાવે છે

ખાંચાવાળી કિનારીઓ અથવા રંગીન આઉટલાઇન્સ સૂચવે છે કે ક્રોમા કી સિમિલરિટી થ્રેશોલ્ડ ખૂબ ઓછી સેટ કરવામાં આવી હતી અથવા સોફ્ટ એજ બ્લેન્ડિંગ બાકી રહી ગયું હતું. FFmpeg માં તમારો blend પેરામીટર 0.01 થી વધારીને 0.05 અથવા 0.08 કરો. અથવા, સોફ્ટ એજ એન્ટી-એલિયાસિંગ નક્કી કરવા માટે હાઇ-રિઝોલ્યુશન 8-બીટ ગ્રેસ્કેલ આલ્ફા માસ્કનો ઉપયોગ કરો.

એનિમેશન લૂપ થતું નથી અથવા માત્ર એક જ વાર પ્લે થાય છે

બાય ડિફોલ્ટ, અમુક FFmpeg બિલ્ડ્સ એક એનિમેશન સાયકલ એક્ઝિક્યુટ કરવા અને રોકાઈ જવા માટે WebP સીક્વન્સને એન્કોડ કરે છે. વેબ બ્રાઉઝર એન્જિન્સની અંદર અનંત લૂપિંગ એક્ઝિક્યુશન કરવા માટે તમારા એક્સપોર્ટ કમાન્ડમાં સ્પષ્ટપણે -loop 0 ફ્લેગ ઉમેરો.

ફાઇલ સાઇઝ ખૂબ મોટી છે

જો તમારી નિકાસ કરેલી ફાઇલ સાઇઝ 1-2 MB થી વધુ હોય, તો તમે સંભવતઃ ફુલ સ્ક્રીન રિઝોલ્યુશન પર એન્કોડ કરી રહ્યાં છો, 60 fps જાળવી રહ્યાં છો, અથવા લોસલેસ કમ્પ્રેશન (-lossless 1) નો ઉપયોગ કરી રહ્યાં છો. વણવપરાયેલી કાનવાસ સ્પેસ ક્રોપ કરો, ફ્રેમ રેટ ઘટાડીને 20 fps કરો, ડાઉનસ્કેલ પરિમાણો કરો, અને -q:v 70 સાથે લોસી WebP એન્કોડિંગનો ઉપયોગ કરો.

પ્લેબેક અટકી અટકીને ચાલે છે

અટકીને ચાલતું એનિમેશન પ્લેબેક વિડિઓ એક્સ્ટ્રેક્શન દરમિયાન અસમાન ફ્રેમ ડ્યુરેશન ટાઇમસ્ટેમ્પ્સ અથવા ક્લાયન્ટ ડિવાઇસ પર અતિશય CPU ડીકોડિંગ ઓવરહેડને કારણે થાય છે. વેરિયેબલ ફ્રેમ રેટ કેપ્ચર મોડ્સના બદલે FFmpeg ના fps=24 ફિલ્ટરનો ઉપયોગ કરીને સ્ટેબલ, યુનિફોર્મ ફ્રેમ રેટ રાખો.

તે Chrome માં કામ કરે છે પણ અન્ય બ્રાઉઝર કે એપમાં નહીં

જૂની ઓપરેટિંગ સિસ્ટમ વેબવ્યુઝ અથવા અન-અપડેટેડ ઇમેજ પાર્સિંગ લાઇબ્રેરીઓ લોસી WebP આલ્ફા ચેનલ્સને યોગ્ય રીતે ડીકોડ કરવામાં નિષ્ફળ થઈ શકે છે. સ્ટાન્ડર્ડ લોસલેસ પેરામીટર્સ (-lossless 1) નો ઉપયોગ કરીને તમારી એસેટ ફરીથી નિકાસ કરવાથી અથવા picture એલિમેન્ટ ફોલબેક સ્ટ્રક્ચર એમ્બેડ કરવાથી આ સમસ્યા ઉકેલાય છે.

આ સેક્શન સર્ચ ટ્રાફિક માટે ગોલ્ડ છે — લોકો એરર માટે સર્ચ કરે છે

Search Intent Tip: સામાન્ય એરર ક્વેરીઝ જેમ કે 'FFmpeg webp black background transparency fix' અથવા 'remove green halo ffmpeg chroma key' હાઇ-ઇન્ટેન્ટ ઓર્ગેનિક સર્ચ ટ્રાફિક લાવે છે. આ ઝડપી ટ્રબલશૂટિંગ સોલ્યુશન્સ રાખવાથી પ્રાયોગિક કમાન્ડ લાઇન સમસ્યાઓ તરત જ ઉકેલવામાં મદદ મળે છે.

બોનસ — આખી પ્રક્રિયાને ઓટોમેટ કરવી

બેચ કન્વર્ઝન માટે પુનઃઉપયોગી શેલ સ્ક્રિપ્ટ

એક રીયુઝેબલ Bash ઓટોમેશન સ્ક્રિપ્ટ (convert_to_webp.sh) બનાવીને સમય બચાવો જે સિંગલ ટર્મિનલ કમાન્ડ સાથે રો સ્ક્રીન રેકોર્ડિંગ્સને ઓપ્ટિમાઇઝ્ડ ટ્રાન્સપેરન્ટ WebP ફાઇલોમાં પ્રોસેસ કરે છે:

#!/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 કેરેક્ટર રિગ્સ, ડાયનેમિક વેક્ટર મોર્ફિંગ અથવા પાર્ટીકલ ઇફેક્ટ ફિઝિક્સનું અનુકરણ કરી શકતા નથી.

જો તમારા પ્રોજેક્ટને કસ્ટમ હિરો બ્રાન્ડ એનિમેશન્સ, હાઇ-પર્ફોર્મન્સ વેક્ટર પાર્ટીકલ ઇફેક્ટ્સ, અથવા વોઇસ રૂમ અને લાઇવ-સ્ટ્રીમિંગ એપ્સ માટે ઇન્ટરેક્ટિવ રિયલ-ટાઇમ ગિફ્ટ એનિમેશન્સની જરૂર હોય, તો રો સ્ક્રીન રેકોર્ડિંગ્સ પર આધાર રાખવો અપૂરતો રહેશે. જટિલ વેક્ટર- આધારિત મોશન ગ્રાફિક્સ અને લાઇટવેઇટ ઇન્ટરેક્ટિવ મોબાઇલ એનિમેશન માટે, SVGA Maker જેવી સ્પેશિયલાઇઝ્ડ સ્ટુડિયો ક્રિએશન પાઇપલાઇન્સનો ઉપયોગ કરવો અથવા પ્રોફેશનલ મોશન ડિઝાઇનર્સ સાથે કામ કરવું શ્રેષ્ઠ વિઝ્યુઅલ ક્વોલિટી અને પર્ફોર્મન્સ સુનિશ્ચિત કરે છે.

Frequently asked questions

Conclusion

રો સ્ક્રીન રેકોર્ડિંગ્સને લાઇટવેઇટ ટ્રાન્સપેરન્ટ એનિમેટેડ WebP માં કન્વર્ટ કરવું એ મોંઘા મોશન ડિઝાઇન ટૂલ્સ પર આધાર રાખ્યા વિના તમારા SaaS લેન્ડિંગ પેજીસ, મોબાઇલ ઓનબોર્ડિંગ સ્ક્રીન્સ અને UI શોકેસ ડેમોને અપગ્રેડ કરવાની સૌથી ઝડપી રીતોમાંની એક છે. સોલિડ બેકગ્રાઉન્ડ કેપ્ચર્સને FFmpeg ક્રોમા કીઇંગ અને પેલેટ ઓપ્ટિમાઇઝેશન સાથે જોડીને, તમે મિનિટોમાં શુદ્ધ 8-બીટ ટ્રાન્સપેરન્ટ એનિમેશન ડિપ્લોય કરી શકો છો.

જો તમે એસેટ પાઇપલાઇન્સને ઓટોમેટ કરવા માંગો છો અથવા લાઇવ સ્ટ્રીમિંગ ક્ષમતાઓ સાથે હાઇ-કન્વર્ટિંગ મોબાઇલ એપ્લિકેશન્સ બનાવવા માંગો છો, તો તમારી પ્રોડક્ટ વિઝનને સાકાર કરવા માટે અમારી વિશિષ્ટ ડિઝાઇન પાઇપલાઇન્સનું અન્વેષણ કરો અથવા AppLooma LLC ખાતે અમારી એન્જિનિયરિંગ ટીમ સાથે સંપર્ક કરો.