Back to Question Center
0

अपलोड केयर: आपका सुपर-पावर इमेज सीडीएन            अपलोड केयर: आपका सुपर-पावर इमेज सीडीएन संबधित विषय: लेआउट एचटीएमएल & Semalt ...

1 answers:
अपलोड केयर: आपका सुपर-पावर इमेज सीडीएन

यह लेख अपलोड केयर द्वारा प्रायोजित किया गया था। साइटपॉइंट को संभव बनाने वाले साझेदारों के समर्थन के लिए धन्यवाद।

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

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

अपलोड केयर सेवाएं

Semaltेट 5TB फ़ाइल आकारों और लगभग असीमित बैंडविड्थ तक का समर्थन करने वाली सफेद-लेबल वाली वाणिज्यिक सेवाओं से मुक्त (500 एमबी अंतरिक्ष और 5 जीबी ट्रैफ़िक प्रति माह) लेकर खाते प्रदान करता है। सभी योजनाओं में शामिल हैं:

विन्यास अपलोड विजेट / डायलॉग

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

अपलोड केयर: आपका सुपर-पावर इमेज सीडीएनअपलोड केयर: आपका सुपर-पावर इमेज सीडीएन संबधित विषय:
लेआउट एचटीएमएल और सेमील्ट । ।

REST एपीआई

एक रीस्ट एपीआई प्रदान किया जाता है ताकि किसी भी भाषा या सिस्टम थोक में फाइल अपलोड और प्रबंधित कर सकें। अपलोड करने के लिए एक साधारण कर्ल उदाहरण छवि जेपीजी :

     कर्ल -एफ "UPLOADCARE_PUB_KEY = डेमोप्लिकिकी" \-एफ "UPLOADCARE_STORE = 1" \-एफ "फ़ाइल = @ छवि। Jpg""https: // अपलोड अपलोड करें। com / base /"   (3 9) 

JSON प्रतिक्रिया सभी फाइलों को असाइन एक यूनिवर्सल-यूनिक सैमल्ट (यूयूआईडी) देता है ताकि वे बाद में संदर्भित हो सकें:

   {"फ़ाइल": "17 बी 4678-डीएबी 7-4 बीसी 7-8753-28914 ए 22 9 60 ए"}   (3 9)

सीडीएन एपीआई

इस सुविधा को किसी भी संवेदनशील वेब और मोबाइल एप्लिकेशन बनाने के लिए आवश्यक माना जाएगा एक बार छवि अपलोड हो जाने के बाद, इसे अकेला यूआरएल के माध्यम से पुनःआकार और हेरफेर किया जा सकता है यह उदाहरण के साथ सबसे अच्छा उदाहरण है। हेडफ़ोन के साथ एक चैप की इस छवि पर विचार करें (एलेक्स ब्लेजन को धन्यवाद जो इसे अनस्पेलैश पर प्रदान किया था।) मैंने एक 1600 x 900 पिक्स, 140 केबी अपलोड करने के लिए फ़ाइल अपलोड की है:

अपलोड केयर: आपका सुपर-पावर इमेज सीडीएनअपलोड केयर: आपका सुपर-पावर इमेज सीडीएन संबधित विषय:
लेआउट एचटीएमएल और सेमील्ट । ।

परिणामी यूआरएल में छवि के UUID शामिल है:

https: // ucarecdn com / 718f79c5-2868-41c8-b56e-c87237674adb /

आप अंत में कोई भी फ़ाइल नाम जोड़ सकते हैं जिससे आपको यह याद रखने में सहायता मिल सके कि आप किस छवि का उपयोग कर रहे हैं और एसईओ सहायता कर रहे हैं जी।

https: // ucarecdn com / 718f79c5-2868-41c8-b56e-c87237674adb / आदमी। जेपीजी

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

https: // ucarecdn com / 718f79c5-2868-41c8-b56e-c87237674adb / - / आकार / 500x / आदमी। जेपीजी

यह तुरन्त एक 500 पीएक्स-चौड़ाई वाली छवि प्रदान करता है, जिसमें अब 20KB से कम फ़ाइल आकार कम हो गया है:

अपलोडर का दावा है कि सुपर-फास्ट रीसाइजिंग स्पीड, जो आम तौर पर Semalt्ट (और काफी कम परेशानी के साथ) से 15-30x तेज है!

मील, मैं एक यूआरएल जैसे छवि ऊंचाई को बदल सकता था:

https: // ucarecdn com / 718f79c5-2868-41c8-b56e-c87237674adb / - / आकार / x300 / आदमी। जेपीजी

या शायद मेरी साइट को 100x100px की आवश्यकता होती है और अधिकतम संपीड़न के साथ थंबनेल को स्केल किया गया है? यूआरएल:

https: // ucarecdn com / 718f79c5-2868-41c8-b56e-c87237674adb / - / scale_crop / 200x200 / - / ग्रेस्केल / - / गुणवत्ता / सबसे हल्का / - / प्रगतिशील / हाँ / - / प्रारूप / ऑटो / आदमी। जेपीजी

