সিএসএসে ব্যাকগ্রাউন্ড ইমেজ ডেটা এমবেড করা বেস 64 যেমন ভাল বা খারাপ অনুশীলন?

Question

আমি গ্রিসমোনকি ইউজার স্ক্রিপ্টের উত্সটি দেখছিলাম এবং তাদের সিএসএসে নিম্নলিখিতটি লক্ষ্য করেছি:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

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

1. এটি পৃষ্ঠার লোডে এইচটিটিপি অনুরোধের পরিমাণ হ্রাস করবে, এইভাবে কর্মক্ষমতা বাড়িয়ে তুলবে
2. যদি কোনও সিডিএন না থাকে, তবে এটি চিত্রের পাশাপাশি কুকিজের মাধ্যমে প্রেরণ করা ট্র্যাফিকের পরিমাণ হ্রাস করবে
3. সিএসএস ফাইল ক্যাশে করা যেতে পারে
4. সিএসএস ফাইলগুলি জিজেপিপড করা যায়

আই 6 ((উদাহরণস্বরূপ) পটভূমির চিত্রগুলির জন্য ক্যাশে সমস্যা রয়েছে তা বিবেচনা করে দেখে মনে হচ্ছে এটি সবচেয়ে খারাপ ধারণা নয় ...

সুতরাং, এটি কি ভাল বা খারাপ অনুশীলন, আপনি কেন এটি ব্যবহার করবেন না এবং চিত্রগুলি এনকোড করার জন্য আপনি কোন সরঞ্জামগুলি ব্যবহার করবেন?

আপডেট - পরীক্ষার ফলাফল

• চিত্র সহ পরীক্ষা করা হচ্ছে: http://fragged.org/dev/map-shot.jpg - 133.6 কেবি

• পরীক্ষার ইউআরএল: http://fragged.org/dev/base64.html

• উত্সর্গীকৃত সিএসএস ফাইল: http://fragged.org/dev/base64.css - 178.1 কেবি

• জিজেআইপি এনকোডিং সার্ভার সাইড

• ফলক আকার ক্লায়েন্টকে প্রেরণ করা হয়েছে (ওয়াইএসএলও উপাদান পরীক্ষা): 59.3 কেবি

• এর ক্লায়েন্ট ব্রাউজারে ডেটা সংরক্ষণ পাঠানো হয়েছে: 74.3 কেবি K

আমার ধারণা, খুব ভাল, তবে এটি ছোট চিত্রগুলির জন্য কিছুটা কম কার্যকর হবে।

আপডেট: পেজস্পিডে কাজ করা গুগলের সফটওয়্যার ইঞ্জিনিয়ার ব্রায়ান ম্যাকক্যাড, ক্রোমডেভসমিট ২০১৩-তে প্রকাশ করেছেন যে সিএসএসে ইউরিসকে তার আলোচনার সময় সমালোচনামূলক / ন্যূনতম সিএসএস সরবরাহ করার জন্য একটি রোধকারী-প্রতিরোধকারী বিরোধী ধরণ হিসাবে বিবেচনা করা হয় #perfmatters: Instant mobile web apps। Http://developer.chrome.com/devsummit/sessions দেখুন এবং এটি মনে রাখবেন - আসল স্লাইড

Comments

কিছু পরীক্ষা চালায়? আপনি আকর্ষণীয় হয়ে উঠবেন যে সংক্ষেপণটি আপনি এ কোডটি এনকোড করে বেস 64 কে কতটা ক্ষতিপূরণ দিতে পারে।

— ডাইকম

পরীক্ষার ফলাফল পোস্ট করে, আমার ব্লগটি টুকরো টুকরো টুকরো করে দেখুন /…

— ক্রিস্টফ

ভাল প্রশ্ন. কেবল এটি যুক্ত করতে চেয়েছিলেন যে এটি আই 7 এবং এর জন্য কাজ করে না। তবে চারপাশে কিছু কাজ আছে। এটি সম্পর্কে একটি সুন্দর নিবন্ধ এখানে jonraasch.com/blog/css-data-uris-in-all- ব্রাউজারগুলি

— মার্টিনএফ

PRO:সেলুলার ডিভাইসে আরও ক্যাশে সীমা যুক্ত করা হচ্ছে ... CON:কিছু চিত্রকে সাধারণ উপস্থাপনের চেয়ে বিষয়বস্তু হিসাবে বিবেচনা করা উচিত এবং এটি CSS ব্যাকগ্রাউন্ড চিত্রগুলির চেয়ে HTML আইএমজি ট্যাগগুলির পক্ষে আরও উপযুক্ত for

— one.beat.consumer

@ দিমিতরক্রিস্টফ: আমি তুলনামূলক স্বাচ্ছন্দ্যের কারণে বেস 64৪ এর সাথে ছোট আইকনগুলি এম্বেড করার অনুরাগী হয়েছি (আক্রমণাত্মক স্প্রিটিংয়ের সাথে তুলনা করার সময়) এবং আকারের ওভারহেড গ্রহণ করতে পেরে আমি খুশি। এটি সর্বদা ক্ষেত্রে হয় না তা নির্দেশ করার জন্য ধন্যবাদ (যেমন gzip বেস 64 এম্বেড পরম সম্পদের আকারের ক্ষেত্রেও ভাল হতে পারে)

— ও

Answer 1

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

যতক্ষণ না বেস 64 এনকোডিং তৈরি করা হচ্ছে:

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp (আপলোড)
• http://www.greywyvern.com/code/php/binary2base64 (নীচে ছোট টিউটোরিয়ালগুলির লিঙ্ক থেকে)

Comments

কমের মধ্যে

— লুক পৃষ্ঠা

আপনি যদি এই চিত্রগুলির জন্য ন্যূনতম সুরক্ষা রাখতে চান তবে এটি একটি ভাল ধারণা যাতে সেগুলিকে * ক্যাশ করা যায় না বা ডান-ক্লিক করে ডাউনলোড করা যায় -> সংরক্ষণ করুন

— ভিএনসিচ

"আপনি যখন নিজের চিত্র এবং শৈলীর তথ্য পৃথকভাবে ক্যাশে করতে চান এটি কোনও ভাল ধারণা নয়" - আলাদা আলাদা .css ফাইলে সমস্ত চিত্র থাকা আপনার আটকাবার কিছুই নেই।

— Magritte

আমার অনুশীলন এবং পরীক্ষাগুলি আপনার বক্তব্য নিশ্চিত করে না। দুঃখিত।

— TomeeNS 26'17

Answer 2

এই উত্তরটি পুরানো এবং ব্যবহার করা উচিত নয়।

1) 2017 এ মোবাইলের গড় বিলম্বিতা খুব দ্রুত। Https://opensignal.com/report/2016/02/usa/state-of-the-momot-network

