আমার কি সিএসএস বা এইচটিএমএলে ডেটা / বেস 64 হিসাবে চিত্রগুলি এম্বেড করা উচিত?

Question

সার্ভারে নম্বরগুলির অনুরোধ হ্রাস করার জন্য আমি কিছু চিত্র (পিএনজি এবং এসভিজি) BASE64 হিসাবে সরাসরি CSS এ এম্বেড করেছি। (এটি বিল্ড প্রক্রিয়ায় স্বয়ংক্রিয়ভাবে)

এটার মত:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);

এটি কি একটি ভাল অনুশীলন? এটি এড়ানোর কিছু কারণ আছে? এমন কি কোনও বড় ব্রাউজারের ডেটা ইউআরএল সমর্থন নেই?

বোনাস প্রশ্ন: সিএসএস এবং জেএস এর জন্য এটি করা কি বোধগম্য?

Comments

অনেক লোকই আর আই 7 ব্যবহার করে না এবং সমস্ত ডাউনসাইডের জন্য সত্যিই ভাল উত্সাহ রয়েছে - পরিচালনা করার জন্য কম চিত্র ফাইল! অর্থাত্ যদি আপনার যদি কোনও গাছের উপাদানগুলির জন্য বিশেষ রেখা আঁকার দরকার হয় তবে পুনরায় পুনরায় x বা পুনরাবৃত্ত- y এর সাথে সিএসএসের মধ্যে ক্ষুদ্র কনুই চিত্রগুলি এম্বেড করা অতিরিক্ত চিত্রের ফাইলগুলি সঠিক জায়গায় রয়েছে কিনা তা নিশ্চিত করার প্রয়োজনীয়তা সরিয়ে দেয় (খুব অল্পের সাথে) এই ব্যবহারের ক্ষেত্রে ওভারহেড)

— ডেভএলগার

Answer 1

এটি কি একটি ভাল অনুশীলন? এটি এড়ানোর কিছু কারণ আছে?

আইআই সামঞ্জস্যতা কোনও বিষয় না রাখলে সাধারণত খুব ছোট সিএসএস চিত্রগুলির জন্য যা একসাথে ব্যবহৃত হতে চলেছে এটির জন্য এটি একটি ভাল অনুশীলন, এবং অনুরোধ সংরক্ষণ করা ক্যাশেযোগ্যতার চেয়ে গুরুত্বপূর্ণ saving

এটিতে বেশ কয়েকটি উল্লেখযোগ্য ডাউনসাইড রয়েছে:

• আই 6 এবং 7 এ মোটেই কাজ করে না।

• আইই 8-তে মাত্র 32 কিলোমিটার অবধি রিসোর্সের জন্য কাজ করে । এটিই সীমা যা বেস 64 এনকোডিংয়ের পরে প্রযোজ্য। অন্য কথায়, 32768 টির বেশি অক্ষর নেই।

• এটি একটি অনুরোধ সংরক্ষণ করে, তবে পরিবর্তে এইচটিএমএল পৃষ্ঠাটি ফুটিয়ে তোলে! এবং চিত্রগুলি অপ্রয়োজনীয় করে তোলে। এতে প্রতিটি পৃষ্ঠা থাকা বা স্টাইল শীটটি লোড হওয়ার সাথে সাথে তারা লোড হয়ে যায়।

• বেস 64 এনকোডিং ব্লটগুলির চিত্রের আকার 33% by

• যদি কোনও জিজিপড রিসোর্সে পরিবেশিত হয় তবে data:চিত্রগুলি অবশ্যই সার্ভারের সংস্থানগুলিতে একটি ভয়াবহ স্ট্রেন হতে চলেছে! আকারগুলি খুব কম হ্রাসের সাথে চিত্রগুলি সংকোচনের জন্য traditionতিহ্যগতভাবে খুব সিপিইউ নিবিড়।

Comments

