तपाईँलाई तस्बिरहरू मन पर्दैन?

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

र तपाईंलाई के थाहा छ? हामी तस्बिरहरूमा प्रतिक्रिया दिन कठोर छौं। यसैले तपाईंको सामग्रीमा इमेजरी समावेश गर्नु तपाईंको ब्लग मार्केटिङ गर्दा प्रयोग गर्नको लागि एक शक्तिशाली उपकरण हो।

तर, यदि तपाईं सावधान हुनुहुन्न भने, छविहरूले तपाईंको वेब पृष्ठको कुल आकारको आधा (वा बढी) हुन सक्छ। केही वर्ष पहिले, वेब पृष्ठको औसत आकार 600-700K थियो। अब, औसत 2MB छ र यो हरेक वर्ष बढ्दै छ।

त्यो ठूलो छ!

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

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

तर, पृष्ठ ब्लोट हुनुको अर्थ तपाईंको पृष्ठ लोड हुने गति प्रभावित हुन्छ। यदि तपाईं उच्च-गति जडानमा हुनुहुन्छ भने यो ठूलो कुरा हो जस्तो लाग्दैन, तर तपाईंका धेरै आगन्तुकहरू छैनन्। साथै, गुगलले ढिलो लोड हुने पृष्ठहरू मन पराउँदैन, र यसले तपाईंको एसईओलाई नकारात्मक रूपमा असर गर्न सक्छ।

तपाईले छविहरूलाई किन अप्टिमाइज गर्न आवश्यक छ

तपाईं कडा मेहनत गर्नुहुन्छतारकीय सामग्री सिर्जना गर्नुहोस् र तपाईंले आफ्नो ब्लगलाई प्रवर्द्धन गर्न र अन्य ब्लगरहरूसँग नेटवर्किङ गर्न अनगिन्ती घण्टा खर्च गर्नुहुन्छ, त्यसैले तपाईंले चाहानुहुने अन्तिम कुरा भनेको सम्भावित आगन्तुकहरूले तपाईंको वेबसाइट लोड हुनु अघि नै त्याग्नु हो!

अध्ययनहरूले देखाउँछन् कि 40% सम्म यदि कुनै साइटले लोड हुन तीन सेकेन्डभन्दा बढी समय लिन्छ भने आगन्तुकहरूले पछाडिको बटनमा क्लिक गर्छन्।

मलाई थाहा छ, तीन सेकेन्ड वास्तवमै त्यति लामो हुँदैन, तर जब तपाईं मोबाइल जडानमा हुनुहुन्छ र तपाईं एकको लागि पर्खिरहनु भएको छ। साइट लोड गर्न, एक सेकेन्ड सधैंको लागि जस्तो लाग्न सक्छ।

र तपाईंको धेरै आगन्तुकहरू ढिलो मोबाइल जडानहरूमा हुन सक्छन्, यो स्पष्ट हुन्छ - तपाईंले आफ्नो पृष्ठको आकार कम गर्न आवश्यक छ। र हामीलाई पहिले नै थाहा छ कि पृष्ठ आकार ब्लोटको सबैभन्दा ठूलो अपराधी के हो - यो तपाईंको छविहरू हो।

अनावश्यक रूपमा ठूला छविहरूले पनि तपाईंको होस्टिंग खातामा ठाउँ लिन्छ। जबकि तपाईं मध्ये केहि "असीमित" भण्डारण ठाउँ संग होस्टिंग हुन सक्छ, धेरै प्रिमियम होस्टिंग प्रदायकहरूले तपाईंलाई तल्लो-स्तरीय योजनाहरूमा लगभग 10GB भण्डारणमा सीमित गर्दछ। यो तुरुन्तै भरिन सक्छ, विशेष गरी यदि तपाईं एउटै खातामा धेरै, छवि-हेभि साइटहरू होस्ट गर्दै हुनुहुन्छ।

त्यसोभए, तपाईं कसरी भन्न सक्नुहुन्छ कि तपाईंका छविहरूले तपाईंको साइटलाई ढिलो गरिरहेको छ? Google PageSpeed ​​Insights मार्फत आफ्नो साइटको गति परीक्षण गर्नुहोस्।

यदि गुगलले अप्टिमाइज गरिएका छविहरूलाई समस्याको रूपमा रिपोर्ट गर्छ भने, यसलाई समाधान गर्न तपाईंले जान्नै पर्ने कुराहरू यहाँ छन्।

छवि अनुकूलन आधारभूत कुराहरू

जब यो तपाइँको ब्लगमा छविहरू अनुकूलन गर्ने कुरा आउँछ, त्यहाँ केहि फरक चीजहरू छन् जुन तपाइँ हुन आवश्यक छयस बारे सचेत हुनुहुन्छ: फाइलको प्रकार, छवि आकार र आयामहरू, तपाईंले आफ्नो छविहरू कसरी सेवा गर्नुहुन्छ, र छवि सङ्कुचन।