2) HTTP2 মাল্টিপ্লেক্স https://http2.github.io/faq/#why-is-http2- বহুবিধ

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

নোট করুন যে মোবাইল ব্রাউজারগুলির ক্যাশে করা যায় এমন মোট আকারের ফাইলগুলির সীমাবদ্ধতা রয়েছে। আইওএস ৩.২-র সীমাবদ্ধতাগুলি (ফাইল প্রতি 25K) বেশ কম ছিল, তবে মোবাইল সাফারির নতুন সংস্করণগুলির জন্য আরও বড় (100 কে) পাচ্ছে। সুতরাং ডেটা ইউআরআই অন্তর্ভুক্ত করার সময় আপনার মোট ফাইলের আকারের দিকে খেয়াল রাখতে ভুলবেন না।

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

Answer 3

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

Comments

এটির অর্থ হ'ল ব্যাকগ্রাউন্ড ইমেজটি রেফারেন্স করার জন্য আপনার একটি সিএসএস ক্লাস এবং সেই ইমেজের অফসেটগুলিকে সেই উপাদানটির জন্য ব্যবহার করার জন্য অন্য সিএসএস ক্লাস থাকা উচিত।

— ডানকান বিভার্স

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

— অ্যাডাম টলি

আপনি যদি শব্দার্থক ক্লাসের জন্য শুটিং করছেন এবং চিত্রের ডেটাও একবার চান, আপনার পৃথক স্টাইল থাকতে পারে যা সমস্ত প্রাসঙ্গিক নির্বাচককে তালিকাভুক্ত করে এবং তারপরে প্রতি-নির্বাচক শৈলীতে সংজ্ঞায়িত অফসেটগুলি থাকতে পারে। অবশ্যই, অনেক জায়গায় খুব ছোট চিত্রের জন্য, নির্বাচক তালিকাটি তথ্যের চেয়ে বড় হতে পারে ...

