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

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

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

আপনার যদি CSS স্প্রাইটস সম্পর্কে কোন ধারনা না থাকে, তাহলে সম্ভবত এটাই উপযুক্ত সময় জানার এটা কি, কিভাবে কাজ করে এবং কি কি সরঞ্জাম আপনাকে সাহায্য করতে পারে এটা তৈরি এবং ব্যবহার করতে আপনার সাইটে অথবা প্রোজেক্টে। অনেক অনলাইন জেনারেটর CSS স্প্রাইটস তৈরির অফার দিয়ে থাকে, কিন্তু নতুনদের সেগুলো বুঝে উঠতে অনেক সময় বিভ্রান্তিতে পরতে হয়। আর এইজন্যই আমি এই টিপসটি লেখার বিষয়ে উৎসাহিত হই।

কোথায় CSS স্প্রাইটস ব্যবহৃত হয়

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

কিভাবে CSS স্প্রাইটস তৈরি করবেন

দুইটা প্রধান ধাপ আছে CSS স্প্রাইটস তৈরি করার ক্ষেত্রে। প্রথমত আপনাকে অবশ্যই অনেকগুলো ইমেজকে একত্রিত করে একটিমাত্র ইমেজে সংযুক্ত করতে হবে এবং দ্বিতীয়ত আপনাকে অবশ্যই সংযুক্ত ইমেজটি পজিশন করতে হবে।

ইমেজ সংযুক্ত করা

আমরা এখানে একটি সহজ উদাহরণ ব্যবহার করবো। চলুন শুরু করা যাক: আমরা বেশ কিছু সোশ্যাল আইকন ব্যবহার করবো ওয়েবপেজে প্রদর্শনের জন্য এবং সেগুলিকে একত্রিত করে একটিমাত্র ইমেজে সংযুক্ত করবো। আমাদের অবশ্যই ইমেজগুলির আকার জানতে হবে স্প্রাইটস তৈরির জন্য। আমরা একটি উদাহরণ ব্যবহার করবো যেখানে প্রত্যেকটি ইমেজ হবে একি আকারের (30 pixels by 30 pixels)।

এই ইমেজগুলিকে একত্রিত করার জন্য আমরা প্রথমে 200 pixels by 40 pixels এর একটি ইমেজ তৈরি করবো। সেখানে আমরা সোশ্যাল আইকনগুলো অনুভূমিকভাবে সাজাবো উপরের ছবির মতো। আমরা এটা social-sprites.png নামে সংরক্ষণ করবো।

নিচের ছবিতে দেখুন, সংযুক্ত ইমেজটি 200 pixels চওড়া এবং 40 pixels উচ্চতা নিয়ে তৈরি করা হয়েছে। সোশ্যাল আইকনগুলো উপর থেকে 5 pixels গ্যাপ দিয়ে বসানো হয়েছে। বামে ও ডানে 15 pixels করে গ্যাপ রাখা হয়েছে এবং প্রত্যেকটি আইকনের মাঝে 5 pixels করে গ্যাপ রাখা হয়েছে। হিসেবটা হল: উপরে 5 pixels গ্যাপ + আইকনের উচ্চতা 30 pixels + নিচে 5 pixels গ্যাপ = সর্বমোট 40 pixels উচ্চতা। আবার, বামে 15 pixels গ্যাপ + পাঁচটি আইকন 30 pixels করে চওড়া হলে মোট 150 pixels + ডানে 15 pixels গ্যাপ + প্রত্যেকটি আইকনের মাঝে 5 pixels করে গ্যাপ হলে মোট 20 pixels = সর্বমোট 200 pixels চওড়া।

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

পেজে ইমেজ পজিশন করা

