ವೆಬ್‌ನಲ್ಲಿ ಸ್ಪ್ರೈಟ್ಸ್

ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನಲ್ಲಿ ಸ್ಪ್ರೈಟ್‌ಗಳು ಇನ್ನೂ ಏಕೆ ಮುಖ್ಯವಾಗಿವೆ

ವೆಬ್‌ನ ಆರಂಭಿಕ ದಿನಗಳಲ್ಲಿ, ಪ್ರತಿ ಚಿತ್ರ ವಿನಂತಿಯು ಅಡಚಣೆಯಾಗಿತ್ತು. ಅನೇಕ ಸಣ್ಣ ಚಿತ್ರಗಳನ್ನು ಒಂದೇ ಫೈಲ್‌ಗೆ ಸಂಯೋಜಿಸುವುದು - ಸ್ಪ್ರೈಟ್ ಶೀಟ್ - HTTP ವಿನಂತಿಗಳನ್ನು ನಾಟಕೀಯವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಪುಟದ ಲೋಡ್‌ಗಳನ್ನು ವೇಗಗೊಳಿಸುತ್ತದೆ ಎಂದು ಡೆವಲಪರ್‌ಗಳು ಕಂಡುಹಿಡಿದಿದ್ದಾರೆ. HTTP/2 ಮಲ್ಟಿಪ್ಲೆಕ್ಸಿಂಗ್, CDN ಗಳು ಮತ್ತು ವೆಕ್ಟರ್ ಗ್ರಾಫಿಕ್ಸ್‌ನೊಂದಿಗೆ ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಬದಲಾಗಿದ್ದರೂ, 2026 ರಲ್ಲಿ ಸ್ಪ್ರೈಟ್‌ಗಳು ಆಶ್ಚರ್ಯಕರವಾಗಿ ಪ್ರಸ್ತುತವಾದ ತಂತ್ರವಾಗಿ ಉಳಿದಿವೆ. CSS ಇಮೇಜ್ ಸ್ಪ್ರೈಟ್‌ಗಳಿಂದ SVG ಸಿಂಬಲ್ ಸಿಸ್ಟಮ್‌ಗಳು ಮತ್ತು ಕ್ಯಾನ್ವಾಸ್-ಆಧಾರಿತ ಆಟದ ಅನಿಮೇಷನ್‌ಗಳವರೆಗೆ, ಸ್ಪ್ರೈಟ್ ಪರಿಕಲ್ಪನೆಯು ವಿಕಸನಗೊಳ್ಳುತ್ತಲೇ ಇದೆ ಮತ್ತು ಆಧುನಿಕ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸವಾಲುಗಳನ್ನು ಪರಿಹರಿಸುತ್ತದೆ.

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

ಮೂಲ ಕಥೆ: CSS ಇಮೇಜ್ ಸ್ಪ್ರೈಟ್ಸ್

2000 ರ ದಶಕದ ಮಧ್ಯಭಾಗದಲ್ಲಿ CSS ಇಮೇಜ್ ಸ್ಪ್ರೈಟ್‌ಗಳು ಬ್ರೌಸರ್ ಸಂಪರ್ಕ ಮಿತಿಗಳಿಗೆ ನೇರ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಹೊರಹೊಮ್ಮಿದವು. ಬ್ರೌಸರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರತಿ ಡೊಮೇನ್‌ಗೆ 2-6 ಏಕಕಾಲಿಕ ಸಂಪರ್ಕಗಳನ್ನು ಮಾತ್ರ ತೆರೆಯುತ್ತವೆ, ಅಂದರೆ 40 ಸಣ್ಣ ಐಕಾನ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಪುಟವು ವಿನಂತಿಗಳನ್ನು ಸರದಿಯಲ್ಲಿ ಇರಿಸುತ್ತದೆ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ. ಪರಿಹಾರವು ಸೊಗಸಾಗಿತ್ತು: ಆ ಎಲ್ಲಾ ಐಕಾನ್‌ಗಳನ್ನು ಒಂದೇ PNG ಅಥವಾ GIF ಫೈಲ್‌ಗೆ ಸಂಯೋಜಿಸಿ, ನಂತರ ಪ್ರತಿ ಅಂಶಕ್ಕೆ ಚಿತ್ರದ ಸಂಬಂಧಿತ ಭಾಗವನ್ನು ಮಾತ್ರ ಪ್ರದರ್ಶಿಸಲು CSS ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ ಬಳಸಿ.

