शर्मिंदगी के बिना उत्तरदायी चित्र

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

विशिष्ट साइटों पर, चित्र तीन तरीकों से दिखाई दे सकते हैं।

1. साइट डिज़ाइन (पृष्ठभूमि, बटन आदि) के तत्व बनें।
2. विशेष मॉड्यूल के माध्यम से डाउनलोड करें (उदाहरण के लिए, एक फोटो एल्बम में चित्र)।
3. यह CMS WYSIWYG संपादक (उदाहरण के लिए, लेख के पाठ में) के माध्यम से डाला गया है।

हम एक समाधान प्राप्त करना चाहते थे जो साइट पर एक तरह का "ऐड-ऑन" होगा। ताकि आप उस CMS कोड में न जा सकें, जिसके माध्यम से चित्र साइट पर अपलोड किए जाते हैं, और स्वयं भी अनुकूली चित्र तैयार करने के लिए नहीं।

सबसे पहले एडाप्टिव इमेज का कार्यान्वयन आता है ...

अनुकूली चित्र विधि

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

1. एक छोटी सी जावास्क्रिप्ट डिवाइस की चौड़ाई / ऊंचाई से लेकर कुकीज़ तक का अधिकतम मूल्य लिखती है। यह माना जाता है कि किसी दिए गए आकार से बड़ी तस्वीर का कोई मतलब नहीं है।
2. .htaccess के निर्देश का उपयोग करते हुए, साइट की सभी छवियां php स्क्रिप्ट adaptive-images.php फिर से लिखी adaptive-images.php ।
3. Php स्क्रिप्ट (शैलियों के मीडिया प्रश्नों से संबंधित) में एक अनुमतियों का विन्यास है। कुकीज़ से मान को इस कॉन्फ़िगरेशन से निकटतम मान पर समायोजित किया जाता है। यदि अनुरोधित पथ पर छवि मौजूद है और इसकी चौड़ाई आवश्यक से अधिक है, तो छवि को पिन किया गया है और एक विशेष कैश फ़ोल्डर में रखा गया है (यदि यह पहले संपीड़ित नहीं किया गया है)।
4. स्क्रिप्ट क्लाइंट को चित्र देती है।

अनुकूली चित्र पेशेवरों

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

विपक्ष अनुकूल छवियाँ

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

हम इस पद्धति के लाभों को संरक्षित करना चाहते थे और इस तरह के भयानक दोष से छुटकारा चाहते थे।

हमारा विकल्प

मुख्य विचार: अगर छवि पहले से मौजूद है तो php स्क्रिप्ट को न चलाएं। ऐसा करने के लिए, रीडायरेक्ट के समय अपाचे को इस संकल्प के लिए पिन की गई छवि का नाम पता होना चाहिए। इसका अर्थ है कि रिज़ॉल्यूशन परिभाषा को php से js में स्थानांतरित किया जाना चाहिए। इस प्रकार, जेएस को न केवल डिवाइस की चौड़ाई / ऊंचाई से अधिकतम मूल्य की गणना करनी चाहिए, बल्कि आवश्यक रिज़ॉल्यूशन भी निर्धारित करना चाहिए, और इसे कुकी को लिखा जाना चाहिए।

इसके अलावा, ताकि अपाचे छवि की उपस्थिति की जांच कर सके, उसे उस नियम का पता होना चाहिए जिसके द्वारा संपीड़ित चित्र सहेजे जाते हैं (विशेष रूप से, कैश फ़ोल्डर का नाम), जिसे आमतौर पर php स्क्रिप्ट में परिभाषित किया जाता है।

यहां हम स्पष्ट रूप से थोड़ा लचीलापन खो देते हैं और किसी प्रकार की जानकारी प्राप्त करने की नकल करते हैं।

• अनुमति सरणी को js स्क्रिप्ट में डुप्लिकेट किया जाना चाहिए।
• छवियों को सहेजने के लिए कैश फ़ोल्डर और नियम को .htaccess में डुप्लिकेट किया जाना चाहिए।

क्या निकला

Js-script का संशोधन: adaptive.js