এই উদাহরণের জন্য আমরা DIV এর মধ্যে ইমেজগুলোকে ব্যাকগ্রাউন্ড ইমেজ হিসাবে ব্যবহার করবো। তার মানে এই যে আমরা ইমেজগুলো প্রদর্শনের জন্য HTML এ খালি DIV ট্যাগ তৈরি করবো। যদি আমরা ফেসবুক আইকন ওয়েবপেজের যেকোনো জায়গায় প্রদর্শন করাতে চাই, তাহলে ফেসবুকের জন্য একটি CSS ক্লাস তৈরি করবো “icon-facebook” নামে, অথবা আপনার পছন্দমতো যেকোনো নাম দিতে পারেন।

.icon-facebook {
width:30px;
height:30px;
background:url(images/social-sprites.png) -85px -5px;
}

উপরের CSS কোডে ফেসবুক আইকনের width এবং height উল্লেখ করা হয়েছে এবং ব্যাকগ্রাউন্ড এর মধ্যে আমাদের সংরক্ষণ করে রাখা সংযুক্ত ইমেজ social-sprites.png কে উল্লেখ করা হয়েছে। সবশেষে উল্লেখ করা হয়েছে “-85px -5px” অংশ, যেটা দিয়েই মূলত স্প্রাইটস কাজ করে। এটা দ্বারা বোঝানো হচ্ছে যে ইমেজটি প্রদর্শিত হবে 85 pixels X অক্ষ (–85px) বরাবর এবং 5 pixels Y অক্ষ (–5px) বরাবর। যেহেতু আমরা CSS এ ইমেজটির width এবং height উল্লেখ করে দিয়েছি, তাই ইমেজটি বাম হতে 30 pixels প্রদর্শনের পরে আর প্রদর্শিত হবে না, ফলে পাশের ইমেজটি প্রদর্শিত হবার কোন সম্ভাবনা নায়। তাহলে চলুন বাঁকি ইমেজগুলোর CSS ক্লাস তৈরি করে ফেলি:

.icon-linkedin {
width:30px;
height:30px;
background:url(images/social-sprites.png) -15px -5px;
}
.icon-twitter {
width:30px;
height:30px;
background:url(images/social-sprites.png) -50px -5px;
}
.icon-googleplus {
width:30px;
height:30px;
background:url(images/social-sprites.png) -120px -5px;
}
.icon-rssfeed {
width:30px;
height:30px;
background:url(images/social-sprites.png) -155px -5px;
}

এখানে লক্ষণীয় বিষয় হচ্ছে আমরা একি width এবং height ব্যবহার করেছি এবং একি সংযুক্ত ইমেজ social-sprites.png ব্যবহার করেছি, কিন্তু যেটা আমরা পরিবর্তন করেছি সেটা হচ্ছে X অক্ষ এবং Y অক্ষ অংশ। এটা এইজন্য যে আমরা প্রত্যেকটি ইমেজ আইকনের জন্য পৃথক অবস্থান উল্লেখ করেছি, কারন ইমেজ আইকনগুলো CSS স্প্রাইটসে পৃথক অবস্থানে অবস্থান করছে। ভালো করে লক্ষ করলে দেখবেন যেই আইকন X অক্ষ এবং Y অক্ষ বরাবর যেই জায়গায় অবস্থান করছে সেই অবস্থানি উল্লেখ করা হয়েছে।

এখন আমাদের CSS ক্লাস তৈরি করা হয়ে গেছে। সুতরাং, ওয়েবপেজের যেকোনো জায়গায় আমরা আইকনগুলো প্রদর্শন করাতে পারি HTML এ DIV ব্যবহার করে। যদি আমরা ফেসবুক আইকন প্রদর্শন করাতে চায়, তাহলে একটি খালি DIV এর মধ্যে icon-facebook ক্লাস ব্যবহার করতে হবে।

<div class="icon-facebook"></div>

বাঁকি আইকনগুলোর জন্য আমরা একিভাবে খালি DIV এর মধ্যে CSS ক্লাস ব্যবহার করে আইকন প্রদর্শন করাতে পারি।

<div class="icon-linkedin"></div>
<div class="icon-twitter"></div>
<div class="icon-googleplus"></div>
<div class="icon-rssfeed"></div>

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

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

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

টিপসটি সর্বপ্রথম TiPS4BLOG.com এ প্রকাশিত হয়।