ಗೂಗಲ್, ಯಾಹೂ ಮತ್ತು ಅಮೆಜಾನ್‌ನಂತಹ ಕಂಪನಿಗಳು ಸ್ಪ್ರೈಟ್‌ಗಳನ್ನು ಆಕ್ರಮಣಕಾರಿಯಾಗಿ ಅಳವಡಿಸಿಕೊಂಡಿವೆ. ಗೂಗಲ್ ಪ್ರಸಿದ್ಧವಾಗಿ ಡಜನ್‌ಗಟ್ಟಲೆ UI ಐಕಾನ್‌ಗಳನ್ನು ಒಂದೇ ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗೆ ಸಂಯೋಜಿಸಿದೆ, ನೂರಾರು ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳ ಆಫ್ ಪೇಜ್ ಲೋಡ್ ಸಮಯವನ್ನು ಸ್ಕೇಲ್‌ನಲ್ಲಿ ಶೇವ್ ಮಾಡಿದೆ. ತಂತ್ರವು ಪರಿಕಲ್ಪನೆಯಲ್ಲಿ ಸರಳವಾಗಿದೆ ಆದರೆ ನಿಖರತೆಯ ಬೇಡಿಕೆಯಿದೆ - ಪ್ರತಿ ಐಕಾನ್‌ಗೆ ನಿಖರವಾದ ಪಿಕ್ಸೆಲ್ ನಿರ್ದೇಶಾಂಕಗಳು ಬೇಕಾಗುತ್ತವೆ ಮತ್ತು ಒಂದೇ ಐಕಾನ್ ಅನ್ನು ನವೀಕರಿಸುವುದು ಸಂಪೂರ್ಣ ಹಾಳೆಯನ್ನು ಪುನರುತ್ಪಾದಿಸುತ್ತದೆ.

SpritePad, SpriteMe, ಮತ್ತು ನಂತರ ಗ್ರಂಟ್ ಮತ್ತು ಗಲ್ಪ್‌ಗಾಗಿ ಬಿಲ್ಡ್-ಟೂಲ್ ಪ್ಲಗಿನ್‌ಗಳಂತಹ ಪರಿಕರಗಳು ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಿ, ಸಂಯೋಜಿತ ಚಿತ್ರ ಮತ್ತು ಅನುಗುಣವಾದ CSS ಎರಡನ್ನೂ ಉತ್ಪಾದಿಸುತ್ತವೆ. ಗರಿಷ್ಠ ಅಳವಡಿಕೆಯಲ್ಲಿ, ಯಾವುದೇ ಕಾರ್ಯಕ್ಷಮತೆ-ಪ್ರಜ್ಞೆಯ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಸ್ಪ್ರೈಟ್ ಹಾಳೆಗಳನ್ನು ನೆಗೋಶಬಲ್ ಅಲ್ಲದ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸವೆಂದು ಪರಿಗಣಿಸಲಾಗಿದೆ. ವಿಶಿಷ್ಟವಾದ ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ 60+ ಇಮೇಜ್ ವಿನಂತಿಗಳನ್ನು 3-4 ಸ್ಪ್ರೈಟ್ ಲೋಡ್‌ಗಳಿಗೆ ಕಡಿಮೆ ಮಾಡಬಹುದು, ಆರಂಭಿಕ ಪುಟ ಲೋಡ್ ಸಮಯವನ್ನು 30-50% ರಷ್ಟು ಕಡಿತಗೊಳಿಸುತ್ತದೆ.

SVG ಸ್ಪ್ರೈಟ್ಸ್: ದಿ ವೆಕ್ಟರ್ ರೆವಲ್ಯೂಷನ್

ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವಿನ್ಯಾಸವು ಹಿಡಿತಕ್ಕೆ ಬಂದಂತೆ ಮತ್ತು ರೆಟಿನಾ ಪ್ರದರ್ಶನಗಳು ಪ್ರಮಾಣಿತವಾದಂತೆ, ರಾಸ್ಟರ್-ಆಧಾರಿತ PNG ಸ್ಪ್ರೈಟ್‌ಗಳು ತಮ್ಮ ಮಿತಿಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸಿದವು. ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಡಿಸ್‌ಪ್ಲೇಯಲ್ಲಿ 16×16 ರಲ್ಲಿ ಗರಿಗರಿಯಾಗಿ ಕಾಣುವ ಐಕಾನ್‌ಗಳು ಹೈ-ಡಿಪಿಐ ಪರದೆಗಳಲ್ಲಿ ಅಸ್ಪಷ್ಟವಾಗಿ ಕಾಣಿಸಿಕೊಂಡವು. SVG ಸ್ಪ್ರೈಟ್‌ಗಳನ್ನು ನಮೂದಿಸಿ — ಇದು ವೆಕ್ಟರ್ ಗ್ರಾಫಿಕ್ಸ್‌ನ ಅನಂತ ಸ್ಕೇಲೆಬಿಲಿಟಿಯೊಂದಿಗೆ ಸಾಂಪ್ರದಾಯಿಕ ಸ್ಪ್ರೈಟ್‌ಗಳ ವಿನಂತಿ-ಕಡಿತ ಪ್ರಯೋಜನಗಳನ್ನು ಸಂಯೋಜಿಸುವ ತಂತ್ರವಾಗಿದೆ.

