স্বচ্ছ চিত্রের জন্য অতি ক্ষুদ্রতম ডেটা ইউআরআই চিত্র

125

স্প্রাইট ব্যবহার করতে সক্ষম হতে এবং কিছু আইকনগুলির জন্য বিকল্প পাঠ্য সরবরাহ করতে আমি পটভূমি চিত্র সহ স্বচ্ছ 1x1 চিত্র ব্যবহার করছি।

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

আমি বুঝতে পারি যে স্প্রাইটের পরিবর্তে প্রকৃত চিত্রগুলির জন্য আমি ডেটা ইউআরআই: গুলি ব্যবহার করতে পারি, তবে যখন চারপাশে ছড়িয়ে ছিটিয়ে পরিবর্তে সবকিছু সিএসএসে রাখা হয় তখন এটি বজায় রাখা আরও সহজ।

css css-sprites

— জ্যাকব রাস
সূত্র

1

ক্যাচিং সেটআপ সহ একটি আসল 1x1 চিত্র ব্যবহার করা ভাল না? আপনার কাছে আরও http অনুরোধ নেই, এবং মোট ডেটাতে চিত্রের url ওভারহেডের ডেটা ইউআরআইয়ের 78 বাইটের চেয়ে ছোট হতে পারে।

— রেডজার্ফ

1

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

— সিঙ্গেলাইজেশন ইলিমিনেশন 23

167

বিভিন্ন স্বচ্ছ জিআইএফ নিয়ে চারপাশে খেলার পরে, কিছু অস্থির হয় এবং সিএসএস ফাঁকির কারণ হয়। উদাহরণস্বরূপ, যদি আপনার একটি সম্ভব হয় <img>এবং আপনি সবচেয়ে স্বল্পতম স্বচ্ছ জিআইএফ ব্যবহার করেন তবে এটি দুর্দান্ত কাজ করে, তবে আপনি যদি চান তবে আপনার স্বচ্ছ জিআইএফ একটি থাকে background-image, তবে এটি অসম্ভব। কোনও কারণে, নীচের মতো কিছু জিআইএফ সিএসএস ব্যাকগ্রাউন্ডগুলি (কিছু ব্রাউজারে) প্রতিরোধ করে।

ছোট (তবে অস্থির - 74 বাইট)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

আমি নীচের হিসাবে সামান্য দীর্ঘ এবং আরও স্থিতিশীল সংস্করণটি ব্যবহার করার পরামর্শ দেব:

Able স্থিতিশীল ⇊ (তবে কিছুটা দীর্ঘ - 78 বাইট)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

অন্য টিপ image/gifহিসাবে, একটি মন্তব্য হিসাবে পরামর্শ বাদ দিবেন না । এটি বেশ কয়েকটি ব্রাউজারে বিভক্ত হবে।

— Layke
সূত্র

1

+1 ধন্যবাদ! আমি লক্ষ্য করেছি এটি কার্যকর হয়। আমি আপনার ডেটা এই প্লাগইনটি তৈরি করতে ব্যবহার করেছি যাতে আমি পটভূমির কভার সহ স্থানীয়ভাবে প্রতিক্রিয়াশীল ধরণের চিত্রগুলি ব্যবহার করতে পারি বা এতে-

— জেসন সেবারিং

1

সংক্ষিপ্তটি কেন "অস্থির"? আমি দেখতে পাচ্ছি যে এটি মাঝেমধ্যে একটি কালো চিত্র সৃষ্টি করে, কেউ যদি কেন তা জানেন তবে আমি কেবল কৌতূহলী।

— jvenema

প্রচুর ব্যথার পরে আমি দেখতে পেয়েছি যে "সংক্ষিপ্ত" সংস্করণটি আসলে পুরানো অ্যান্ড্রয়েড ব্রাউজারগুলিতে (এইচটিসি ওয়ান এস, ওএস 4.1) আমার সাইটে কিছু (সমস্ত নয়) পৃষ্ঠাগুলিতে ব্রাউজারটি ক্র্যাশ করছে।

— ওয়েবসিড

দুর্দান্ত উত্তর কিন্তু এখন পর্যন্ত সবচেয়ে ছোট সম্ভব নয় ।

