ಯಾವುದೇ ಸ್ಕ್ರೀನ್ ರೆಕಾರ್ಡಿಂಗ್ ಅನ್ನು ಪಾರದರ್ಶಕ ಅನಿಮೇಟೆಡ್ WebP ಫ್ರೇಮ್ ಆಗಿ ಪರಿವರ್ತಿಸುವುದು ಹೇಗೆ (After Effects ಇಲ್ಲದೆ, ಡಿಸೈನರ್ ಇಲ್ಲದೆ)

ಉತ್ತಮ ಗುಣಮಟ್ಟದ UI ಮೋಷನ್ ಓವರ್‌ಲೇಗಳನ್ನು ರಚಿಸಲು ಸಾಮಾನ್ಯವಾಗಿ After Effects ನಂತಹ ಜಟಿಲ ಸಾಫ್ಟ್‌ವೇರ್‌ಗಳು ಅಥವಾ ಮೋಷನ್ ಡಿಸೈನರ್ ಅಗತ್ಯವಿರುತ್ತದೆ. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಫ್ಲೋಟಿಂಗ್ ಆಪ್ ಫೀಚರ್, UI ಮೈಕ್ರೋ-ಇಂಟರಾಕ್ಷನ್ ಅಥವಾ ಡೈನಾಮಿಕ್ ವಾಯ್ಸ್-ರೂಮ್ ವಿಜೆಟ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಪಾರದರ್ಶಕ ಅನಿಮೇಟೆಡ್ WebP ಅಗತ್ಯವಿದ್ದರೆ, ನೀವು ಅದನ್ನು ಕೆಲವೇ ನಿಮಿಷಗಳಲ್ಲಿ ಉಚಿತವಾಗಿ ಸ್ವತಃ ರಚಿಸಬಹುದು.

ಈ ಸಂಪೂರ್ಣ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ, ಸ್ಕ್ರೀನ್ ರೆಕಾರ್ಡಿಂಗ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವುದು ಮತ್ತು ಸಂಪೂರ್ಣ 8-bit ಆಲ್ಫಾ ಚಾನೆಲ್‌ಗಳನ್ನು ಹೊರತೆಗೆಯಲು ಓಪನ್-ಸೋರ್ಸ್ CLI ಪರಿಕರಗಳ ಮೂಲಕ ಅವುಗಳನ್ನು ಪ್ರೊಸೆಸ್ ಮಾಡುವುದು ಹೇಗೆ ಎಂದು ತಿಳಿಯುವಿರಿ. ಸಂಪೂರ್ಣ ಪಾರದರ್ಶಕತೆಯೊಂದಿಗೆ ಅತ್ಯಂತ ಲೈಟ್‌ವೇಟ್ ಅನಿಮೇಟೆಡ್ WebP ನೀಡುವ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ತೆಗೆದುಹಾಕುವ ಅಲ್ಗಾರಿದಮ್‌ಗಳು, FFmpeg ಆಪ್ಟಿಮೈಸೇಶನ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು ಮತ್ತು ಕ್ರಾಸ್-ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ವೆಬ್ ಇಂಟಿಗ್ರೇಷನ್ ವಿಧಾನಗಳನ್ನು ನಾವು ಇಲ್ಲಿ ವಿವರಿಸುತ್ತೇವೆ.

ಪಾರದರ್ಶಕ ಅನಿಮೇಟೆಡ್ WebP ಎಂದರೇನು (ಮತ್ತು ಇದು GIF ಗಿಂತ ಏಕೆ ಉತ್ತಮ)

ಅನಿಮೇಟೆಡ್ WebP ಸರಳ ವಿವರಣೆ

