ওয়েবসাইটে সেরা চিত্র অনুশীলন - পরিচালনা

Question

আমি একটি পুরানো ইকমার্স সাইট এমভিসি 3 এ পোর্ট করছি এবং ডিজাইনের উন্নতির সুযোগ নিতে চাই। সাইটটিতে বর্তমানে 3 টি আকারে পণ্য চিত্র রয়েছে: থাম্বনেইল, মাঝারি (একটি তালিকার প্রদর্শনের জন্য) এবং জুমযুক্ত বর্ণের জন্য প্রসারিত। এই মুহূর্তে আমাদের কাছে 3 টি আলাদা চিত্র আপলোড করতে হবে যা হুবহু মাপের আকারযুক্ত, 3 টি আলাদা নাম প্রদান করবে যা সাইটের প্রত্যাশার সাথে মিলে যায়, ইত্যাদি, এটি একটি ব্যথা।

আমি কেবলমাত্র 1 টি ফাইল আপলোড করতে চাই, বড়টি, তারপরে সাইটটিকে এটি প্রয়োজনীয় আকারগুলিতে হ্রাস করতে দিন এবং আমি ব্যবহারকারীর পছন্দসমূহ, ফর্ম ফ্যাক্টরের উপর নির্ভর করে থাম্বনেইল এবং তালিকা আকারগুলি পরিবর্তন করতে নমনীয়তা চাই (যেমন মোবাইল, আইপ্যাড , ডেস্কটপ) ইত্যাদির জন্য একই চিত্রের অনেকগুলি অনুলিপি লাগতে পারে। আমার প্রশ্ন হ'ল আপলোডের পরে চিত্রটি হ্রাস করা উচিত এবং কয়েকবার সংরক্ষণ করা উচিত এবং যদি হয় তবে ভাল স্টোরেজ / নামকরণের কনভেনশনটি কী?

অন্য ধারণাটি হ'ল কেবলমাত্র একক চিত্র সঞ্চয় করা কিন্তু ক্লায়েন্টের কাছে এটির আগে এটি প্রোগ্রামিকভাবে আকার পরিবর্তন করুন। কেউ কি এটি করেছে এবং আরও কয়েকটি মেশিন চক্র ছাড়াও ট্রেড অফগুলি কী? আপনি কীভাবে ক্লায়েন্টের কাছে মেমরিতে একটি অস্থায়ী চিত্রটি পাস করবেন (কোনও URL নেই)?

Answer 1

আমি যুক্তরাজ্য ভিত্তিক ভ্রমণ সংস্থার নেতৃত্ব বিকাশকারী। আমি বাস্তবায়িত প্রকল্পগুলির মধ্যে একটি হ'ল আমাদের চিত্র গ্রন্থাগারের একটি ওয়েব সংস্করণ যা আমাদের সাইটের জন্য ফটোগ্রাফি সরবরাহ করতে স্বয়ংক্রিয়ভাবে অনুসন্ধান করা যেতে পারে। এটিতে প্রায় 150k চিত্র রয়েছে, যার মধ্যে প্রায় 60-70k ওয়েবসাইটে (সর্বোচ্চ রেটযুক্ত) উপলব্ধ।

আমরা প্রায় 5 টি আকার নির্ধারণ করে, ফ্লাইটিতে এই আকারের সংস্করণগুলি তৈরি করে এবং এ্যামাজন এস 3 এ সংরক্ষণ করে শুরু করি। দামটি সর্বনিম্ন ছিল তবে অ্যামাজন নিখুঁতভাবে ব্যর্থ হওয়ার জন্য নির্মিত, তাই আমরা প্রায়শই অনুপস্থিত চিত্র দেখতে চাই। আমরা আমাদের সাইটটি যত বেশি উন্নত করেছি, ততই আমরা কেবল পাঁচটি আকারের চিত্র উপলব্ধ থাকায় ঘৃণা করি।

আমরা একটি গতিশীল রাইজাইম মডেলে চলে এসেছি, যাতে আমরা কোনও চিত্রের ইউআরআইতে প্রস্থ এবং / বা উচ্চতার পরামিতিগুলি যুক্ত করতে পারি যাতে এটি ফ্লাইতে সেই আকারে রেন্ডার হয়। আমরা আকার পরিবর্তনকৃত চিত্রটি (ফাইলের নাম হিসাবে ইউআরআই অনুরোধের MD5 হ্যাশ ব্যবহার করে) ক্যাশে করি।

চিত্র পেতে # 12345 (আমাদের চিত্রগুলি একটি ডিবি এর মাধ্যমে পাওয়া যায়, তবে আপনি এটি ফাইলের পাথ দিয়ে প্রতিস্থাপন করতে পারেন) প্রস্থ 200 এবং জেপিজি মানের 80% এ, ইউআরআই ফর্ম্যাটটি হবে:

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

