ইমেজ স্প্রাইটস্ কেন করা হয়
যখন কোন একটা ওয়েব পেজে অসংখ্য ইমেজ থাকে তখন পেজটি স্বভাবিক ভাবেই লোড হতে বেশি সময় লাগে । শুধু তাই নয় প্রতি বার প্রতিটি ইমেজ লোড হওয়ার জন্য সার্ভার রিকোয়েস্ট যায়, ফলে বাড়তি ব্যান্ডওয়াইডথ খরচ খরচ হয়। এক্ষেত্রে ইমেজ স্প্রাইটস এর মাধ্যমে অনেকগুলো ইমেজ একত্রে করে একটা সিঙ্গেল ইমেজ তৈরি করলে মাত্র একবার সার্ভার রিকোয়েস্টেই কাজ হয়ে যায়। ফলাফল হিসেবে বাড়তি ব্যান্ডওয়াইডথ খরচ বন্ধ করা সম্ভব হয়।
ইমেজ স্প্রাইটস্ এর মাধ্যমে প্রদর্শিত চারটি আইকন
<html>
<head>
<title> Gallery</title>
<style>
body{background:#FC9}
#nav li{list-style:none;}
li#s1
{ width:130px; height:130px;
background:url('f1.png') 0 0 ;}
li#s2
{ width:130px; height:130px;
background:url('f1.png') -130px 0;}
li#s3
{ width:130px; height:118px;
background:url('f1.png') -30px -130px ;}
li#s4
{ width:130px; height:115px;
background:url('f1.png') -160px -130px;}
</style>
</head>
<body>
<h2>Full single image.</h2>
<img src="f1.png">
<h2>Sprites image.</h2>
<ul id="nav">
<li id="s1"></li>
<li id="s2"></li>
<li id="s3"></li>
<li id="s4"></li>
</ul>
</body>
</html>
উপরের প্রজেক্টটি তৈরি করার জন্য sprites নামে একটা ফোল্ডার তৈরি করতে হবে । ফোল্ডারটির মধ্যে f1.png ইমেজটি রাখতে হবে। f1.png ইমেজটি এখান থেকে ডাউনলোড করুন। sprites নামে তৈরিকৃত ফোল্ডারের মধ্যেই একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
সম্পূর্ণ প্রজেক্টটি এখান থেকে Zip আকারে ডাউনলোড করুন।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত