प्रतिमा आकार बदला _

ब्राउझर-आधारित प्रतिमा रिसायझिंग कसे कार्य करते

प्रत्येक रिसायझ ही एक लहान पाइपलाइन असते जी पूर्णपणे JavaScript मध्ये चालते. कोणतीही कोडेक लायब्ररी डाउनलोड होत नाही आणि कोणताही सर्व्हर सहभागी नसतो. ब्राउझरचे स्वतःचे Canvas API फाइल डिकोड करते, ती लक्ष्य आकारावर पुन्हा तयार करते आणि मेमरीमध्ये री-एन्कोड करते, नंतर एक Blob देते जो पेज प्रीव्यू करू शकतो किंवा zip करू शकतो. प्रत्येक पायरी टॅबच्या sandbox मध्येच राहत असल्याने, मूळ फाइल कधीही नेटवर्कपर्यंत पोहोचत नाहीत.

1. प्रत्येक अपलोड केलेली फाइल Blob म्हणून वाचा आणि एक object URL तयार करा जेणेकरून ब्राउझर बाइट्स सर्व्हरवर कॉपी न करता किंवा डिस्कवर साठवल्याशिवाय, स्थानिक पातळीवर ती डिकोड करू शकेल.
2. तुमच्या निवडलेल्या मोडवरून लक्ष्य परिमाणे निश्चित करा — सर्वात लांब बाजूची मर्यादा, अचूक रुंदी आणि उंची, किंवा टक्केवारी स्केल. पैलू-गुणोत्तर लॉक एक फील्ड संपादित केल्यावर प्रमाण योग्य ठेवतो.
3. लक्ष्य आकारावर एक ऑफस्क्रीन Canvas तयार करा आणि डिकोड केलेले पिक्सेल पुन्हा तयार करण्यासाठी ctx.drawImage(source, 0, 0, width, height) कॉल करा. ब्राउझर इंटरपोलेशन हाताळतो जे स्केल केलेला परिणाम चिकना करतो.
4. स्रोत स्वरूपात री-एन्कोड करण्यासाठी canvas.toBlob कॉल करा. PNG लॉसलेस राहतो, JPEG आणि WebP उच्च गुणवत्तेवर री-एन्कोड होतात. नंतर पेज आधी/नंतरचे कार्ड दाखवतो आणि प्रति-प्रतिमा डाउनलोड किंवा fflate वापरून मेमरीमध्ये बनवलेला एकच ZIP देतो.

प्रतिमा आकार का बदलावा?

• मोठ्या आकाराच्या प्रतिमा हे मंद पेजचे सर्वात सामान्य कारण आहे. 600 पिक्सेल रुंद लेआउटमध्ये थेट टाकलेला 4000×3000 फोन फोटो स्क्रीनला दाखवता येण्यापेक्षा सुमारे 40 पट जास्त पिक्सेल पाठवतो. अपलोडपूर्वी सर्वात लांब बाजू 1600 px पर्यंत मर्यादित केल्याने पेजचे वजन खूप कमी होते आणि Core Web Vitals LCP सुधारतो.
• अपलोड फॉर्म कठोर परिमाणे लागू करतात. अवतार स्लॉट, ID-फोटो पोर्टल, मार्केटप्लेस यादी आणि OG सोशल कार्ड सर्वांना विशिष्ट पिक्सेल आकार हवे असतात: Open Graph प्रीव्यूसाठी 1200×630, ऐप आयकॉनसाठी 512×512, थंबनेलसाठी 150×150. अचूक संख्येवर पोहोचा आणि नाकारलेल्या-अपलोडच्या चक्रातून सुटका होते.
• ईमेल आणि चॅट टूल चुपचाप मोठ्या गोष्टी पुन्हा कम्प्रेस करतात, जे एक स्वच्छ स्क्रीनशॉट बर्बाद करू शकतात. स्वतः एक योग्य रुंदीवर रिसायझ केल्याने परिणाम अंदाजे राहतो बजाय दुसऱ्याच्या lossy पाइपलाइनवर सोडण्याच्या.
• गॅलरी आणि कॅटलॉगसाठी बॅचची एकसमानता महत्त्वाची असते. मिश्र-आकार फोटोचा एक फोल्डर एकाच 800×800 लक्ष्यावर चालवल्याने ग्रिडवरील प्रत्येक कार्ड एकसारखे दिसते, कोणताही मोठा प्रतिमा लेआउट न तोडता.

