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

आपकी वेबसाइट की छवियों का आकार बदलना क्यों महत्वपूर्ण है

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

के अनुसार WordPress.org, किसी छवि का समग्र "भौतिक आकार" वेबसाइट पृष्ठ के प्रदर्शन में बहुत बड़ी भूमिका निभाता है। “फ़ाइल का आकार [एक छवि का] आपके पृष्ठ को लोड करने में लगने वाले समय को निर्धारित करता है; फ़ाइल का आकार जितना बड़ा होगा... [एक पृष्ठ] लोड होने में उतना ही अधिक समय लगेगा।" दूसरे शब्दों में, अपनी वेबसाइट पर एक बड़े फ़ाइल आकार को अपलोड करने से आप जिस भी पेज में सामग्री जोड़ते हैं, उसके प्रदर्शन को धीमा कर देगा, आमतौर पर आपकी साइट के एनालिटिक्स डेटा में धीमी पृष्ठ लोड गति के रूप में दिखाई देता है।

“फ़ाइल का आकार [एक छवि का] आपके पृष्ठ को लोड करने में लगने वाले समय को निर्धारित करता है; फ़ाइल का आकार जितना बड़ा होगा... [एक पृष्ठ] लोड होने में उतना ही अधिक समय लगेगा।"

-वर्डप्रेस.ऑर्ग

पृष्ठ लोड गति, जिसे केवल "के रूप में भी जाना जाता है"पृष्ठ गति, "आपके पृष्ठ पर सामग्री कितनी तेजी से लोड होती है," है एसईओ साइट Moz. धीमे पृष्ठ होने का परिणाम उच्चतर हो सकता है "दरों में उछाल”, जो एक फैंसी मीट्रिक है जो सत्रों का प्रतिनिधित्व करता है जहां एक साइट विज़िटर एक पृष्ठ को देखने के बाद आपकी साइट छोड़ देता है। धीमे पृष्ठ आपकी साइट के पृष्ठों पर विज़िटर द्वारा व्यतीत किए जाने वाले समय को भी कम कर सकते हैं, क्योंकि लोग पृष्ठ की सामग्री के लोड होने और आपकी साइट को अधिक तेज़ी से छोड़ने की प्रतीक्षा में अधीर हो सकते हैं।

ये मीट्रिक महत्वपूर्ण हैं क्योंकि आप आमतौर पर चाहते हैं कि उपयोगकर्ता आपकी साइट पर अधिक समय बिताएं और आपकी साइट पर अधिक पृष्ठ देखें।

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

आपकी वेबसाइट Google पर जितनी कम रैंक करती है, उदाहरण के लिए, आपकी साइट को उतना ही कम ट्रैफ़िक मिलता है और उतना ही अधिक ट्रैफ़िक आपके प्रतिस्पर्धियों के पास जाएगा जो खोज परिणामों में आपसे ऊपर रैंक करते हैं।

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

ध्यान दें कि कई अन्य महत्वपूर्ण चर हैं जो खोज रैंकिंग में जाते हैं, इसलिए आपकी छवियों को ठीक करना ठोस का केवल एक हिस्सा है एसईओ (खोज इंजन अनुकूलन) रणनीति। हालाँकि, आपकी साइट के ट्रैफ़िक को बढ़ाने में मदद करने के लिए Google जैसे स्थानों पर आपकी साइट को उच्च रैंक देने में मदद करना निश्चित रूप से बहुत महत्वपूर्ण है।

GIMP में WordPress के लिए छवियों का आकार कैसे बदलें

तो आप वर्डप्रेस के लिए छवियों का सही आकार कैसे बदलते हैं?

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

GIMP, मुफ़्त और खुला स्रोत फ़ोटो संपादक, आपकी छवियों के फ़ाइल आकार को और कम करने और आपकी साइट के प्रदर्शन को बेहतर बनाने के लिए अनुशंसित "नेक्स्ट-जेन" फ़ाइल स्वरूपों को निर्यात करते हुए इन सभी कार्यों को पूरा कर सकता है।

अपनी छवि स्केल करें

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

यदि फ़ाइल> ओपन विधि का उपयोग कर रहे हैं, तो दिखाई देने वाले "ओपन इमेज" संवाद के अंदर से अपने कंप्यूटर पर छवि के स्थान पर नेविगेट करें, और छवि फ़ाइल को GIMP में खोलने के लिए उसे खोजने के बाद उस पर डबल-क्लिक करें (या क्लिक करें) संवाद विंडो के निचले दाएं कोने में "खोलें" बटन)।