ಅನಿಮೇಟೆಡ್ WebP ಫೈಲ್ ಎಂಬುದು Google ನ WebP ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ನ ವಿಸ್ತರಣೆಯಾಗಿದ್ದು, ಇದು ಲಾಸಿ ಮತ್ತು ಲಾಸ್‌ಲೆಸ್ ಕಂಪ್ರೆಷನ್ ಅಲ್ಗಾರಿದಮ್‌ಗಳೊಂದಿಗೆ ಸೀಕ್ವೆನ್ಸ್ ಅನಿಮೇಷನ್ ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಹಳೆಯ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, WebP ಪ್ರೊಡಕ್ಟ್ VP8 ವೀಡಿಯೊ ಕೋಡೆಕ್‌ನಿಂದ ಪಡೆದ ಸುಧಾರಿತ ಪ್ರಿಡಿಕ್ಷನ್ ತಂತ್ರಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಇದು ಯಾವುದೇ ದೃಶ್ಯ ಸ್ಪಷ್ಟತೆಯನ್ನು ಕಳೆದುಕೊಳ್ಳದೆ ಫ್ರೇಮ್-ಬೈ-ಫ್ರೇಮ್ ಅನಿಮೇಷನ್ ಅನ್ನು ಸಾಂಪ್ರದಾಯಿಕ ಫೈಲ್ ಗಾತ್ರಗಳ ಸಣ್ಣ ಭಾಗಕ್ಕೆ ಕಂಪ್ರೆಸ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.

ಆಲ್ಫಾ ಚಾನೆಲ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ, ಪಾರದರ್ಶಕ ಅನಿಮೇಟೆಡ್ WebP ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಮೊಬೈಲ್ UI ನ ಯಾವುದೇ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಸಂಪೂರ್ಣ ಪಾರದರ್ಶಕತೆ ಅಥವಾ ಅರೆ-ಪಾರದರ್ಶಕತೆಯನ್ನು ನೀಡುತ್ತದೆ. ಇದರರ್ಥ UI ಕಾಂಪೊನೆಂಟ್‌ಗಳು, ಪಾರ್ಟಿಕಲ್ ಎಫೆಕ್ಟ್‌ಗಳು ಮತ್ತು ಆಪ್ ಡೆಮೋಗಳು ಯಾವುದೇ ಚೌಕದ ಗಡಿಗಳು ಅಥವಾ ಕೆಟ್ಟ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಬಣ್ಣಗಳಿಲ್ಲದೆ ಡೈನಾಮಿಕ್ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಬಣ್ಣಗಳು, ವೀಡಿಯೊಗಳು ಅಥವಾ ಡಾರ್ಕ್/ಲೈಟ್ ಮೋಡ್ ಥೀಮ್‌ಗಳ ಮೇಲೆ ಸುಲಭವಾಗಿ ತಲಾಡಬಹುದು.

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 ಬಣ್ಣದ ಡೆಪ್ತ್ ಮತ್ತು 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 14 ರಿಂದ SwiftUI ಮತ್ತು UIKit ಇಮೇಜ್ ವ್ಯೂಗಳ ಒಳಗೆ ಬೆಂಬಲಿಸುತ್ತದೆ. ಇದು ಅನಿಮೇಟೆಡ್ WebP ಅನ್ನು ಕ್ರಾಸ್-ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಆಪ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅತ್ಯಂತ ನಂಬಿಗಸ್ಥ ಫಾರ್ಮ್ಯಾಟ್ ಆಗಿ ಮಾಡುತ್ತದೆ.

ಫಾರ್ಮ್ಯಾಟ್ ಹೋಲಿಕೆ ಕೋಷ್ಟಕ

ನಿಮಗೆ ಪಾರದರ್ಶಕ ಫ್ರೇಮ್ ನಿಜವಾಗಿ ಯಾವಾಗ ಅಗತ್ಯವಿರುತ್ತದೆ

ಲ್ಯಾಂಡಿಂಗ್ ಪೇಜ್ ಹೀರೋ ಮೇಲೆ ಫ್ಲೋಟ್ ಆಗುವ ಆಪ್ ಡೆಮೋಗಳು

