क्या आप छवियों से प्यार नहीं करते?

जब आप पढ़ते हैं तो वे पाठ के एक टुकड़े को एक आकर्षक अनुभव में बदल सकते हैं। छवियां किसी ब्लॉग पोस्ट को बेहतर बनाती हैं, उसे अधिक साझा करने योग्य बनाती हैं और आपकी संपूर्ण साइट का रंग और ब्रांड सेट करती हैं.

और आप जानते हैं क्या? हम छवियों का जवाब देने के लिए कड़ी मेहनत कर रहे हैं। इसीलिए अपने ब्लॉग की मार्केटिंग करते समय उपयोग करने के लिए अपनी सामग्री में इमेजरी शामिल करना एक शक्तिशाली टूल है।

लेकिन, यदि आप सावधान नहीं हैं, तो इमेज आपके वेब पेज के कुल आकार के आधे से अधिक (या अधिक) हो सकती हैं। कुछ ही साल पहले, एक वेब पेज का औसत आकार 600-700K था। अब, औसत 2 एमबी है और यह हर साल बढ़ रहा है।

यह बहुत बड़ा है!

ऐसा होने का मुख्य कारण यह है कि वेब पेजों पर कई छवियों का अधिक बार उपयोग किया जा रहा है, और ये छवियां हैं ठीक से आकार और अनुकूलित नहीं। इसका अर्थ है कि वे वेब-अनुकूल तरीके से सहेजे या संकलित नहीं किए गए हैं, और इसके बजाय, आपके पृष्ठों को फुला रहे हैं। जैसे एक महाकाव्य पोस्ट बनाना या अपने आला में अन्य ब्लॉगर्स के साथ नेटवर्किंग करना। यदि आप हाई-स्पीड कनेक्शन पर हैं तो आपको यह कोई बड़ी बात नहीं लग सकती है, लेकिन आपके कई विज़िटर ऐसा नहीं सोचते हैं। साथ ही, Google को धीमे लोड होने वाले पृष्ठ पसंद नहीं हैं, और यह आपके SEO को नकारात्मक रूप से प्रभावित कर सकता है।

आपको छवियों को अनुकूलित करने की आवश्यकता क्यों है

आप कड़ी मेहनत करते हैंतारकीय सामग्री बनाने और आप अपने ब्लॉग को बढ़ावा देने और अन्य ब्लॉगर्स के साथ नेटवर्किंग करने में अनगिनत घंटे खर्च करते हैं, इसलिए आखिरी चीज जो आप चाहते हैं वह यह है कि संभावित आगंतुक आपकी वेबसाइट को लोड होने से पहले ही छोड़ दें!

अध्ययनों से पता चलता है कि 40% तक यदि किसी साइट को लोड होने में तीन सेकंड से अधिक समय लगता है, तो विज़िटर बैक बटन पर क्लिक करते हैं।

मुझे पता है, तीन सेकंड वास्तव में इतना लंबा नहीं है, लेकिन जब आप मोबाइल कनेक्शन पर हों और आप प्रतीक्षा कर रहे हों साइट लोड होने के लिए, एक सेकंड हमेशा के लिए लग सकता है।

और चूंकि आपके बहुत सारे विज़िटर धीमे मोबाइल कनेक्शन पर हो सकते हैं, यह स्पष्ट हो जाता है - आपको अपने पृष्ठ का आकार कम करने की आवश्यकता है। और हम पहले से ही जानते हैं कि पेज साइज ब्लोट का सबसे बड़ा अपराधी क्या है - यह आपकी छवियां हैं।

अनावश्यक रूप से बड़ी छवियां भी आपके होस्टिंग खाते पर जगह लेती हैं। जबकि आप में से कुछ के पास “असीमित” स्टोरेज स्पेस के साथ होस्टिंग हो सकती है, कई प्रीमियम होस्टिंग प्रदाता आपको निम्न-स्तरीय योजनाओं पर लगभग 10GB स्टोरेज तक सीमित कर देते हैं। यह जल्दी से भर सकता है, खासकर यदि आप एक ही खाते पर कई, छवि-भारी साइटों की मेजबानी कर रहे हैं।

