कैसे अपनी वेबसाइट के लिए छवियों का अनुकूलन और उन्हें सभी उपकरणों पर काम करने के लिए (मोबाइल, डेस्कटॉप, टैबलेट के लिए उत्तरदायी छवियां)

छवियों को अनुकूलित करने के लिए परेशान क्यों? मैं इसके बारे में आपसे पूछता हूं; जब पिछली बार आपने इस पर बिना किसी चित्र के एक वेबसाइट देखी थी? "कभी नहीँ" सही उत्तर होगा। छवियाँ केवल बहुत आवश्यक हैं। और यह आपके साथ जाने के लिए उस क्रिंग-योग्य स्टॉक फोटो के बारे में भी नहीं है "10 ऑनलाइन मार्केटिंग टिप्स" पद। छवियाँ कई उद्देश्यों के लिए उपयोगी हैं। लेआउट, डिजाइन तत्व, लोगो, प्रोफ़ाइल चित्र और, हाँ, ब्लॉग चित्र भी सोचें.


सच कहूँ तो, आपके पास कम से कम एक मुट्ठी भर चित्रों का उपयोग किए बिना 2020 में एक वेबसाइट नहीं हो सकती है। कहा जा रहा है कि, छवियाँ किसी वेबसाइट के मालिक के लिए यह पता लगाने के लिए सीधी नहीं हैं। यहां तक ​​कि क्या छवियों का उपयोग करने की चुनौतियों को अलग करना और कहां, उन चित्रों को विशुद्ध रूप से तकनीकी दृष्टिकोण से प्रदर्शित करने के मुद्दे भी हैं:

  • कैसे कई उपकरणों में उत्तरदायी छवियों को वितरित करने के लिए?
  • कैसे उन सभी उपकरणों पर उन्हें शानदार बनाने के लिए?
  • और, सबसे महत्वपूर्ण बात, यह सुनिश्चित करने के लिए कि वे सभ्य समय में कैसे लोड होते हैं?

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

कैसे अपनी वेबसाइट के लिए छवियों का अनुकूलन और सभी उपकरणों पर उन्हें काम करने के लिए

Us हमारी बात क्यों मानें?

छवियां हाल ही में हमारे लिए एक महत्वपूर्ण विषय रही हैं, और हमारे परिवार में नए उपकरणों में से एक होने के कारण – Optimole.

ऑप्टिमोल एक सेट-इट-एंड-भूल-इट इमेज ऑप्टिमाइज़ेशन सेवा है & उपकरण। हम इसे वेब पर सबसे अच्छा समाधान मानते हैं, और हम इसे साबित कर सकते हैं! लेकिन यह दूसरी बार की बात है। किसी भी तरह से, वर्षों से, हमने छवियों को ठीक से कैसे अनुकूलित किया जाए, इसके बारे में बहुत कुछ सीखा है। हम आज आपके साथ उस ज्ञान को साझा करना चाहते हैं.

Optimize आपको अपनी साइट पर छवियों का अनुकूलन क्यों करना चाहिए

छवियां, शानदार दिखने के अलावा, डिस्क स्थान और बैंडविड्थ की एक महत्वपूर्ण मात्रा का भी उपभोग करती हैं। विशेष रूप से, छवियां मानक वेब पेज के आकार के 30% -85% से कुछ के लिए होती हैं.

गति परीक्षण

यह बहुत बड़ा है – और यह छवियों को हटाने की तरह नहीं है एक विकल्प है – इसलिए हम इसके बजाय सबसे अच्छी बात यह सीख सकते हैं कि छवियों को इस तरह से कैसे अनुकूलित किया जाए जो बस कम डिस्क स्थान लेता है।.

लाभ बहुत बड़ा हो सकता है, और विशेष रूप से दोहराया छवियों के साथ काम करते समय – ऐसी छवियां जिन्हें प्रत्येक व्यक्तिगत वेब पेज पर लोड करने की आवश्यकता होती है। वे पृष्ठभूमि, डिजाइन तत्व, लोगो, आइकन, आदि जैसी चीजें हैं। कभी-कभी सिर्फ एक पृष्ठभूमि छवि का अनुकूलन करने से आपके पृष्ठ का आकार 70% तक कट सकता है।+.