SaaS ಲ್ಯಾಂಡಿಂಗ್ ಪೇಜ್‌ನಲ್ಲಿ ಮೊಬೈಲ್ ಆಪ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುವಾಗ, ಹೀರೋ ವಿಭಾಗದೊಳಗೆ ಚೌಕದ ವೀಡಿಯೊವನ್ನು ಇರಿಸುವುದು ಡಾರ್ಕ್ ಮೋಡ್ ಅಥವಾ ಗ್ರೇಡಿಯಂಟ್ ವಿನ್ಯಾಸಗಳ ಸೌಂದರ್ಯವನ್ನು ಹಾಳುಮಾಡುತ್ತದೆ. ನಿಮ್ಮ ಸ್ಕ್ರೀನ್ ರೆಕಾರ್ಡಿಂಗ್‌ನಿಂದ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ತೆಗೆದುಹಾಕಿ ಮತ್ತು ಅದನ್ನು ಪಾರದರ್ಶಕ ಅನಿಮೇಟೆಡ್ WebP ಆಗಿ ಎಕ್ಸ್‌ಪೋರ್ಟ್ ಮಾಡುವ ಮೂಲಕ, ನಿಮ್ಮ ಆಪ್ ಇಂಟರ್‌ಫೇಸ್ ಲ್ಯಾಂಡಿಂಗ್ ಪೇಜ್‌ನ ವಿನ್ಯಾಸದ ಮೇಲೆ ಸುಂದರವಾಗಿ ಫ್ಲೋಟ್ ಆಗಬಹುದು.

ಈ ವಿಶುವಲ್ ಲೇಯರ್ ಎಫೆಕ್ಟ್ ಬಳಕೆದಾರರಿಗೆ ಪ್ರೀಮಿಯಂ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ, ಜಟಿಲ WebGL ಅಥವಾ 3D ಲೈಬ್ರರಿಗಳ ಅಗತ್ಯವಿಲ್ಲದೇ ಸೈನ್-ಅಪ್ ಪರಿವರ್ತನೆ ದರಗಳನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

ಫೋನ್ ಮಾಕಪ್‌ಗಳು ಮತ್ತು ಡಿವೈಸ್ ಫ್ರೇಮ್‌ಗಳು

ಡಿಸೈನರ್‌ಗಳು ಸ್ಕ್ರೀನ್ ರೆಕಾರ್ಡಿಂಗ್‌ಗಳನ್ನು ಸುಂದರವಾದ ಫೋನ್ ಫ್ರೇಮ್‌ಗಳಲ್ಲಿ (iPhone ಅಥವಾ Android ನಂತಹ) ಆಗಾಗ್ಗೆ ಸುತ್ತುವರಿಯುತ್ತಾರೆ. ನೀವು ಭೌತಿಕ ಸಾಧನ ಅಥವಾ ಸಿಮ್ಯುಲೇಟರ್ ಸ್ಕ್ರೀನ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿದರೆ, ರೌಂಡೆಡ್ ಕಾರ್ನರ್‌ಗಳೊಂದಿಗೆ ಸ್ಕ್ರೀನ್ ಕಂಟೆಂಟ್ ಅನ್ನು ಪಾರದರ್ಶಕ ಅನಿಮೇಟೆಡ್ WebP ಆಗಿ ಎಕ್ಸ್‌ಪೋರ್ಟ್ ಮಾಡುವುದರಿಂದ ಅನಿಮೇಟೆಡ್ ಲೇಯರ್ ಅನ್ನು ನೇರವಾಗಿ CSS ಡಿವೈಸ್ ವ್ರ್ಯಾಪರ್‌ಗಳಿಗೆ ಸೇರಿಸಬಹುದು.