@ মায়ো ইন্টারেস্টিং পয়েন্ট। আমি আশা করি গিজিপ পারফরম্যান্সের জন্য এটি খারাপ, কারণ চিত্রগুলি ইতিমধ্যে ইতিমধ্যে খুব অনুকূলভাবে সংকুচিত হয়। তাদের সংকুচিত করতে সিঙ্গল-ডিজিট শতাংশ লাভের জন্য ভয়াবহ পরিমাণ সিপিইউ স্পেস ব্যয় করে। একটি জেপিজি ফাইল জিজপ করার চেষ্টা করুন এবং আপনি কী বোঝাতে চাইছেন তা দেখতে পাবেন। আমি উত্তরে এটি সম্পাদনা করব

— পেক্কা

আমি জানি যে সঙ্কুচিত চিত্রগুলি গিজিপিং করার উপায় নয়। তবে আমি ভাবছিলাম যে এটি সম্ভবত বেস 64৪ এ আরও কার্যকর। বিশেষত যখন আপনার উত্সটিতে আরও একটি চিত্র থাকে।

— মেও

@ ময়ো না, এটি কোনও অবস্থাতেই বেস 64 এর চেয়ে বেশি কার্যকর হবে না, কারণ অন্তর্নিহিত নিদর্শনগুলি এখনও সংকুচিত চিত্রের ডেটা হবে যা কেবলমাত্র বেস64 স্বরলিপিতে প্রকাশিত হয়।

— পেক্কা

@ মেও আহ, আমি দেখছি এটি IE তে মোটেও কাজ করবে না এবং একই ক্যাশেবিলিটি সমস্যা রয়েছে: আপনি একটি অনুরোধ সংরক্ষণ করুন, তবে প্রতিটি পৃষ্ঠার অনুরোধ আকারে বৃদ্ধি পায়। একটি সিএসএস, এবং একটি জেএস ফাইলের মধ্যে সমস্ত কিছু কম্প্যাক্ট করা সাধারণত সম্ভবত আরও ভাল

— পেক্কা

এটা আছে না যখন আপনি একটি সিএসএস ফাইল চিত্র এম্বেড করছে যেমন প্রশ্ন ইঙ্গিত HTML পাতায় ফোলানো।

— ড্যানিয়েল বিয়ার্ডসলে

Answer 2

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

একটি সাধারণ প্রক্রিয়া ডিজাইন করা অসম্ভব (এবং আসলে বেশ সহজ) নয় যা কোনও ফোল্ডার চিত্রগুলির মধ্য দিয়ে চলে এবং এই ফোল্ডারের সমস্ত চিত্র সহ একটি সিএসএস তৈরি করবে।

এই সিএসএস সম্পূর্ণরূপে ক্যাশে হবে এবং নাটকীয়ভাবে সার্ভারে রাউন্ড ট্রিপগুলি হ্রাস করবে, যা যথাযথভাবে @ মেমডেভলভারের সবচেয়ে বড় পারফরম্যান্সের অন্যতম হিট suggest

অবশ্যই, এটি হ্যাক। কোনো সন্দেহ নেই. স্প্রাইটস হ্যাক হিসাবে একই। নিখুঁত বিশ্বে এটির প্রয়োজন হবে না, ততক্ষণ পর্যন্ত এটির একটি সম্ভাব্য অনুশীলন যদি আপনার যা ঠিক করার দরকার তা হয়:

1. একাধিক চিত্র সহ পৃষ্ঠা যা সহজেই "স্প্রিটযোগ্য" নয়।
2. সার্ভারগুলিতে রাউন্ড ট্রিপ একটি আসল বাধা (মোবাইল ভাবেন) think
3. গতি (মিলিসেকেন্ড স্তর পর্যন্ত) আপনার ব্যবহারের ক্ষেত্রে এটি সত্যই গুরুত্বপূর্ণ।
4. আই 5 এবং আই 6 সম্পর্কে আপনার কোনও যত্ন নেই (যেমন আপনার উচিত, ওয়েবটি এগিয়ে যেতে চান)।