— লিও

একাধিক ক্লাস এড়াতে এবং একবারে কেবল একটি স্প্রিট শীট নির্দিষ্ট করতে, আপনি কোনও গুণাবলীর নির্বাচক ব্যবহার করতে পারেন:[emoji] {background-image: url(data:image/png;base64,qwedfcsfrtgyu/=);} [emoji=happy] {background-position: -20px 0px;}

— চিনোটো ভোকরো

Answer 4

আমি প্রস্তাবিত জিনিসগুলির মধ্যে একটিতে দুটি পৃথক স্টাইলশিট থাকা উচিত: একটি আপনার নিয়মিত শৈলীর সংজ্ঞা সহ এবং অন্যটি যা আপনার চিত্রগুলি বেস 64 এঙ্কোডিংয়ে ধারণ করে।

অবশ্যই ইমেজ স্টাইলশীটের আগে আপনাকে বেস স্টাইলশিটটি অন্তর্ভুক্ত করতে হবে।

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

Comments

তাত্ত্বিকভাবে আমি এটি পছন্দ করি। কেউ কি তার বিরুদ্ধে কোন যুক্তি চিন্তা করতে পারে?

— রব

এটি একটি ভাল ধারণা এবং এখানে এসেছিল কিনা তা জানতে আমি কেবল এটি গুগল করছি। আমার ক্ষেত্রে চিত্রগুলি কেবলমাত্র ইউআই স্টাফ এবং আমি ভাবছিলাম এটি ভাল ধারণা হবে। এটি সিএসএস স্প্রাইট ব্যবহার করার চেয়ে ভাল কিনা তা নিশ্চিত নন তবে আমি মনে করি ভবিষ্যতে আপনি যদি পরিবর্তন করেন তবে এটি পরিচালনা করা আরও সহজ। কারও এর বিপক্ষে কিছু আছে কিনা তা জানতে আগ্রহী?

— ক্রেগ 23

Answer 5

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

ডাব্লু 3 সি মোবাইলের জন্যও এই পদ্ধতির প্রস্তাব দেয় এবং আপনি যদি রেলগুলিতে সম্পদ পাইপলাইন ব্যবহার করেন তবে আপনার সিএসএসকে সংকুচিত করার সময় এটি একটি ডিফল্ট বৈশিষ্ট্য is

http://www.w3.org/TR/mwabp/#bp-conserve-css-images

Comments

ভাল পয়েন্ট রে মোবাইল / প্রতিক্রিয়াশীল যদিও আমি 10% সম্পর্কে নিশ্চিত নই, আপনি কোথা থেকে এই তথ্যটি পাবেন?

— দিমিতর ক্রিস্টফ

এটা সঠিক। যে কোনও মোবাইল ডিভাইসের সবচেয়ে ধীরতম জিনিসটি হ'ল এইচডি সংযোগগুলির খোলা / বন্ধ। এগুলি কমানোর প্রস্তাব দেওয়া হয়।

— রাফায়েল সান্চস

