📊 👩‍👦 🤚🏻 रेटिना के लिए व्यापक साइट की तैयारी 👨🏽‍💻 🦋 💒

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

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

आधा उपाय या एक सरल उपाय
अपाचे समाधान
नग्नेक्स के लिए समाधान

आधा उपाय: पृष्ठभूमि-छवि हैंडलर

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

.elem { background-image: url(elem.png); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { .icon { background-image: url(elem@2x.png); } }

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

रेटिना इंटीग्रेटेड सपोर्ट प्रॉब्लम स्टेटमेंट

स्वयं के लिए, मैंने रेटिना समर्थन के लिए एक साइट के जटिल अनुवाद की समस्या को हल करने के लिए निम्नलिखित मानदंड निर्धारित किए हैं:

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

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

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

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

यह ध्यान में रखा जाना चाहिए कि उच्च रिज़ॉल्यूशन में पहले से डाउनलोड की गई छवियों को सहेजना संभव नहीं होगा, और उपयोगकर्ता के ज्ञान के बिना ऊंचाई और चौड़ाई के मूल्यों को कम करना किसी तरह गलत है। इसलिए, विधि में मौजूदा @ 2x चित्रों के साथ काम करना शामिल होना चाहिए, और उनके बिना।

अपाचे समाधान

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

पहला कदम पृष्ठ टेम्पलेट में एक सरल जेएस स्क्रिप्ट जोड़ना है (अच्छी तरह से, या आपकी एक जेएस फाइलों से जुड़ा हुआ है) ( यह महत्वपूर्ण है कि पृष्ठ सामग्री लोड करने से पहले इस कोड को निष्पादित किया जाता है और किसी भी सीएसएस जिसमें छवियां हैं जिन्हें प्रतिस्थापित करने की आवश्यकता है :

 <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>

जेएस कोड एक कुकी बनाएगा, जिसके अनुसार सर्वर स्क्रिप्ट समझ सकती है कि उपयोगकर्ता किस साइट पर आया था। वर्णित विधियों में से कई में अगला कदम js और CMS लिपियों के माध्यम से पुनर्निर्देशित है, कुकी रिज़ॉल्यूशन का विश्लेषण करते हुए, ग्राफिक के सही संस्करण का उत्पादन करता है। लेकिन हम आसान तरीकों की तलाश नहीं कर रहे हैं और पुनर्निर्देश लागू नहीं करते हैं। .Htaccess या Apache config का उपयोग करके, CMS साइट स्क्रिप्ट के बाहर कुकी हैंडलर स्थापित करें:

 RewriteCond %{REQUEST_URI} ^/images #RewriteCond %{REQUEST_URI} !^/images/excluded RewriteCond %{HTTP_COOKIE} resolution=([^;,]+),2 RewriteCond %{REQUEST_URI} !@2x\.(jpe?g|gif|png)$ RewriteRule ([^.]+)\.(jpe?g|gif|png)$ $1@2x.$2 [L]

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

वर्णित विधि के लाभ:

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

नुकसान:

(इस पद्धति के लेखक के अनुसार), उपयोगकर्ता के इंटरनेट से जुड़ने का तरीका और उसके द्वारा उच्च-रिज़ॉल्यूशन की छवियों को डाउनलोड करने की क्षमता को ध्यान में नहीं रखा गया है;
एक महत्वपूर्ण दोष, मेरी राय में, अपाचे का उपयोग करके एक हाय-रेस छवि को पुनर्निर्देशित करने की आवश्यकता है;
इसके अलावा, मेरे दृष्टिकोण से, एक महत्वपूर्ण समस्या सर्वर पर @ 2x छवियों के लिए जाँच की कमी है।

खुद के लिए, मैंने गैर-मौजूद छवियों के साथ समस्याओं से बचने के लिए विचार किए गए तरीके में सुधार किया।

.Htaccess लाइन में

 RewriteRule ([^.]+)\.(jpe?g|gif|png)$ $1@2x.$2 [L]

द्वारा प्रतिस्थापित किया गया

 RewriteRule ([^.]+)\.(jpe?g|gif|png)$ retina.php?img=$1@2x.$2

एक साधारण php स्क्रिप्ट सर्वर पर अनुरोधित छवि की उपस्थिति को निर्धारित करती है और इसे जारी करती है। यदि छवि फ़ाइल नहीं मिली है, तो स्क्रिप्ट सामान्य (हाई-रेज नहीं) छवि देती है। अनुरोधित डेटा की जाँच के साथ:

 <?php if (!empty($_GET['img']) && mb_substr_count($_GET['img'], '@2x')) { function isImg ($dress) { if (function_exists('exif_imagetype')) $type_file = exif_imagetype ($dress); else { $type_file = getimagesize ($dress); $type_file = $type_file[2]; } //     // 1 = GIF, 2 = JPG, 3 = PNG if (in_array($type_file, array(1,2,3))) { if (type_file==1) header("Content-Type: image/gif"); elseif ($type_file==2) header("Content-Type: image/jpeg"); else header("Content-Type: image/x-png"); header(sprintf('Content-Length: %d', filesize($dress))); return true; } unset ($type_file); return false; } $_GET['img'] = $_SERVER['DOCUMENT_ROOT'].'/'.$_GET['img']; if (file_exists($_GET['img']) && isImg ($_GET['img'])) die (file_get_contents($_GET['img'])); else { $_GET['img'] = str_replace("@2x", "", $_GET['img']); if (file_exists($_GET['img']) && isImg ($_GET['img'])) die (file_get_contents($_GET['img'])); //     readfile(), ..    .   : http://habrahabr.ru/post/151795/ } header("HTTP/1.1 404 Not Found"); //    } else header("HTTP/1.1 403 Forbidden"); ?>

बेशक, इस परिवर्तन ने सर्वर पर लोड बढ़ा दिया, लेकिन मुझे दूसरा समाधान नहीं दिखाई दिया।

नग्नेक्स के लिए समाधान

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

इस पद्धति के विवरण के समय, मैंने साइट टेम्प्लेट के लिए थोड़ा परिवर्तित किया।

तो नया js:

 <script>if ("devicePixelRatio" in window && window.devicePixelRatio > 1) document.cookie='hires=1; path=/';</script>

इस प्रकार, कुकी हायर को केवल तभी सेट किया जाता है जब हमें "उच्च रिज़ॉल्यूशन" चित्रों का एक सेट बनाने की आवश्यकता होती है।

ऊपर वर्णित विधि की कृपा संरक्षित है (स्क्रिप्ट कोड को बदलने के बिना किसी भी साइट पर, प्रतिस्थापन दोनों पृष्ठभूमि सीएसएस और टैग के लिए किया जा सकता है)। लेकिन php स्क्रिप्ट विधि का नुकसान nginx config सेटिंग को दरकिनार कर रहा है:

 if ($http_cookie ~ "hires" ) { set $hires 1; } location ~* ^(.+)@2x.(jpg|jpeg|gif|png)$ { try_files $uri $1.$2 =404; } location ~* ^.+.(jpg|jpeg|gif|png)$ { if ($hires = 1) { rewrite ^(.+).(jpg|jpeg|gif|png)$ $1@2x.$2; } }

इस प्रकार, नगनेक्स स्टैटिक्स के साथ सभी कार्यों का ख्याल रखता है।

और हां, एक महत्वपूर्ण स्पष्टीकरण के लिए धन्यवाद प्रोगिट : इस दृष्टिकोण के साथ, साइट पर सभी चित्रों के लिए चौड़ाई और ऊंचाई निर्दिष्ट करना अनिवार्य है। विशेषताओं के माध्यम से या सीएसएस-गुणों के माध्यम से, और पृष्ठभूमि छवियों के लिए आपको पृष्ठभूमि-आकार निर्दिष्ट करने की आवश्यकता है: चौड़ाई ऊंचाई।

समस्या को हल करने की विधि सैम सेहर्ट विधि द्वारा स्वचालित रूप से सेवा रेटिना कलाकृति पर आधारित है।

यूपी : सभी हैबरसर्स को धन्यवाद, टिप्पणियों द्वारा सुधार किए गए।

रेटिना के लिए व्यापक साइट की तैयारी

आधा उपाय: पृष्ठभूमि-छवि हैंडलर

रेटिना इंटीग्रेटेड सपोर्ट प्रॉब्लम स्टेटमेंट

अपाचे समाधान

नग्नेक्स के लिए समाधान

More articles: