ಬ್ರೌಸರ್-ಆಧಾರಿತ ಚಿತ್ರ ಪರಿವರ್ತನೆ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
ಪ್ರತಿ ಪರಿವರ್ತನೆ ಸಂಪೂರ್ಣ JavaScript ನಲ್ಲಿ ಚಲಿಸುವ ನಾಲ್ಕು-ಹಂತ ಪೈಪ್ಲೈನ್. ಯಾವುದೇ ಕೊಡೆಕ್ ಲೈಬ್ರರಿ ಡೌನ್ಲೋಡ್ ಆಗುವುದಿಲ್ಲ ಮತ್ತು ಯಾವುದೇ ಸರ್ವರ್ ಒಳಗೊಂಡಿಲ್ಲ. ಬ್ರೌಸರ್ನ ಸ್ವಂತ Canvas API ಡಿಕೋಡ್, ಮರು-ಆಕಾರ ಮತ್ತು ಮರು-ಎನ್ಕೋಡ್ ಮೆಮೊರಿಯಲ್ಲಿ ನಿರ್ವಹಿಸುತ್ತದೆ.
- ಪ್ರತಿ ಅಪ್ಲೋಡ್ ಮಾಡಿದ ಫೈಲ್ ಅನ್ನು Blob ಆಗಿ ಓದಿ ಬ್ರೌಸರ್ ಅದನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಡಿಕೋಡ್ ಮಾಡಲು object URL ರಚಿಸಿ, ಬೈಟ್ಗಳನ್ನು ಸರ್ವರ್ಗೆ ನಕಲಿಸದೇ.
- ಡಿಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರ ಅನ್ನು ಆಫ್ಸ್ಕ್ರೀನ್ Canvas ಎಲಿಮೆಂಟ್ಗೆ ಎಳೆಯಿರಿ, ಮೂಲ ಅಸ್ಪೆಕ್ಟ್ ರೇಶಿಯೋ ಸಂರಕ್ಷಿಸುವಾಗ ಯಾವುದೇ ಮರು-ಆಕಾರ ನಿರ್ಬಂಧ ಅನ್ವಯಿಸಿ.
- ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಮರು-ಎನ್ಕೋಡ್ ಮಾಡಲು
canvas.toBlob(callback, targetMimeType, quality)ಕಾಲ್ ಮಾಡಿ. PNG ಔಟ್ಪುಟ್ ಯಾವಾಗಲೂ ನಷ್ಟರಹಿತ; JPEG ಮತ್ತು WebP ಗುಣಮಟ್ಟ ಸ್ಲೈಡರ್ ಗೌರವಿಸುತ್ತವೆ. - ಔಟ್ಪುಟ್ ಆಯಾಮಗಳು ಮತ್ತು ಫೈಲ್ ಗಾತ್ರದೊಂದಿಗೆ ಮೊದಲು/ನಂತರ ಥಂಬ್ನೇಲ್ ತೋರಿಸಿ, ನಂತರ ಪ್ರತಿ-ಚಿತ್ರ ಡೌನ್ಲೋಡ್ ಬಟನ್ ಅಥವಾ ಇಡೀ ಬ್ಯಾಚ್ಗೆ ಒಂದು 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.
ಇದು ನನ್ನ ಸಾಧನದಲ್ಲಿ ಮಾಡಲ್ಪಡುತ್ತದೆಯೇ?
ಹೌದು, ಸಂಪೂರ್ಣ. ಪುಟ ಬ್ರೌಸರ್ನ ಸ್ಥಳೀಯ Canvas API ಮತ್ತು Web File API ಬಳಸಿ ಪ್ರತಿ ಚಿತ್ರ ಅನ್ನು ಮೆಮೊರಿಯಲ್ಲಿ ಡಿಕೋಡ್ ಮತ್ತು ಮರು-ಎನ್ಕೋಡ್ ಮಾಡುತ್ತದೆ. ಯಾವುದೇ ಚಿತ್ರ ಡೇಟಾ ಸರ್ವರ್ಗೆ ಕಳುಹಿಸಲ್ಪಡುವುದಿಲ್ಲ.
PNG ಮತ್ತು JPEG ನಡುವಿನ ಗುಣಮಟ್ಟ ವ್ಯಾಪಾರ-ಆಫ್ ಏನು?
PNG ನಷ್ಟರಹಿತ ಫಾರ್ಮ್ಯಾಟ್. ಸ್ಕ್ರೀನ್ಶಾಟ್ಗಳು, UI ಕ್ಯಾಪ್ಚರ್ಗಳು ಮತ್ತು ಚೂಪಾದ ಅಂಚುಗಳು ಅಥವಾ ದೊಡ್ಡ ಸಮ-ಬಣ್ಣ ಪ್ರದೇಶಗಳಿರುವ ಚಿತ್ರಗಳಿಗೆ PNG ಸರಿಯಾದ ಆಯ್ಕೆ. JPEG DCT ಕಂಪ್ರೆಷನ್ ಬಳಸಿ ಕಣ್ಣು ವಿರಳವಾಗಿ ಗಮನಿಸುವ ಸೂಕ್ಷ್ಮ ವಿವರ ತಿರಸ್ಕರಿಸುತ್ತದೆ — ಫೋಟೋಗ್ರಾಫ್ಗಳಿಗೆ ಸರಿಯಾದ ಆಯ್ಕೆ. ಗುಣಮಟ್ಟ 0.8 ಸಾಮಾನ್ಯ ಮಧ್ಯ ಬಿಂದು.
AVIF ಬೆಂಬಲ ಯಾವಾಗ ಬರುತ್ತದೆ?
AVIF ಎನ್ಕೋಡಿಂಗ್ canvas.toBlob(…, 'image/avif') ಮೂಲಕ ಇಂದು Chrome 105 ಮತ್ತು ನಂತರ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ; Safari ಮತ್ತು Firefox ಅದನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಅದು ಬರುವ ವರೆಗೆ, WebP ಎನ್ಕೋಡರ್ ಶಿಫಾರಸು ಮಾಡಿದ ಪರ್ಯಾಯ.
ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಡ್ರಾಪ್ ಮಾಡಿ, ಫಾರ್ಮ್ಯಾಟ್ ಆಯ್ಕೆ ಮಾಡಿ, ಪರಿವರ್ತಿಸಿ. ಎಲ್ಲವೂ ನಿಮ್ಮ ಟ್ಯಾಬ್ನಲ್ಲಿ ಚಲಿಸುತ್ತದೆ. ಅಪ್ಲೋಡ್ ಇಲ್ಲ, ಖಾತೆ ಇಲ್ಲ, ಸರ್ವರ್ ಸರದಿ ಕಾಯುವಿಕೆ ಇಲ್ಲ.