सामान्य वापर

रिसायझिंग तेव्हा लागते जेव्हा स्रोत परिमाण आणि गंतव्याच्या अपेक्षा जुळत नाहीत. तीन प्रकार वारंवार दिसतात.

• Shopify किंवा WooCommerce स्टोअरसाठी प्रॉडक्ट फोटो तयार करणे. 4000 पिक्सेल कॅमेरा ओरिजिनलचा फोल्डर 1600 px सर्वात लांब बाजूपर्यंत मर्यादित केला जातो जेणेकरून स्टोअरफ्रंट जलद लोड होईल, पैलू-गुणोत्तर अबाधित ठेवून काहीही ताणलेले दिसणार नाही.
• एका मास्टर फाइलमधून सोशल आणि ऐप एसेट तयार करणे. Open Graph कार्डसाठी अचूक 1200×630 सेट करा, नंतर ऐप आयकॉनसाठी 512×512, कोणताही जड एडिटर न उघडता काही क्लिकमध्ये प्रत्येक एक्सपोर्ट करा.
• तिकीटाला जोडण्यापूर्वी QA किंवा सपोर्ट स्क्रीनशॉटचा बॅच लहान करणे. 50-शॉटचा फोल्डर 50% पर्यंत स्केल केल्याने साधारणतः बग ट्रॅकरमध्ये जाण्यापूर्वी संग्रहाचा आकार सुमारे तीन चतुर्थांश कमी होतो.

एक प्रत्यक्ष उदाहरण: 4000 px फोटो ते 1600 px वेब प्रतिमा

फोनवरून थेट आलेला 4000×3000 फोटो एक सामान्य पेलोड आहे जो कोणत्याही वेब लेआउटपेक्षा खूप मोठा असतो. रिसायझिंगमुळे काय बचत होते याचे ते एक योग्य मापदंड आहे.

फोटो अपलोड झोनमध्ये ड्रॉप करा, मोड सर्वात लांब बाजू मर्यादित करा वर ठेवा, आणि मूल्य 1600 सेट करा. Canvas पाइपलाइन प्रतिमा 1600×1200 वर पैलू-गुणोत्तर जपत पुन्हा तयार करते, नंतर मूळ स्वरूपात री-एन्कोड करते. आउटपुट कार्ड नवीन परिमाण आणि फाइल आकार दाखवते, जे एका सामान्य JPEG साठी काही मेगाबाइटवरून काही शंभर किलोबाइटवर येते. एकच फाइल घेण्यासाठी कार्डवर डाउनलोड करा क्लिक करा, किंवा एका फेरीत अनेक प्रतिमा रिसायझ केल्या असतील तर .zip डाउनलोड करा क्लिक करा. ड्रॉपिंगपासून डाउनलोडपर्यंतची संपूर्ण फेरी एका सेकंदाच्या अंशात चालते आणि पेज स्वतः लोड झाल्यानंतर शून्य bandwidth वापरते.

कोणते रिसायझ मोड उपलब्ध आहेत?