GIMP विंडो के शीर्ष पर "टाइटल बार" (ऊपर की छवि में लाल तीर) नामक एक विशेषता है। यहां, आप अपनी छवि के वर्तमान आयाम (फोटो में बड़ा हुआ हरा बॉक्स) देखेंगे। मेरी छवि 1920 × 1280 है - पहली संख्या के साथ, 1920, मेरी छवि की चौड़ाई (पिक्सेल में) का प्रतिनिधित्व करती है, और दूसरी संख्या, 1280, मेरी छवि की ऊंचाई का प्रतिनिधित्व करती है। अंतिम छवि आयाम आप अपनी छवि के लिए उपयोग करना चाहते हैं, यह इस बात पर निर्भर करेगा कि आप वर्डप्रेस में छवि का उपयोग करने का इरादा रखते हैं, साथ ही साथ आप किस विषय का उपयोग कर रहे हैं।

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

इसे ध्यान में रखते हुए, सबसे पहले मैं अपनी छवि को क्रॉप करना चाहता हूं ताकि मेरी मूल छवि का पक्षानुपात अनुशंसित आकार के पक्षानुपात से मेल खाए। ऐसा करने के लिए, मैं अपने कीबोर्ड पर शिफ्ट + सी मारकर या जीआईएमपी टूलबॉक्स (ऊपर की छवि में लाल तीर) में क्रॉप टूल आइकन पर क्लिक करके अपने फसल उपकरण को पकड़ लूंगा।

इसके बाद, इस टूल के टूल विकल्प में, मैं "फिक्स्ड" (हरा तीर) के बगल में स्थित बॉक्स को चेक करूंगा और "पहलू अनुपात" (नीला तीर) का चयन करने के लिए ड्रॉपडाउन पर क्लिक करूंगा।

मैं ड्रॉपडाउन (पीला तीर) के नीचे टेक्स्ट फ़ील्ड में अपना पक्षानुपात सेट करने के लिए "1200:630" टाइप करूंगा। यह अनुशंसित छवि आकार के पक्षानुपात से मेल खाता है जो मैं चाहता हूं कि मेरी अंतिम छवि हो।

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

डिफ़ॉल्ट रूप से मेरे फसल क्षेत्र में गाइड "सेंटर लाइन्स" (ऊपर की छवि में पीला तीर) के रूप में सेट होते हैं। मैं टूल विकल्प के नीचे गाइड ड्रॉपडाउन का उपयोग करके इस सेटिंग को बदल सकता हूं। उदाहरण के लिए, मैं अपने गाइड को "तीसरे का नियम" (हरा तीर) में बदल दूंगा। यहां विभिन्न गाइड विकल्प फोटोग्राफी सिद्धांतों पर आधारित हैं, जिससे इन सिद्धांतों का उपयोग करके आपकी रचना को फ्रेम करना आसान हो जाता है।

आप फसल क्षेत्र के किसी भी किनारे या कोने पर अपना माउस घुमा सकते हैं (यानी ऊपर की छवि में लाल तीर द्वारा दर्शाया गया हाइलाइट किया गया क्षेत्र), फिर फसल क्षेत्र की सीमा का आकार बदलने के लिए क्लिक करें और खींचें। ध्यान दें कि आप हमेशा अपने फसल क्षेत्र का आकार टूल विकल्प (उपरोक्त छवि में हरे रंग में उल्लिखित) में स्थित "आकार" फ़ील्ड में देख सकते हैं। आप फसल क्षेत्र के समग्र आकार को छवि के अंतिम आकार 1200×630 से बड़ा रखना चाहेंगे।

आप छवि पर क्रॉप की स्थिति बदलने के लिए अपने माउस को क्रॉप क्षेत्र (लाल तीर) के बीच में क्लिक करके खींच भी सकते हैं।

एक बार जब आप इमेज को क्रॉप करने के लिए तैयार हो जाएं, तो क्रॉप एरिया के अंदर एक बार क्लिक करें और आपकी इमेज क्रॉप हो जाएगी।

ध्यान दें कि यदि टूल विकल्प में "क्रॉप किए गए पिक्सेल हटाएं" विकल्प अनियंत्रित है (ऊपर की छवि में हरा तीर), तो आपकी मूल छवि सीमा अभी भी आपकी छवि के चारों ओर एक पीली बिंदीदार रेखा (लाल तीर) के माध्यम से प्रदर्शित होगी। आप इमेज> फ़िट कैनवास टू लेयर्स पर जाकर, मूल छवि को पुनर्स्थापित कर सकते हैं, इस प्रकार फसल को पूर्ववत कर सकते हैं। केवल कैनवास सीमा के अंदर आपकी छवि का क्षेत्र निर्यात किया जाएगा।

हमारी छवि अब हमारे इच्छित पहलू अनुपात में क्रॉप हो गई है, लेकिन यदि आप एक बार फिर "शीर्षक बार" में हमारे छवि आयामों को देखते हैं, तो आप देखेंगे कि छवि 1532×804 (हरे रंग में उल्लिखित और उपरोक्त फ़ोटो में बढ़े हुए) है - आपके आकार के आधार पर आपके आयाम थोड़े भिन्न होंगे कि आपने अपनी छवि पर अपने फसल क्षेत्र को कितना बड़ा बनाया है)। हमें अपने वांछित आयामों से मेल खाने के लिए अब अपनी छवि को स्केल करना होगा।

ऐसा करने के लिए, इमेज> स्केल इमेज (लाल तीर) पर जाएं।

दिखाई देने वाले "स्केल इमेज" बॉक्स में, "इमेज साइज" के तहत, सुनिश्चित करें कि "चौड़ाई" और "ऊंचाई" बॉक्स के बगल में चेन लिंक आइकन जुड़ा हुआ है (उपरोक्त फोटो में लाल तीर)। फिर, अपनी छवि की "चौड़ाई" को 1200 (हरा तीर) में बदलें। टैब कुंजी दबाएं। छवि की ऊंचाई स्वचालित रूप से "630" पर अपडेट हो जाएगी। "गुणवत्ता" के तहत, सुनिश्चित करें कि स्केलिंग के बाद सर्वोत्तम छवि गुणवत्ता के लिए "इंटरपोलेशन" ड्रॉपडाउन (नीला तीर) या तो "नोहेलो" या "लोहेलो" पर सेट है। (प्रक्षेप पर अधिक जानकारी के लिए, विषय पर मेरा ट्यूटोरियल देखें).

अपनी छवि (पीला तीर) को मापने के लिए "स्केल" बटन दबाएं।

स्केलिंग पूर्ण होने के बाद, टाइटल बार में छवि आयाम देखें। अब आपको 1200 × 630 का एक छवि आकार देखना चाहिए - सटीक आकार जो हम चाहते हैं! तो अब हम क्या करें?

WebP को निर्यात करके अपनी छवि को संपीड़ित करें

छवि को क्रॉप करने और स्केल करने से छवि की ऊंचाई 1920 से 1200 पिक्सेल और चौड़ाई 1280 से 630 पिक्सेल कम करके फ़ाइल का आकार कम हो गया, लेकिन जब हम छवि निर्यात करते हैं तो हम संपीड़न लागू करके छवि आकार को और भी कम कर सकते हैं।  

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

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

WebP में निर्यात करने के लिए, फ़ाइल> इस रूप में निर्यात करें (लाल तीर) पर जाएं।

अपने कंप्यूटर पर उस छवि को चुनने के लिए जहां आप अपनी छवि सहेजना चाहते हैं, "स्थान" अनुभाग (हरे रंग में उल्लिखित) में किसी भी फ़ोल्डर पर क्लिक करें। आप किसी फ़ोल्डर को दर्ज करने के लिए बस उस पर डबल-क्लिक कर सकते हैं, और देख सकते हैं कि आप "फ़ोल्डर में सहेजें" शीर्षक (लाल तीर) के आगे किस फ़ोल्डर में हैं। फिर, अपनी छवि का नाम बदलकर जो चाहें करें - बस सुनिश्चित करें कि आपने वेबपी प्रारूप में छवि को निर्यात करने के लिए एक्सटेंशन ".webp" (नीला तीर) के साथ अपना छवि नाम समाप्त कर दिया है। जब आप तैयार हों, तो विंडो के निचले दाएं कोने में "निर्यात करें" पर क्लिक करें (पीला तीर)।

इसके बाद, "Export Image as WebP" डायलॉग दिखाई देगा। सुनिश्चित करें कि "दोषरहित" अनियंत्रित है (लाल तीर)। मैं आमतौर पर "छवि गुणवत्ता" को 80 पर सेट करता हूं (नीला तीर - यह एक प्रतिशत है, इसलिए जितना कम होगा छवि की गुणवत्ता उतनी ही कम होगी, लेकिन छवि फ़ाइल का आकार छोटा होगा)। यदि आपकी छवि में पारदर्शिता नहीं है (अर्थात बिना पृष्ठभूमि वाला लोगो), तो आपको "अल्फ़ा गुणवत्ता" स्लाइडर के बारे में चिंता करने की ज़रूरत नहीं है (वास्तव में, मेरे द्वारा किए गए एक प्रयोग में, अल्फा गुणवत्ता को 100 से 90 तक वास्तव में थोड़ा कम करना) पारदर्शी पृष्ठभूमि वाली छवि का फ़ाइल आकार 8.50 kb से बढ़ाकर 8.52 kb कर दिया)। "स्रोत प्रकार" ड्रॉपडाउन जिसे आप "डिफ़ॉल्ट" पर सेट रख सकते हैं।

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

