কীভাবে কাজ করে : আইকন আর favicon
একটি ছবি রাখুন। আপনি ফিরে যাবেন এমন একটি আর্কাইভ নিয়ে যাতে থাকবে favicon.ico, ট্যাবের আইকনগুলি, iPhone-এর হোমস্ক্রিনের আইকনটি, ইনস্টল করা যায় এমন অ্যাপের আইকনগুলি, আর আপনার পাতায় বসানোর জন্য ঠিক যে লাইনগুলি দরকার সেগুলিও।
একটি ওয়েবসাইটে আইকন বসানো দুই মিনিটের কাজ হওয়ার কথা। আসলে লাগে আলাদা আলাদা মাপের সাতটি ফাইল, এমন একটি পুরনো ফরম্যাট যা আর কোনো সফটওয়্যারই লিখতে জানে না, iPhone-এর জন্য একটি বিশেষ আইকন, আরেকটি যেটিকে Android নিজের আকারে কেটে নেয়, আর পাতার ঠিক জায়গায় বসানোর জন্য গোটা ছয়েক লাইন। এই কারণেই এত favicon বানানোর সরঞ্জামের অস্তিত্ব, আর এই কারণেই তারা সবাই শুরুই করে আপনার লোগোটি চেয়ে।
এটি সেটি চায় না। আপনার ছবিটি পড়া হয়, প্রতিটি মাপে নতুন করে আঁকা হয়, আর আর্কাইভটি ট্যাবের ভিতরেই জোড়া হয়। .ico ফাইলটি বাইট ধরে বাইট বানানো হয়, কারণ কোনো ব্রাউজারই সেটি লিখতে জানে না: এটি যাচাই করে দেখা, আন্দাজ করা নয়।
আপনার উৎসটি যদি একটি SVG হয়, তবে সেটি প্রতিটি মাপে বড় বা ছোট না করে নতুন করে আঁকা হয়। একটি ভেক্টর ছবির সঙ্গে ঠিক এটাই করা উচিত, আর একটি আইকনের সেটের জন্য এটিই সেরা উৎস।
কীভাবে কাজ করে
- আপনার ছবিটি রাখুন। অন্তত 512 পিক্সেল বাহুর একটি বর্গ হলে সবচেয়ে ভালো; SVG আরও ভালো, সেটি প্রতিটি মাপেই পরিষ্কার করে নতুন করে আঁকা হবে।
- বর্গাকার নয় এমন ছবির সঙ্গে কী করা হবে তা বেছে নিন, আর যে আইকনগুলি স্বচ্ছতা সামলাতে পারে না সেগুলিতে সাদা পটভূমি বসবে কি না তাও।
- “বানিয়ে ডাউনলোড করুন”-এ ক্লিক করুন। একটিমাত্র আর্কাইভ নেমে আসে, তাতে নয়টি ফাইল আর একটি নোট, যেখানে বসানোর লাইনগুলি আছে।
গৃহীত ফরম্যাট
এই চারটি পরিবারই হালনাগাদ সব ব্রাউজারে খোলে। SVG-র জায়গাটি আলাদা আর তার সঙ্গে ব্যবহারও আলাদা: সেটিকে বড়-ছোট না করে প্রতিটি মাপে নতুন করে আঁকা হয়।
PNG ছবি (.png)
SVG-র পরেই সেরা পছন্দ: এটি স্বচ্ছতা ধরে রাখে, যা ট্যাবের আইকনের জন্য খুবই জরুরি। অন্তত 512 পিক্সেল বাহু লক্ষ্য রাখুন।
SVG ভেক্টর ছবি (.svg)
আদর্শ উৎস: প্রতিটি মাপ পিক্সেল থেকে বড় না করে আঁকা থেকেই নতুন করে আঁকা হয়। SVG-টিতে নিজের মাপ বা একটি আঁকার এলাকা থাকতে হবে, আর তাতে বাইরের কোনো ফন্ট বা ছবির উল্লেখ থাকা চলবে না, নইলে ব্রাউজার সেগুলি গ্রাহ্যই করে না।
JPEG ছবি (.jpg, .jpeg)
চলে, তবে JPEG-এ স্বচ্ছতা নেই: আপনার আইকনের পটভূমি সবসময়ই চৌকো থাকবে। লোগোর জন্য বরং PNG বা SVG বেছে নিন।
WebP ছবি (.webp)
সব জায়গায় খোলে আর স্বচ্ছতা ধরে রাখে। তৈরি হওয়া আইকনগুলি অবশ্য সবসময়ই PNG: একমাত্র এই ফরম্যাটটিই একটি ব্রাউজারকে লিখতেই হয়, আর একমাত্র এটিকেই সব সিস্টেম একটি .ico-র ভিতরে মেনে নেয়।
এর সীমা
ফাইলপ্রতি 20 মেগাবাইট
আইকনের উৎসের ভারী হওয়ার কোনো কারণই নেই: কুড়ি মেগাবাইটের বেশি হলে সেটি আর লোগো থাকে না, আসল ছবি হয়ে যায়, আর তৈরি হওয়া আর্কাইভটি একই থাকত। সীমাটি একটি ফোনকে অকারণে খাটানো থেকে বাঁচায়।
ছবিপ্রতি প্রায় 1 কোটি 67 লক্ষ পিক্সেল
iPhone আর iPad-এ ক্যানভাসের ক্ষেত্রফল বহুকাল 4096 বাই 4096 পিক্সেলে বাঁধা ছিল, আর তার বেশি হলে জায়গা পাওয়াই ব্যর্থ হয়। তাই সরঞ্জামটি জায়গা চাওয়ার আগেই ক্ষেত্রফল দেখে নেয় আর ভদ্রভাবে ফিরিয়ে দেয়।
বড্ড ছোট উৎসকে ভালো করা যায় না
আপনার ছবির বাহু 512 পিক্সেলের কম হলে বড় আইকনগুলি বড় করে বানানো হবে, তাই ঝাপসা দেখাবে। যে পিক্সেলের অস্তিত্ব নেই তা কোনো সরঞ্জামই বানাতে পারে না, আর এটি কোনো মন্তব্য ছাড়া একটি নরম আইকন ফেরত দেওয়ার বদলে পর্দাতেই আপনাকে কথাটা বলে দেয়।
.ico হাতে জোড়া হয়, তার ভিতরে PNG দিয়ে
কোনো ব্রাউজারই .ico ফাইল লিখতে জানে না: আমরা তা মেপে দেখেছি, আর একটি ক্যানভাসের কাছে এই ফরম্যাটটি চাইলে সে একটি PNG দেয়। তাই কনটেইনারটি তিনটি PNG ছবির চারপাশে বাইট ধরে বাইট বানানো হয়। .ico-র ভিতরে PNG Windows Vista থেকে আর Firefox 9 থেকে মেনে নেওয়া হয়; বাকি ব্রাউজারগুলির জন্য আমরা কেবল ব্যবহারের প্রমাণই পেয়েছি, নির্মাতার কোনো নথি পাইনি, আর কথাটা লিখে রাখাই ভালো মনে করি।
আর্কাইভটি কোনো তারিখ বয়ে চলে না
একটি zip ফাইল স্বাভাবিকভাবে প্রতিটি ফাইলের তারিখ আর সময় জমা রাখে। আর্কাইভটি আপনার সম্পর্কে একমাত্র ওই তথ্যটুকুই বয়ে নিয়ে যেত। তাই আমরা সেখানে একটি বাঁধা তারিখ লিখি, ফরম্যাটটি যতটা পুরনো তারিখ মেনে নেয় ততটাই, আর একই ছবি থেকে বানানো দুটি আর্কাইভ বাইট ধরে বাইট এক হয়।
নড়াচড়া করা ছবি বাতিল হয়
আইকন স্বভাবতই স্থির, আর একটি ক্যানভাসে একটিমাত্র দৃশ্যই থাকে। চুপচাপ একটি নড়াচড়ার প্রথম ছবিটি রেখে দেওয়ার বদলে সরঞ্জামটি থেমে যায় আর কথাটা বলে দেয়।
এই সরঞ্জাম নিয়ে প্রশ্ন
আমার ছবিটি কি কোথাও পাঠানো হয়?
না, আর আমাদের কথায় বিশ্বাস করারও দরকার নেই। F12 বোতাম দিয়ে আপনার ব্রাউজারের ইন্সপেক্টর খুলুন, “Network” ট্যাবে যান, তালিকাটি খালি করুন, তারপর আপনার ছবিটি রাখুন। একটি লাইনও আসে না। আপনি সংযোগও কেটে দিতে পারেন: সরঞ্জামটি চলতেই থাকে, আর্কাইভটিসহ।
ভালো ফল পেতে কোন ছবিটি দেব?
আপনার কাছে থাকলে একটি SVG: তখন প্রতিটি আইকন তার চূড়ান্ত মাপে পরিষ্কার করে নতুন করে আঁকা হয়। নইলে অন্তত 512 পিক্সেল বাহুর একটি বর্গাকার PNG, স্বচ্ছ পটভূমিসহ। অনেক সরু খুঁটিনাটিওয়ালা ছবি এড়িয়ে চলুন: ষোলো পিক্সেল বাহুতে সরু আঁকা একটি দাগ হয়ে যায়। ভালো favicon প্রায় সবসময়ই একটি সরল আকৃতি আর একটি স্পষ্ট বৈসাদৃশ্য।
নয়টি ফাইল কেন, একটি নয় কেন?
কারণ সিস্টেমগুলি একই জিনিস চায় না। ব্রাউজার ট্যাবের জন্য একটি ছোট আইকন চায় আর কাউকে না বলেই সাইটের গোড়ায় একটি favicon.ico খোঁজে। iOS হোমস্ক্রিনের জন্য 180 পিক্সেলের একটি আইকন চায়, আর সেটি স্বচ্ছ হলে কালোর উপরে বসিয়ে দেয়। Android একটি মাস্কেবল আইকন চায়, যেটিকে সে সেই মুহূর্তের আকারে কেটে নেয়। ইনস্টল করা যায় এমন অ্যাপের ম্যানিফেস্ট আরও দুটি চায়। এর একটিও খেয়াল নয়, আর আর্কাইভের নোটটি বলে দেয় কোনটি কোথায় রাখতে হবে।
আর্কাইভে কোনো তারিখ নেই কেন?
কারণ একটি zip ফাইল স্বাভাবিকভাবে প্রতিটি ফাইলের তারিখ আর সময় জমা রাখে, আর আর্কাইভটি আপনার সম্পর্কে একমাত্র ওই তথ্যটুকুই বয়ে নিয়ে যেত। তাই আমরা সেখানে একটি বাঁধা তারিখ লিখি, ফরম্যাটটি যতটা পুরনো তারিখ মেনে নেয় ততটাই। এটি সামান্য একটি খুঁটিনাটি, কিন্তু সঙ্গতিপূর্ণ একটি খুঁটিনাটি: যে সরঞ্জাম কিছুই নেয় না, সে যে ফাইলটি আপনাকে ফেরত দিচ্ছে তাতে আপনার সম্পর্কে কিছু লেখারও কারণ রাখে না। এর একটি সুন্দর পার্শ্বফলও আছে: একই ছবি থেকে বানানো দুটি আর্কাইভ বাইট ধরে বাইট এক হয়।
ব্রাউজার যদি .ico লিখতেই না জানে, তবে আপনারা সেটি বানান কীভাবে?
হাতে। আমরা আন্দাজ না করে আগে যাচাই করে নিয়েছি: একটি ক্যানভাসের কাছে .ico ফরম্যাটটি চাইলে সে কিছু না বলেই একটি PNG দেয়। তাই ফাইলটি বাইট ধরে বাইট জোড়া হয়, আইকনের একটি ডিরেক্টরির হেডার, মাপপ্রতি একটি বিবরণ, আর তার পিছনে পিছনে তিনটি PNG ছবি নিয়ে। এটি গোনা তিরিশ লাইনের কোড, আর এতে তিরিশ বছরের পুরনো একটি ফরম্যাটের জন্য একটি লাইব্রেরি ভিতরে রাখা এড়ানো যায়।
আমার ছবিটি বর্গাকার নয়। কী হবে?
সরঞ্জামটি আপনাকে সতর্ক করে আর বেছে নিতে দেয়। ছবিটি পুরোটা বসালে আপনার গোটা আঁকাই থাকে আর চারপাশে মার্জিন যোগ হয়: লোগোর জন্য প্রায় সবসময়ই এটিই ঠিক পছন্দ, কারণ কিছুই কাটা যায় না। মাঝখান থেকে ক্রপ করলে গোটা বর্গটি ভরে যায় কিন্তু কিনারায় কাটতে হয়, যা আসল ছবির জন্য মানানসই আর লোগোর জন্য খুব কমই।
আইকনগুলি কি স্বচ্ছতা ধরে রাখে?
হ্যাঁ, দুটি ছাড়া, আর সেটি আমাদের পছন্দ নয়। iPhone-এর হোমস্ক্রিনের আইকনটি স্বচ্ছ হলে iOS সেটিকে কালোর উপরে বসায়, আর মাস্কেবল আইকনটিকে Android সিস্টেমের আকারে কেটে নেয়, যা স্বচ্ছতার উপরে যা খুশি তাই দেখায়। তাই এই দুটি সাদা পটভূমি পায়, আর আপনি সেটি বন্ধ করে দিতে পারেন। বাকি সবগুলিই স্বচ্ছ থাকে।
একটি ছবি রাখুন। আপনি ফিরে যাবেন এমন একটি আর্কাইভ নিয়ে যাতে থাকবে favicon.ico, ট্যাবের আইকনগুলি, iPhone-এর হোমস্ক্রিনের আইকনটি, ইনস্টল করা যায় এমন অ্যাপের আইকনগুলি, আর আপনার পাতায় বসানোর জন্য ঠিক যে লাইনগুলি দরকার সেগুলিও।
যাচাই করুনপ্রমাণ, ধাপে ধাপেনেটওয়ার্ক ইন্সপেক্টর দিয়ে যাচাই, প্রতিটি ধাপ আলাদা করে বলা, সঙ্গে স্ক্রিনশট।
কোণছবির কোণএকটি ছবি যা দেখায় তার চেয়ে বেশি বলে। এখানে সেটি দেখা যায়, পরিষ্কার করা যায়, হালকা করা যায়, ক্রপ করা যায়, আর যা কারও দেখার কথা নয় তা ঝাপসা করে দেওয়া যায়।