तीन. सर्वात लांब बाजू मर्यादित करा रुंदी किंवा उंचीपैकी लांब बाजूला एक पिक्सेल मूल्यापर्यंत मर्यादित करतो आणि दुसरी बाजू त्यानुसार स्केल करतो, जो सुरक्षित डिफॉल्ट आहे कारण तो कधीही विकृत करत नाही. अचूक रुंदी × उंची तुम्हाला दोन्ही संख्या टाइप करण्याची परवानगी देतो, पैलू-गुणोत्तर लॉकसह जो पहिली फील्ड संपादित करताना दुसरी स्रोत गुणोत्तरावरून स्वतः गणते — फॉर्मला अचूक अप्रमाणात आकार हवा तेव्हा लॉक बंद करा. टक्केवारीने स्केल करा दोन्ही परिमाण एका घटकाने गुणतो, पूर्ण बॅच एकाच वेळी निम्मी किंवा दुप्पट करण्यासाठी उपयुक्त. सहा वन-क्लिक प्रीसेट (1920×1080 ते 150×150 थंबनेल) सर्वात सामान्य लक्ष्ये कव्हर करतात.

हे माझ्या उपकरणावर होते का?

होय, पूर्णपणे. पेज ब्राउझरचे मूळ Canvas API आणि Web File API वापरून प्रत्येक प्रतिमा मेमरीमध्ये डिकोड, पुन्हा तयार करून आणि री-एन्कोड करते. कोणताही प्रतिमा डेटा सर्व्हरवर पाठवला जात नाही, कोणतेही तात्पुरते अपलोड नाही, कोणतीही क्लाउड फेरी नाही. तुम्ही स्वतः पडताळून पाहू शकता: DevTools उघडा, Network पॅनेलवर जा आणि एक रिसायझ चालवा. तुम्हाला दिसणाऱ्या एकमेव बाहेरगामी विनंत्या म्हणजे सुरुवातीचा पेज लोड आणि जाहिरात कॉल. प्रतिमेसारखे काहीही टॅब सोडत नाही, ज्यामुळे हे स्कॅन केलेले ID, वैद्यकीय प्रतिमा आणि इतर सामग्रीसाठी सुरक्षित आहे जी तुम्ही कधीही अपलोड करू इच्छित नाही.

रिसायझिंगमुळे गुणवत्ता कमी होईल का?

प्रतिमा लहान करणे (डाउनस्केलिंग) उत्कृष्ट दिसते — ब्राउझर स्रोत पिक्सेल कमी पिक्सेलमध्ये सरासरी करतो, त्यामुळे तपशील स्पष्ट राहतो आणि फाइल खूप लहान होते. स्रोत रिझोल्यूशनच्या पलीकडे मोठे करणे (अपस्केलिंग) कधीही न टिपलेला तपशील तयार करू शकत नाही, त्यामुळे मोठे केलेले लहान प्रतिमा धुसर दिसतील; हे प्रत्येक रिसायझरची मर्यादा आहे, या विशिष्टचीच नाही. आउटपुट स्रोत स्वरूप ठेवते: PNG लॉसलेस राहतो, JPEG आणि WebP उच्च गुणवत्तेवर री-एन्कोड होतात.

कोणते फाइल फॉर्मेट समर्थित आहेत?

इनपुट बाजूला, ब्राउझर जे कोणतेही फॉर्मेट डिकोड करू शकतो ते स्वीकारले जाते: PNG, JPEG, WebP, GIF आणि BMP जवळपास प्रत्येक फाइल कव्हर करतात जी फोन, कॅमेरा किंवा स्क्रीनशॉट टूल तयार करतो. आउटपुट स्रोत फॉर्मेट जेथे Canvas एन्कोडर समर्थित असेल तेथे जतन केले जाते — PNG, JPEG आणि WebP थेट राउंड-ट्रिप करतात. GIF आणि BMP, जे Canvas API डिकोड करू शकतो पण री-एन्कोड नाही, लॉसलेस PNG म्हणून सेव्ह केले जातात. रिसायझ केलेल्या फाइलनावात नवीन परिमाणे असतात (उदा. photo-1600x1200.jpg) जेणेकरून बॅच सॉर्ट करणे सोपे राहते.

तुमच्या प्रतिमा ड्रॉप करा, एक आकार निवडा, रिसायझ करा. सर्व काही तुमच्या टॅबमध्ये चालते. अपलोड नाही, खाते नाही, सर्व्हर रांगेची प्रतीक्षा नाही.