इस उदाहरण को देखें:

इससे पहले कि आप छवियों का अनुकूलन करें और उसके बाद पृष्ठ आकार की तुलना करें

लेकिन पकड़ो, यह खराब हो जाता है! यदि सामान्य छवि प्रदर्शन पर्याप्त नहीं है, तो मोबाइल क्षेत्र भी है, और यह पूरी तरह से नया काम लाता है:

सबसे पहले, आपको संभवतः अपने डेस्कटॉप आगंतुकों और अपने मोबाइल आगंतुकों के लिए छवियों का एक ही सेट प्रदर्शित नहीं करना चाहिए। संदर्भ केवल बहुत अलग हैं – इसमें स्क्रीन आकार, अभिविन्यास (आमतौर पर चित्र में) और यहां तक ​​कि पढ़ने वाले व्यक्ति की मानसिकता भी शामिल है.

अतिरिक्त, डेटा से पता चलता है कम छवियों वाले मोबाइल डिज़ाइन रूपांतरणों के मामले में बेहतर प्रदर्शन करते हैं.

जब सभी को एक साथ रखा जाता है, तो कई उपकरणों में उत्तरदायी छवियों को वितरित करते समय हमें कुछ बातों का ध्यान रखना चाहिए।

  • सबसे पहले, उस विशिष्ट डिवाइस के लिए छवियों को अनुकूलित करें
  • सुनिश्चित करें कि छवियों को सबसे तेज़ लोडिंग समय की गारंटी देने के लिए अधिकतम स्वीकार्य स्तर तक संकुचित किया गया है
  • डिवाइस और स्क्रीन पर विचार करते हुए छवियों की इष्टतम संख्या प्रदर्शित करें

कैसे छवियों का अनुकूलन करने के लिए और उन्हें सभी डिवाइस प्रकारों में वितरित करें

अपनी छवियों को बेहतर तरीके से संसाधित करना और फिर विज़िटर को जल्द से जल्द वितरित करना इसके कई घटक हैं। इस गाइड में, हम उन सभी से गुजरेंगे:

�� सही प्रारूप चुनें

पुराने प्रश्न के साथ शुरू करते हैं: पीएनजी या जेपीजी?

ज्यादातर लोग कहते हैं "हर समय जे.पी.जी.!" लेकिन यह वास्तव में सही नहीं है:

पीएनजी बनाम जेपीजी

हां, अधिकांश समय, या कम से कम सबसे आम परिदृश्यों में हमें जो छवियों की आवश्यकता हो सकती है, जेपीजी कम डिस्क स्थान लेते हैं और इसलिए कम बैंडविड्थ भी।.

लेकिन यहाँ कीवर्ड है "सबसे आम परिदृश्य." वास्तव में, यदि आपके पास एक जटिल छवि है जिसमें बहुत सारे रंग और रंग संक्रमण (उर्फ) हैं "रंग जानकारी"), तो JPG वास्तव में बेहतर होने जा रहे हैं। मानक तस्वीरें सोचें। वे जेपीजी के रूप में बेहतर काम करते हैं.

हालाँकि, यदि आपके पास एक ऐसी छवि है जो थोड़ी सरल है, तो PNG हर समय जीतेगा.

निम्नलिखित उदाहरण पर विचार करें। यहां चार चित्र दिए गए हैं:

छवि-1-एकछवि 1-ए: जेपीजी

छवि-1-बीछवि 1-बी: पीएनजी

छवि-2-एकछवि 2-ए: जेपीजी

छवि-2-बीछवि 2-बी: पीएनजी

  • छवि 1-ए 312 केबी है
  • छवि 2-ए 196 केबी है

अन्य दो छवियों के आकार का अनुमान लगाने की कोशिश करें …

आपका उत्तर:

गलत!

  • छवि 1-बी 1.3 एमबी है (यह शायद आपने अनुमान लगाया है)
  • छवि 2-बी 106 केबी है (रुको, क्या ?!

जैसा कि आप देख सकते हैं, PNG सरल, निम्न-रंग-जानकारी छवियों के लिए जीतता है.

इंटरफ़ेस स्क्रीनशॉट, सरल चित्र इत्यादि जैसी चीजें सोचें.

�� पाठ 1:

हमेशा JPG के लिए मत जाओ। यह अनुमान लगाएं कि उसकी सामग्री के आधार पर छवि कितनी बड़ी होने वाली है, और फिर सही छवि प्रकार का उपयोग करें.

अब थोड़ा और सामयिक प्रश्न के लिए: एसवीजी? WebP?

एसवीजी और वेबपी

SVG और WebP वेब पर थोड़ी कम सामान्य प्रकार की छवि हैं, लेकिन ये दोनों तब तक महान हैं जब तक आप उनका उपयोग कर रहे हैं जैसा कि उनका उपयोग किया जाना चाहिए। मुझे स्पष्ट करें:

  • एसवीजी एक एक्सएमएल-आधारित वेक्टर छवि प्रारूप है। छवि की सामग्री को एक सरल एक्सएमएल फ़ाइल में परिभाषित किया जा सकता है – वही एक्सएमएल फ़ाइल जो आप अन्य बुनियादी डेटा प्रोसेसिंग उद्देश्यों के लिए उपयोग करते हैं। यह एसवीजी को एक अच्छा प्रारूप बनाता है, जब तक आप एक साधारण वेक्टर छवि के साथ काम कर रहे हैं.
  • Google द्वारा WebP एक नया प्रारूप है. वे डीप करते हैं कि तुलनीय जेपीईजी की तुलना में वेबपी 25-34% छोटा है, और तुलनीय पीएनजी की तुलना में 26% छोटा है.

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

प्रथम, एसवीजी. मूल रूप से, एसवीजी का उपयोग करें यदि (ए) छवि को एसवीजी के रूप में कुशलता से बचाया जा सकता है, और (ख) यदि आप उस एसवीजी को लेने और इसे संशोधित करने वाले लोगों के लिए बुरा नहीं मानते हैं.

जैसा कि मैंने कहा, एसवीजी एक्सएमएल-आधारित है, जिसका अर्थ है कि एसवीजी ग्राफिक्स को संशोधित करना वास्तव में करना आसान है। यह हमेशा कुछ ऐसा नहीं होता है जो आप चाहते हैं – खासकर जब आपके ब्रांड के लोगो या अन्य महत्वपूर्ण ग्राफिक्स के साथ काम करते हैं.

अधिकांश परिदृश्यों में, SVG एक ऐसा प्रारूप नहीं है जिसका आप बहुत बार उपयोग करते हैं.

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

jpg छवि उदाहरण

वेबप छवि उदाहरण

  • मूल JPG संस्करण 204 KB है
  • वेबपी 58 केबी है

चाल यह है कि सभी ब्राउज़र वेबपी का समर्थन नहीं करते हैं। वास्तव में, आप ऊपर दी गई वेबपी छवि को भी नहीं देख सकते हैं। लेखन के समय, वेबपी Google क्रोम, फ़ायरफ़ॉक्स, एज और ओपेरा में काम करता है। बेशक, पुराने संस्करण प्रारूप का समर्थन नहीं करते हैं.

व्यवहार में इसका मतलब यह है कि एक वेब छवि को जोड़ने के रूप में एक JPG या PNG जोड़ने के रूप में सीधा नहीं है.

मेरा मतलब है, आप तकनीकी रूप से इस तरह के कोड का एक टुकड़ा उपयोग कर सकते हैं:

… लेकिन यदि उपयोगकर्ता का ब्राउज़र प्रारूप का समर्थन नहीं करता है, तो वे इसके बजाय परिचित टूटी हुई छवि आइकन देखेंगे.

प्रभावी रूप से वेबपी का उपयोग करने के लिए, आपको फ़ॉलबैक चित्र प्रदान करने चाहिए उदाहरण के लिए:

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

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

आप फ़ोटोशॉप में WebP के रूप में छवियों को सहेज सकते हैं, या जैसे टूल का उपयोग कर सकते हैं XnConvert (नि: शुल्क).

�� पाठ 2:

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

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

��️ छवियों को संपीड़ित करें

छवि संपीड़न जादू की तरह है। चलो मैं तुम्हें दिखाता हूँ:

यह एक ही JPG छवि है, जिसे केवल संपीड़न के एक अलग स्तर पर बचाया गया है (जिसे अक्सर गुणवत्ता के स्तर के रूप में संदर्भित किया जाता है):

कून-100%100% गुणवत्ता

कून-95%95% गुणवत्ता

कून-85%85% गुणवत्ता

कून-50%50% गुणवत्ता

यदि आप ज्यादातर लोगों को पसंद करते हैं तो पहले तीन आपको एक जैसे लगते हैं। चौथा दिखने लगा "थोड़ा बुरा." (राइट क्लिक करें और "नए टैब में चित्र को खोलें")

इनमें से प्रत्येक चित्र में कितना डिस्क स्थान है:

  • 100% गुणवत्ता: 969 KB
  • 95%: 439 KB
  • 85%: 186 केबी
  • 50%: 102 केबी

विशाल, सही ?! आप ~ 1 एमबी से ~ 500 केबी तक गुणवत्ता में कोई ध्यान देने योग्य हानि के साथ जा सकते हैं, बस संपीड़न को 100 से 95% तक बदलकर.

इस JPG संपीड़न को विभिन्न उपकरणों द्वारा स्वचालित रूप से नियंत्रित किया जा सकता है, जो कि बहुत अच्छी खबर है। हालाँकि, सभी छवियां समान नहीं बनाई जाती हैं, इसलिए कभी-कभी आपको खराब दिखने वाली छवियों के बगल में ठीक दिखने वाली छवियां मिल सकती हैं, भले ही वे एक ही संपीड़न प्रक्रिया से गुजरती हों.

कुल मिलाकर, आप यहाँ एक छलांग ले सकते हैं और अपने JPGs की गुणवत्ता को बहुत भारी कर सकते हैं। इस मामले की सच्चाई यह है कि आपकी साइट के आगंतुक हर जगह कुरकुरी छवियों की परवाह नहीं करते हैं.

ठीक है, मुझे स्पष्ट करना चाहिए; हां, जब आप उन्हें कुछ दिखाना चाहते हैं – जैसे कि सामग्री के टुकड़े के लिए एक छवि, जैसे, उत्पाद चित्र, होटल के कमरे की तस्वीरें – तो यकीन है, उन लोगों को कुरकुरा होना चाहिए.

लेकिन अन्य क्षेत्रों में, आप थोड़ा और आराम कर सकते हैं। उदाहरण के लिए, पृष्ठभूमि को 100% कुरकुरा होने की आवश्यकता नहीं है। सामान्य तौर पर, सभी छवियां जो आगंतुक सीधे से जुड़ी नहीं हैं, गुणवत्ता में कम हो सकती हैं.

मेरे दो पसंदीदा उपकरण जो यहां आपकी सहायता कर सकते हैं:

ImageOptim मैक पर डेस्कटॉप संपीड़न के लिए। आप बस डेस्कटॉप से ​​एक छवि को पकड़ सकते हैं, इसे ImageOptim पर खींच सकते हैं और छोड़ सकते हैं, और फिर उपकरण अपना जादू करता है और जब किया जाता है तो स्रोत छवि को ओवरराइट कर देता है.

फिर, आप उस छवि को प्राप्त कर सकते हैं और इसे अपनी साइट पर सामान्य रूप से अपलोड कर सकते हैं.

ImageOptim - अपने डेस्कटॉप पर छवियों को अनुकूलित करने के लिए महान उपकरण

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

ऑप्टिमोल - क्लाउड में छवियों को अनुकूलित करने के लिए महान उपकरण

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

दूसरे शब्दों में, अपने पीएनजी को संपीड़ित करें, हमेशा!

इन तीन छवियों को देखें:

KWF -1
KWF -2

KWF -3

वे एक जैसे दिखते हैं, लेकिन वे वास्तव में उठाते हैं:

  • 346 केबी
  • 215 केबी
  • 100 केबी

अनुमान लगाने की कोशिश करें कि कौन सा है.

आपकी छवियों को संपीड़ित करने और उन्हें छोटा करने के लिए तीन उपकरण:

  • ImageOptim फिर। लेकिन इस पीएनजी के साथ बहुत समय लगता है, इसलिए यदि आपके पास उनमें से कई को संसाधित करने के लिए है, तो आप उपकरण काम करते समय खुद को एक कप कॉफी बनाना चाहते हैं।.
  • ImageAlpha. ImageOptim की तुलना में बहुत तेज। यह PNGs के लिए मेरा गो-टू डेस्कटॉप समाधान है.
  • Optimole. अप्रत्याशित रूप से, ऑप्टिमोल PNG संपीड़न को भी संभालता है। ऑटोपायलट पर सब कुछ होता है.

�� पाठ 3:

गुणवत्ता बनाम डिस्क स्थान की स्वीकार्य स्तर तक पहुंचने के लिए अपने JPGs को संपीड़ित करें.

अपने पीएनजी को हमेशा कंप्रेस करें.

�� सही आयामों की छवियाँ परोसें

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

आसान उपाय? एक बड़ी छवि परोसें … इसे हमेशा नीचे ही बढ़ाया जा सकता है, है ना? ठीक है, तकनीकी रूप से, यह सही है, लेकिन व्यवहार में, यह बहुत सारे बैंडविड्थ को बर्बाद कर देगा और आपकी साइट को वास्तव में धीरे-धीरे अधिकांश उपकरणों पर लोड कर देगा.

एक बेहतर समाधान है कि सभी छवियों को सही आकार में स्केल किया जाए जो कि सबसे सामान्य उपकरणों द्वारा बेहतर हैं और फिर उनके अनुसार सेवा करें.

जैसा कि आप उम्मीद करेंगे, आपको इसे प्राप्त करने के लिए एक ही छवि के विभिन्न संस्करणों की आवश्यकता है.

इसके बारे में जाने के तरीकों में से एक आपके डिज़ाइन की आधार चौड़ाई और सबसे बड़ी छवि का आकार है जिसका उपयोग किया जा सकता है, और फिर कुछ सामान्य उपकरणों और ब्रेकप्वाइंट के लिए वहाँ से नीचे पैमाने पर.

उदाहरण के लिए, अधिकांश वेबसाइटें सामग्री ब्लॉक चौड़ाई के लिए 1100 px चिह्न से ऊपर नहीं जाती हैं, इसलिए आप मान सकते हैं कि उस स्थिति में प्रदर्शित की जा सकने वाली अधिकतम छवि 1100 px चौड़ाई में भी है.

फिर, आप टेबलेट और मोबाइल परिदृश्यों को कवर करने के लिए 800 px और 550 px (सामान्य मान) के लिए ब्रेकप्वाइंट बना सकते हैं। हालांकि यह आपको सभी उपकरणों पर 100% सही परिणाम नहीं देता है, आप कम से कम एक उचित सीमा तक अनुकूलन करते हैं और अपनी छवियों को नियंत्रण में रखते हैं.

इसके पीछे, आपको अब प्रत्येक छवि के विभिन्न संस्करणों को बनाना होगा जो आप अपनी साइट पर उपयोग करना चाहते हैं.

वास्तविक प्रदर्शन कोड को कैसे प्रबंधित किया जाए, इसका एक उदाहरण यहां दिया गया है:

सरसैट विशेषता का जादू यह है कि ब्राउज़र इसमें क्या देखता है और फिर उपयोग की जाने वाली डिवाइस के आधार पर सबसे अच्छी छवि चुनता है.

एक और अनुकूलन जिसे आप ऊपर देख सकते हैं वह है आकार विशेषता। यह एक ब्राउज़र बताता है कि छवि को कुछ स्क्रीन पर कैसे व्यवहार करना चाहिए। इस परिदृश्य में, छवि 1100 px होने जा रही है, जब व्यूपोर्ट 1100 px से बड़ा होता है, जबकि छोटे उपकरणों पर यह संपूर्ण व्यूपोर्ट लेने वाला होता है.

इस तरह के समाधान से यह सुनिश्चित हो जाता है कि छवि पूरी तरह से 3840px चौड़ी 4K स्क्रीन पर नहीं है। हालाँकि, मोबाइल पर देखे जाने पर यह पूरी स्क्रीन पर कब्जा कर लेगा.

आकार विशेषता का यह प्रभावी उपयोग यह है कि आप अपनी छवियों को वास्तव में कैसे उत्तरदायी बनाते हैं.

⭐ प्रो ट्रिक: उन छवियों के लिए जाएं जो जरूरत से 10% छोटे हैं, और फिर ब्राउज़र को उन्हें स्केल करने दें। यह आपको कुछ अतिरिक्त स्थान और बैंडविड्थ बचाएगा। उदाहरण के लिए, यदि आपको किसी ऐसी छवि की आवश्यकता है जो 500 × 500 px है, तो आप अपनी छवि को 450 × 450 px में स्केल कर सकते हैं, और फिर ब्राउज़र को इसे 500 तक बढ़ा सकते हैं। यह छवि पर निर्भर करता है, लेकिन अधिकांश मामलों में, उपयोगकर्ता ध्यान नहीं देंगे.

�� पाठ # 4:

अपने डिजाइन के लिए सही छवि आकारों का उपयोग करें.

ब्रेकपॉइंट बनाएं.

ब्रेकप्वाइंट को कवर करने के लिए एक ही छवि के कई संस्करण बनाएं.

छवियों को प्रदर्शित करते समय srcset और आकारों की विशेषताओं का उपयोग करें.

रेटिना और HiDPI स्क्रीन के लिए छवियों का अनुकूलन

छवि आयाम स्पेक्ट्रम का दूसरा छोर HiDPI- अनुकूल छवियों के बारे में है.

कहानी यह है कि डेस्कटॉप स्क्रीन बड़े और बड़े होते रहते हैं, और उनके पिक्सल अधिक से अधिक घनी तरह से पैक होते रहते हैं। इन दिनों असामान्य नहीं है कि एक 4K स्क्रीन 15 इंच के लैपटॉप में पैक की गई। 4K रिज़ॉल्यूशन 3840 × 2160 px है, इसलिए उनमें से प्रत्येक पिक्सेल को वास्तव में छोटा होना है.

यह वेबसाइटों के लिए समस्याएं पैदा करता है। मूल रूप से, यदि आपकी साइट को 1100 px के रूप में परिभाषित किया गया था, तो सामान्य परिस्थितियों में, यह केवल 4K स्क्रीन की उपलब्ध स्क्रीन रियल एस्टेट का लगभग 25% लेगी। यह इष्टतम नहीं है। सौभाग्य से, चीजें उस तरह से काम नहीं करती हैं.

इस समस्या से बचने के लिए, उच्च-रिज़ॉल्यूशन वाली स्क्रीन इस तरह कार्य करती हैं मानो वे आधे आकार की हों (मैं ओवरसिम्प्लाइज़िंग हूं, लेकिन मुझे सुन लें)। इसलिए, अपने 1100 px चौड़े वेबसाइट के बजाय एक HiDPI स्क्रीन के एक छोटे से हिस्से पर कब्जा, यह दोगुना तक बढ़ जाता है, 2200 px को लेने और स्क्रीन को बेहतर तरीके से भरने के लिए.

यह प्रक्रिया स्क्रीन को तेज और तेज रखने की अनुमति देती है, जिससे प्रक्रिया में सब कुछ छोटा दिखाई देता है.

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

इसे ठीक करने के लिए, आपको प्रत्येक ज़ूमिंग अनुपात के लिए स्केल की गई छवियों को वितरित करना होगा। यहाँ कुछ सरल कोड है:

(यदि ब्राउज़र srcset का समर्थन नहीं करता है, तो मानक src का उपयोग किया जाएगा।)

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

�� पाठ # 5:

सुनिश्चित करें कि आपके लोगो, ब्रांडिंग छवियां, और आपके पोस्ट और पृष्ठों में उपयोग की जाने वाली सभी छवियां HiDPI स्क्रीन के लिए तैयार हैं.

⌛ डेफ़ इमेज लोडिंग

यह सिद्धांत रूप में सरल है; सभी छवियां जो गुना से ऊपर हैं, उन्हें तुरंत (पृष्ठ लोड पर) लोड किया जाना चाहिए। बाकी सब कुछ बाद के लिए स्थगित किया जा सकता है, और यहां तक ​​कि "आलसी भरी हुई."

आलसी लोडिंग मांग पर छवि लोडिंग है। यानी, छवियों को केवल एक स्प्लिट सेकंड लोड किया जाता है इससे पहले कि उपयोगकर्ता को उनकी आवश्यकता हो – जल्दी नहीं, बाद में नहीं। और वह "जल्दी नहीं, बाद में नहीं" भाग यहाँ महत्वपूर्ण है.

एक आदर्श परिदृश्य में, छवि को व्यूपोर्ट में स्क्रॉल करने से ठीक पहले लोड किया जाना चाहिए। मतलब, छवि के प्रदर्शित होने से पहले उपयोगकर्ता को प्लेसहोल्डर नहीं देखना चाहिए। यदि ऐसा होता है, तो वे समय के साथ लोड करने के प्रबंधन के बिना छवि को स्क्रॉल कर सकते हैं – छवियों को अनुकूलित करने का एक शानदार तरीका नहीं.

कहा जा रहा है कि, आलसी लोडिंग WordPress साइटों पर करना आसान है। आप जावास्क्रिप्ट / jQuery के साथ लोड कर सकते हैं, और यदि आप चाहते हैं तो आप अपने लिए भी कोड लिख सकते हैं। वैकल्पिक रूप से, आप एक प्लगइन प्राप्त कर सकते हैं जैसे a3 आलसी लोड, या आप उपयोग कर सकते हैं Optimole, जिसमें एक आलसी लोडिंग मॉड्यूल शामिल है.

�� पाठ # 6:

आलसी लोड छवियां जो गुना से नीचे हैं.

। एक CDN के माध्यम से चित्र वितरित करें

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

�� हमने यहां अधिक गहराई से CDN के बारे में बात की, इसे देखें.

टीएल; डीआर यह है कि सीडीएन सर्वरों के नेटवर्क का लाभ उठाता है जो सभी आपकी साइट की एक प्रति रखते हैं और फिर इसे निकटतम उपलब्ध स्थान से आगंतुक तक पहुंचाते हैं। यह आपके मुख्य सर्वर से डिलीवर होने की तुलना में हमेशा तेज होता है.

छवि CDN बहुत समान रूप से काम करते हैं, लेकिन वे केवल उसी पर ध्यान केंद्रित करते हैं, आपने यह अनुमान लगाया है, चित्र.

अधिकांश समय, ऑपरेशन आपके दृष्टिकोण से निर्बाध होता है। आपकी साइट की सभी छवियां उनके CDN द्वारा होस्ट किए गए संस्करणों से बदल जाती हैं (जिसका अर्थ है कि छवि URL बदलते हैं).

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

�� पाठ # 7:

अपनी साइट को एक छवि CDN (Jetpack या Optimole) या एक सामान्य CDN (मैक्ससीडीएन / स्टैकपाथ).

। धीमे कनेक्शन पर उपयोगकर्ताओं को छोटी छवियां परोसें

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

इन परिदृश्यों में, लोड समय के बदले में अपनी छवियों की गुणवत्ता को कम करना बेहतर उपाय है। धीमे कनेक्शन वाले उपयोगकर्ता इस बात की सराहना करेंगे कि वे छवियों को बिल्कुल देख सकते हैं.

आप नेटवर्क सूचना एपीआई का उपयोग करके ऐसा कर सकते हैं. यहाँ एक अच्छा ट्यूटोरियल है यदि आप इसे हाथ से लागू करना चाहते हैं तो यह कैसे काम करता है.

यदि आप इसे ऑटोपायलट पर फिर से संभालना पसंद करते हैं, तो, Optimole!

�� पाठ # 8:

धीमी इंटरनेट कनेक्शन पर उपयोगकर्ताओं को छोटी और अधिक संकुचित छवियां परोसें.

Tools उपकरण उपकरण उपकरण!

साथ ही, मैंने कई उपकरणों का उल्लेख किया है जिनका उपयोग आप अपनी साइट की छवि वितरण को अधिक प्रभावी बनाने के लिए कर सकते हैं। यहाँ उन का एक सारांश है:

  • Optimole – आपको स्वचालित रूप से छवियों को अनुकूलित करने देता है, उन्हें संपीड़ित करता है, विज़िटर के व्यूपोर्ट के लिए सही छवि आकार चुनता है, सीडीएन के माध्यम से छवि प्रदान करता है, आलसी छवियों को लोड करता है, धीमी कनेक्शन गति के साथ काम करता है.
  • ImageOptim तथा ImageAlpha मैक पर डेस्कटॉप छवि संपीड़न संभाल। आप उपयोग कर सकते हैं TinyPNG जीत पर। अपनी साइट पर चित्र अपलोड करने से पहले ऐसा करें.
  • XnConvert – आप छवियों को वेबपी में बदलने की सुविधा देता है.
  • a3 आलसी लोड प्लगइन – आलसी लोड सभी छवियों.
  • जेटपैक प्लगइन – एक मुफ्त छवि सीडीएन के साथ आता है.
  • मैक्ससीडीएन / स्टैकपाथ – एक सामान्य सीडीएन जो आपकी पूरी साइट की देखभाल करेगा, न कि केवल छवियां.

छवियों को अनुकूलित करने के लिए उपकरण

�� आगे की पढाई:

  • WP बनाम Smush बनाम ShortPixel बनाम ऑप्टिमोल की कल्पना करें: वर्डप्रेस छवियों के अनुकूलन के लिए कौन सा सबसे अच्छा है? सिर से सिर की तुलना
  • ब्लॉगों के लिए मुफ्त छवियां – उन्हें कैसे प्राप्त करें & उन्हें प्रभावी ढंग से उपयोग करें (चेतावनी-गैर-स्पष्ट सलाह, डेटा-समर्थित)
  • वर्डप्रेस प्रदर्शन को तेज करने के 11 तरीके
  • वेबसाइट की गति अनुकूलन: 2019 में इसे कैसे करें
  • सबसे तेज़ वर्डप्रेस होस्टिंग – एक को खोजने के लिए शुरुआती मार्गदर्शिका

टीएल डॉ। डीआर:

यहाँ ऊपर साझा सभी व्यक्तिगत पाठों का सारांश दिया गया है:

पाठ 1:

हमेशा JPG के लिए मत जाओ। यह अनुमान लगाएं कि उसकी सामग्री के आधार पर छवि कितनी बड़ी होने वाली है, और फिर सही छवि प्रकार का उपयोग करें.

पाठ 2:

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

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

पाठ 3:

गुणवत्ता बनाम डिस्क स्थान की स्वीकार्य स्तर तक पहुंचने के लिए अपने JPGs को संपीड़ित करें.

अपने पीएनजी को हमेशा कंप्रेस करें.

पाठ # 4:

अपने डिजाइन के लिए सही छवि आकारों का उपयोग करें.

ब्रेकपॉइंट बनाएं.

ब्रेकप्वाइंट को कवर करने के लिए एक ही छवि के कई संस्करण बनाएं.

छवियों को प्रदर्शित करते समय srcset और आकारों की विशेषताओं का उपयोग करें.

पाठ # 5:

सुनिश्चित करें कि आपके लोगो, ब्रांडिंग छवियां, और आपके पोस्ट और पृष्ठों में उपयोग की जाने वाली सभी छवियां HiDPI स्क्रीन के लिए तैयार हैं.

पाठ # 6:

आलसी लोड छवियां जो गुना से नीचे हैं.

पाठ # 7:

अपनी साइट को एक छवि CDN (Jetpack या Optimole) या एक सामान्य CDN (मैक्ससीडीएन / स्टैकपाथ).

पाठ # 8:

धीमी इंटरनेट कनेक्शन पर उपयोगकर्ताओं को छोटी और अधिक संकुचित छवियां परोसें.

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

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

करोल के द्वारा लेआउट, प्रस्तुति और संपादन.

* इस पोस्ट में सहबद्ध लिंक शामिल हैं, जिसका अर्थ है कि यदि आप किसी उत्पाद लिंक पर क्लिक करते हैं और फिर उत्पाद खरीदते हैं, तो हमें एक छोटा शुल्क प्राप्त होगा। हालांकि कोई चिंता नहीं है, आप अभी भी मानक राशि का भुगतान करेंगे ताकि आपके हिस्से पर कोई लागत न हो.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map