বেস 64 ইমেজ এম্বেড করা

564

বিশুদ্ধভাবে কৌতূহলের বাইরে, কোন 64 ব্রাউজারগুলিতে বেস 64 চিত্র এম্বেডিং কাজ করে? কি আমি উল্লেখ করছি হয় এই ।

আমি বুঝতে পারি এটি বেশিরভাগ জিনিসের জন্য সাধারণত ভাল সমাধান নয়, কারণ এটি পৃষ্ঠার আকারকে কিছুটা বাড়িয়ে তোলে - আমি কেবল কৌতূহলী।

কিছু উদাহরণ:

এইচটিএমএল:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

সিএসএস:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

html base64 browser

— এস পানগর্ন
সূত্র

উদাহরণ সহ একটি পৃষ্ঠা কেন সেটআপ করবেন না, আমরা সকলেই আসল লাইভ টেস্টিং করব এবং এটি এখানে প্রতিবেদন করব

— নীর লেভি

64 বিটগুলি কেবল 6 টি অক্ষর লাগে 2 ^ 6। এনকোডিংয়ের ধরণের উপর নির্ভর করে একটি পাঠ্য স্ট্রিংয়ে সর্বনিম্ন অক্ষরে 8 বিট থাকবে। আপনি কমপক্ষে 25% দক্ষতা আলগা করুন .... আমার দ্রুত পরীক্ষাটি প্রায় 30% লোকসান দেখিয়েছে।

আরও গুরুত্বপূর্ণ বিষয় আপনি সম্ভবত আপনার স্টাফ কার্যকরভাবে ক্যাশে করার ক্ষমতা হারাবেন।

— Hut8

@ ব্রায়ান হ্যাক "প্রচন্ডভাবে" কিছুই বলেন না। আমি গত কয়েক বছর ধরে ব্যক্তিগতভাবে বেস 64 এর চিত্রগুলি বেশ কয়েকবার ব্যবহার করেছি এবং এতে কোনও রেন্ডারিংয়ের সমস্যা নেই। দয়া করে কিছু পরিমাপ সরবরাহ করুন।

— লুকাস লিসিস

@ লুকাসলিজিস আমি বাণিজ্যিক উদ্দেশ্যে গুগল ক্রোমে পরিমাপ করেছি, সুতরাং এখানে সর্বজনীন প্রতিবেদন নেই। অনন্য চিত্রগুলির রেন্ডারিংয়ের জন্য এটি ঠিক হতে পারে তবে আপনাকে বিবেচনা করতে হবে যে ক্যাশে মোটেও কার্যকর হয় না। React.js এ, এটি সম্পূর্ণ সমালোচনা হয় যখন এটি সম্পূর্ণ পুনরায় রেন্ডারিং অংশগুলিতে নিয়ে যায় (উদাহরণস্বরূপ নেভিগেশন পরিবর্তনের ক্ষেত্রে)।

— ব্রায়ান হক

উত্তর:

361

আপডেট: 2017-01-10

ডেটা ইউআরআই এখন সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত। আইই পাশাপাশি সংস্করণ 8 থেকে চিত্রগুলি এম্বেডিং সমর্থন করে।

http://caniuse.com/#feat=datauri

ডেটা ইউআরআইগুলি এখন নিম্নলিখিত ওয়েব ব্রাউজারগুলির দ্বারা সমর্থিত:

গেকো-ভিত্তিক, যেমন ফায়ারফক্স, সিমনকি, জিরো ব্যাঙ্ক, ক্যামিনো, ফেনেক এবং কে-মেলিয়ন

কনকরার, কে-ডি-কে-এর KIO দাস ইনপুট / আউটপুট সিস্টেমের মাধ্যমে

অপেরা (নিন্টেন্ডো ডিএসআই বা ওয়াইয়ের মতো ডিভাইস সহ)

ওয়েবকিট-ভিত্তিক, যেমন সাফারি (আইওএস সহ), অ্যান্ড্রয়েডের ব্রাউজার, এপিফ্যানি এবং মিডোরি (ওয়েবকিট কনকোয়ারের কেএইচটিএমএল ইঞ্জিনের উদ্ভব, তবে ম্যাক ওএস এক্স কিআইও আর্কিটেকচারটি ভাগ করে না তাই বাস্তবায়নগুলি আলাদা), পাশাপাশি ওয়েবকিট / ক্রোমিয়াম-ভিত্তিক, যেমন ক্রোম

ত্রিশূল