तो, आप कैसे बता सकते हैं कि आपकी छवियां आपकी साइट को धीमा कर रही हैं या नहीं? Google PageSpeed ​​Insights के साथ अपनी साइट की गति का परीक्षण करें।

यदि Google अअनुकूलित छवियों को एक समस्या के रूप में रिपोर्ट करता है, तो इसे ठीक करने के लिए आपको यह जानने की आवश्यकता है।

छवि अनुकूलन मूल बातें

जब आपके ब्लॉग पर इमेज को ऑप्टिमाइज़ करने की बात आती है, तो कुछ अलग चीजें हैं जो आपको होनी चाहिएइससे अवगत: फ़ाइल प्रकार, छवि आकार और आयाम, आप अपनी छवियों को कैसे प्रस्तुत करते हैं, और छवि संपीड़न।

आइए इनमें से प्रत्येक क्षेत्र पर करीब से नज़र डालें।

फ़ाइल प्रकार

वेब पर छवियां आमतौर पर PNG या JPEG फ़ाइल स्वरूप - या एनीमेशन के लिए GIF में सहेजी जाती हैं। वेब पर इधर-उधर घूमने वाले मज़ेदार एनिमेटेड GIF को कौन पसंद नहीं करेगा!

अब यह तकनीकी रूप से ठीक है यदि आप अपनी छवियों को किसी भी प्रारूप में सहेजते हैं - आपके विज़िटर के ब्राउज़र को आपका वेब पेज प्रदर्शित करने में कोई परेशानी नहीं होगी - लेकिन सर्वोत्तम गुणवत्ता और अनुकूलन के लिए, निम्नलिखित नियमों का पालन करें:

• जेपीईजी - उन तस्वीरों और डिजाइनों के लिए उपयोग करें जहां लोग, स्थान या चीजें चित्रित की जाती हैं
• पीएनजी - ग्राफिक्स के लिए सर्वश्रेष्ठ , लोगो, टेक्स्ट-हैवी डिज़ाइन, स्क्रीनशॉट, और जब आपको पारदर्शी पृष्ठभूमि वाली छवियों की आवश्यकता हो
• GIF - यदि आपको एनीमेशन की आवश्यकता है, अन्यथा PNG का उपयोग करें

तो, अलग-अलग प्रारूप क्यों हैं ?

ठीक है, पीएनजी पारंपरिक रूप से लोगो और ग्राफिक्स को बचाने के लिए उपयोग किया जाता है क्योंकि यह मूल छवि गुणवत्ता को संरक्षित करता है - कोई भी धुंधला पाठ और पिक्सेल आकार नहीं चाहता है। लेकिन, अगर आप किसी फोटो को PNG के रूप में सेव करने की कोशिश करते हैं, तो यह आश्चर्यजनक लगेगा, लेकिन परिणामी फ़ाइल का आकार कम-से-अद्भुत होगा।

JPEG पारंपरिक रूप से फ़ोटो को सहेजने के लिए उपयोग किया जाता है। बहुत छोटे फ़ाइल आकार को बनाने के लिए कुछ छवि डेटा को फेंक दिया जाता है, लेकिन चूंकि तस्वीरों में रंगों और प्राकृतिक विविधताओं की एक विस्तृत विविधता होती है, इसलिए गुणवत्ता में कमी होती हैआम तौर पर मानवीय आंखों के लिए अदृश्य।

हम बाद में संपीड़न के बारे में और अधिक विस्तार में जाएंगे, लेकिन अभी के लिए यदि आपको केवल दो चीजें याद हैं, तो याद रखें: फोटो के लिए जेपीईजी और टेक्स्ट/ग्राफिक्स के लिए पीएनजी।

छवि आयाम

क्या आपने कभी एक वेब पेज लोड किया है और ध्यान दिया है कि एक छोटी तस्वीर (उदाहरण के लिए शायद एक हेडशॉट) डाउनलोड करने के लिए f-o-r-e-v-e-r लेता है? जैसे, इतनी धीमी गति से आप प्रत्येक पंक्ति को आते हुए देख सकते हैं? आप अपने बारे में सोचें, इतनी छोटी छवि को डाउनलोड होने में इतना समय कैसे लग सकता है?