यी प्रत्येक क्षेत्रहरूलाई नजिकबाट हेरौं।

फाइल प्रकार

वेबमा छविहरू सामान्यतया PNG वा JPEG फाइल ढाँचामा - वा एनिमेसनको लागि GIF मा बचत गरिन्छ। वेब वरिपरि तैरिरहेका ती रमाईलो एनिमेटेड GIF हरूलाई कसले मन पराउँदैन!

अब यो प्राविधिक रूपमा ठीक छ यदि तपाईंले आफ्ना छविहरूलाई कुनै पनि ढाँचामा बचत गर्नुभयो भने - तपाईंको आगन्तुकको ब्राउजरलाई तपाईंको वेब पृष्ठ प्रदर्शन गर्न कुनै समस्या हुनेछैन। – तर उत्कृष्ट गुणस्तर र अप्टिमाइजेसनका लागि निम्न नियमहरूमा अडिग रहनुहोस्:

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

त्यसोभए, त्यहाँ किन फरक ढाँचाहरू छन्? ?

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

जेपीईजी परम्परागत रूपमा फोटोहरू बचत गर्न प्रयोग गरिन्छ। केहि छवि डेटा एकदम सानो फाइल आकार सिर्जना गर्न को लागी फ्याँकिएको छ, तर तस्बिरहरु को रंगहरु र प्राकृतिक विविधताहरु को एक विस्तृत विविधता समावेश भएकोले, गुणस्तर मा हानि छ।सामान्यतया मानव आँखाले देख्न नसक्ने।

हामी पछि कम्प्रेसनको बारेमा थप विवरणमा जानेछौं, तर अहिलेको लागि यदि तपाइँ केवल दुई कुरा सम्झनुहुन्छ भने, याद गर्नुहोस्: फोटोहरूको लागि JPEG र पाठ/ग्राफिक्सको लागि PNG।

छवि आयामहरू

के तपाईंले कहिल्यै वेब पृष्ठ लोड गर्नुभएको छ र एउटा सानो तस्विर (उदाहरणका लागि हेडसट) डाउनलोड गर्न f-o-r-e-v-e-r लिन्छ भनेर याद गर्नुभएको छ? जस्तै, यति ढिलो तपाईले प्रत्येक लाइन आउँदै गरेको देख्न सक्नुहुन्छ? तपाईं आफै सोच्नुहोस्, कसरी यस्तो सानो छवि डाउनलोड गर्न यति लामो समय लाग्न सक्छ?

र जब यो ठूलो हेडर छविमा हुन्छ, यो अझ खराब हुन्छ किनभने यसले सम्पूर्ण पृष्ठ लोड रोक्न सक्छ।

यो भइरहेको कारण हो कि ब्लगरले आफ्नो छविलाई ठीकसँग रिसाइज र अप्टिमाइज गरेको छैन, र हाम्रो हेडसट उदाहरणको मामलामा, उसको DSLR क्यामेराबाट सीधा पूर्ण-रिजोल्युशन JPEG अपलोड गरेको हुन सक्छ।

र त्यो ठूलो फाइल हो!

तपाईँले देख्नुहुन्छ, वेब ब्राउजरले (सामान्यतया) छविलाई यसको मूल आयामबाट मापन गर्दछ ताकि यो वेब पृष्ठमा यसको स्थानमा राम्रोसँग फिट हुन्छ। स्क्रिनमा सानो छवि जस्तो देखिने कुरा साँच्चै ठूलो १० मेगापिक्सेलको तस्बिर हुन सक्छ, ब्राउजरद्वारा वास्तविक समयमा मापन गरिएको हो।

अब केही वेब प्रकाशन प्लेटफर्महरूले स्वचालित रूपमा तपाईंको पूर्ण रिजोलुसन छविको विभिन्न भिन्नताहरू सिर्जना गर्नेछन्। आकारहरू, तर यदि होइन भने, तपाईंले फोटोशप, लाइटरूम, Pixlr - वा एमएस पेन्ट जस्ता छवि सम्पादकमा पहिले नै आफ्नो छविहरू रिसाइज गर्नुपर्छ। यसको अर्थ फरक हुन सक्छ50K फाइल र 5MB को बीचमा।

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

यदि तपाईं ठूलो स्टक फोटो छविहरू अपलोड गर्ने बानीमा हुनुहुन्छ, र आफ्नो होस्टिङ खातामा ठाउँ बचत गर्न चाहनुहुन्छ भने, WordPress प्लगइन Imsanity तपाईंको पछाडि छ।