ಮೂಲೆಗಳನ್ನು ನೈಜ ಆಲ್ಫಾ ಪಾರದರ್ಶಕತೆಯೊಂದಿಗೆ ರೆಂಡರ್ ಮಾಡಲಾಗಿರುವುದರಿಂದ, ಅಂಡರ್‌ಲೈಯಿಂಗ್ ಇಂಟರ್‌ಫೇಸ್ ಕ್ಯಾಪ್ಚರ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡದೆ ನೀವು 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-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% ನೇಟಿವ್ ಡಿಸ್ಪ್ಲೇ ಸ್ಕೇಲ್‌ನಲ್ಲಿ ರೆಕಾರ್ಡ್ ಮಾಡಿ. 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 ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸುವ್ಯಕ್ತವಾಗಿ ರೆಕಾರ್ಡ್ ಮಾಡುವುದು

ಕಾರ್ಡ್‌ಗಳು, ರೌಂಡೆಡ್ ಡೈಲಾಗ್ ಬಾಕ್ಸ್‌ಗಳು ಅಥವಾ ಸರ್ಕ್ಯುಲರ್ ಅವತಾರ್ ಫ್ರೇಮ್‌ಗಳನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡುವಾಗ, ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನೇರವಾಗಿ ಸಾಲಿಡ್ ಕೀಯಿಂಗ್ ಕಲರ್ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಮೇಲೆ ಇರಿಸಿ. ಸ್ವಯಂಚಾಲಿತ ಕಲರ್ ಕೀಯಿಂಗ್ ಬಳಸಲು ಉದ್ದೇಶಿಸಿದ್ದರೆ ಸ್ಕ್ರೀನ್ ಕ್ಯಾಪ್ಚರ್ ಸಮಯದಲ್ಲಿ 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-bit ಕಪ್ಪು-ಮತ್ತು-ಬಿಳಿ ಮಾಸ್ಕ್ ಫೈಲ್ ಅನ್ನು ಓವರ್‌ಲೇ ಮಾಡಬಹುದು.

ಆಲ್ಫಾ ಮಾಸ್ಕ್ ಚಿತ್ರದಲ್ಲಿ, ಬಿಳಿ ಪಿಕ್ಸೆಲ್‌ಗಳು (#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 ಪ್ಯಾರಾಮೀಟರ್ ಟಾರ್ಗೆಟ್ Hex ಬಣ್ಣವನ್ನು (ಶುದ್ಧ ಹಸಿರು) ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಎರಡನೇ ಮೌಲ್ಯ (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 to 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-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 -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 ಕಂಪ್ರೆಷನ್ ಅನ್ನು ಒಂದೇ ಪ್ರೊಸೆಸಿಂಗ್ ಪೈಪ್‌ಲೈನ್‌ನಲ್ಲಿ ನಿರ್ವಹಿಸುತ್ತದೆ.

ಲಾಸಿ vs ಲಾಸ್‌ಲೆಸ್ 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>
);
}

