सबसे अच्छा अभ्यास- वेबसाइट पर छवियों को संभालना

Question

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

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

अन्य विचार सिर्फ एकल छवि को संग्रहीत करना है, लेकिन क्लाइंट की सेवा करने से पहले इसे प्रोग्रामेटिक रूप से आकार देना है। क्या किसी ने ऐसा किया है और कुछ और मशीन चक्रों के अलावा ट्रेडऑफ क्या हैं? आप ग्राहक को स्मृति में एक अस्थायी छवि कैसे पारित करते हैं (कोई URL नहीं है)?

Answer 1

मैं यूके स्थित ट्रैवल कंपनी के लिए लीड डेवलपर हूं। जिन परियोजनाओं को मैंने लागू किया था, उनमें से एक हमारी छवि लाइब्रेरी का एक वेब संस्करण था जिसे हमारी साइट के लिए फोटोग्राफी प्रदान करने के लिए स्वचालित रूप से क्वियर किया जा सकता है। इसमें लगभग 150k छवियां शामिल हैं, जिनमें से लगभग 60-70k वेबसाइट (उच्चतम रेटेड) के लिए उपलब्ध हैं।

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

हम एक डायनामिक आकार वाले मॉडल में चले गए, जिसमें हम किसी भी छवि के यूआरआई में चौड़ाई और / या ऊंचाई के मापदंडों को जोड़ सकते हैं, ताकि वह उस आकार में मक्खी पर रेंडर हो सके। हम आकार की छवि को कैश करते हैं (एमडी 5 हैश का उपयोग यूआरआई फ़ाइलनाम के रूप में)।

छवि # 12345 प्राप्त करने के लिए (हमारी छवियों को एक db के माध्यम से प्राप्त किया गया है, लेकिन आप इसे 200 पथ में बदल सकते हैं) चौड़ाई 200 और jpg गुणवत्ता 80%, URI प्रारूप होगा:

http://images.domain.com/?imageid=12345&w=200&q=80

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

हम यह सब .net के साथ कर रहे हैं, हालांकि मैंने एक PHP छवि आकार स्क्रिप्ट भी लिखी है जो समान काम करती है।

आशा है कि मदद करता है, एडम

Comments

मेरे लिए मज़ेदार बात यह है कि "प्रत्याशा का आकार बदलना" वास्तव में, कैशिंग का एक रूप है - बस एक अत्यंत आदिम और सीमित। पहले अनुरोध के बाद कैशिंग सामान्य दृष्टिकोण है, और - आमतौर पर - बेहतर। अपवाद तब है जब आप अन्यथा डेटा के विशाल संस्करणों के साथ एक ही बार में व्यवहार करेंगे , जो शायद यहाँ नहीं है।

— आरोह

शानदार @Adam (यह मेरी सबसे अच्छी यूके-स्पीक है), विचारशील पोस्ट के लिए धन्यवाद। मैं जा रहा हूँ।

— स्टीव

Answer 2

ImageProcessor

Imageprocessor C # में लिखा गया एक हल्का, एक्स्टेंसिबल लाइब्रेरी है, जो आपको .NET का उपयोग करके ऑन-द-फ्लाई छवियों को हेरफेर करने की अनुमति देता है।

मक्खी पर आकार देना:

<!--Automatic height based on width-->
http://your-image?width=600
<!--Automatic width based on height-->
http://your-image?height=250
<!--Both dimensions specified-->
http://your-image?width=600&height=250
<!--Both dimensions specified with the image anchored to the top-->
http://your-image?width=600&height=250&anchor=top
<!--Height ratio passed for automatic scaling-->
http://your-image?width=600&heightratio=0.416
<!--Width ratio passed for automatic scaling-->
http://your-image?widthratio=2.4&height=250
<!--Background color added to padded image-->
http://your-image?width=600&height=250&bgcolor=fff  

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

Answer 3

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

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

Answer 4

एडम ने जो उल्लेख किया है, उस पर थोड़ा बदलाव:

(1) एक कस्टम त्रुटि पेज (छवियों के लिए नियम) बनाएं

(2) छवि फ़ाइल नाम की संरचना होनी चाहिए:

ImageId_Width_Height_Quality

एकमात्र अपवाद मूल छवि है और इसका नाम होना चाहिए:

ImageId_Original

(३) फ़ाइल अपलोड पर जैसे: १२४५_ऑरिजिनल -> १२४५_ * के साथ सभी फाइलें हटा दी जानी चाहिए

(४) कस्टम एरर पेज (यह मानते हुए कि १२४५_ ऑरिजिनल एक्जिस्ट) को गतिशील रूप से अनुरोधित इमेज फाइल बनाना चाहिए: जैसे

1245_250_400_80.jpg

और यह भी पहली बार दौर की सेवा।

प्रभावी रूप से एक नई छवि अपलोड करने से कैश शुद्ध हो जाता है।