— জোশ হাবদাস

22

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

চূড়ান্ত দৈর্ঘ্য নির্ভর করে এটি কী দিয়ে জিপ করেছে on

— Adria
সূত্র

3

এসভিজি ব্যবহারের বিরুদ্ধে কি কোনও যুক্তি রয়েছে? কোনও ক্ষেত্রেই এটি একটি ভাল ধারণা নয়?

— কাঁপুনি

একটি এসভিজি অনেক ক্ষেত্রেই ভাল, তবে যখন একত্রিত হয় width: auto;, তখন একটি এসভিজি তার পিতামাতার প্রস্থ গ্রহণ করবে। একটি স্থির চিত্র যেমন জিআইএফ বা পিএনজি, যখন একটি নির্দিষ্ট উচ্চতা এবং প্রস্থের অটো দেওয়া হয়, তার দিক অনুপাতটি ধরে রাখবে।

— snazzybouche

16

আমি মনে করি এটি অবশ্যই একটি সংকুচিত স্বচ্ছ 1x1 GIF ফাইল (82 বাইট) হওয়া উচিত:

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

Dopiaza.org ডেটা দিয়ে উত্পন্ন : ইউআরআই জেনারেটর ।

— কারাসজি ইস্তভেন
সূত্র

14

সবচেয়ে ছোট পিএনজি - 114 বাইট:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

— joshcarr
সূত্র

এটি জিমপ ব্যবহার করে সহজেই উত্পাদনের যোগ্য তা উল্লেখযোগ্য। ফলস্বরূপ ফাইলটির আকার 68 বাইট (এতদূর সম্ভব ছোটতম) থাকবে।

— ইসমাইল মিগুয়েল

@ আমিনাহনুরাইনি এটি একটি পিএনজি।

— joshcarr

2

@ আমিনাহনুরাইণী: এই উত্তরটি আপনাকে "এসভিজি" বলে?

— অরবিট

10

এই লোকটি জিআইএফ স্পেকের মাধ্যমে সমস্যাটি ছিন্ন করে। তার জন্য সমাধানটি transparent.gifহবে 37 বাইট:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

তিনি প্রথমে স্বচ্ছতা অপসারণ করে আরও ছোট হয়ে যান, তারপরে রঙিন টেবিল ...

GIF89a স্পেসিফিকেশন

শিরোলেখ (6 বাইট)

বাইটস "জিআইএফ" এবং সংস্করণ নম্বর রয়েছে যা সাধারণত হয় 89a।
লজিকাল স্ক্রিন বর্ণনাকারী (7 বাইট)
খুব বেশি বিশদে না গিয়ে ফাইলটির এই বিভাগটি নিম্নলিখিতটি নির্দেশ করে:
- ফাইলটি আকারে 1x1 পিক্সেল।
- একটি গ্লোবাল রঙের টেবিল রয়েছে।
- গ্লোবাল রঙের টেবিলটিতে 2 টি রঙ রয়েছে, দ্বিতীয়টি ব্যাকগ্রাউন্ড রঙ হিসাবে ব্যবহার করা উচিত।
গ্লোবাল কালার টেবিল (6 বাইট)

রঙ প্রতি 3 বাইট, যথাক্রমে লাল, সবুজ এবং নীল রঙের একটি বাইট থাকে। আমাদের ফাইলে প্রথম রঙটি সাদা এবং দ্বিতীয় রঙ কালো।
গ্রাফিক নিয়ন্ত্রণ এক্সটেনশন (8 বাইট)

রঙ টেবিলের দ্বিতীয় রঙটি স্বচ্ছ হিসাবে বিবেচিত হওয়া উচিত (এটি অ্যানিমেশন প্যারামিটারগুলির জন্যও ব্যবহৃত হতে পারে তবে এই ফাইলে নেই) indicate
চিত্র বর্ণনাকারী (10 বাইট)