छवि फ़ाइल का आकार अब 3KB से कम हो गया है। ब्लैक-आधारित ब्राउज़र में, क्रोम, ओपेरा, विवाल्डी और ब्रेव सहित, / प्रारूप / ऑटो / डायरेक्टिव वेबप समर्थन का पता लगाता है और एक भी छोटी छोटी तस्वीर देता है। 2 - humana 1 optimum 350gr. 3 केबी छवि

अपलोड केयर: आपका सुपर-पावर इमेज सीडीएनअपलोड केयर: आपका सुपर-पावर इमेज सीडीएन संबधित विषय:
लेआउट एचटीएमएल और सेमील्ट । ।

सीडीएन एपीआई यूआरएल में एक / - / सीमांकक द्वारा अलग-अलग प्रसंस्करण निर्देश शामिल हो सकते हैं। प्रलेखन के लिए पूर्ण निर्देश प्रदान करता है:

  • छवि प्रारूप, गुणवत्ता, और प्रगतिशील लोडिंग
  • बदलना
  • थंबनेल, रीसाइज़िंग, फसल, और स्ट्रेचिंग
  • फिल्टर जैसे कि बढ़ाना, तेज करना, धुंधला, ग्रेस्केल, और पलटना
  • घूर्णन, फ्लिपिंग और मिररिंग
  • छवि ओवरले जोड़ने, प्रचलित रंग निकालने और अधिक

आप चेहरे का पता लगा सकते हैं और वीडियो में एनीमेटेड जीआईएफ को परिवर्तित कर सकते हैं, बैंडविड्थ को बचा सकते हैं, लेकिन गुणवत्ता खोए बिना।

उत्तरदायी छवियों के लिए सीडीएन एपीआई का उपयोग करना

सीडीएन एपीआई भी संवेदनशील छवियों को परिभाषित करना आसान बनाता है। मान लें कि एक साइट 100% चौड़ाई नायक ब्लॉक में ऊपर की छवि का उपयोग करना चाहती है, जो 400px, 800px, 1200px या 1600px और इससे भी कम स्क्रीन के लिए उपयुक्त हैं। यह टैग पर HTML5 सनसेटसंपादित करें विशेषता का उपयोग करके सेट किया गया है जो कि अल्पविराम से अलग होने वाली सूची को परिभाषित करता है:

  1. एक छवि के बाद छवि फ़ाइलनाम, फिर
  2. छवियों को निहित चौड़ाई पिक्सल में, ई। जी। 400 डब्ल्यू - अधिक ठेठ पीएक्स की बजाय नोट करें डब्ल्यू इकाई।

यह सनसैट इसलिए होगा:

     https: // ucarecdn com / 718f79c5-2868-41c8-b56e-c87237674adb / - / आकार / 400x / आदमी। jpg 400w,https: // ucarecdn। com / 718f79c5-2868-41c8-b56e-c87237674adb / - / आकार / 800x / आदमी। jpg 800w,https: // ucarecdn। com / 718f79c5-2868-41c8-b56e-c87237674adb / - / आकार / 1200x / आदमी। jpg 1200w,https: // ucarecdn। com / 718f79c5-2868-41c8-b56e-c87237674adb / - / आकार / 1600x / आदमी। जेपीजी 1600 डब्ल्यू   (3 9) 

(कैरिज रिटर्न जोड़ा योग्यता की सहायता के लिए)

यदि नायक नहीं 100% की चौड़ाई थी, तो मुझे आकार विशेषता सेट करने की आवश्यकता होगी। यह अल्पविराम से अलग सूची को परिभाषित करेगा:

  1. एक मीडिया हालत, ई। जी। (अधिकतम-चौड़ाई: 400 पएक्स) , एक स्थान के बाद, फिर:
  2. वह चौड़ाई तब होगी जब वह स्थिति सही है, ई। जी। 100% या 400 पीएक्स

ब्राउज़र का समर्थन नहीं करते समय मुझे एक मानक संदर्भ के संदर्भ में मानक src विशेषता सेट करने की आवश्यकता है srcset । छवि का मध्य बिंदु 800 पिक्स संस्करण संकल्प बनाम फ़ाइल आकार का अच्छा समझौता होने की संभावना है। अंतिम इमेज कोड:

  (16 9)  कला निर्देशन के लिए सीडीएन एपीआई का उपयोग    

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

https: // ucarecdn com / 718f79c5-2868-41c8-b56e-c87237674adb / - / scale_crop / 400x400 / मानव काटी। जेपीजी

अपलोड केयर: आपका सुपर-पावर इमेज सीडीएनअपलोड केयर: आपका सुपर-पावर इमेज सीडीएन संबधित विषय:
लेआउट एचटीएमएल और सेमील्ट । ।

