ಬ್ರೌಸರ್-ಆಧಾರಿತ ಚಿತ್ರ ಪರಿವರ್ತನೆ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
ಪ್ರತಿ ಪರಿವರ್ತನೆಯು ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ಚಲಿಸುವ ನಾಲ್ಕು-ಹಂತದ ಪೈಪ್ಲೈನ್ ಆಗಿದೆ. JPEG ಮತ್ತು PNG ಗಾಗಿ ಬ್ರೌಸರ್ನ ಸ್ವಂತ Canvas API ನೇರವಾಗಿ ಎನ್ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. Safari ನಲ್ಲಿ WebP ಮತ್ತು ಪ್ರತಿ ಬ್ರೌಸರ್ನಲ್ಲಿ AVIF ಗಾಗಿ ಪುಟವು ಬೇಡಿಕೆಯ ಮೇಲೆ ಹಗುರವಾದ WebAssembly ಕೊಡೆಕ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ — ಇನ್ನೂ ಎಲ್ಲವೂ ಸ್ಥಳೀಯ, ನಿಮ್ಮ ಚಿತ್ರಗಳು ಸಾಧನವನ್ನು ಎಂದಿಗೂ ಬಿಡುವುದಿಲ್ಲ.
- ಪ್ರತಿ ಅಪ್ಲೋಡ್ ಮಾಡಿದ ಫೈಲ್ ಅನ್ನು Blob ಆಗಿ ಓದಿ ಬ್ರೌಸರ್ ಅದನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಡಿಕೋಡ್ ಮಾಡಲು object URL ರಚಿಸಿ, ಬೈಟ್ಗಳನ್ನು ಸರ್ವರ್ಗೆ ನಕಲಿಸದೇ.
- ಡಿಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರ ಅನ್ನು ಆಫ್ಸ್ಕ್ರೀನ್ Canvas ಎಲಿಮೆಂಟ್ಗೆ ಎಳೆಯಿರಿ, ಮೂಲ ಅಸ್ಪೆಕ್ಟ್ ರೇಶಿಯೋ ಸಂರಕ್ಷಿಸುವಾಗ ಯಾವುದೇ ಮರು-ಆಕಾರ ನಿರ್ಬಂಧ ಅನ್ವಯಿಸಿ.
- PNG, JPEG ಮತ್ತು Chrome/Firefox WebP ಗಾಗಿ ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಮರು-ಎನ್ಕೋಡ್ ಮಾಡಲು
canvas.toBlob(callback, targetMimeType, quality)ಅನ್ನು ಕರೆ ಮಾಡಿ. Safari WebP ಮತ್ತು AVIF ಎನ್ಕೋಡಿಂಗ್ಗಾಗಿ, ಮೊದಲ ಬಳಕೆಯಲ್ಲಿ WebAssembly ಕೊಡೆಕ್ ವರ್ಕರ್ ಲೋಡ್ ಆಗುತ್ತದೆ ಮತ್ತು ಹಿನ್ನೆಲೆ ಥ್ರೆಡ್ನಲ್ಲಿ ಎನ್ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. PNG ಔಟ್ಪುಟ್ ಯಾವಾಗಲೂ ನಷ್ಟವಿಲ್ಲದ್ದಾಗಿದೆ; JPEG, WebP ಮತ್ತು AVIF ಗುಣಮಟ್ಟದ ಸ್ಲೈಡರ್ ಅನ್ನು ಅನುಸರಿಸುತ್ತವೆ, ಇದು ನೇರವಾಗಿ ಎನ್ಕೋಡರ್ನ ಕ್ವಾಂಟೈಸೇಶನ್ ಸೆಟ್ಟಿಂಗ್ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ. - ಔಟ್ಪುಟ್ ಆಯಾಮಗಳು ಮತ್ತು ಫೈಲ್ ಗಾತ್ರದೊಂದಿಗೆ ಮೊದಲು/ನಂತರ ಥಂಬ್ನೇಲ್ ತೋರಿಸಿ, ನಂತರ ಪ್ರತಿ-ಚಿತ್ರ ಡೌನ್ಲೋಡ್ ಬಟನ್ ಅಥವಾ ಇಡೀ ಬ್ಯಾಚ್ಗೆ ಒಂದು ZIP ನೀಡಿ.
ಚಿತ್ರ ಫಾರ್ಮ್ಯಾಟ್ಗಳನ್ನು ಪರಿವರ್ತಿಸುವ ಕಾರಣ?
- PNG ನಿಂದ WebP ಗೆ ಬದಲಾಯಿಸುವುದರಿಂದ 0.8 ಗುಣಮಟ್ಟದಲ್ಲಿ ಗೋಚರ ಗುಣಮಟ್ಟ ನಷ್ಟ ಇಲ್ಲದೇ ಸಾಮಾನ್ಯ ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು 25 ರಿಂದ 35% ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಇದು ಪುಟ ತೂಕ ನೇರವಾಗಿ ಕಡಿಮೆ ಮಾಡಿ Core Web Vitals LCP ಸ್ಕೋರ್ಗಳನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
- PNG ಟ್ರಾನ್ಸ್ಪೇರೆನ್ಸಿ ಸಂರಕ್ಷಿಸುತ್ತದೆ ಆದರೆ JPEG ಅದನ್ನು ತಿರಸ್ಕರಿಸುತ್ತದೆ. PNG ನಿಂದ JPEG ಗೆ ಹೋಗುವುದರಿಂದ ಟ್ರಾನ್ಸ್ಪೇರೆಂಟ್ ಪಿಕ್ಸೆಲ್ಗಳು ಬಿಳಿ ಹಿನ್ನೆಲೆ ವಿರುದ್ಧ ರೆಂಡರ್ ಮಾಡಲ್ಪಡುತ್ತವೆ, ಇದು ಗಂತವ್ಯ PNG ಸ್ವೀಕರಿಸಲು ಸಾಧ್ಯವಾಗದಿದ್ದಾಗ ಸರಿ.
- ಸೋಷಿಯಲ್ ಪ್ಲಾಟ್ಫಾರ್ಮ್ಗಳು ಮತ್ತು ಆಡ್ ನೆಟ್ವರ್ಕ್ಗಳಿಗೆ ಕಟ್ಟುನಿಟ್ಟಾದ ಫಾರ್ಮ್ಯಾಟ್ ಅಗತ್ಯಗಳಿವೆ. ಅಪ್ಲೋಡ್ ಮೊದಲು ತ್ವರಿತ ಪರಿವರ್ತನೆ ಪಾಸ್ ತಿರಸ್ಕೃತ-ಕ್ರಿಯೇಟಿವ್ ಪಿಂಗ್-ಪಾಂಗ್ ತಪ್ಪಿಸುತ್ತದೆ.
- CMS ಅಥವಾ DAM ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡುವ ಮೊದಲು ಮಿಶ್ರ-ಫಾರ್ಮ್ಯಾಟ್ ಚಿತ್ರಗಳ ಬ್ಯಾಚ್ ಅನ್ನು ಒಂದೇ ಔಟ್ಪುಟ್ ಫಾರ್ಮ್ಯಾಟ್ಗೆ ಮಾನಕಗೊಳಿಸುವುದರಿಂದ ingest ಪೈಪ್ಲೈನ್ನಿಂದ ಫಾರ್ಮ್ಯಾಟ್-ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಶಾಖೆಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.
ಸಾಮಾನ್ಯ ಅನ್ವಯಗಳು
ಮೂಲ ಫಾರ್ಮ್ಯಾಟ್ ಮತ್ತು ಗಂತವ್ಯದ ನಿರೀಕ್ಷೆಗಳು ಹೊಂದಿಕೆ ಆಗದಾಗ ಫಾರ್ಮ್ಯಾಟ್ ಪರಿವರ್ತನೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ನಾವು ಮತ್ತೆ ಮತ್ತೆ ನೋಡುವ ಮೂರು ಮಾದರಿಗಳು.
- Shopify ಅಥವಾ WooCommerce ಅಂಗಡಿಗಾಗಿ ಉತ್ಪನ್ನ ಫೋಟೋ ಸಿದ್ಧಪಡಿಸಿ. JPEG ಮೂಲಗಳನ್ನು ಸಾರ್ವಜನಿಕ ಸ್ಟೋರ್ಫ್ರಂಟ್ಗೆ 0.85 ಗುಣಮಟ್ಟದಲ್ಲಿ WebP ಗೆ ಪರಿವರ್ತಿಸಲ್ಪಡುತ್ತವೆ.
- ಡಿಸೈನರ್-ಒದಗಿಸಿದ PNG ಎಕ್ಸ್ಪೋರ್ಟ್ಗಳನ್ನು React ಅಥವಾ Next.js ಬಿಲ್ಡ್ಗೆ ಪ್ರವೇಶಿಸುವ ಮೊದಲು JPEG ಅಥವಾ WebP ಗೆ ಪರಿವರ್ತಿಸಿ.
- QA ರನ್ನಿಂದ ಸ್ಕ್ರೀನ್ಶಾಟ್ಗಳ ಫೋಲ್ಡರ್ ಬ್ಯಾಚ್-ಪ್ರಕ್ರಿಯೆ ಮಾಡಿ. 0.9 ಗುಣಮಟ್ಟದಲ್ಲಿ PNG ನಿಂದ JPEG ಸಾಮಾನ್ಯವಾಗಿ 50-ಸ್ಕ್ರೀನ್ಶಾಟ್ ಆರ್ಕೈವ್ ಅನ್ನು ಸುಮಾರು 120 MB ನಿಂದ 20 MB ಗಿಂತ ಕಡಿಮೆಗೆ ಕುಗ್ಗಿಸುತ್ತದೆ.
ಕೆಲಸ ಮಾಡಿದ ಉದಾಹರಣೆ: 2 MB PNG ನಿಂದ 300 KB WebP
2400×1600 ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿ 2 MB PNG ಹೀರೋ ಚಿತ್ರ ಮಾರ್ಕೆಟಿಂಗ್ ಲ್ಯಾಂಡಿಂಗ್ ಪೇಜ್ಗಳಲ್ಲಿ ಸಾಮಾನ್ಯ ಪೇಲೋಡ್. ಪರಿವರ್ತನೆ ನೈಜ ಪೇಜ್ನಲ್ಲಿ ಏನು ಉಳಿಸುತ್ತದೆ ಎಂಬುದಕ್ಕೆ ಉಚಿತ ಮಾನದಂಡ.
PNG ಅನ್ನು ಅಪ್ಲೋಡ್ ಝೋನ್ಗೆ ಡ್ರಾಪ್ ಮಾಡಿ, ಗಂತವ್ಯ ಫಾರ್ಮ್ಯಾಟ್ ಆಗಿ WebP ಆಯ್ಕೆ ಮಾಡಿ, ಗುಣಮಟ್ಟ 0.8 ಗೆ ಹೊಂದಿಸಿ, ಮತ್ತು ಪಿಕ್ಸೆಲ್ ಆಯಾಮ ಅರ್ಧ ಮಾಡಲು ಗರಿಷ್ಠ ಅಗಲ 1200 ಗೆ ಹೊಂದಿಸಿ. Canvas ಪೈಪ್ಲೈನ್ ಅಸ್ಪೆಕ್ಟ್ ಸಂರಕ್ಷಿಸಿ 1200×800 ನಲ್ಲಿ ಚಿತ್ರ ಎಳೆದು WebP ಗೆ ಮರು-ಎನ್ಕೋಡ್ ಮಾಡುತ್ತದೆ. ಔಟ್ಪುಟ್ ಕಾರ್ಡ್ ಫಲಿತಾಂಶ ತೋರಿಸುತ್ತದೆ, ಸಾಮಾನ್ಯವಾಗಿ 280 ರಿಂದ 320 KB ವ್ಯಾಪ್ತಿಯಲ್ಲಿ — ಮೂಲದ ವಿರುದ್ಧ ಸರಿಸುಮಾರು 85% ಕಡಿತ. ಇಡೀ ರೌಂಡ್-ಟ್ರಿಪ್, ಡ್ರಾಪ್ ನಿಂದ ಡೌನ್ಲೋಡ್ ವರೆಗೆ, ಈ ಗಾತ್ರದ ಚಿತ್ರಕ್ಕೆ ಕೆಲವು ನೂರು ಮಿಲಿಸೆಕೆಂಡ್ಗಳಲ್ಲಿ ಚಲಿಸುತ್ತದೆ.
ಯಾವ ಫಾರ್ಮ್ಯಾಟ್ಗಳನ್ನು ಬೆಂಬಲಿಸಲಾಗಿದೆ?
ಇನ್ಪುಟ್ ಭಾಗದಲ್ಲಿ, ಬ್ರೌಸರ್ ಡಿಕೋಡ್ ಮಾಡಬಲ್ಲ ಯಾವುದೇ ಫಾರ್ಮ್ಯಾಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸಲಾಗುತ್ತದೆ: PNG, JPEG, WebP, GIF ಮತ್ತು BMP ವಿನ್ಯಾಸಕ ಅಥವಾ ಸ್ಕ್ರೀನ್ಶಾಟ್ ಉಪಕರಣವು ಉತ್ಪಾದಿಸುವ ಪ್ರತಿಯೊಂದು ಫೈಲ್ ಅನ್ನು ಒಳಗೊಳ್ಳುತ್ತವೆ. ಔಟ್ಪುಟ್ ಫಾರ್ಮ್ಯಾಟ್ಗಳು PNG (ಯಾವಾಗಲೂ ನಷ್ಟವಿಲ್ಲದ), JPEG, WebP ಮತ್ತು AVIF. AVIF ಔಟ್ಪುಟ್ ಪ್ರತಿ ಬ್ರೌಸರ್ನಲ್ಲಿ ಬೇಡಿಕೆಯ ಮೇಲೆ ಲೋಡ್ ಆಗುವ WebAssembly ಎನ್ಕೋಡರ್ ಮೂಲಕ ಬೆಂಬಲಿತವಾಗಿದೆ — ಯಾವುದೇ ಮೂಲ Canvas ಎನ್ಕೋಡರ್ ಅಗತ್ಯವಿಲ್ಲ.
ಇದು ನನ್ನ ಸಾಧನದಲ್ಲಿ ಮಾಡಲ್ಪಡುತ್ತದೆಯೇ?
ಹೌದು, ಸಂಪೂರ್ಣ. ಪುಟ ಬ್ರೌಸರ್ನ ಸ್ಥಳೀಯ Canvas API ಮತ್ತು Web File API ಬಳಸಿ ಪ್ರತಿ ಚಿತ್ರ ಅನ್ನು ಮೆಮೊರಿಯಲ್ಲಿ ಡಿಕೋಡ್ ಮತ್ತು ಮರು-ಎನ್ಕೋಡ್ ಮಾಡುತ್ತದೆ. ಯಾವುದೇ ಚಿತ್ರ ಡೇಟಾ ಸರ್ವರ್ಗೆ ಕಳುಹಿಸಲ್ಪಡುವುದಿಲ್ಲ.
PNG ಮತ್ತು JPEG ನಡುವಿನ ಗುಣಮಟ್ಟ ವ್ಯಾಪಾರ-ಆಫ್ ಏನು?
PNG ನಷ್ಟರಹಿತ ಫಾರ್ಮ್ಯಾಟ್. ಸ್ಕ್ರೀನ್ಶಾಟ್ಗಳು, UI ಕ್ಯಾಪ್ಚರ್ಗಳು ಮತ್ತು ಚೂಪಾದ ಅಂಚುಗಳು ಅಥವಾ ದೊಡ್ಡ ಸಮ-ಬಣ್ಣ ಪ್ರದೇಶಗಳಿರುವ ಚಿತ್ರಗಳಿಗೆ PNG ಸರಿಯಾದ ಆಯ್ಕೆ. JPEG DCT ಕಂಪ್ರೆಷನ್ ಬಳಸಿ ಕಣ್ಣು ವಿರಳವಾಗಿ ಗಮನಿಸುವ ಸೂಕ್ಷ್ಮ ವಿವರ ತಿರಸ್ಕರಿಸುತ್ತದೆ — ಫೋಟೋಗ್ರಾಫ್ಗಳಿಗೆ ಸರಿಯಾದ ಆಯ್ಕೆ. ಗುಣಮಟ್ಟ 0.8 ಸಾಮಾನ್ಯ ಮಧ್ಯ ಬಿಂದು.
AVIF ಔಟ್ಪುಟ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ?
AVIF ಎನ್ಕೋಡಿಂಗ್ WebAssembly ಕೊಡೆಕ್ ಅನ್ನು ಬಳಸುತ್ತದೆ ಅದು ನೀವು ಮೊದಲ ಬಾರಿಗೆ AVIF ಫಾರ್ಮ್ಯಾಟ್ ಆಯ್ಕೆ ಮಾಡಿದಾಗ ಬೇಡಿಕೆಯ ಮೇಲೆ ಲೋಡ್ ಆಗುತ್ತದೆ — ಯಾವುದೇ ಪ್ಲಗಿನ್ ಇಲ್ಲ, ಯಾವುದೇ ಬ್ರೌಸರ್ ಫ್ಲಾಗ್ ಇಲ್ಲ, ಭವಿಷ್ಯದ Chrome ರಿಲೀಸ್ಗಾಗಿ ಕಾಯುವುದಿಲ್ಲ. WASM ಬೈನರಿಯನ್ನು ನಮ್ಮ ಸ್ವಂತ ಮೂಲದಿಂದ ಸರ್ವ್ ಮಾಡಲಾಗುತ್ತದೆ, ನಿಮ್ಮ ಚಿತ್ರವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಹಿನ್ನೆಲೆ ಥ್ರೆಡ್ನಲ್ಲಿ ಎನ್ಕೋಡ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಡೌನ್ಲೋಡ್ಗೆ ಸಿದ್ಧವಾದ ಪ್ರಮಾಣಿತ image/avif ಬ್ಲಾಬ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಏಕೈಕ ನೆಟ್ವರ್ಕ್ ವಿನಂತಿಯು ಕೊಡೆಕ್ನ ಸ್ವಂತದ ಒಂದು-ಬಾರಿಯ ಫೆಚ್ ಆಗಿದೆ; ಯಾವುದೇ ಚಿತ್ರ ಡೇಟಾ ನಿಮ್ಮ ಸಾಧನವನ್ನು ಎಂದಿಗೂ ಬಿಡುವುದಿಲ್ಲ. ಲೋಡ್ ಆದ ನಂತರ, ಎನ್ಕೋಡರ್ ಸೆಷನ್ಗಾಗಿ ಕ್ಯಾಶ್ನಲ್ಲಿ ಉಳಿಯುತ್ತದೆ ಆದ್ದರಿಂದ ನಂತರದ ಪರಿವರ್ತನೆಗಳು ವೇಗವಾಗಿರುತ್ತವೆ. AVIF ಫೈಲ್ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸಮಾನ ಗುಣಮಟ್ಟದಲ್ಲಿ WebP ಗಿಂತ 20-30% ಚಿಕ್ಕದಾಗಿರುತ್ತವೆ ಮತ್ತು JPEG ಗಿಂತ 50% ಚಿಕ್ಕದಾಗಿರುತ್ತವೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆ-ಸೂಕ್ಷ್ಮ ಸೈಟ್ಗಳಿಗೆ ಅವುಗಳನ್ನು ಅತ್ಯುತ್ತಮ ಆಯ್ಕೆಯನ್ನಾಗಿ ಮಾಡುತ್ತದೆ.
ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಡ್ರಾಪ್ ಮಾಡಿ, ಫಾರ್ಮ್ಯಾಟ್ ಆಯ್ಕೆ ಮಾಡಿ, ಪರಿವರ್ತಿಸಿ. ಎಲ್ಲವೂ ನಿಮ್ಮ ಟ್ಯಾಬ್ನಲ್ಲಿ ಚಲಿಸುತ್ತದೆ. ಅಪ್ಲೋಡ್ ಇಲ್ಲ, ಖಾತೆ ಇಲ್ಲ, ಸರ್ವರ್ ಸರದಿ ಕಾಯುವಿಕೆ ಇಲ್ಲ.