§

प्रतिमा ड्रॉप करा किंवा निवडण्यासाठी क्लिक करा

JPEG, PNG, WebP — प्रति फाइल 30 MB पर्यंत. बॅच समर्थित.

बॅचमध्ये कॉम्प्रेस करण्यासाठी अनेक प्रतिमा ड्रॉप करा — सर्व प्रक्रिया तुमच्या डिव्हाइसवर होते.

आउटपुट फॉर्मेट
कॉम्प्रेशन मोड
फक्त JPEG आणि WebP — PNG लॉसलेस आहे

भारतीय वेब टीम प्रत्येक स्प्रिंटमध्ये याच भिंतीवर आदळतात. एक प्रॉडक्ट फोटो DSLR मधून थेट 4 MB मध्ये येतो, Lighthouse ऑडिट त्यावर झेंडा उभारतो, आणि CMS ची अपलोड मर्यादा 1 MB असते. फाइल इथे ड्रॉप करा, JPEG 0.7 गुणवत्तेवर निवडा किंवा 400 KB चे लक्ष्य सेट करा, Compress दाबा, आणि एका सेकंदात निकाल घ्या. मूळ फाइल तुमच्या लॅपटॉपवरच राहते. हाच शॉर्टकट एखाद्या Jira तिकिटासाठी PNG स्क्रीनशॉटच्या बॅचला लहान करतो, किंवा हीरो प्रतिमा इतक्या कापतो की एखादे Shopify स्टोरफ्रंट Core Web Vitals पार करते. HIPAA अंतर्गत किंवा एखाद्या FedRAMP सीमेच्या आत काम करणाऱ्या टीम इथे ब्राउझर-साइड टूलिंग निवडतात: स्रोत प्रतिमा कायदेशीररित्या TinyPNG सारख्या बाहेरील सेवेला स्पर्श करू शकत नाहीत, आणि हे पृष्ठ पूर्णपणे JavaScript मध्ये चालते.

ब्राउझर-आधारित इमेज कॉम्प्रेशन कसे कार्य करते

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

  1. प्रत्येक अपलोड केलेली फाइल Blob म्हणून वाचतो आणि एक ऑब्जेक्ट URL तयार करतो जेणेकरून ब्राउझर बाइट्स सर्व्हरवर कॉपी न करता किंवा डिस्कवर न लिहिता ती स्थानिकरित्या डिकोड करू शकेल.
  2. डिकोड केलेली प्रतिमा तिच्या मूळ पिक्सेल परिमाणांवर एका ऑफस्क्रीन Canvas एलिमेंटवर काढतो, जी पुन्हा एन्कोडिंगसाठी तयार असते.
  3. पिक्सेल पुन्हा एन्कोड करण्यासाठी canvas.toBlob(callback, mimeType, quality) कॉल करतो. गुणवत्ता मोडमध्ये स्लायडर मूल्य थेट एन्कोडरच्या quantization सेटिंगशी मॅप होते; लक्ष्य-आकार मोडमध्ये पृष्ठ गुणवत्ता मूल्य तोपर्यंत दुभाजित करते जोपर्यंत आउटपुट blob तुमच्या बाइट बजेटखाली बसत नाही.
  4. मूळ आकार, कॉम्प्रेस केलेला आकार आणि बचत टक्केवारीसह एक आधी/नंतरचे रीडआउट दाखवतो, मग प्रति-प्रतिमा डाउनलोड किंवा संपूर्ण बॅचसाठी एकच ZIP देतो. ZIP fflate वापरून मेमरीमध्ये बनवला जातो, जी पहिल्या वापरावर लोड होणारी 8 KB ची लायब्ररी आहे.

प्रतिमा का कॉम्प्रेस कराव्या?

  • लहान प्रतिमा वेगाने लोड होतात. एक 4 MB हीरो प्रतिमा 600 KB पर्यंत कापल्याने Largest Contentful Paint थेट सुधारते, जे Google रँकिंगसाठी वापरत असलेल्या Core Web Vitals पैकी एक आहे. अनेक फोटो असलेल्या पृष्ठावर ही बचत जमून वेगवान पहिले paint बनते.
  • अपलोड आणि संलग्नक मर्यादा सर्वत्र आहेत. अनेक CMS प्लॅटफॉर्म, तिकीट साधने आणि ईमेल प्रणाली 1 किंवा 2 MB पेक्षा मोठ्या फाइल्स नाकारतात. एक झटपट कॉम्प्रेशन पास संपूर्ण एडिटर न उघडता फोटो मर्यादेखाली आणतो.
  • मोठ्या प्रमाणावर बँडविड्थ आणि स्टोरेजला पैसा लागतो. पूर्ण-आकाराच्या PNG ऐवजी 0.8 गुणवत्तेवर WebP पाठवल्याने प्रतिमेचा पेलोड एक तृतीयांश किंवा अधिक कमी होऊ शकतो, जे तुमच्या अभ्यागतांसाठी CDN egress बिले आणि मोबाइल डेटा वापर कमी करते.
  • संवेदनशील प्रतिमांसाठी गोपनीयता महत्त्वाची असते. इथे सर्व काही तुमच्या ब्राउझरमध्ये चालत असल्याने, ID स्कॅन, वैद्यकीय प्रतिमा आणि अंतर्गत स्क्रीनशॉट तुमच्या डिव्हाइसवरच राहतात — काळजी करण्यासाठी TinyPNG सारख्या तृतीय-पक्ष सर्व्हरवर कोणताही अपलोड नसतो.

सामान्य वापर