और जब यह एक बड़ी हेडर छवि के साथ होता है, तो यह और भी बुरा होता है क्योंकि यह पूरे पृष्ठ लोड को रोक सकता है।<1

ऐसा होने का कारण यह है कि ब्लॉगर ने ठीक से आकार नहीं बदला है और अपनी छवि को अनुकूलित नहीं किया है, और हमारे हेडशॉट उदाहरण के मामले में, हो सकता है कि उसने सीधे अपने डीएसएलआर कैमरे से एक पूर्ण-रिज़ॉल्यूशन जेपीईजी अपलोड किया हो।

और यह एक बहुत बड़ी फ़ाइल है!

आप देखते हैं, एक वेब ब्राउज़र (आमतौर पर) एक छवि को उसके मूल आयामों से मापता है ताकि यह एक वेब पेज पर अपनी जगह पर अच्छी तरह से फिट हो जाए। स्क्रीन पर जो एक छोटी छवि प्रतीत होती है, वह वास्तव में 10-मेगापिक्सेल की एक बड़ी तस्वीर हो सकती है, जिसे ब्राउज़र द्वारा वास्तविक समय में छोटा कर दिया जाता है। आकार, लेकिन यदि नहीं, तो आपको फ़ोटोशॉप, लाइटरूम, पिक्स्लर - या यहां तक ​​कि एमएस पेंट जैसे छवि संपादक में पहले से ही अपनी छवियों का आकार बदलना चाहिए। इसका मतलब अंतर हो सकता है50K फ़ाइल और 5MB फ़ाइल के बीच।

उदाहरण के लिए, WordPress स्वचालित रूप से आपकी अपलोड की गई छवि की तीन (या अधिक, आपकी थीम के आधार पर) प्रतियां बनाएगा - सभी अलग-अलग आयामों के साथ - जिनका आप उपयोग कर सकते हैं हमेशा पूर्ण आकार की छवि का उपयोग करने के बजाय ब्लॉग पोस्ट में।

यदि आप विशाल स्टॉक फोटो छवियों को अपलोड करने की आदत में हैं, और अपने होस्टिंग खाते में जगह बचाना चाहते हैं, तो वर्डप्रेस प्लगइन Imsanity के पास आपकी पीठ है।

यह मूल छवि का आकार बदल देता है और इसे कुछ अधिक प्रबंधनीय बना देता है, इसलिए यदि आप अपने पोस्ट में पूर्ण आकार की छवि सम्मिलित करते हैं, तो यह इतना बुरा नहीं होगा।

एक बार सक्रिय होने के बाद, Imsanity आपकी मौजूदा छवियों को भी खोज सकता है और तदनुसार उनका आकार बदल सकता है।

अपनी छवियों की सेवा करना

आप अपने दर्शकों को अपनी छवियों की सेवा कैसे देते हैं, यह केवल उन्हें अनुकूलित करने के बारे में नहीं है , लेकिन यह आपके पृष्ठ लोड समय पर एक नाटकीय प्रभाव डाल सकता है।

अधिकांश ब्लॉगर अपनी छवियों को सीधे अपने होस्टिंग खाते से प्रस्तुत करते हैं और यह आमतौर पर ठीक है, लेकिन यदि आप वास्तव में प्रदर्शन के हर बिट को निचोड़ना चाहते हैं आपकी साइट, फिर सामग्री वितरण नेटवर्क (CDN) पर आपकी छवियों को होस्ट करना एक बड़ा अंतर ला सकता है।

CDN में दुनिया भर के डेटा केंद्रों में स्थित रणनीतिक रूप से स्थित वेब सर्वर होते हैं। ये सर्वर आपकी इमेज की डुप्लीकेट कॉपी होस्ट करते हैं और जब विज़िटर का ब्राउज़र आपकी वेबसाइट से इमेज के लिए अनुरोध करता है, तो सीडीएन स्वचालित रूप से ब्राउज़र कोसर्वर जो भौगोलिक रूप से उनके सबसे करीब है।

इसका मतलब है कि यूरोप के आगंतुक, उदाहरण के लिए, राज्यों या अन्य जगहों से एक के बजाय एक स्थानीय यूरोपीय सर्वर से प्रस्तुत छवियां प्राप्त करेंगे। चूंकि प्रतिक्रिया समय और नेटवर्क विलंबता कम हो जाती है, छवियां बहुत तेजी से डाउनलोड होती हैं, पेज लोड समय कम होता है।