ಟಿಪ್ಪಣಿ: ಪ್ರಿ-ಕಂಪ್ರೆಸ್ಡ್ ಅನಿಮೇಟೆಡ್ WebP ಅಸೆಟ್‌ಗಳನ್ನು ನೀಡುವಾಗ ಆಲ್ಫಾ ಚಾನೆಲ್‌ಗಳನ್ನು ಸ್ಟ್ಯಾಟಿಕ್ JPEG ಫ್ರೇಮ್‌ಗಳಾಗಿ ಫ್ಲ್ಯಾಟ್ ಮಾಡಬಹುದಾದ ಸರ್ವರ್-ಸೈಡ್ ಇಮೇಜ್ ಮರು-ಕಂಪ್ರೆಷನ್ ಇಂಜಿನ್‌ಗಳನ್ನು ಬೈಪಾಸ್ ಮಾಡಲು 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 WebP ಅನ್ನು AsyncImage ಅಥವಾ SDWebImageSwiftUI ನಂತಹ ಲೈಟ್‌ವೇಟ್ ವ್ರ್ಯಾಪರ್‌ಗಳ ಮೂಲಕ ನಿರ್ವಹಿಸುತ್ತದೆ.
• Flutter / React Native: ಸ್ಟ್ಯಾಂಡರ್ಡ್ Image.asset('assets/ui-demo.webp') ವಿಜೆಟ್‌ಗಳನ್ನು ಬಳಸಿ; ನೇಟಿವ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಇಂಜಿನ್‌ಗಳು WebP ಆಲ್ಫಾ ಸೀಕ್ವೆನ್ಸ್‌ಗಳನ್ನು ನೇರವಾಗಿ ಡಿವೈಸ್ GPU ಲೇಯರ್‌ಗಳಲ್ಲಿ ಪಾರ್ಸ್ ಮಾಡುತ್ತವೆ.

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗೆ ಜಟಿಲ ರಿಯಲ್-ಟೈಮ್ ಇಂಟರಾಕ್ಟಿವ್ ಮೋಷನ್ ಗ್ರಾಫಿಕ್ಸ್, ಪಾರ್ಟಿಕಲ್ ಸ್ಟ್ರೀಮ್‌ಗಳು, ಅಥವಾ 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 ಗೆ ಹೆಚ್ಚಿಸಿ. ಪರ್ಯಾಯವಾಗಿ, ಸಾಫ್ಟ್ ಎಡ್ಜ್‌ಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ನಿರ್ದೇಶಿಸಲು ಹೈ-ರೆಸಲ್ಯೂಶನ್ 8-bit ಗ್ರೇಸ್ಕೇಲ್ ಆಲ್ಫಾ ಮಾಸ್ಕ್ ಬಳಸಿ.

ಅನಿಮೇಷನ್ ಲೂಪ್ ಆಗುವುದಿಲ್ಲ ಅಥವಾ ಒಮ್ಮೆ ಮಾತ್ರ ಪ್ಲೇ ಆಗುತ್ತದೆ

ಡಿಫಾಲ್ಟ್ ಆಗಿ, ಕೆಲವು 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 ಎಲಿಮೆಂಟ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ರಚನೆಯನ್ನು ಎಂಬೆಡ್ ಮಾಡುವುದು ಕ್ರಾಸ್-ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತದೆ.

ಸರ್ಚ್ ಟ್ರಾಫಿಕ್‌ಗೆ ಈ ವಿಭಾಗ ಅತ್ಯಂತ ಮೌಲ್ಯಯುತವಾಗಿದೆ — ಜನರು ದೋಷಗಳ ಕುರಿತು ಹುಡುಕುತ್ತಾರೆ

ಸಲಹೆ: '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 ಕ್ಯಾರಕ್ಟರ್ ರಿಗ್‌ಗಳು ಅಥವಾ ಪಾರ್ಟಿಕಲ್ ಎಫೆಕ್ಟ್ ಫಿಸಿಕ್ಸ್ ಅನ್ನು ಮರುಸೃಷ್ಟಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ.

ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಕಸ್ಟಮ್ ಬ್ರಾಂಡ್ ಅನಿಮೇಷನ್‌ಗಳು, ಹೈ-ಪರ್ಫಾರ್ಮೆನ್ಸ್ ವೆಕ್ಟರ್ ಪಾರ್ಟಿಕಲ್ ಎಫೆಕ್ಟ್‌ಗಳು ಅಥವಾ ವಾಯ್ಸ್ ರೂಮ್ ಮತ್ತು ಲೈವ್-ಸ್ಟ್ರೀಮಿಂಗ್ ಆಪ್‌ಗಳಿಗಾಗಿ ಇಂಟರಾಕ್ಟಿವ್ ರಿಯಲ್-ಟೈಮ್ ಗಿಫ್ಟ್ ಅನಿಮೇಷನ್‌ಗಳು ಅಗತ್ಯವಿದ್ದರೆ, ಕೇವಲ ಸ್ಕ್ರೀನ್ ರೆಕಾರ್ಡಿಂಗ್‌ಗಳನ್ನು ನೆಚ್ಚಿಕೊಳ್ಳುವುದು ಸಾಕಾಗುವುದಿಲ್ಲ. ಸಂಕೀರ್ಣ ವೆಕ್ಟರ್-ಆಧಾರಿತ ಮೋಷನ್ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಲೈಟ್‌ವೇಟ್ ಇಂಟರಾಕ್ಟಿವ್ ಮೊಬೈಲ್ ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ, SVGA Maker ನಂತಹ ವಿಶೇಷ ಸ್ಟುಡಿಯೋ ಕ್ರಿಯೇಷನ್ ಪೈಪ್‌ಲೈನ್‌ಗಳನ್ನು ಬಳಸುವುದು ಅಥವಾ ವೃತ್ತಿಪರ ಮೋಷನ್ ಡಿಸೈನರ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ಉತ್ತಮ ದೃಶ್ಯ ಗುಣಮಟ್ಟ ಮತ್ತು ಸೂಕ್ತ ರನ್-ಟೈಮ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