यसले मूल छविलाई थप व्यवस्थित गर्न रिसाइज गर्छ र प्रतिस्थापन गर्छ, त्यसैले तपाईंले आफ्नो पोस्टमा पूर्ण आकारको छवि सम्मिलित गर्नुभयो भने पनि, यो त्यति नराम्रो हुनेछैन।

सक्रिय भएपछि, Imsanity ले तपाईंका अवस्थित छविहरू खोज्न र तदनुसार रिसाइज पनि गर्न सक्छ।

तपाईंको छविहरू सेवा गर्नु

तपाईंले आफ्ना आगन्तुकहरूलाई कसरी आफ्ना छविहरू सेवा गर्नुहुन्छ त्यसलाई प्रतिबन्धमा अनुकूलन गर्ने बारे होइन। , तर यसले तपाईंको पृष्ठ लोड समयमा नाटकीय प्रभाव पार्न सक्छ।

धेरै ब्लगरहरूले आफ्नो होस्टिङ खाताबाट सीधा आफ्नो छविहरू सेवा गर्छन् र यो सामान्यतया राम्रो छ, तर यदि तपाईं साँच्चै प्रदर्शनको प्रत्येक बिट निचोड गर्न खोज्दै हुनुहुन्छ भने तपाईंको साइट, त्यसपछि सामग्री डेलिभरी नेटवर्क (CDN) मा तपाईंका छविहरू होस्ट गर्नाले ठूलो फरक पार्न सक्छ।

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

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

ब्लगिङ विजार्डले Sucuri प्रयोग गर्दछ (यसमा सुरक्षाका लागि फायरवाल र CDN समावेश छ), तर त्यहाँ अन्य गुणस्तर प्रदायकहरू छन्। Amazon को Cloudfront वा KeyCDN जस्तै। यहाँ सम्म कि लोकप्रिय CloudFlare, जो कडाई एक CDN होइन, नि: शुल्क एक CDN प्रदान गर्दछ र धेरै साझा होस्टिङ प्याकेजहरूमा सेट अप गर्न सजिलो छ।

छवि कम्प्रेसन

जब यो तपाइँको अनुकूलन गर्न आउँछ। छविहरू, उन्नत हानिपूर्ण छवि सङ्कुचन भन्दा बढि कुनै पनि कुराले तपाईंको फाइलको आकार घटाउँदैन।

विस्मे वा फोटोशप जस्ता धेरैजसो छवि सम्पादन उपकरणहरूले हानिपूर्ण JPEG कम्प्रेसन प्रयोग गरेर फाइलहरू बचत गर्नेछन् किनभने यसमा उत्कृष्ट फाइल आकार घटाइन्छ। तसर्थ, छविको गुणस्तर थोरै घटेको बेला, हानिपूर्ण छवि कम्प्रेसन प्रयोग गर्दा ठूला तस्बिरहरूलाई वेब-अनुकूल आकारहरूमा घटाउँछ।

म पक्का छु कि फोटोशप प्रयोग गर्ने धेरैले यसको वेबका लागि बचत गर्नुहोस् सुविधा हेर्न सक्छन्। छवि अनुकूलनको सबै र अन्त्य-सबैको रूपमा। र PicMonkey वा Visme जस्ता अनलाइन छवि सम्पादन उपकरणहरूले पनि तपाईंको छविहरूलाई अप्टिमाइज गर्दछ।

तर के तपाईंलाई थाहा छ त्यहाँ उपकरणहरू छन् जसले फोटोशप वा अन्य सम्पादन उपकरणहरूबाट तपाईंको "अप्टिमाइज्ड" छवि लिन सक्छ, यसलाई क्रन्च र कम्प्रेस गर्न सक्छ। अर्को ४०% (वा बढी),र अझै के यो मानव आँखामा लगभग उस्तै देखिन्छ?

यहाँ केही नि:शुल्क र सशुल्क उपकरणहरू छन् जसले तपाईंलाई आफ्नो छविहरूलाई वेब-मैत्री स्थितिमा कम गर्न मद्दत गर्दछ।

डेस्कटप उपकरणहरू

ImageAlpha / ImageOptim

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

प्रो टिप : प्राविधिक जानकारहरूको लागि त्यहाँ छ ImageOptim- CLI, जहाँ तपाइँ एकैचोटि छविहरूको सम्पूर्ण फोल्डर अप्टिमाइज गर्न सक्नुहुन्छ।

ImageAlpha एक हानिपूर्ण PNG कम्प्रेसर हो र यसले PNG फाइलहरू संकुचित गर्नमा चमत्कार गर्न सक्छ जबकि ImageOptim ले उन्नत हानिरहित (हानिपूर्ण विकल्पको साथ) कम्प्रेसन प्रदर्शन गर्दछ - र यो PNG, JPEG र GIF फाइलहरूबाट अनावश्यक मेटाडेटा हटाउँछ।