ইন্টারনেট এক্সপ্লোরার 8: মাইক্রোসফ্ট সুরক্ষা কারণে কিছু "নাব্য-নাব্যযোগ্য" সামগ্রীতে তার সমর্থন সীমাবদ্ধ করেছে, ইউআরআই-তে কোনও ডেটা ইউআরআই-এ এম্বেড করা জাভাস্ক্রিপ্ট ওয়েব-ভিত্তিক ইমেল ক্লায়েন্টের ব্যবহৃত স্ক্রিপ্ট ফিল্টার দ্বারা ব্যাখ্যাযোগ্য নয় including ডেটা ইউআরআইগুলি সংস্করণ 8 [3] এর 32 কিবি এর চেয়ে কম হওয়া উচিত।

ডেটা ইউআরআই কেবলমাত্র নিম্নলিখিত উপাদান এবং / অথবা বৈশিষ্ট্যগুলির জন্য সমর্থিত [4]:

অবজেক্ট (কেবল চিত্র)

চিত্র

ইনপুট প্রকার = চিত্র

লিংক

সিএসএস ঘোষণাগুলি যা ইউআরএল গ্রহণ করে যেমন ব্যাকগ্রাউন্ড-চিত্র, পটভূমি, তালিকা-শৈলীর ধরণ, তালিকা-শৈলী এবং অনুরূপ।

ইন্টারনেট এক্সপ্লোরার 9: ইন্টারনেট এক্সপ্লোরার 9 এর 32KiB সীমাবদ্ধতা নেই এবং বৃহত্তর উপাদানগুলিতে অনুমোদিত।

দ্য ওয়ার্ল্ড ব্রাউজার: একটি আইই শেল ব্রাউজার যা ডেটা ইউআরআই স্কিমের জন্য অন্তর্নির্মিত সমর্থন করে

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

— ফিলিপ গারবার
সূত্র

হাই ফিলিপ, আইই 8-তে 32 কিবি সাইজের সীমাবদ্ধতার কোনও সমাধান নেই? বেস 64 কি আই 7 এবং আই 6 এ সমর্থিত? যদি না হয়, কোনও কাজের ক্ষেত্র (কোনও আকারের সীমা ছাড়াই)? যদি হ্যাঁ, কোন আকার সীমা? যদি হ্যাঁ, কোন কাজ?

— সেক্সিবিস্ট

এটি দেখুন, সম্ভবত এটি সহায়তা করবে: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under

মানদণ্ড কি কিছু বলে? ভাল উত্তর আপডেটের জন্য কিছু আপভোট =)।

— সিরো সান্তিলি 郝海东冠状病六四事件

আইই 8 সীমাবদ্ধতা - আমি যা পেয়েছি তা হ'ল আই 8 এর এম্বেড ইমেজ সর্বাধিক অক্ষরের সীমা 32,768 ( প্রতি মাইক্রোসফ্ট ) এবং আমার এম্বেড থাকা চিত্রটির মাত্র 35,000 এরও বেশি ছিল। সুতরাং যখন background-imageসিএসএস সম্পত্তি ( url(...embedded image) আইই 8-তে লোড করার চেষ্টা করেছিল, কারণ চরিত্রের সীমাটি ছাড়িয়ে গিয়েছিল, classসেই সম্পত্তিটিতে থাকা সমস্ত কিছুই লোড করা হয়নি। আমি এটির জন্য কোনও স্থির করে নিই না, আমি imgএমবেড করা চিত্রগুলির জন্য ফিরে ফিরে আসি যা সর্বোচ্চ এবং আমার চিত্রগুলি যথাযথভাবে লোড হওয়া ছাড়িয়ে যায়।

— id.ot

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

আমি আপনাকে অনলাইন বেস 64 এনকোডিং / ডিকোডিংয়ের জন্য নিম্নলিখিত সরঞ্জামগুলি ব্যবহার করতে স্বীকার করছি:

ডেটা ইউআরএল হিসাবে ফর্ম্যাট করতে "ডেটা URL হিসাবে ফর্ম্যাট করুন" বিকল্পটি চেক করুন Check

— ব্রিগেড অ্যাডার
সূত্র

বেস 64 এ এনকোড করার জন্য আপনার কোনও অনলাইন সরঞ্জামের প্রয়োজন নেই। পরিবর্তে আপনি লিনাক্স বা ম্যাক ওএস এক্সে বেস 64 কমান্ড লাইন সরঞ্জামটি ব্যবহার করতে পারেন: প্রতিধ্বনি "ডেটা: চিত্র / jpeg; বেস64," $ (বিড়াল file.jpg | বেস64)

— সিস্ট্রয়ে

আমি কী ব্যবহার করতে পারি ( http://caniuse.com/#feat=datauri ) IE তে কয়েকটি সমস্যা সহ প্রধান ব্রাউজারগুলিতে সমর্থন দেখায়।

— kehers
সূত্র