Frequently asked questions

Conclusion

ರಾ ಸ್ಕ್ರೀನ್ ರೆಕಾರ್ಡಿಂಗ್‌ಗಳನ್ನು ಲೈಟ್‌ವೇಟ್ ಪಾರದರ್ಶಕ ಅನಿಮೇಟೆಡ್ WebP ಆಗಿ ಪರಿವರ್ತಿಸುವುದು ದುಬಾರಿ ಮೋಷನ್ ಡಿಸೈನ್ ಟೂಲ್‌ಗಳನ್ನು ನೆಚ್ಚಿಕೊಳ್ಳದೆ ನಿಮ್ಮ SaaS ಲ್ಯಾಂಡಿಂಗ್ ಪೇಜ್‌ಗಳು, ಮೊಬೈಲ್ ಆನ್‌ಬೋರ್ಡಿಂಗ್ ಸ್ಕ್ರೀನ್‌ಗಳು ಮತ್ತು UI ಶೋಕೇಸ್ ಡೆಮೋಗಳನ್ನು ಸುಧಾರಿಸಲು ಅತ್ಯಂತ ವೇಗವಾದ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. FFmpeg ಕ್ರೋಮಾ ಕೀಯಿಂಗ್ ಮತ್ತು ಪ್ಯಾಲೆಟ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನೊಂದಿಗೆ ಸಾಲಿಡ್ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಕ್ಯಾಪ್ಚರ್‌ಗಳನ್ನು ಜೋಡಿಸುವ ಮೂಲಕ, ನೀವು ಕೆಲವೇ ನಿಮಿಷಗಳಲ್ಲಿ ಅತ್ಯುತ್ತಮ 8-bit ಪಾರದರ್ಶಕ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ನಿಯೋಜಿಸಬಹುದು.

ನೀವು ಅಸೆಟ್ ಪೈಪ್‌ಲೈನ್‌ಗಳನ್ನು ಆಟೋಮೇಟ್ ಮಾಡಲು ಬಯಸಿದರೆ ಅಥವಾ ಲೈವ್ ಸ್ಟ್ರೀಮಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳೊಂದಿಗೆ ಹೆಚ್ಚಿನ ಪರಿವರ್ತನೆ ನೀಡುವ ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಬಯಸಿದರೆ, ನಮ್ಮ ವಿಶೇಷ ಡಿಸೈನ್ ಪೈಪ್‌ಲೈನ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸಿ ಅಥವಾ ನಿಮ್ಮ ಪ್ರಾಡಕ್ಟ್ ವಿಷನ್ ಅನ್ನು ಜೀವಂತಗೊಳಿಸಲು AppLooma LLC ಯಲ್ಲಿ ನಮ್ಮ ಇಂಜಿನಿಯರಿಂಗ್ ತಂಡದೊಂದಿಗೆ ಸಮಾಲೋಚಿಸಿ.