আমার মতে.

Comments

আরও মনোযোগ পেতে এটিকে উজ্জীবিত করা উচিত। অন্যান্য উত্তরগুলি হ'ল আইডিয়া 6 সম্পর্কে তারা কথা বলছেন, যখন আই 8 এই দিনগুলিতে অচল হয়ে পড়েছে ... (এবং তার জন্য ধন্যবাদ)

— হার্টজেল গিনেস

Answer 3

এটি একটি ভাল অনুশীলন না। কিছু ব্রাউজার ডেটা ইউআরআই সমর্থন করে না (যেমন আইই 6 এবং 7) বা সমর্থন সীমিত (উদাহরণস্বরূপ আই 8 এর 32KB)।

ডেটা ইউআরআই অসুবিধাগুলির সম্পূর্ণ বিবরণের জন্য এই উইকিপিডিয়া নিবন্ধটিও দেখুন:

• ডেটা ইউআরআই স্কিম

অসুবিধেও

• ডেটা ইউআরআইগুলি তাদের থাকা ডকুমেন্টগুলি (যেমন সিএসএস বা এইচটিএমএল ফাইল) থেকে আলাদাভাবে ক্যাশে হয় না তাই প্রতিবার থাকা ডকুমেন্টগুলি পুনরায় ডাউনলোড করার সময় ডেটা ডাউনলোড করা হয়।
• প্রতিবার পরিবর্তন করার সময় সামগ্রী অবশ্যই পুনরায় এনকোড করা উচিত এবং পুনরায় এম্বেড করা উচিত।
• ইন্টারনেট এক্সপ্লোরার 7 সংস্করণ (জানুয়ারী 2011 হিসাবে বাজারের প্রায় 15%) এর মাধ্যমে, সমর্থনটির অভাব রয়েছে।
• ইন্টারনেট এক্সপ্লোরার 8 ডেটা ইউআরআইগুলিকে সর্বাধিক 32 কেবি দৈর্ঘ্যে সীমাবদ্ধ করে।
• ডেটা একটি সাধারণ স্ট্রিম হিসাবে অন্তর্ভুক্ত করা হয় এবং অনেকগুলি প্রক্রিয়াকরণ পরিবেশ (যেমন ওয়েব ব্রাউজারগুলি) মেটাডেটা, ডেটা সংক্ষেপণ বা সামগ্রী আলোচনার মতো বৃহত্তর জটিলতা সরবরাহ করতে পাত্রে (যেমন multipart/alternativeবা message/rfc822) ব্যবহার করে সমর্থন না করে not
• বেস 64-এনকোডড ডেটা ইউআরআইগুলি তাদের বাইনারি সমতুল্যের চেয়ে আকারে 1/3 বড়। (তবে, যদি এইচটিটিপি সার্ভার জিজিপ ব্যবহার করে প্রতিক্রিয়াটি সংকুচিত করে তবে এই ওভারহেডটি কমিয়ে ২-৩% করা হয়েছে)
• ডেটা ইউআরআই সুরক্ষা সফ্টওয়্যারটির জন্য সামগ্রী ফিল্টার করা আরও কঠিন করে তোলে।

Comments

সিএসএস প্রতিটি অনুরোধে আবার ডাউনলোড করা হয়? এটি একটি নতুন! এছাড়াও, আপনি যদি নিজের জীবনে কোনও ফাইল সংরক্ষণাগারভুক্ত করেন তবে আপনি খেয়াল করে দেখতে পাবেন যে সংকোচনের হার ২-৩% নয়! যদি আমার ভুল না হয় তবে আমি প্রথম এই কৌশলটি yahoo.com এ প্রয়োগ করা দেখেছি। ... স্পষ্টভাবে ভাল অনুশীলন না!

— স্টেফ্যানচ