SVG ಸ್ಪ್ರೈಟ್‌ಗಳು ತಮ್ಮ ರಾಸ್ಟರ್ ಪೂರ್ವವರ್ತಿಗಳಿಗಿಂತ ವಿಭಿನ್ನವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಹಿನ್ನೆಲೆ ಸ್ಥಾನೀಕರಣವನ್ನು ಬಳಸುವ ಬದಲು, ಡೆವಲಪರ್‌ಗಳು ಒಂದೇ SVG ಫೈಲ್‌ನಲ್ಲಿ ಅಂಶವನ್ನು ಬಳಸಿಕೊಂಡು ಬಹು ಚಿಹ್ನೆಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಾರೆ, ಪ್ರತಿಯೊಂದೂ ವಿಶಿಷ್ಟ ID ಯೊಂದಿಗೆ. ಈ ಚಿಹ್ನೆಗಳನ್ನು ನಂತರ HTML ನಲ್ಲಿ ಟ್ಯಾಗ್‌ಗಳೊಂದಿಗೆ ಎಲ್ಲಿ ಬೇಕಾದರೂ ಉಲ್ಲೇಖಿಸಲಾಗುತ್ತದೆ, ಅಗತ್ಯವಿರುವ ಗಾತ್ರದಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಐಕಾನ್ ಅನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡಲಾಗುತ್ತದೆ. ಸಂಪೂರ್ಣ ಐಕಾನ್ ಲೈಬ್ರರಿಯು ಒಂದು ಕ್ಯಾಶೆಬಲ್ ಫೈಲ್‌ನಂತೆ ಲೋಡ್ ಆಗುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಐಕಾನ್ ಯಾವುದೇ ರೆಸಲ್ಯೂಶನ್‌ನಲ್ಲಿ ಗರಿಗರಿಯಾಗುತ್ತದೆ.

ಸಂಕೀರ್ಣ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಐಕಾನ್ ಸಿಸ್ಟಮ್‌ಗಳಿಗೆ ಈ ವಿಧಾನವು ಚಿನ್ನದ ಮಾನದಂಡವಾಗಿದೆ. ದೊಡ್ಡ ಮಾಡ್ಯೂಲ್ ಸೆಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳು - Mewayz ನಂತಹ CRM ವ್ಯಾಪಿಸಿರುವ 207 ವ್ಯಾಪಾರ ಮಾಡ್ಯೂಲ್‌ಗಳು, ಇನ್‌ವಾಯ್ಸ್, HR, ಫ್ಲೀಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್, ಮತ್ತು ಹೆಚ್ಚಿನವು - ಪ್ರತಿ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಮತ್ತು ಇಂಟರ್‌ಫೇಸ್‌ನಾದ್ಯಂತ ಸ್ಥಿರವಾದ, ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುವ ಪ್ರತಿಮಾಶಾಸ್ತ್ರವನ್ನು ನೀಡಲು SVG ಸ್ಪ್ರೈಟ್ ಸಿಸ್ಟಮ್‌ಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿದೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ 138,000+ ಬಳಕೆದಾರರಿಗೆ ಪ್ರತಿದಿನ ಹಲವಾರು ವಿಭಿನ್ನ ಪರಿಕರಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿದಾಗ, 200 ಪ್ರತ್ಯೇಕ ಐಕಾನ್ ಫೈಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವ ನಡುವಿನ ಕಾರ್ಯಕ್ಷಮತೆಯ ವ್ಯತ್ಯಾಸವು ಒಂದೇ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ SVG ಸ್ಪ್ರೈಟ್‌ಗೆ ವೇಗ ಮತ್ತು ಸರ್ವರ್ ವೆಚ್ಚಗಳಲ್ಲಿ ಅಳೆಯಬಹುದು.

ವೆಬ್ ಆನಿಮೇಷನ್ ಮತ್ತು ಗೇಮ್‌ಗಳಿಗಾಗಿ ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗಳು

ಸ್ಥಿರ ಐಕಾನ್‌ಗಳ ಹೊರತಾಗಿ, ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗಳು ವೆಬ್ ವಿಷಯದ ಬೃಹತ್ ವರ್ಗಕ್ಕೆ ಶಕ್ತಿ ನೀಡುತ್ತವೆ: ಅನಿಮೇಷನ್. ಬ್ರೌಸರ್-ಆಧಾರಿತ ಆಟಗಳು, ಅನಿಮೇಟೆಡ್ UI ಅಂಶಗಳು ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಅನುಭವಗಳು ಆಗಾಗ್ಗೆ ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ - ಅನುಕ್ರಮ ಫ್ರೇಮ್‌ಗಳ ಗ್ರಿಡ್‌ಗಳು ದ್ರವ ಚಲನೆಯನ್ನು ರಚಿಸಲು ಸೈಕಲ್ ಮಾಡಲಾಗುತ್ತದೆ. ಈ ತಂತ್ರವು ವೆಬ್‌ಗಿಂತ ಹಿಂದಿನದು, ಸಾಂಪ್ರದಾಯಿಕ ಅನಿಮೇಷನ್ ಮತ್ತು ಆರಂಭಿಕ ವೀಡಿಯೊ ಗೇಮ್ ಹಾರ್ಡ್‌ವೇರ್‌ನಲ್ಲಿ ಬೇರೂರಿದೆ.

ವೆಬ್ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ, ಸ್ಪ್ರೈಟ್ ಅನಿಮೇಷನ್ ಸಾಮಾನ್ಯವಾಗಿ CSS ಅನಿಮೇಷನ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಫ್ರೇಮ್‌ಗಳ ಮೂಲಕ ಹೆಜ್ಜೆ ಹಾಕುವ ಮೂಲಕ steps() ಸಮಯ ಅಥವಾ JavaScript-ಚಾಲಿತ ಕ್ಯಾನ್ವಾಸ್ ರೆಂಡರಿಂಗ್‌ನೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಪಾತ್ರದ ನಡಿಗೆ, ವ್ಯಕ್ತಿತ್ವದೊಂದಿಗೆ ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್ ಅಥವಾ ಸ್ಫೋಟಗೊಳ್ಳುವ ಕಣದ ಪರಿಣಾಮ - ಎಲ್ಲವನ್ನೂ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಜೋಡಿಸಲಾದ ಪ್ರತಿಯೊಂದು ಫ್ರೇಮ್ ಹೊಂದಿರುವ ಒಂದೇ ಇಮೇಜ್ ಫೈಲ್‌ನಿಂದ ಚಾಲನೆ ಮಾಡಬಹುದು. ಬ್ರೌಸರ್ ಒಂದು ಫೈಲ್ ಅನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅನಿಮೇಷನ್ ಲಾಜಿಕ್ ಯಾವ ಭಾಗವನ್ನು ಗೋಚರಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಸರಳವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ.

ಒಂದು 200KB ಸ್ಪ್ರೈಟ್ ಶೀಟ್ 60 ಫ್ರೇಮ್‌ಗಳ ನಯವಾದ ಅನಿಮೇಷನ್ ಅನ್ನು ತಲುಪಿಸಬಹುದು, ಇಲ್ಲದಿದ್ದರೆ 60 ಪ್ರತ್ಯೇಕ ಚಿತ್ರ ವಿನಂತಿಗಳು ಅಥವಾ ಹೆಚ್ಚು ದೊಡ್ಡ ವೀಡಿಯೊ ಫೈಲ್ ಅಗತ್ಯವಿರುತ್ತದೆ. ಕಾರ್ಯಕ್ಷಮತೆ-ನಿರ್ಣಾಯಕ ಪರಿಸರದಲ್ಲಿ, ವೆಬ್‌ನಲ್ಲಿ ಫ್ರೇಮ್-ಆಧಾರಿತ ಅನಿಮೇಷನ್ ಅನ್ನು ತಲುಪಿಸಲು ಸ್ಪ್ರೈಟ್‌ಗಳು ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವಾಗಿ ಉಳಿಯುತ್ತವೆ.