मेरो PNG छविहरूको लागि, मैले तिनीहरूलाई ImageAlpha:

यहाँ, यसले मेरो स्क्रिनसट छविलाई 103K बाट 28K मा घटायो।

तब मैले यसलाई ImageOptim मार्फत चलाएँ र थप १०% बचत गरें।

JPEGmini

मेरो JPEG फाइलहरूका लागि, म तिनीहरूलाई डेस्कटप JPEGmini एपसँग अप्टिमाइज गर्छु, उपलब्ध छ। म्याक र विन्डोज दुवैका लागि।

लाइट संस्करणले तपाईंलाई एक दिनमा अधिकतम २० छविहरू नि:शुल्क अप्टिमाइज गर्न अनुमति दिन्छ, र सीमा हटाउनको लागि $19.99 लागत लाग्छ।

प्रो टिप : प्लगइनको माध्यमबाट JPEGmini लाई Photoshop वा Lightroom मा एकीकृत गर्न चाहने उन्नत प्रयोगकर्ताहरूले प्रो संस्करण किन्न सक्छन्।$99.99।

अनलाइन / क्लाउड / SaaS उपकरणहरू

TinyPNG

यदि तपाइँ उच्च गुणस्तरको अनलाइन छवि कम्प्रेसन उपकरण खोज्दै हुनुहुन्छ भने, TinyPNG (यसले JPEG लाई अप्टिमाइज गर्दछ नामको बावजुद फाइलहरू पनि) एउटा वेब एप हो जसले तपाइँलाई तपाइँको ब्राउजरमा 20 5MB वा साना छविहरू तान्न अनुमति दिन्छ, र तिनीहरूलाई एकैचोटि अप्टिमाइज गर्न अनुमति दिन्छ।

तिनीहरूसँग विकासकर्ता API पनि छ र एक WordPress बनाउँछ। प्लगइन उपलब्ध छ जसले तपाइँको छविहरू अपलोड गर्दा स्वचालित रूपमा अप्टिमाइज गर्न सक्छ।

TinyPNG ले तपाइँलाई प्रति महिना 500 निःशुल्क छवि अनुकूलन दिन्छ, र त्यसपछि प्रति छवि $ 0.002–0.009 बाट शुल्क लाग्छ, भोल्युमको आधारमा।

अब ५०० प्रति महिना छविहरू धेरै जस्तो लाग्न सक्छ, तर जब तपाइँ यो तथ्यलाई विचार गर्नुहुन्छ कि WordPress ले प्राय: विभिन्न आकारहरूमा प्रत्येक छविको तीन देखि पाँच भिन्नताहरू सिर्जना गर्दछ, 500 छविहरू प्रबल ब्लगरको लागि त्यति धेरै जस्तो लाग्दैन। सौभाग्यवश, प्रति-छवि लागत बजेट अनुकूल छ।

EWWW छवि अनुकूलक

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

तपाइँ एक प्रिमियम सदस्यताको लागि रोज्न सक्नुहुन्छ जसले हानिपूर्ण कम्प्रेसन प्रदर्शन गर्दछ, तर नि: शुल्क संस्करणले मात्र हानिरहित कम्प्रेसन प्रदर्शन गर्दछ त्यसैले बचतहरू ' t लगभग पर्याप्त रूपमा। यसले तपाइँको समय बचत गर्नेछ र केहि भन्दा राम्रो छ, यद्यपि।

नोट: पूर्ण रनडाउनको लागि, जाँच गर्नुहोस्छवि सङ्कुचन उपकरणहरूमा हाम्रो पोस्ट।

यसलाई र्‍यापिङ गर्दै

केही मानिसहरूले 2017 सम्ममा औसत वेब पृष्ठको आकार 3MB पुग्ने अनुमान गर्दै, अब तपाइँका छविहरूलाई अनुकूलन गर्न सुरु गर्ने समय हो।

याद राख्नुहोस्, तपाइँका सबै आगन्तुकहरू उच्च-गति जडानहरूमा हुनेछैनन्, र पृष्ठ ब्लोट र ढिलो पृष्ठ लोड हुने समयले Google सँगको तपाइँको रैंकिंगलाई सम्भावित रूपमा असर गर्न सक्छ। तपाईलाई भार कम गर्न मद्दत गर्न, त्यसैले बोल्नको लागि, आज आफ्नो छविहरू अनुकूलन गर्ने बानी बसाल्नुहोस्।

आफ्नो छवि आयामहरूमा ध्यान दिनुहोस् र कुनै पनि धेरै ठूलो स्टक फोटो वा छविहरूलाई डिजिटल क्यामेराबाट उपयुक्तमा रिसाइज गर्नुहोस्। साइज।

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

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