इसी तरह, आप "रंग प्रोफ़ाइल सहेजें" विकल्प को अनियंत्रित छोड़कर ठीक हैं क्योंकि अधिकांश ब्राउज़र स्वचालित रूप से आपकी छवि प्रदर्शित करने के लिए sRGB रंग स्थान का उपयोग करेंगे, जो कि GIMP का उपयोग करता है। यदि आप किसी भिन्न रंग प्रोफ़ाइल का उपयोग कर रहे हैं, तो आप इसे चेक किए हुए छोड़ना चाहेंगे। साथ ही, यदि आप इस बात से चिंतित हैं कि कुछ ब्राउज़रों के लिए छवि ठीक से प्रदर्शित नहीं हो रही है, तो इसे चेक करने से समग्र छवि आकार में केवल कुछ kb जुड़ जाता है।

अंत में, "थंबनेल सहेजें" विकल्प अनियंत्रित रह सकता है, जो हमें कुछ किलोबाइट बचाएगा।

छवि को वेबपी प्रारूप में निर्यात करने के लिए "निर्यात" (उपरोक्त छवि में पीला तीर) पर क्लिक करें। निर्यात की गई WebP फ़ाइल की तुलना JPEG फ़ाइल से करते समय जो समान आकार की होती है और जिसकी गुणवत्ता "80" पर सेट होती है, WebP छवि लगभग 30 kb, या लगभग 25%, JPEG से आकार में छोटी होती है।

अब आप अपनी वर्डप्रेस साइट पर लॉग इन कर सकते हैं और उस पेज या पोस्ट पर नेविगेट कर सकते हैं जहां आप अपनी छवि अपलोड करना चाहते हैं, या मुख्य नेविगेशन का उपयोग करके "मीडिया" अनुभाग पर नेविगेट करें और अपनी छवि को मीडिया लाइब्रेरी में खींचें और छोड़ें। मेरे मामले में, मैं मुख्य नेविगेशन (उपरोक्त छवि में लाल तीर) का उपयोग करके "पोस्ट" पर नेविगेट करूंगा और उस ब्लॉग पोस्ट को संपादित करने के लिए "ब्लॉग पोस्ट 1" (नीला तीर) पर क्लिक करूंगा।

फिर मैं पोस्ट सेटिंग्स साइडबार (लाल तीर) खोलूंगा और "फीचर्ड इमेज" सेक्शन तक स्क्रॉल करूंगा और इस सेक्शन (नीला तीर) का विस्तार करूंगा। फिर, मैं छवि को अपनी नई छवि से बदलने के लिए उस पर क्लिक करूंगा।

मैं "अपलोड फ़ाइलें" टैब (लाल तीर) पर नेविगेट करूंगा, और अपनी छवि को अपने कंप्यूटर से वर्डप्रेस (नीले तीर) में खींच और छोड़ सकता हूं।

अंत में, मैं इस परिवर्तन (लाल तीर) को लागू करने के लिए "विशेष रुप से प्रदर्शित छवि सेट करें" पर क्लिक करूंगा।

अपने पेज को नई फीचर्ड इमेज के साथ अपडेट करने के लिए "अपडेट" (लाल तीर) पर क्लिक करें।

अगर मैं “पोस्ट देखें” (नीला तीर) पर क्लिक करता हूँ…

...अब आप मेरे ब्लॉग के शीर्ष पर प्रदर्शित नई विशेष रुप से प्रदर्शित छवि देखेंगे।

इस ट्यूटोरियल के लिए बस इतना ही! यदि आप एक WordPress वेबसाइट डिजाइन करने के बारे में अधिक जानना चाहते हैं, तो मेरा सुझाव है कि my गैर-कोडर्स कोर्स के लिए वर्डप्रेस 6.0! या, यदि आप GIMP के बारे में अधिक जानना चाहते हैं, तो my . देखें उदमी पर GIMP 2.10 मास्टरक्लास!   

Pinterest पर यह पिन