Phaser, PixiJS, ಮತ್ತು Three.js ನಂತಹ ಆಟದ ಚೌಕಟ್ಟುಗಳು ಎಲ್ಲಾ ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗಳಿಗೆ ಪ್ರಥಮ ದರ್ಜೆ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತವೆ, ಟೆಕ್ಸ್ಚರ್ ಅಟ್ಲಾಸ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ಫ್ರೇಮ್ ಸೀಕ್ವೆನ್ಸ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಪರಿಕರಗಳನ್ನು ನೀಡುತ್ತವೆ. ಹೊರಗಿನ ಗೇಮಿಂಗ್ ಸಹ, ಉತ್ಪನ್ನ ತಂಡಗಳು ಆನ್‌ಬೋರ್ಡಿಂಗ್ ಫ್ಲೋಗಳು, ಮೈಕ್ರೋ-ಇಂಟರಾಕ್ಷನ್‌ಗಳು ಮತ್ತು ಲೋಡ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ತ್ಯಾಗ ಮಾಡದೆ ಬಳಕೆದಾರರನ್ನು ತೊಡಗಿಸಿಕೊಂಡಿರುವ ಸಂತೋಷಕರ UI ಸ್ಪರ್ಶಗಳಿಗಾಗಿ ಸ್ಪ್ರೈಟ್ ಅನಿಮೇಷನ್ ಅನ್ನು ಬಳಸುತ್ತವೆ.

ಆಧುನಿಕ ಪರ್ಯಾಯಗಳು ಮತ್ತು ಯಾವಾಗ ಸ್ಪ್ರೈಟ್‌ಗಳು ಇನ್ನೂ ಗೆದ್ದಾಗ

ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಸಮುದಾಯವು ಸಾಂಪ್ರದಾಯಿಕ ಸ್ಪ್ರೈಟ್‌ಗಳಿಗೆ ಹಲವಾರು ಪರ್ಯಾಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಿದೆ, ಪ್ರತಿಯೊಂದೂ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಯೋಗ್ಯವಾದ ವ್ಯಾಪಾರ-ವಹಿವಾಟುಗಳನ್ನು ಹೊಂದಿದೆ. ಫಾಂಟ್ ಅದ್ಭುತ ಬಂಡಲ್ ಐಕಾನ್‌ಗಳಂತಹ ಐಕಾನ್ ಫಾಂಟ್‌ಗಳು ಫಾಂಟ್ ಗ್ಲಿಫ್‌ಗಳಂತೆ, ಅವುಗಳನ್ನು ಸಿಎಸ್‌ಎಸ್‌ನೊಂದಿಗೆ ಸ್ಟೈಲ್ ಮಾಡಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ ಆದರೆ ಪ್ರವೇಶಿಸುವಿಕೆ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ ಮತ್ತು ಕ್ವಿರ್ಕ್‌ಗಳನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡುತ್ತದೆ. ಇನ್‌ಲೈನ್ SVGಗಳು ವೆಕ್ಟರ್ ಕೋಡ್ ಅನ್ನು ನೇರವಾಗಿ HTML ನಲ್ಲಿ ಎಂಬೆಡ್ ಮಾಡುತ್ತವೆ, ಹೆಚ್ಚುವರಿ ವಿನಂತಿಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತವೆ ಆದರೆ ಡಾಕ್ಯುಮೆಂಟ್ ಗಾತ್ರವನ್ನು ಉಬ್ಬುತ್ತವೆ. HTTP/2 ಮಲ್ಟಿಪ್ಲೆಕ್ಸಿಂಗ್‌ನೊಂದಿಗೆ ವೈಯಕ್ತಿಕ ಫೈಲ್ ಲೋಡ್ ಮಾಡುವಿಕೆಯು ಸಂಪರ್ಕ-ಮಿತಿ ಅಡಚಣೆಯನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ, ಅದು ಮೂಲತಃ ಪ್ರೇರೇಪಿಸುವ ಸ್ಪ್ರಿಟ್‌ಗಳನ್ನು, ಅನೇಕ ಸಣ್ಣ ಫೈಲ್‌ಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ಲೋಡ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.

ಹಾಗಾದರೆ ಸ್ಪ್ರೈಟ್‌ಗಳು ಇನ್ನೂ ಯಾವಾಗ ಗೆಲ್ಲುತ್ತಾರೆ? ಸ್ಪ್ರೈಟ್ ತಂತ್ರಗಳು ಅತ್ಯುತ್ತಮ ಆಯ್ಕೆಯಾಗಿ ಉಳಿದಿರುವ ಈ ಸನ್ನಿವೇಶಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ದೊಡ್ಡ ಐಕಾನ್ ಲೈಬ್ರರಿಗಳು (50+ ಐಕಾನ್‌ಗಳು): HTTP/2 ನೊಂದಿಗೆ ಸಹ, ಒಂದೇ ಕ್ಯಾಶ್ ಮಾಡಿದ ಸ್ಪ್ರೈಟ್ ಫೈಲ್ ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿಯೊಂದಿಗೆ ನೈಜ-ಪ್ರಪಂಚದ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ 50+ ವೈಯಕ್ತಿಕ ವಿನಂತಿಗಳನ್ನು ಮೀರಿಸುತ್ತದೆ.
• ಫ್ರೇಮ್-ಆಧಾರಿತ ಅನಿಮೇಷನ್‌ಗಳು: ವಿಶೇಷವಾಗಿ ಕ್ಯಾನ್ವಾಸ್‌ನಲ್ಲಿ ಸ್ಟೆಪ್-ಥ್ರೂ ಅನಿಮೇಷನ್‌ಗಾಗಿ ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗಳ ದಕ್ಷತೆಗೆ ಯಾವುದೇ ಆಧುನಿಕ ಪರ್ಯಾಯವು ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ.
• ಆಫ್‌ಲೈನ್-ಮೊದಲ ಮತ್ತು PWA ಅಪ್ಲಿಕೇಶನ್‌ಗಳು: ನೂರಾರು ವೈಯಕ್ತಿಕ ಸ್ವತ್ತುಗಳಿಗಿಂತ ಒಂದೇ ಸ್ಪ್ರೈಟ್ ಫೈಲ್ ಅನ್ನು ಸೇವಾ ಕಾರ್ಯಕರ್ತನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲು ಸರಳವಾಗಿದೆ.
• ಕಡಿಮೆ-ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಪರಿಸರಗಳು: ಆಪ್ಟಿಮೈಸ್ಡ್ ಕಂಪ್ರೆಷನ್‌ನೊಂದಿಗೆ ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗಳು ಪ್ರತಿ ಫೈಲ್ ಓವರ್‌ಹೆಡ್ ಅನ್ನು ತೆಗೆದುಹಾಕುವುದರಿಂದ ಸಮಾನವಾದ ವೈಯಕ್ತಿಕ ಫೈಲ್‌ಗಳಿಗಿಂತ ಕಡಿಮೆ ಒಟ್ಟು ಪೇಲೋಡ್‌ಗಳನ್ನು ತಲುಪಿಸುತ್ತವೆ.
• ಸಂಕೀರ್ಣ UI ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳು: SVG ಸ್ಪ್ರೈಟ್ ಸಿಸ್ಟಮ್‌ನ ಸಿಂಗಲ್-ಪಾರ್ಸ್ ದಕ್ಷತೆಯಿಂದ ಡಜನ್‌ಗಟ್ಟಲೆ ಅನನ್ಯ ಐಕಾನ್‌ಗಳನ್ನು ಸಲ್ಲಿಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಏಕಕಾಲದಲ್ಲಿ ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತವೆ.

ನಿರ್ಧಾರವು ಬೈನರಿ ಅಲ್ಲ. ಅನೇಕ ಉತ್ಪಾದನಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಹೈಬ್ರಿಡ್ ವಿಧಾನವನ್ನು ಬಳಸುತ್ತವೆ - ಕೋರ್ UI ಐಕಾನ್‌ಗಳಿಗಾಗಿ SVG ಸ್ಪ್ರೈಟ್‌ಗಳು, CSS ಅನಿಮೇಷನ್ ಅಗತ್ಯವಿರುವ ಹೀರೋ ಇಲ್ಲಸ್ಟ್ರೇಶನ್‌ಗಳಿಗಾಗಿ ಇನ್‌ಲೈನ್ SVG ಗಳು ಮತ್ತು ದೊಡ್ಡದಾದ, ಅಪರೂಪವಾಗಿ ಬಳಸಿದ ಚಿತ್ರಗಳಿಗಾಗಿ ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ಗಳು. ಎಲ್ಲದಕ್ಕೂ ಒಂದೇ ವಿಧಾನಕ್ಕೆ ಡೀಫಾಲ್ಟ್ ಆಗುವ ಬದಲು ಬಳಕೆಯ ಸಂದರ್ಭಕ್ಕೆ ತಂತ್ರವನ್ನು ಹೊಂದಿಸುವುದು ಕೀಲಿಯಾಗಿದೆ.

2026 ರಲ್ಲಿ ದಕ್ಷ ಸ್ಪ್ರೈಟ್ ವರ್ಕ್‌ಫ್ಲೋ ಅನ್ನು ನಿರ್ಮಿಸುವುದು

