2012-04-24 31 views
7

का उपयोग कर एक स्प्राइट छवि बनाना मेरे पास एक प्रमुख प्रदर्शन समस्या है। समस्या मेरी वेबसाइटों में से एक पर एक स्लाइडर है जो लगभग 180 छवियों को कॉल करता है। उन 180 छवियों में से प्रत्येक को एक व्यक्तिगत ब्राउज़र के माध्यम से एक क्लाइंट ब्राउज़र द्वारा डाउनलोड किया जाता है। वे gifs और jpg का मिश्रण हैं और मैं उन्हें एक छवि में जोड़ना चाहता हूं; अधिमानतः एक jpg पारदर्शिता एक मुद्दा नहीं है। छवियों को एक SQL डेटाबेस में संग्रहीत किया जाता है और एक एमवीसी नियंत्रक के माध्यम से प्रदर्शित होते हैं। मुझे लगता है कि यह स्प्राइट भी एक पारंपरिक जेनेरिक एशक्स हैंडलर के विपरीत एक एमवीसी नियंत्रक के माध्यम से बनाया जा सकता है।ASP.NET

मैंने कुछ googling किया और blog post by Scott Hanselman भर में आया। पोस्ट में बताया गया है कि चेक छवियों को कैसे गठबंधन करना है और आम तौर पर मैं क्या करना चाहता हूं। यह 2005 में लिखा गया था, इसलिए यदि कोई बेहतर तरीका हो तो मैं उत्सुक हूं। मैं किसी अन्य प्रोजेक्ट पर ImageResizer का उपयोग कर रहा हूं। मैंने podcast by Mr. Hanselman की बात सुनी जो आईआईएस और .NET का उपयोग कर छवियों का आकार बदलने के बारे में परियोजना के संस्थापक के साथ बात करता है। मैंने उस पॉडकास्ट से लिया, और मेरा अनुभव, कि .NET और IIS में छवि मैनिपुलेशन अजीब हो सकता है।

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

+1

इससे पहले कि आप सूप की कोशिश करें, अत्याधुनिक, चौथे आयाम कोड में घुमाएंगे, आप हमें पोस्ट करना चाहते हैं, स्कॉट के समाधान को पहले कैसे प्रयास करें, और देखें कि यह आपके लिए काम करता है या नहीं? –

उत्तर

6

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

यदि छवियां 50 केबी के तहत हैं, उदाहरण के लिए, उन्हें स्प्राइट छवियों के रूप में संयोजित करने का अर्थ हो सकता है, लेकिन मैं एक समय में 10 कहने का सुझाव दूंगा। यदि छवियां छोटी हैं, जैसे 5 केबी प्रत्येक, 30 एक समय में उचित होगी।

आप यहाँ बाधाओं की एक श्रृंखला में चिंता करने की मिल गया है के बारे में

  1. HTTP भूमि के ऊपर और समवर्ती कनेक्शन सीमाओं (स्प्राइट छवियों इस के साथ मदद)
  2. सर्वर थ्रूपुट भूमि के ऊपर (सही डिस्क कैशिंग और बढ़त कैशिंग के साथ व्याख्या करने योग्य)
  3. ब्राउज़र प्रतिपादन ओवरहेड (स्प्राइट्स आइकन और छोटे थंबनेल के लिए सबसे अच्छे हैं; उन्हें विशाल नहीं होना चाहिए, इसे 1 मेगापिक्सल के नीचे रखने की कोशिश करें)।

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

यदि आपके पास इन तस्वीरों के लिए आईडी हैं, और डिस्क कैशिंग के साथ गतिशील मार्ग पर जाने की योजना है, तो यह आपके कार्य को काफी सरल बनाता है।

ImageResizer लाइब्रेरी आपको इसकी गतिशील पाइपलाइन और डिस्क कैशिंग प्रणाली में आसानी से 'प्लग इन' करने देगी।

इस मामले में, आप implement IVirtualImageProvider और IVirtualBitmapFile देखेंगे। बिटमैप उत्पन्न करने और पाइपलाइन को बाकी हिस्सों को संभालने के एक साधारण उदाहरण के लिए Gradient plugin देखें।

आपको अपने यूआरएल वाक्यविन्यास को परिभाषित करना होगा और फ़ाइलइक्सिस्ट और गेटफाइल विधियों में इसकी तलाश करनी होगी। कुछ /combine-images.ashx?idlist=34,56,79,23 & dir = क्षैतिज & चौड़ाई = 50 & ऊंचाई = 50 की तरह कुछ।

फिर आपको प्रत्येक छवि को लोड करना होगा, इसे Managed API के साथ बिटमैप उदाहरण में आकार दें, और इसे आवंटित कैनवास पर खींचें।

आपकी अधिकांश बाधा शायद एसक्यूएल से छवियों को खींचने में होगी। यदि आपके पास सर्वर पर सीमित रैम है, तो एक सीरियल दृष्टिकोण एक समानांतर से सुरक्षित हो सकता है (आईई, एसक्यूएल से एक समय में एक छवि प्राप्त करें, आकार बदलें और इसे खींचें, डेटा का निपटान करें, आगे बढ़ें)। यदि आपकी स्रोत छवियों के साथ शुरू करने के लिए छोटे हैं, तो एक बहु थ्रेडेड ऐप्रेच ठीक हो सकता है। बस याद रखें कि इसे डिस्क को कैश करने के बावजूद इसे तेज़ बनाने की आवश्यकता है, क्योंकि अनुरोध 30 सेकेंड के बाद समय-समय पर समाप्त हो जाता है। ठीक से हो गया है, आप एक खाली डिस्क कैश के साथ 2 सेकंड के अंदर एक 10 छवि स्प्राइट की सेवा करने में सक्षम होना चाहिए, इसे कैश करने के बाद 20ms।

यदि यह थोड़ा जबरदस्त लगता है, तो मैं custom plugin development प्रदान करता हूं, लेकिन एक कतार है।

1 फ़ाइल-प्रति-अनुरोध दृष्टिकोण के लिए बहुत सारे फायदे हैं, और यह स्प्राइट बैंडवैगन पर छिपाने से पहले ImageResizer की डिस्क कैश और SqlReader प्लगइन्स को आजमाने के लायक हो सकता है। यह नहीं कह रहा कि यह गलत दृष्टिकोण है, लेकिन असुरक्षित एमवीसी + एसक्यूएल बहुत अधिक ओवरहेड जोड़ सकता है जो योगदान दे सकता है।

7

बस बिल्ली पर एक और हाल ही में अजीब के लिए स्कॉट ब्लॉग पर देखते रहो: http://dotnetslackers.com/articles/aspnet/CSS-Sprites-and-the-ASP-NET-Sprite-and-Image-Optimization-Library.aspx

चीयर्स: http://www.hanselman.com/blog/NuGetPackageOfTheWeek1ASPNETSpriteAndImageOptimization.aspx

स्कॉट मिशेल भी एक पूर्वाभ्यास यहाँ है।

+3

* मुझे ध्यान रखना चाहिए कि मैं आम तौर पर बिल्लियों की झटके को न मानता हूं। – MisterJames

+0

दुर्भाग्यवश मैंने प्रश्न पोस्ट करने से पहले इन्हें पाया। मैं जो करना चाहता हूं वह उससे कम स्तर है। हालांकि धन्यवाद। :-) – craigmoliver