ডাব্লু 3 ফলাফল সত্ত্বেও, কিছু পরীক্ষায় আমি চিত্রগুলির আকার 25% বাড়িয়েছিলাম :(

— ফ্যাব্রিজিও ক্যাল্ডেরান

আমার ধারণা এটি যদি জিপ করা অসম্ভব হয় তবে এটি 33% পর্যন্ত বাড়তে পারে।

— লিয়ন পেলেটিয়ার

মোবাইলে এইচটিপি সংযোগ তৈরির তুলনায় 10% কিছুই নয়

— রাফেল স্যাঞ্চেস

Answer 6

আমি সম্পাদকীয় নন এমন চিত্রগুলির জন্য পৃথক সিএসএস ফাইল তৈরি করার প্রস্তাবের সাথে একমত নই।

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

Answer 7

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

Answer 8

আমি সিএসএস / এইচটিএমএল বিশ্লেষক সরঞ্জামটির একটি অনলাইন ধারণা তৈরি করার চেষ্টা করেছি:

http://www.motobit.com/util/base64/css-images-to-base64.asp

এটা হতে পারে:

• এইচটিএমএল / সিএসএস ফাইলগুলি ডাউনলোড এবং বিশ্লেষণ করুন, href / src / url উপাদানগুলি নিষ্কাশন করুন
• ইউআরএলটিতে সংক্ষেপণ (gzip) এবং আকারের ডেটা সনাক্ত করুন
• মূল ডেটা আকার, বেস 64 ডেটা আকার এবং জিজেপড বেস 64 ডেটা আকারের তুলনা করুন
• URL (চিত্র, ফন্ট, CSS, ...) কে একটি বেস 64 ডেটা ইউআরআই স্কিমে রূপান্তর করুন।
• ডেটা ইউআরআই দ্বারা বাঁচানো যায় এমন অনুরোধের সংখ্যা গণনা করুন

মন্তব্য / পরামর্শ স্বাগত।

Antonin

Answer 9

আপনি পিএইচপি এ এটি এনকোড করতে পারেন :)

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Or display in our dynamic CSS.php file:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

1 That’s sort of a “quick-n-dirty” technique but it works. Here is another encoding method using fopen() instead of file_get_contents():

<?php // convert image to dataURL
$img_source = "feed-icon.gif"; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

সূত্র

Answer 10

সাব্লাইম টেক্সট 2 এর ব্যবহারকারীদের জন্য কিছুটা আনয়ন, এমন একটি প্লাগইন রয়েছে যা বেস 64 কে আমরা এসটি-তে চিত্রগুলি লোড করি।

কল করা চিত্র 2base64: https://github.com/tm-minty/sublime-text-2-image2base64

পিএস: প্লাগইন দ্বারা উত্পন্ন এই ফাইলটিকে কখনও সংরক্ষণ করবেন না কারণ এটি ফাইলটি ওভাররাইট করে এবং ধ্বংস হয়ে যায়।

Answer 11

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

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

উইন্ডোজ 8.1 এর অধীনে বলুন ---

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo

... সেখানে প্রশাসক হিসাবে আপনি আপনার পথে একটি ব্যাচ ফাইলে একটি শর্টকাট স্থাপন করতে পারেন। এই ব্যাচের ফাইলটি একটি পিএইচপি (ক্লিপ) স্ক্রিপ্ট কল করবে।

তারপরে আপনি ফাইল এক্সপ্লোরার একটি চিত্র এবং ডানদিকে ক্লিক করতে পারেন।

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

তারপরে কেবল ক্লিপবোর্ড থেকে ফলাফলটি কেবল আপনার পাঠ্য সম্পাদকের মধ্যে পেস্ট করুন ...

<img src="|">

অথবা

 `background-image : url("|")` 

নিম্নলিখিত অন্যান্য ওএসের জন্য মানিয়ে নেওয়া উচিত।

ব্যাচ ফাইল...

rem @echo 0ff
rem Puts 64 encoded version of a file on clipboard
php c:\utils\php\make64Encode.php %1

এবং আপনার পথে php.exe সহ, এটি একটি php (ক্লিপ) স্ক্রিপ্ট কল করে ...

<?php 

function putClipboard($text){
 // Windows 8.1 workaround ...

  file_put_contents("output.txt", $text);

  exec("  clip < output.txt");

}


// somewhat based on http://perishablepress.com/php-encode-decode-data-urls/
// convert image to dataURL

$img_source = $argv[1]; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);

$finfo = finfo_open(FILEINFO_MIME_TYPE); 
$dataType = finfo_file($finfo, $img_source); 


$build = "data:" . $dataType . ";base64," . $img_string; 

putClipboard(trim($build));

?>

Answer 12

আমি যতদূর গবেষণা করেছি,

ব্যবহার: 1. আপনি যখন একটি এসভিজি স্প্রাইট ব্যবহার করছেন। ২. যখন আপনার চিত্রগুলি কম আকারের হয় (সর্বোচ্চ 200 মিমি)।

ব্যবহার করবেন না: 1. আপনি যখন বড় চিত্র হন। 2. এসভিজি হিসাবে আইকন। তারা ইতিমধ্যে ভাল এবং সংকোচনের পরে gzip হয়।