এই সমাধানটি কার্যকর করা সহজ ছিল এবং নির্বিঘ্নে কাজ করেছিল - ওয়েবসাইট দর্শনার্থীদের এমনকি 20-30 চিত্রের পৃষ্ঠাগুলিতে কোনও বিস্মরণীয় বিলম্ব নেই।

আমরা নেট দিয়ে এই সব করছি, যদিও আমি একটি পিএইচপি ইমেজ রাইজাই স্ক্রিপ্টও লিখেছি যা একই জিনিসটি করে।

আশা করি যে সাহায্য করে, আদম

Comments

আমার কাছে মজার বিষয় হ'ল "প্রত্যাশিত আকার পরিবর্তন" আসলে প্রকৃতপক্ষে একধরণের আদিম এবং সীমাবদ্ধ aching প্রথম অনুরোধের পরে ক্যাচিং হ'ল স্বাভাবিক পদ্ধতি এবং approach সাধারণত - আরও ভাল। ব্যতিক্রমটি হ'ল আপনি অন্যথায় একবারে বিশাল আকারের ডেটা নিয়ে কাজ করবেন , সম্ভবত এখানে এটি নয় the

— অ্যারোনআউট

উজ্জ্বল @ অ্যাডাম (এটি আমার সেরা যুক্তরাজ্যের বক্তৃতা), চিন্তাশীল পোস্টের জন্য আপনাকে ধন্যবাদ। আমি বন্ধ করছি.

— স্টিভ

Answer 2

ImageProcessor

ইমেজপ্রসেসর হ'ল একটি হালকা ওজনের, এক্সটেনসিবল লাইব্রেরি যা সি # তে লিখিত হয় যা আপনাকে .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  

ইমেজপ্রসেসর.উইব স্ট্যান্ডার্ড হিসাবে ক্যাশিংয়ের সাথে আসে । যে কোনও প্রক্রিয়াজাত চিত্রটি আপনার পছন্দসই দৈর্ঘ্যের জন্য ব্রাউজার এবং সার্ভারে অবিচ্ছিন্নভাবে ক্যাশে থাকে। সার্ভার ক্যাশে বুদ্ধিমানের সাথে লক্ষ লক্ষ চিত্র সঞ্চয় করে এবং চূড়ান্তভাবে নিজেকে আপডেট করে মূল চিত্র পরিবর্তন হওয়া বা ক্যাশেটির মেয়াদ শেষ হওয়া উচিত।

Answer 3

ধরে নিলাম যে থাম্বনেইলটি মূল চিত্রটির একটি আকার পরিবর্তিত সংস্করণ, তবে আমি মনে করি এটি আপলোড করার সময় করা উচিত, তবে সম্ভবত অন্যান্য প্রসেসকে প্রভাবিত না করার জন্য একটি পটভূমি কাজ হিসাবে নির্ধারিত। আপনি যদি উড়ে যাওয়ার আকার পরিবর্তন করেন তবে নিশ্চিত করুন যে আপনি চিত্রটি ক্যাশে করেছেন।

এই সমস্ত কিছু ধরা পড়লে কিছু চিত্রের সেরা থাম্বনেইল মাস্টারের একটি সহজ আকার নয় ; আপনাকে জুম এবং ফসল এমনভাবে চালাতে হবে যা মানব চালিত- আপনি অটো-রাইজাইজ জিনিসটিতে যেতে চাইতে পারেন, তবে এমন একটি ব্যবস্থা আছে যা এই বিশেষ ক্ষেত্রে ওভাররাইডকে মঞ্জুরি দেয়।

Answer 4

আদম যা উল্লেখ করেছেন তাতে সামান্যতম পরিবর্তন:

(1) একটি কাস্টম ত্রুটি পৃষ্ঠা তৈরি করুন (চিত্রগুলির জন্য নিয়ম)

(2) চিত্র ফাইলের নামগুলির কাঠামোটি হ'ল:

ImageId_Width_Height_Quality

একমাত্র ব্যতিক্রমটি মূল চিত্র এবং নামকরণ করা উচিত:

ImageId_Original

(3) ফাইল আপলোডে যেমন: 1245_ ওরজিনাল -> 1245_ * সহ সমস্ত ফাইল মুছে ফেলা উচিত

(৪) কাস্টম ত্রুটি পৃষ্ঠা (ধরে নেওয়া যে 1245_আরজিনাল উপস্থিত রয়েছে) গতিশীলভাবে অনুরোধ করা চিত্র ফাইলটি তৈরি করা উচিত যেমন:

1245_250_400_80.jpg

এবং প্রথম বার এটি পরিবেশন।

কার্যকরভাবে একটি নতুন চিত্র আপলোড করা ক্যাশে মুছে দেয়।