একটি জিআইএফ ফাইল আসলে এটির মধ্যে একাধিক "চিত্র" ধারণ করে যা আপনাকে ব্যাকগ্রাউন্ড বর্ণের মতো রঙযুক্ত চিত্রের অংশগুলির জন্য চিত্রের ডেটা নির্দিষ্ট করতে বাধা দেয়। প্রতিটি চিত্রের ব্লকের সামগ্রিক চিত্রের আকারের মধ্যে একটি অবস্থান এবং আকার থাকে। উপরের ফাইলে, অবস্থানটি 0,0 এবং আকারটি 1x1।
চিত্রের ডেটা (5 বাইট)

চিত্রের ডেটাগুলির একটি এলজেডডব্লু-এনকোডড ব্লক। চিত্রটিতে এতে থাকা একক পিক্সেল উপস্থাপন করতে 5 বাইট লাগবে। কম্প্রেশন অ্যালগরিদম খুব ভাল একটি একক বাইট সংক্ষেপে ডিজাইন করা হয়নি।
জিআইএফ ট্রেলার (1 বাইট)

3B( ;ASCII তে) এর একটি হেক্স মান সহ একটি একক বাইট GIF এর সমাপ্তি নির্দেশ করে।

স্বচ্ছ জিআইএফের জন্য প্রয়োজনীয় কাঠামোর উপর ভিত্তি করে, দেখা যাচ্ছে যে 43 বাইটগুলি যতটা ছোট আপনি পেতে পারেন তার কাছাকাছি।

তবে, আমি একটি কৌশলটি আরও ছোট করে তুলতে পেরেছি। এটি স্ট্যান্ডার্ডে উল্লেখ করা হয়েছে যে এটি একটি বৈশ্বিক রঙের টেবিল থাকা .চ্ছিক। অবশ্যই, আপনি কোনও রঙিন টেবিল ছাড়াই জিআইএফ তৈরি করলে কী হয় তা নির্ধারিত।

আপনার যখন কোনও রঙের টেবিল সূচকটি স্বচ্ছ হিসাবে সংজ্ঞায়িত করা হয়, তবে, জিআইএফ ডিকোডারদের মনে হয় না যে আসলে কোনও রঙের টেবিল নেই।

সুতরাং আমি কোনও লজিক্যাল স্ক্রিন বর্ণনাকারীকে পরিবর্তন করে নির্দেশ করেছিলাম যে কোনও গ্লোবাল রঙের টেবিল নেই এবং টেবিলটি নিজেই সরিয়ে ফেললাম, মোট ছয় বাইট সংরক্ষণ করে, ফাইলের আকারটি মাত্র 37 বাইটে নামিয়ে আনলাম।

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

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

সূত্র: দ্য টিনিস্ট জিআইএফ এভার ।

— mckamey
সূত্র

1

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

— ব্রায়ান

9

আপনি নিম্নলিখিত এসভিজি ডেটা চেষ্টা করতে পারেন (60 বাইট):

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

স্বতন্ত্র এসভিজি ফাইলটি দেখতে (62 বাইট):

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

আরো দেখুন:

— kenorb
সূত্র

2

থাকতে পারে আরো করা এনকোড এবং একটি ফেভিকন বা CSS এ ব্যবহার করা contentসম্পত্তি।

— জোশ হাবদাস

6

এটি আমি খুঁজে পাওয়া সবচেয়ে ছোট (26 বাইট):

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

— KarasQ
সূত্র

এটি আই 11 এ কালো আসে।

— tomasz86

4

আমি খালি ছবি পেতে নিম্নলিখিত ডেটা ইউরি ব্যবহার করছি: //:0

— Jurgis
সূত্র

ফায়ারফক্স 44 এবং ইন্টারনেট এক্সপ্লোরার 11 img Alt ট্যাগ দেখায়। আপনাকে হয় উপরের একটি ব্যবহার করতে হবে বা Alt ট্যাগটি সরিয়ে ফেলতে হবে

— 20:41

এটি আরও কার্যকর যে কোনও চিত্রের জন্য একটি অনুরোধ / প্রতিক্রিয়া?

— নিউ এভারেস্ট

যদিও যাচাই হবে না

— লুসিয়ান ডেভিডেস্কু

0

খালি চিত্রের জন্য:

data:null

(এটি অনুবাদ করা হবে src=(unknown))

— T.Todua
সূত্র

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

— brennanyoung