@ স্টেফাননিচ এটি যা বলে তা নয়। সংক্ষেপে, "ডকুমেন্টযুক্ত" সিএসএস ফাইলকে বোঝায়।

— ক্রিস্টোফ

Answer 4

আমি প্রায় এক মাস ধরে ডেটা-ইউরি ব্যবহার করছিলাম, এবং আমি কেবল তাদের ব্যবহার বন্ধ করে দিয়েছি কারণ তারা আমার স্টাইলশীটগুলি একেবারে বিশাল করে তুলেছে।

ডেটা-ইউরি আইই / / in এ কাজ করে (আপনাকে কেবল সেই ব্রাউজারগুলিতে একটি এমএইচটিএমএল ফাইল পরিবেশন করতে হবে )।

ডেটা-ইউরি ব্যবহার করে আমি যে সুবিধাটি পেয়েছি তা হ'ল স্টাইলশিটটি ডাউনলোড করার সাথে সাথে আমার পটভূমির চিত্রগুলি রেন্ডার করা হয়েছে, ধীরে ধীরে লোড হওয়ার বিপরীতে আমরা অন্যথায় দেখতে পাই

এটি দুর্দান্ত যে আমাদের কাছে এই কৌশলটি উপলব্ধ রয়েছে তবে আমি ভবিষ্যতে এটি খুব বেশি ব্যবহার করব না। আমি এটি চেষ্টা করার পরামর্শ দিচ্ছি, ঠিক যেন আপনি নিজের জন্য জানেন

Answer 5

আমি চিত্রগুলি একত্রিত করতে এবং অনুরোধগুলিতে সঞ্চয় করতে সিএসএস স্প্রাইট ব্যবহার করতে আরও আগ্রহী। আমি বেস 64 কৌশলটি কখনও চেষ্টা করে দেখিনি তবে এটি স্পষ্টতই আই 6 এবং আই 7 তে কাজ করে না। এছাড়াও এর অর্থ হ'ল যদি কোনও চিত্র পরিবর্তিত হয় তবে অবশ্যই আপনার একাধিক সিএসএস ফাইল না থাকলে পুরো হারিয়ে যাওয়াটি পুনরায় বিতরণ করতে হবে।

Comments

আমার ইতিমধ্যে স্প্রাইট রয়েছে, আমি ভাবছিলাম যে আমি যদি এই পদ্ধতির সাথে আরও আরও অনুকূল করতে পারি।

— মেও

Answer 6

আমার সাধারণ সেরা অনুশীলনগুলি সম্পর্কে কোনও ধারণা নেই তবে আমি কারওর পক্ষে যদি আমি সহায়তা করতে পারি তবে এই ধরণের জিনিসটি দেখতে চাই না। :)

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

এই মুহুর্তে সার্ভারের কাছে প্রচুর অনুরোধ রয়েছে বলে আপনি কী ভাবেন?

Comments

অনুরোধের কারণগুলির সংখ্যা হ'ল বৃহত্তম পারফরম হিটগুলির মধ্যে একটি যদি আপনি প্রথমে চেষ্টা এবং মোকাবেলা করার জন্য পারফেক্ট সম্পর্কে যত্নশীল হন। ইয়াহুর টেক ডেভেলপার দেখুন। yahoo.com/performance/rules.html "পরিবর্তে উপাদানগুলির সংখ্যা হ্রাস করা পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় HTTP অনুরোধের সংখ্যা হ্রাস করে। এটি দ্রুত পৃষ্ঠাগুলির মূল চাবিকাঠি" "

— মেমডেভোপার

Answer 7

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

• ক্ষুদ্র, কারণ বেস 64 এনকোডিং আকার বাড়িয়ে তোলে
• প্রায়শই ব্যবহৃত হয়, কারণ এটি প্রারম্ভিক লোড সময়কে ন্যায্যতা দেয়

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

আরও তথ্য এখানে সংগ্রহ করা হয়েছে: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/