ಆಧುನಿಕ ಸ್ಪ್ರೈಟ್ ವರ್ಕ್‌ಫ್ಲೋಗಳು 2008 ರ ಹಸ್ತಚಾಲಿತ ನಿರ್ದೇಶಾಂಕ-ಮ್ಯಾಪಿಂಗ್ ದಿನಗಳಿಗೆ ಸ್ವಲ್ಪ ಹೋಲಿಕೆಯನ್ನು ಹೊಂದಿವೆ. ಇಂದಿನ ಉಪಕರಣವು ಸಂಯೋಜಿತ ಫೈಲ್ ಅನ್ನು ಉತ್ಪಾದಿಸುವುದರಿಂದ ಹಿಡಿದು ಸಂಯೋಜಿತ ಕೋಡ್ ಅನ್ನು ಉತ್ಪಾದಿಸುವವರೆಗೆ ವಾಸ್ತವಿಕವಾಗಿ ಪ್ರತಿಯೊಂದು ಹಂತವನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸುತ್ತದೆ. SVG ಸ್ಪ್ರೈಟ್‌ಗಳಿಗಾಗಿ, svg-sprite, svgo, ಮತ್ತು vite-plugin-svg-icons ನಂತಹ ಉಪಕರಣಗಳು ಬಿಲ್ಡ್ ಪೈಪ್‌ಲೈನ್‌ಗಳಲ್ಲಿ ನೇರವಾಗಿ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತವೆ, ಐಕಾನ್ ಡೈರೆಕ್ಟರಿಗಳನ್ನು ವೀಕ್ಷಿಸುತ್ತವೆ ಮತ್ತು ಪ್ರತಿ ಬದಲಾವಣೆಯಲ್ಲಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ಸ್ಪ್ರೈಟ್ ಫೈಲ್‌ಗಳನ್ನು ಮರುಸೃಷ್ಟಿಸುತ್ತವೆ.

ಆಧುನಿಕ ಯೋಜನೆಯಲ್ಲಿ SVG ಸ್ಪ್ರೈಟ್‌ಗಳ ಪ್ರಾಯೋಗಿಕ ಕೆಲಸದ ಹರಿವು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ಅನಿಮೇಶನ್‌ನಲ್ಲಿ ಬಳಸಲಾದ ರಾಸ್ಟರ್ ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗಳಿಗಾಗಿ, TexturePacker ಮತ್ತು ShoeBox ನಂತಹ ಪರಿಕರಗಳು ಫ್ರೇಮ್ ಸ್ಥಾನಗಳು ಮತ್ತು ಆಯಾಮಗಳನ್ನು ವಿವರಿಸುವ JSON ಅಟ್ಲಾಸ್ ಫೈಲ್‌ಗಳೊಂದಿಗೆ ಆಪ್ಟಿಮೈಸ್ಡ್ ಶೀಟ್‌ಗಳನ್ನು ರಚಿಸುತ್ತವೆ. ಗೇಮ್ ಇಂಜಿನ್‌ಗಳು ಮತ್ತು ಅನಿಮೇಷನ್ ಲೈಬ್ರರಿಗಳು ಈ ಅಟ್ಲಾಸ್ ಫೈಲ್‌ಗಳನ್ನು ನೇರವಾಗಿ ಬಳಸುತ್ತವೆ, ಹಸ್ತಚಾಲಿತ ನಿರ್ದೇಶಾಂಕ ನಿರ್ವಹಣೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕುತ್ತವೆ.

ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮ: ಮುಖ್ಯವಾದ ನೈಜ ಸಂಖ್ಯೆಗಳು

ಅಮೂರ್ತ ಕಾರ್ಯನಿರ್ವಹಣೆಯ ಸಲಹೆಯು ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ಇಲ್ಲದೆ ಕಡಿಮೆ ಎಂದರ್ಥ. ಸ್ಪ್ರೈಟ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ವಾಸ್ತವವಾಗಿ ಅಳೆಯಬಹುದಾದ ಪರಿಭಾಷೆಯಲ್ಲಿ ಏನು ನೀಡುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ. 80 ಪ್ರತ್ಯೇಕ SVG ಐಕಾನ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವ ಮಧ್ಯ-ಸಂಕೀರ್ಣತೆಯ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅಪ್ಲಿಕೇಶನ್ 4G ಸಂಪರ್ಕದಲ್ಲಿ ಐಕಾನ್-ಸಂಪೂರ್ಣ ರೆಂಡರಿಂಗ್‌ಗೆ ಸರಾಸರಿ 1.2 ಸೆಕೆಂಡುಗಳು. SVG ಸ್ಪ್ರೈಟ್ ಸಿಸ್ಟಮ್‌ಗೆ ಬದಲಾಯಿಸುವುದರಿಂದ ಅದು 340 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಿಗೆ ಇಳಿಯುತ್ತದೆ - 72% ಸುಧಾರಣೆ ಇದು ಗ್ರಹಿಸಿದ ಪ್ರತಿಕ್ರಿಯೆಯ ಮೇಲೆ ನೇರವಾಗಿ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ.

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