यहां, js, पहले की तरह, डिवाइस की ऊंचाई और चौड़ाई से अधिकतम मूल्य लेता है। निर्धारित करता है कि क्या कोई पिक्सेल घनत्व संशोधक (रेटिना / गैर-रेटिना) है, और इस डेटा के आधार पर कुकी के लिए एक resolution लिखता है।

पुनर्लेखन निर्देश: .htaccess

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

RewriteCond %{REQUEST_URI} ^/upload/iblock/.+\.(?:jpe?g|gif|png)$

नियम केवल /upload/iblock/ निर्देशिका से छवियों पर काम करता है।

RewriteCond %{REQUEST_FILENAME} -f

इसके अलावा, केवल वास्तव में मौजूदा चित्रों पर, मूल के विपरीत।

RewriteCond %{HTTP:Cookie} (^|;\ *)resolution=([1-9][0-9]+)

डिजिटल कुकी resolution ही नियम काम करेगा। यदि नहीं, तो वेब सर्वर मूल छवि देगा।

RewriteRule .* /images_adaptive/%2%{REQUEST_URI} [L]

हम कैश्ड छवियों के साथ फ़ोल्डर में संक्रमण करते हैं, यह मानते हुए कि इस फ़ोल्डर को images_adaptive कहा जाता है। संकल्प और अनुरोधित मूल मार्ग क्या है। यही है, यदि कोई अनुरोध /images/photo.jpg आया है, और उपयोगकर्ता की अनुमति 1024 के रूप में गिना जाता है, तो अनुकूली चित्र पथ /images_adaptive/1024/images/photo.jpg साथ स्थित होगा।

RewriteCond %{REQUEST_URI} ^/images_adaptive/.+\.(?:jpe?g|gif|png)$

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

RewriteCond %{REQUEST_FILENAME} !-f

यदि अभी भी ऐसी कोई फ़ाइल नहीं है, अर्थात, तस्वीर को अभी तक वांछित आकार में पिन नहीं किया गया है (और यहां हम तस्वीर पर बार-बार कॉल करने पर php में अनावश्यक अनुरोधों को मारते हैं)।

RewriteRule .* ai.php [L]

हम अपने php-script के अनुरोध को निर्देशित करते हैं, जो आवश्यक होने पर चुटकी लेंगे, और वांछित चित्र देंगे।

अनुरोध हैंडलर स्क्रिप्ट: ai.php

अनुमति परिभाषा हटा दी गई। आपको यह याद रखने की आवश्यकता है कि इस स्क्रिप्ट में अनुमतियाँ सरणी को adaptive.js में समान रूप से मेल खाना चाहिए, और कैश फ़ोल्डर का पथ .htaccess नियम में उपयोग किए गए से मेल खाना चाहिए।

हमारे कांटे की

• संग्रहीत डेटा की अतिरेक। यदि हमारे पास एक चित्र और 5 वांछित आकार हैं, जिन्हें निचोड़ने की आवश्यकता है, तो सबसे खराब स्थिति में सर्वर सभी 6 छवियों (मूल और 5 प्रतियां) को संग्रहीत करेगा। इसके अलावा, भले ही तस्वीर को पिन करने की आवश्यकता न हो (कहते हैं, यह 300 × 100 है, और न्यूनतम रिज़ॉल्यूशन 480 है), चित्र अभी भी "पिन किया हुआ" होगा, यानी 5 बार कॉपी किया गया। प्रत्येक अनुमति के तहत php के माध्यम से स्टैटिक्स की वापसी से बचने के लिए।
• उत्तरदायी छवि अद्यतन। जब मूल छवि अपडेट की जाती है, तो स्क्रिप्ट हैंडलर को इसके बारे में कुछ भी पता नहीं होगा। यहां किसी को यह सोचना चाहिए कि क्या यह प्रत्येक विशिष्ट मामले के लिए उपयुक्त है, और इससे कैसे निपटना है। समय-समय पर कैश को पूरी तरह से साफ करें, या कुछ और।
• Php, js और .htaccess में सूचना का दोहराव

समाधान आदर्श नहीं हुआ, लेकिन minuses के बावजूद, हमने वांछित परिणाम प्राप्त किया, फ्रंट-एंड डेवलपर्स को अनावश्यक कार्य से मुक्त किया।