ब्लॉगिंग विज़ार्ड सुकुरी का उपयोग करता है (इसमें सुरक्षा के लिए फ़ायरवॉल के साथ-साथ सीडीएन भी शामिल है), लेकिन अन्य गुणवत्ता प्रदाता भी हैं जैसे Amazon का Cloudfront या KeyCDN। यहां तक ​​कि लोकप्रिय CloudFlare, जो पूरी तरह से सीडीएन नहीं है, मुफ्त में सीडीएन प्रदान करता है और अधिकांश साझा होस्टिंग पैकेजों में स्थापित करना आसान है।

छवि संपीड़न

जब आपके अनुकूलन की बात आती है छवियाँ, आपके फ़ाइल आकार को उन्नत हानिपूर्ण छवि संपीड़न से अधिक कुछ भी कम नहीं करता है।

विज़मे या फ़ोटोशॉप जैसे अधिकांश छवि संपादन उपकरण हानिपूर्ण जेपीईजी संपीड़न का उपयोग करके फ़ाइलों को सहेजेंगे क्योंकि इसमें सबसे अच्छा फ़ाइल आकार कटौती है। इसलिए, जबकि छवि गुणवत्ता थोड़ी कम हो जाती है, हानिपूर्ण छवि संपीड़न का उपयोग करने से विशाल छवियां वेब-अनुकूल आकार में कम हो जाती हैं।

मुझे यकीन है कि फ़ोटोशॉप का उपयोग करने वाले कई लोग इसकी वेब के लिए सहेजें सुविधा देख सकते हैं इमेज ऑप्टिमाइज़ेशन के सभी और अंत के रूप में। यहां तक ​​कि PicMonkey या Visme जैसे ऑनलाइन इमेज एडिटिंग टूल भी आपकी इमेज को ऑप्टिमाइज़ करते हैं। अन्य 40% (या अधिक) द्वारा,और अभी भी क्या यह मानव आंखों के समान दिखाई देता है?

यहां कुछ मुफ्त और सशुल्क टूल हैं जो आपकी छवियों को वेब-अनुकूल स्थिति में कम करने में आपकी सहायता करते हैं।

डेस्कटॉप टूल

ImageAlpha / ImageOptim

Mac उपयोगकर्ता के लिए, ImageOptim एक निःशुल्क डेस्कटॉप टूल है जिसका उपयोग मैं हर दिन PNG छवियों को अनुकूलित करने के लिए करता हूं - ज्यादातर स्क्रीनशॉट - अपलोड करने से पहले। इन उपकरणों का उपयोग करना आसान है, आप बस अपनी फ़ाइलों को खींचें और छोड़ें, लेकिन आपको एक बार में एक छवि बनानी होगी। सीएलआई, जहां आप छवियों के एक पूरे फ़ोल्डर को एक साथ अनुकूलित कर सकते हैं।

इमेजअल्फा एक हानिकारक पीएनजी कंप्रेसर है और पीएनजी फाइलों को सिकोड़ने पर चमत्कार कर सकता है, जबकि इमेजऑप्टिम उन्नत दोषरहित (हानिपूर्ण के विकल्प के साथ) संपीड़न करता है - और यह पीएनजी, जेपीईजी और जीआईएफ फाइलों से अनावश्यक मेटाडेटा को हटा देता है।

फिर मैंने इसे ImageOptim के माध्यम से चलाया और 10% अतिरिक्त बचाया।

JPEGmini

मेरी JPEG फ़ाइलों के लिए, मैं उन्हें उपलब्ध डेस्कटॉप JPEGmini ऐप के साथ ऑप्टिमाइज़ करता हूँ मैक और विंडोज दोनों के लिए।

लाइट संस्करण आपको एक दिन में 20 छवियों तक मुफ्त में अनुकूलित करने की अनुमति देता है, और सीमा को हटाने के लिए $19.99 खर्च होता है।

प्रो टिप : उन्नत उपयोगकर्ता जो प्लगइन के माध्यम से जेपीईजीमिनी को फोटोशॉप या लाइटरूम में एकीकृत करना चाहते हैं, वे इसके लिए प्रो संस्करण खरीद सकते हैं$99.99।

ऑनलाइन / क्लाउड / SaaS टूल

TinyPNG

अगर आप एक उच्च गुणवत्ता वाली ऑनलाइन इमेज कंप्रेशन टूल की तलाश कर रहे हैं, तो TinyPNG (यह JPEG को अनुकूलित करता है files भी नाम के बावजूद) एक वेब ऐप है जो आपको 20 5MB या उससे छोटी छवियों को अपने ब्राउज़र में खींचने की अनुमति देता है, और उन्हें एक ही बार में अनुकूलित करता है।

उनके पास एक डेवलपर एपीआई भी है और एक वर्डप्रेस बनाता है। प्लगइन उपलब्ध है जो अपलोड होने पर आपकी छवियों को स्वचालित रूप से अनुकूलित कर सकता है।

TinyPNG आपको प्रति माह 500 मुफ्त छवि अनुकूलन देता है, और उसके बाद मात्रा के आधार पर $0.002–0.009 प्रति छवि शुल्क लेता है।

अब 500 प्रति माह छवियां बहुत अधिक लग सकती हैं, लेकिन जब आप इस तथ्य पर विचार करते हैं कि वर्डप्रेस अक्सर विभिन्न आकारों में प्रत्येक छवि के तीन से पांच रूपांतर बनाता है, तो 500 छवियां इतनी विपुल ब्लॉगर के लिए नहीं लगती हैं। सौभाग्य से, प्रति-छवि लागत बजट के अनुकूल है।

EWWW छवि अनुकूलक

यदि आप पैसा खर्च करने के लिए तैयार नहीं हैं, और आप अनुकूलन से परेशान नहीं होना चाहते हैं आपकी छवियों को मैन्युअल रूप से, वर्डप्रेस के लिए मुफ्त EWWW इमेज ऑप्टिमाइज़र प्लगइन स्वचालित रूप से आपकी अपलोड की गई छवियों को अनुकूलित कर सकता है।

आप एक प्रीमियम सदस्यता का विकल्प चुन सकते हैं जो हानिपूर्ण संपीड़न करती है, लेकिन मुफ़्त संस्करण केवल दोषरहित संपीड़न करता है इसलिए बचत होती है' टी लगभग पर्याप्त। यह आपका समय बचाएगा और कुछ नहीं से बेहतर है, हालांकि।

ध्यान दें: पूरी तरह से देखने के लिए, देखेंइमेज कंप्रेशन टूल्स पर हमारी पोस्ट।

इसे पूरा करना

कुछ लोगों का अनुमान है कि 2017 तक वेब पेज का औसत आकार 3MB तक पहुंच जाएगा, अब समय आ गया है कि आप अपनी इमेज को ऑप्टिमाइज़ करना शुरू करें।

याद रखें, आपके सभी आगंतुक हाई-स्पीड कनेक्शन पर नहीं होंगे, और पेज ब्लोट और धीमा पेज लोडिंग समय संभावित रूप से Google के साथ आपकी रैंकिंग को प्रभावित कर सकते हैं। भार को हल्का करने में आपकी मदद करने के लिए, कहने के लिए, आज ही अपनी छवियों को अनुकूलित करने की आदत डालें।

अपनी छवि के आयामों पर ध्यान दें और किसी भी बड़े स्टॉक फ़ोटो या छवियों को डिजिटल कैमरे से उपयुक्त आकार में बदलें size.

अगला, JPEGmini जैसे डेस्कटॉप ऐप्स या TinyPNG या Kraken जैसे क्लाउड टूल के साथ आधुनिक इमेज कंप्रेशन का लाभ उठाएं - यदि संभव हो तो उन्हें एक प्लगइन के साथ WordPress में एकीकृत करें।

अंत में, यदि आपका पब्लिशिंग प्लेटफॉर्म स्वचालित रूप से आपकी मूल छवि के आकार में बदलाव करता है, अपने ब्लॉग पोस्ट के लिए मूल, पूर्ण आकार के बजाय इनमें से किसी एक को चुनें।

संबंधित पढ़ना: 7 तरीके कम करने के लिए पीडीएफ फाइलों का आकार।