ಒಟ್ಟು ವರ್ಗಾವಣೆಯ ಗಾತ್ರವೂ ಮುಖ್ಯವಾಗಿದೆ. ಎಂಬತ್ತು ಪ್ರತ್ಯೇಕ SVG ಫೈಲ್‌ಗಳು ಸರಾಸರಿ 1.5KB ಪ್ರತಿಯೊಂದೂ 120KB ವಿಷಯವನ್ನು ಉತ್ಪಾದಿಸುತ್ತವೆ ಆದರೆ HTTP ಹೆಡರ್‌ಗಳು, TLS ಸಮಾಲೋಚನೆ ಮತ್ತು ಸಂಪರ್ಕ ನಿರ್ವಹಣೆಯಿಂದ ಸರಿಸುಮಾರು 40KB ಹೆಚ್ಚುವರಿ ಓವರ್‌ಹೆಡ್ ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತವೆ. ಒಂದೇ ಸ್ಪ್ರೈಟ್ ಫೈಲ್ ಅದೇ 120KB ಐಕಾನ್ ವಿಷಯವನ್ನು ಅತ್ಯಲ್ಪ ಓವರ್‌ಹೆಡ್‌ನೊಂದಿಗೆ ನೀಡುತ್ತದೆ - ಅದೇ ದೃಶ್ಯ ಫಲಿತಾಂಶಕ್ಕಾಗಿ ಒಟ್ಟು ವರ್ಗಾವಣೆಯಲ್ಲಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿ 25% ಉಳಿಸುತ್ತದೆ. ಲಕ್ಷಾಂತರ ಪುಟ ವೀಕ್ಷಣೆಗಳಲ್ಲಿ ಇದನ್ನು ಗುಣಿಸಿ ಮತ್ತು ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಉಳಿತಾಯವು ಗಣನೀಯವಾಗುತ್ತದೆ.

ಸ್ಪ್ರೈಟ್‌ಗಳ ಭವಿಷ್ಯ: ಮುಂದೆ ಏನು ಬರಲಿದೆ

ಸ್ಪ್ರೈಟ್ ತಂತ್ರಜ್ಞಾನವು ವೆಬ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಜೊತೆಗೆ ವಿಕಸನಗೊಳ್ಳುತ್ತಲೇ ಇದೆ. CSS @property ಮತ್ತು Houdini ಪೇಂಟ್ API ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಸ್ಪ್ರೈಟ್ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ, ಅಲ್ಲಿ ಬ್ರೌಸರ್ ಯಾವುದೇ ಇಮೇಜ್ ಫೈಲ್ ಇಲ್ಲದೆ ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಸ್ಪ್ರೈಟ್ ತರಹದ ಸ್ವತ್ತುಗಳನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ. ಏತನ್ಮಧ್ಯೆ, AVIF ಮತ್ತು WebP ಸ್ಪ್ರೈಟ್ ಶೀಟ್‌ಗಳು PNG ಸಮಾನತೆಗಳಿಗೆ ಹೋಲಿಸಿದರೆ 30-50% ಚಿಕ್ಕ ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ನೀಡುತ್ತವೆ, ನಿರ್ದಿಷ್ಟ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಲ್ಲಿ ರಾಸ್ಟರ್ ಸ್ಪ್ರೈಟ್‌ಗಳನ್ನು ಮತ್ತೆ ಕಾರ್ಯಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ.

ಹೊರಬರುತ್ತಿರುವ View Transitions API ಸ್ಪ್ರೈಟ್-ಆಧಾರಿತ ಅನಿಮೇಷನ್‌ನೊಂದಿಗೆ ಆಸಕ್ತಿದಾಯಕ ಛೇದಕಗಳನ್ನು ರಚಿಸುತ್ತದೆ, ಇದು ಹಿಂದೆ JavaScript ಸ್ಪ್ರೈಟ್ ಎಂಜಿನ್‌ಗಳ ವಿಶೇಷ ಡೊಮೇನ್ ಆಗಿದ್ದ ಸಂಕೀರ್ಣ ದೃಶ್ಯ ಪರಿವರ್ತನೆಗಳನ್ನು ಸಂಘಟಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಮತ್ತು WebGPU ಪಕ್ವವಾದಂತೆ, ಬ್ರೌಸರ್ ಗೇಮ್‌ಗಳಲ್ಲಿ ಸ್ಪ್ರೈಟ್-ಆಧಾರಿತ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಡೇಟಾ ದೃಶ್ಯೀಕರಣವು ಸ್ಥಳೀಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಸಮೀಪಿಸುತ್ತಿರುವ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮಟ್ಟವನ್ನು ಸಾಧಿಸುತ್ತದೆ.

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