AI-ಜನರೇಟೆಡ್ ಕಂಟೆಂಟ್ಗಾಗಿ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್
AI ಚಿತ್ರಗಳು ವಿಶಿಷ್ಟವಾದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಯನ್ನು ಉಂಟುಮಾಡುತ್ತವೆ. ಚಿತ್ರದ ರಚನೆ (generation) ಪೂರ್ಣಗೊಳ್ಳುವವರೆಗೆ ಅದರ ಗಾತ್ರ, ಫಾರ್ಮ್ಯಾಟ್ ಅಥವಾ ವಿಷಯದ ಬಗ್ಗೆ ನಿಮಗೆ ತಿಳಿದಿರುವುದಿಲ್ಲ. ಆದರೂ ನೀವು ನಿಧಾನಗತಿಯ ಲೋಡಿಂಗ್ ಮತ್ತು ಲೇಔಟ್ ಶಿಫ್ಟ್ಗಳನ್ನು (layout shifts) ತಡೆಯಬೇಕಾಗುತ್ತದೆ.
ಉಚಿತ AI ಇಮೇಜ್ ಜನರೇಟರ್ ಅನ್ನು ನಿರ್ಮಿಸುವಾಗ ನಾನು ಈ ಹಂತಗಳನ್ನು ಬಳಸಿದೆ.
ಸಾಮಾನ್ಯ ಆಪ್ಟಿಮೈಸೇಶನ್ನಲ್ಲಿ ನೀವು ಚಿತ್ರದ ಬಗ್ಗೆ ಮೊದಲೇ ತಿಳಿದಿರುತ್ತೀರಿ ಎಂದು ಭಾವಿಸಲಾಗುತ್ತದೆ. ನೀವು ಅದರ 치ಲಗಳು (dimensions) ಮತ್ತು ಗಾತ್ರವನ್ನು ಮೊದಲೇ ಲೆಕ್ಕಹಾಕಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಬಹುದು. ಆದರೆ ಜನರೇಟೆಡ್ ಚಿತ್ರಗಳು ಈ ನಿಯಮವನ್ನು ಮೀರುತ್ತವೆ. ಬಳಕೆದಾರರು ವಿನಂತಿಸುವವರೆಗೆ ಚಿತ್ರವು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವುದಿಲ್ಲ.
ವಿತರಣೆಯನ್ನು (delivery) ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು:
- ಮೂಲ AI ಔಟ್ಪುಟ್ ಸಾಮಾನ್ಯವಾಗಿ PNG ಆಗಿರುತ್ತದೆ. PNG ಫೈಲ್ಗಳು ತುಂಬಾ ದೊಡ್ಡದಾಗಿರುತ್ತವೆ, ಸಾಮಾನ್ಯವಾಗಿ 800KB ನಿಂದ 1.2MB ವರೆಗೆ ಇರುತ್ತವೆ.
- ಚಿತ್ರಗಳನ್ನು WebP ಗೆ ಪರಿವರ್ತಿಸಿ. WebP ಫೈಲ್ಗಳು ಅದೇ ಗುಣಮಟ್ಟದಲ್ಲಿ PNG ಗಿಂತ 25% ರಿಂದ 35% ರಷ್ಟು ಚಿಕ್ಕದಾಗಿರುತ್ತವೆ.
- WebP ಗಾಗಿ 85 ಗುಣಮಟ್ಟವನ್ನು (quality) ಬಳಸಿ. AI ಚಿತ್ರಗಳು ನೈಸರ್ಗಿಕವಾದ ಟೆಕ್ಸ್ಚರ್ ನಾಯ್ಸ್ (texture noise) ಹೊಂದಿರುತ್ತವೆ. ಹೆಚ್ಚಿನ ಸೆಟ್ಟಿಂಗ್ಗಳು ದೃಶ್ಯ ಗುಣಮಟ್ಟವನ್ನು ಸುಧಾರಿಸದೆ ಫೈಲ್ ಗಾತ್ರವನ್ನು ಮಾತ್ರ ಹೆಚ್ಚಿಸುತ್ತವೆ.
ಲೇಔಟ್ ಶಿಫ್ಟ್ಗಳನ್ನು (layout shifts) ಹೇಗೆ ತಡೆಯುವುದು:
ಬಳಕೆದಾರರು 'generate' ಕ್ಲಿಕ್ ಮಾಡುವ ಮೊದಲು ಆಸ್ಪೆಕ್ಟ್ ರೇಶಿಯೊವನ್ನು (aspect ratio) ಆಯ್ಕೆ ಮಾಡುತ್ತಾರೆ. ಇದನ್ನು ನಿಮ್ಮ ಅನುಕೂಲಕ್ಕೆ ಬಳಸಿಕೊಳ್ಳಿ.
- ಆಯ್ಕೆ ಮಾಡಿದ ರೇಶಿಯೊಗೆ (1:1, 16:9, ಇತ್ಯಾದಿ) ಅನುಗುಣವಾಗಿ ಕಂಟೇನರ್ನ ಗಾತ್ರವನ್ನು ಮೊದಲೇ ನಿಗದಿಪಡಿಸಿ.
- ಇದು ಚಿತ್ರ ಬರುವ ಮೊದಲೇ ಕಂಟೇನರ್ ಅನ್ನು ಸರಿಯಾದ ಗಾತ್ರದಲ್ಲಿ ಇರಿಸುತ್ತದೆ.
- ಇದು ಕ್ಯುಮ್ಯುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ (CLS) ಅನ್ನು ಇಲ್ಲದಂತಾಗುತ್ತದೆ.
ಲೋಡಿಂಗ್ ವೇಗವನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುವುದು:
ಜನರೇಟೆಡ್ ಚಿತ್ರವು ಸಾಮಾನ್ಯವಾಗಿ Largest Contentful Paint (LCP) ಎಲಿಮೆಂಟ್ ಆಗಿರುತ್ತದೆ.
- ನಿಮ್ಮ ಕೋಡ್ನಲ್ಲಿ ಚಿತ್ರವನ್ನು 'priority' ಎಂದು ಗುರುತಿಸಿ.
- ನಿಮ್ಮ CDN ಗಾಗಿ preconnect ಲಿಂಕ್ ಬಳಸಿ. ಇದು DNS ಮತ್ತು TLS ಹ್ಯಾಂಡ್ಶೇಕ್ಗಳನ್ನು ಮೊದಲೇ ನಿರ್ವಹಿಸುತ್ತದೆ.
- ಅಂತಿಮ ಚಿತ್ರವು ತುಂಬುವ ನಿಖರವಾದ ಜಾಗವನ್ನು ಆಕ್ರಮಿಸಿಕೊಳ್ಳುವ 'skeleton loader' ಅನ್ನು ಬಳಸಿ.
ಕ್ಯಾಶಿಂಗ್ ತಂತ್ರ (Caching strategy):
- ಇನ್ಫರೆನ್ಸ್ ಲೇಯರ್ನಲ್ಲಿ (inference layer) ಕ್ಯಾಶ್ ಮಾಡಬೇಡಿ. ಪ್ರತಿಯೊಂದು ವಿನಂತಿಯು ಹೊಸದಾಗಿರಬೇಕು.
- ವಿತರಣಾ ವೇಗದಿಗಾಗಿ CDN ಲೇಯರ್ನಲ್ಲಿ ಕ್ಯಾಶ್ ಮಾಡಿ.
- ಪ್ರತಿಯೊಂದು ಚಿತ್ರವು ವಿಶಿಷ್ಟವಾದ URL ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ, ಆದ್ದರಿಂದ aggressive caching ಸುರಕ್ಷಿತವಾಗಿದೆ.
ಈ ಬದಲಾವಣೆಗಳ ಫಲಿತಾಂಶಗಳು:
- ಸರಾಸರಿ ಗಾತ್ರ: 900KB ನಿಂದ 200KB ವರೆಗೆ.
- LCP: 4.1s ನಿಂದ 1.9s ವರೆಗೆ.
- CLS: ಇಲ್ಲದಂತಾಯಿತು.
ಕ್ರಮಗಳ ಸಾರಾಂಶ:
- 85 ಗುಣಮಟ್ಟದಲ್ಲಿ WebP ಗೆ ಪರಿವರ್ತಿಸಿ.
- ಆಯ್ಕೆ ಮಾಡಿದ ಆಸ್ಪೆಕ್ಟ್ ರೇಶಿಯೊ ಬಳಸಿ ಕಂಟೇನರ್ಗಳನ್ನು ಮೊದಲೇ ನಿಗದಿಪಡಿಸಿ.
- ಪ್ರಮುಖ ಚಿತ್ರವನ್ನು priority loading ಗೆ ಹೊಂದಿಸಿ.
- CDN ಮಟ್ಟದಲ್ಲಿ ಹೆಚ್ಚಿನ ಪ್ರಮಾಣದಲ್ಲಿ ಕ್ಯಾಶ್ ಮಾಡಿ.
- ಸ್ಕ್ರೀನ್ನ ಕೆಳಭಾಗದಲ್ಲಿರುವ (below the fold) ದ್ವಿತೀಯಕ ಕಂಟೆಂಟ್ಗೆ ಮಾತ್ರ lazy loading ಬಳಸಿ.
Optional learning community: https://t.me/GyaanSetuAi