नया चित्र HTML कोड आपकी वेबसाइट को तेज़ तेज़ बना सकता है

विषयसूची:

Anonim

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

लेकिन वे चित्र आपकी वेबसाइट के आगंतुकों के लिए परेशानी का कारण हो सकते हैं। छवियों में 1.7MB के औसत वेब पेज में से 1MB का खाता है।

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

$config[code] not found

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

लेकिन उत्तरदायी वेब डिज़ाइन हर चीज का जवाब नहीं है। यह आवश्यक रूप से छवि डाउनलोड समस्या को हल नहीं करता है। उत्तरदायी डिजाइन के साथ भी, कई बार उन हैवीवेट छवियों को अभी भी वैसे भी डाउनलोड किया जाता है। वेब प्रदर्शन विशेषज्ञ के रूप में Yoav Weiss सफलतापूर्वक ओपेरा वेबसाइट पर बताते हैं:

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

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

नया HTML कोड तत्व इसे बदल सकता है।

चित्र HTML तत्व क्या है?

यदि आप HTML कोड के बारे में कुछ नहीं जानते हैं, तो एक गैर-तकनीकी परिभाषा है: यह एक विशेष भाषा है। जब आपके वेबसाइट कोड में पर्दे के पीछे उपयोग किया जाता है, तो यह भाषा निर्देश देती है कि ब्राउज़र को टेक्स्ट और छवियों को कैसे प्रदर्शित करना चाहिए।

नया चित्र तत्व HTML मार्कअप भाषा का एक प्रकार है। इसे इस तरह लिखा जाता है (प्रति उत्तरदायी चित्र सामुदायिक समूह के अनुसार):

चित्र तत्व उत्तरदायी के बारे में है इमेजिस, उत्तरदायी नहीं है डिज़ाइन.

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

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

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

… क्या होता है पिक्चर एक आइएमजी टैग लपेटता है। यदि ब्राउज़र यह जानने के लिए बहुत पुराना है कि क्या बनाया जाए तत्व, तो यह फॉलबैक img टैग को लोड करता है। सभी पहुंच लाभ तब से बने हुए हैं, जब तक कि सर्वोच्च विशेषता अभी भी img तत्व पर है। ”

सभी डेवलपर्स ने पहले नए पिक्चर एलिमेंट को स्वीकार नहीं किया। Ars Technica की कहानी उस प्रक्रिया को रेखांकित करती है जो वेब विकास समुदाय के नेताओं के माध्यम से उस बिंदु पर पहुंचती है जहां पर तत्व आज खड़ा है। जिस तरह से एक गिटार बजाने वाले Weiss की विशेषता पर Indiegogo पर एक सफल क्राउडफंडिंग अभियान था।

$config[code] not found

लेकिन अब यह समस्या सुलझ गई है, नई तस्वीर HTML तत्व को अपनाया जा रहा है।

के बारे में मुख्य बातें तत्त्व

मार्कअप एलिमेंट जल्द ही आपके पास एक ब्राउजर पर आ रहा है। 2014 के अंत तक इसके लिए क्रोम और फ़ायरफ़ॉक्स ब्राउज़रों में डिफ़ॉल्ट रूप से समर्थन चालू होने की उम्मीद है। ओपेरा भी रास्ते में है। और Apple द्वारा सफारी ब्राउज़र का नवीनतम संस्करण कार्यों में भी प्रतीत होता है। ArsTechnica के अनुसार, Microsoft इंटरनेट एक्सप्लोरर के लिए "इस पर विचार कर रहा है"।

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

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

बेझिझक लागू करें अब अपने वेबसाइट कोड में मार्कअप करें। यहां तक ​​कि अगर कोई ब्राउज़र प्रोग्राम नए मार्कअप को नहीं समझता है, तो मानक HTML छवि टैग का उपयोग करने के लिए एक कमबैक आदेश है, गिल्बर्टन लिखते हैं।

छवियाँ: शटरस्टॉक; RICG

9 टिप्पणियाँ ▼