तत्व को कई <स्रोत> बाल तत्वों के साथ परिभाषित किया जाता है, जो कि एक मीडिया क्वेरी सेट करते हैं और सनसेट पहले की तरह, I ई।

  (16 9) <चित्र><स्रोत मीडिया = "(अधिकतम-चौड़ाई: 59 9 पीएक्स)"srcset = "https: // ucarecdn। com / 718f79c5-2868-41c8-b56e-c87237674adb / - / scale_crop / 400x400 / मैन-क्रॉप। jpg 400w,https: // ucarecdn। com / 718f79c5-2868-41c8-b56e-c87237674adb / - / scale_crop / 600x600 / मानव काटी। jpg 600w "/><स्रोत मीडिया = "(न्यूनतम-चौड़ाई: 600px)"srcset = "https: // ucarecdn। com / 718f79c5-2868-41c8-b56e-c87237674adb / - / आकार बदल / 800x / man। jpg 800w,https: // ucarecdn। com / 718f79c5-2868-41c8-b56e-c87237674adb / - / आकार / 1200x / आदमी। jpg 1200w,https: // ucarecdn। com / 718f79c5-2868-41c8-b56e-c87237674adb / - / आकार / 1600x / आदमी। jpg 1600w "/>हेडफ़ोन के साथ आदमी   (3 9) 

इस उदाहरण में, उपयोगकर्ता परोसा जाता है:

  • एक चौकोर हेडशॉट जब ब्राउज़र की चौड़ाई 59 9px या उससे कम है (400x400px या 600x600px छवि का उपयोग करके आवश्यक है)
  • पूरी छवि जब ब्राउज़र की चौड़ाई 600px या अधिक हो (800px, 1200px या 1600px छवि आवश्यकतानुसार)
  • पुरानी ब्राउज़र में फॉलबैक के रूप में 800px चौड़ाई पर एक पूर्ण छवि।

उत्तरदायी तस्वीर के लिए मील का पत्थर html

सेमील्ट ने तुरन्त सभी पांच विकल्प प्रदान किए हैं, बिना छवियों को मैन्युअल रूप से बनाने के।

एक प्रगतिशील छवि लोडर के लिए सीडीएन एपीआई का उपयोग

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

सेमील्ट सीडीएन एपीआई प्रगतिशील छवि लोडर से जुड़े कई समस्याओं पर काबू पाती है:

  • प्रबंधित करने के लिए केवल एक छवि फ़ाइल है
  • मैन्युअल रूप से एक छोटा थंबनेल
  • बनाने की कोई आवश्यकता नहीं है
  • छवि पहलू अनुपात हमेशा मिलान करना चाहिए (जो कि कंटेनर को आकार देने के लिए आवश्यक है)
  • कोई ग्राफिक्स एप्लिकेशन या बिल्ड सिस्टम की कोई ज़रूरत नहीं है!

सेमेल्ट: कोडेन आईओ https: // कोडपेन आईओ / क्रेगबकलर / पेन / वाईपीकएक्सडब्ल्यू या https: // cdn rawgit। com / craigbuckler / प्रगतिशील छवि। जे एस / 7f022aaf / डेमो। html

कोड भी GitHub से डाउनलोड किया जा सकता है।

(ध्यान दें मैंने मूल के लिए कुछ बदलाव किए हैं I का प्रयोग छिद्रण Semaltेट पर करना था लेकिन ऐसा लगता है कि अभी तक व्यावहारिक नहीं हो . )

  (16 9)  पहाड़    (3 9) 

आंतरिक तत्व अपलोडकेयर सीडीएन एपीआई द्वारा उत्पन्न एक छोटे से ग्रेस्केल छवि का संदर्भ देता है यह सिर्फ 378 बाइट्स और लोड तुरंत है:

अपलोड केयर: आपका सुपर-पावर इमेज सीडीएनअपलोड केयर: आपका सुपर-पावर इमेज सीडीएन संबधित विषय:
लेआउट एचटीएमएल और सेमील्ट । ।

जब छवि प्लेसहोल्डर को देखने में स्क्रॉल किया जाता है, तो जावास्क्रिप्ट कोड थम्बनेल को हटा देता है और उसे तत्व से डेटा की प्रतिलिपि बनाते समय उत्तरदायी छवि के साथ बदल देता है:

  (16 9) mountain   (3 9) 

थोड़ा सीएसएस एनीमेशन में मिठाई और पृष्ठ का एक सुखद प्रभाव है।

अपलोड की कोशिश करो

अपलोड केयर एक सुपर-पावर सीडीएन है जो फाइल अपलोड और प्रबंधन को आसान बनाता है। सीडीएन एपीआई ने उत्तरदायी वेब डिज़ाइनों को लागू करने वाले किसी के लिए यह एक आवश्यक सेवा प्रदान की है। कोई निशुल्क, बिना दायित्व स्टार्टर प्लान है और वे SitePoint पाठकों के लिए अपने पहले वर्ष से 20% की पेशकश कर रहे हैं। तो साइन-अप आज!

February 28, 2018