जेव्हा एखादी प्रतिमा ती जिथे जात आहे त्या जागेपेक्षा मोठी असते तेव्हाच कॉम्प्रेशन समोर येते. आम्ही पुन्हापुन्हा पाहतो असे तीन नमुने.

  • एखाद्या ऑनलाइन स्टोरसाठी उत्पादन फोटो तयार करणे. JPEG मूळ 0.8 गुणवत्तेवर (किंवा 200 KB लक्ष्यावर) कॉम्प्रेस केले जातात जेणेकरून स्टोरफ्रंट वेगवान राहील आणि मोबाइलवर Core Web Vitals पार करेल.
  • एखाद्या बग ट्रॅकर किंवा विकीला जोडण्यापूर्वी स्क्रीनशॉट लहान करणे. 0.85 गुणवत्तेवर JPEG मध्ये रूपांतरित केलेल्या PNG कॅप्चरचा एक बॅच अनेकदा दहापट मेगाबाइटवरून एक-दोन मेगाबाइटवर येतो.
  • एखादा फोटो अपलोड मर्यादेखाली आणणे — एक नोकरी अर्ज पोर्टल जे 1 MB पेक्षा मोठ्या फाइल्स नाकारते, घट्ट संलग्नक मर्यादा असलेली ईमेल प्रणाली, किंवा एखादा फोरम अवतार ज्याला बाइट बजेटमध्ये बसावे लागते.

एक प्रत्यक्ष उदाहरण: 4 MB JPEG ते 400 KB

फोन कॅमेऱ्यातून थेट आलेला 4 MB JPEG हा एक सामान्य पेलोड आहे जो अपलोड मर्यादांमध्ये अडकतो आणि पृष्ठ मंद करतो. कॉम्प्रेशन काय वाचवते याचे ते एक योग्य मानदंड आहे.

JPEG अपलोड झोनमध्ये ड्रॉप करा, फॉर्मेट JPEG वरच ठेवा, आणि एकतर गुणवत्ता स्लायडर 0.7 पर्यंत खाली ओढा किंवा लक्ष्य-आकार मोडवर स्विच करून 400 KB टाइप करा. गुणवत्ता मोडमध्ये Canvas पाइपलाइन एकदा पुन्हा एन्कोड करते आणि निकाल दाखवते, फोटोवर अवलंबून सामान्यतः 500 ते 700 KB दरम्यान. लक्ष्य-आकार मोडमध्ये पृष्ठ काही गुणवत्ता मूल्ये वापरून पाहते, सर्वोच्च मूल्यावर स्थिरावते जे अजूनही 400 KB खाली बसते, आणि बचत टक्केवारी सांगते. एकल फाइल मिळवण्यासाठी कार्डवर Download क्लिक करा, किंवा तुम्ही एकाच वेळी अनेक प्रतिमा कॉम्प्रेस केल्या असल्यास Download .zip क्लिक करा. या आकाराच्या प्रतिमेसाठी संपूर्ण राउंड-ट्रिप एका सेकंदाहून बरेच कमी वेळात चालते आणि पृष्ठ स्वतः लोड झाल्यानंतर शून्य बँडविड्थ वापरते.

गुणवत्ता मोड आणि लक्ष्य-आकार मोडमध्ये काय फरक आहे?

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

हे माझ्या डिव्हाइसवर होते का?

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

PNG कॉम्प्रेस केल्यावर कधीकधी तो जेमतेमच का लहान होतो?

PNG हा एक लॉसलेस फॉर्मेट आहे, त्यामुळे Canvas API तो लहान करण्यासाठी तपशील फेकून देऊ शकत नाही — ती फक्त तेच पिक्सेल पुन्हा पॅक करू शकते. फोटोग्राफसाठी, PNG आधीच मोठा असतो आणि लॉसलेस पुन्हा एन्कोड फार थोडे वाचवते. खरा फायदा आउटपुट फॉर्मेट JPEG किंवा WebP मध्ये बदलल्याने येतो, जे फोटोसाठी योग्य lossy कॉम्प्रेशन वापरतात आणि नियमितपणे 4 ते 10 पट लहान होतात. PNG फक्त तेव्हाच ठेवा जेव्हा तुम्हाला लॉसलेस गुणवत्ता किंवा पारदर्शकता हवी असेल; अन्यथा फोटोसाठी JPEG किंवा सर्वोत्तम आकार-ते-गुणवत्ता समतोलासाठी WebP निवडा.

मी कोणता फॉर्मेट निवडावा?

फोटोग्राफसाठी, 0.8 गुणवत्तेवर WebP सर्वोत्तम आकार-ते-गुणवत्ता समतोल देतो आणि 2021 पासून पाठवलेल्या प्रत्येक ब्राउझरद्वारे समर्थित आहे; एखादे गंतव्य जुने किंवा अधिक कठोर असेल तेव्हा JPEG हा सुरक्षित सार्वत्रिक पर्याय आहे. PNG फक्त तेव्हाच निवडा जेव्हा तुम्हाला लॉसलेस गुणवत्ता किंवा एक अल्फा चॅनेल हवा असेल — line art, UI स्क्रीनशॉट, पारदर्शकता असलेले logo. तुम्ही पृष्ठ गतीसाठी ऑप्टिमाइझ करत असाल आणि तुमचे प्रेक्षक आधुनिक ब्राउझर वापरत असतील, तर WebP जवळजवळ नेहमीच योग्य निवड आहे; तुम्ही एखाद्या जुन्या CMS किंवा WebP नाकारणाऱ्या प्रिंट पाइपलाइनला देत असाल, तर JPEG वरच रहा.

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