ইমেজ অপটিমাইজেশন এবং সার্ভিং
ছবি ছাড়া কোন ওয়েব পেজ দেখেছেন? দেখতেই পারেন, তবে ইমেজ ছাড়া ওয়েবপেজ আজকাল কল্পনা করা একটু কষ্টকর। ইমেজ এর চেয়ে ভাল ইন্টার্যাকশন মিডিয়াম আজও আবিষ্কার হয়নি। একটা ছবি কয়েক হাজার শব্দ বলে দিতে পারে এক মূহূর্তেই। একটা ছবি কখনো বলে দেয় জীবনের অনেক না জানা গল্প।
যাউক গা, লেখক স্বত্তাটা আবার জাইগা উঠতাছিলো। ঐটারে মাটি চাপা দিয়ে কামের কথা কই ! আপনেরা কেউ আজাইরা এই পোষ্ট তো পড়বেন না, কামের জিনিস জানার লাইগ্যাই পড়বেন।
তো সব দিয়ে কাজের কথায় আসি। আপনি কি অমানুষ? মায়া দয়া নাই মনে? একটা ওয়েবপেজে একগাদা ইমেজ দিয়ে রাখছেন, তাও আবার ইয়া বড় সাইজের, কেমনে পারলেন এমন একটা নৃশংস কাজ করতে? মনে এট্টূও মায়া দয়া নাই? দেশে থ্রিজি আসছে বইলা কি আপনি ভাবছেন সব মাফ? কি মনে করছেন নিজেরে? যে দামে আর যে ষ্টাইলে থ্রিজি আসছে, তাতে আপনার সাইট যে মাইন্যকার চিপায় পড়ে ছাইড়া দে মা কাইন্দা বাঁচি করতেছে, বুঝতেছেন?
আমি দয়ালু মানুষ, ইউজারদের কষ্ট সইতে পারিনা। তাই আপনারে অমানুষ থেকে মানুষ বানানোর কাজটা আমিই নিলাম। আসেন, কাজে নামি !
কয়টা ইমেজ দিছেন?
তিরিং বিড়িং ছাইড়া, সোজা কথা বলেন, কয়টা ইমেজ দিছেন? ইমেজ ব্যবহারের সময়, একটা জিনিস অবশ্যই মাথায় রাখতে হবে, যেটুকু দরকার, সেটুকুই করতে হবে। অতিরিক্ত ইমেজ শুধু সমস্যা নয়, মহা সমস্যা। খেয়াল রাখতে হবে,
- অনেককে দেখা যায়, বাহারী ফন্টে অনেকে লেখা ফটোশপে ইমেজ আকারে বানিয়ে পেজে দিয়ে থাকে। এমনটা করার কোন মানে নেই, ফন্ট ফেস এর যুগে আপনি চাইলেই সেই ফন্টটি আপনার সাইটে ব্যবহার করতে পারবেন। এক্ষেত্রে সুবিধে হলো একই ফন্টের নানা লেখা একবার ফন্ট লোড করেই দেখাতে পারবেন। সে জন্য আলাদা আলাদা ইমেজের প্রয়োজন নেই।
- অনেক সময় আইকন এর জন্য আমরা পিচ্চি পিচ্চি একাধিক ইমেজ ব্যবহার করি। করবেন না। আইকন এর দরকার হলে, fontawesome অথবা icomoon.io এ চলে যান। ফন্ট মাধ্যমে আইকন ব্যবহারের মজাই আলাদা। কেন, সেটা অন্য একদিন ব্যাখা করবো। তবে আমার ধারনা ভাল করে এগুলো দেখলে আপনি নিজেই বুঝতে পারবেন।
- অনেকে গ্রাডিয়েন্ট এর জন্য ইমেজ ব্যবহার করেন। কি দরকার? আপনি ষ্ট্যাইলশিট এর মাধ্যমেই গ্রাডিয়েন্ট তৈরী করতে পারবেন। বরং অনেক ভালো ভাবে। বিশ্বাস না হলে নিজেই চেক করে দেখুন, পরে এসে না হয় আমাকে এক কাপ চা খাইয়ে যাবেন।
কি কি বিষয় খেয়াল রাখতে হবে?
ওপরে দেখতে পাচ্ছেন হয়তো, যাচ্ছেতাই বাংলা ব্যবহার করেছি। এখ শুদ্ধ চলত বাংলায় ফিরে যাচ্ছি। ওয়েব পেজে ইমেজ ব্যবহারের ক্ষেত্রে অনেক গুলো ব্যাপারে খেয়াল রাখতে হবে। তবে কি কি খেয়াল রাখতে হবে, জানার আগে আমাদের জানতে হবে, কেন খেয়াল রাখতে হবে।
আপনি হয়তো জানেন, কিংবা জানেন না, গুগল তার সার্চ ইঞ্জিন র্যাংকিং এ যেসব ওয়েবসাইট দ্রুত লোড হয়, তাদের বেশি অগ্রাধীকার দেয়। অর্থাৎ, সব দিক দিয়ে আপনার সাইট নানা গুনে গুনান্বিত হওয়ার পরেও সার্চ ইঞ্জিন র্যাংকিয়ে পেছনে পরে যেতে পারেন, আপনার সাধারন কিছু ভুলের জন্য।
এছাড়া, অপেক্ষা করতে কারই ভালো লাগে না। আপনার ইমেজ ভর্তি পেজ ওপেন করতে যদি ইউজার এর বেশী সময় লাগে, তা থেকে বিরক্তি সৃষ্টি হয়। ফলাফল, হয়তো সে আর কখনোই আপনার সাইটে ঢুকবে না। আর বাস্তবিক অর্থে, আপনি কখনোই চাইবেন না আপনার ভিজিটর কমে যাক।
আরও কিছু বিষয় আছে। যেগুলো আলোচনা করতে গেলে মহাকাব্য হয়ে যাবে, তার মধ্যে আবার কিছু আমি নিজেই ভালো মতো বুঝিনা। তাই সেসব থাক। এখন দেখা যাক কি কি বিষয়ে খেয়াল রাখতে হবে।
- প্রতিটি ইমেজের জন্য সার্ভাররে আলাদা আলাদা রিকোয়েষ্ট পাঠানো হয়। বেশি রিকোয়েষ্ট, বেশি চাপ সার্ভারের ওপর, বেশী লোডিং টাইম। এটা মাথায় রাখতে হবে।
- সাইটে কখনোই র’ইমেজ ব্যবহার করবেন না। ক্যামেরা দিয়ে তুলেই বা ফটোশপ থেকে বানিয়েই সেটা আপলোড করতে যাবেন না। কেন?
উদাহরন স্বরুপ, আপনাকে দেখানো যেতে পারে, দুইটি ছবির তুলনা। প্রথম ছবিটি, র ইমেজ, প্রসেসিং করেই আপলোড করা হয়েছিলো। যার কারনে ছবিটির সাইজ প্রায় দেড় মেগাবাইট, ভালো মাপের সমস্যা।
র’ইমেজঃ https://dl.dropboxusercontent.com/u/72669879/ioritro.com/bg1.png
এবার আসি, আমি সেই একই ছবিটিকে কমপ্রেস করলাম, অপটিমাইজ করলাম, কোয়ালিটিতে যা পরিবর্তন হবে, টা খুব সূক্ষ চোখ ছাড়া ধরা মুশকিল।
অপটিমাইজড ইমেজঃ https://dl.dropboxusercontent.com/u/72669879/ioritro.com/bg1%20%281%29.png
সুপার অপটিমাইজড ইমেজঃ https://dl.dropboxusercontent.com/u/72669879/ioritro.com/v8IeIz6.jpg
অপটিমাইজড ভার্সন এর সাইজ মাত্র ৩৬৬ কিলোবাইট। প্রায় ১২০০ কিলোবাইট কম। অবাক কান্ড? না, সামান্য সতর্কতা। ইমেজ কিভাবে অপটিমাইজ করলাম, সেটা নিয়ে পরবর্তীতে আলোচনায় আসবো। আর সুপার অপটিমাইজড ভার্সনটি দেখুন, এটি জেপিজি ফরম্যাটে এবং মাত্র ৭৯ কিলোবাইট ! নিজেই ভাবুন, কোন ইমেজটি ব্যবহার করবেন !
- সি ডি এন ( কনটেন্ট ডেলিভারী নেটওয়ার্ক ) ব্যবহার করাটা বেশ জরুরী একটা বিষয় // অবশ্যই যদি আপনি দৈনিক কয়েক হাজার ভিজিটর আশা করেন।
সি ডি এন মূলত একটা ডিষ্ট্রিবিউটেড নেটওয়ার্ক,
যেখানে ষ্ট্যাটিক ফাইল গুলো ষ্টোর এবং সার্ভ করা হয়। ব্যাপারটা আসলে কি এবং কেমন সেটা নিয়ে ভবিষৎ এ লেখার ইচ্ছে আছে। আপাতত শর্ট কাতে বুঝিয়ে দেই। থিওরী না বুঝিয়ে আপনাকে প্রাক্টিক্যালী বুঝাই।
ধরুন, আপনি একটা শেয়ার্ড হোষ্টিং ব্যবহার করেন। আপনার সাইটে দৈনিক ৫০ হাজার থেকে ১ লক্ষ ভিজিটর আসে। এখন এই পরিমান লোড আপনার শেয়ার্ড হোষ্টিং নিতে পারলেও, সার্ভিস এর বেহাল অবস্থা হবে, এটা না বললেও চলবে ( সব শেয়ার্ড হোষ্টিং না ), কেন? এই কেন এর উত্তরটা সিম্পল, আপনার সাইটের প্রতিটা ফাইলের জন্য আলাদা আলাদা রিকোয়েষ্ট যায় সার্ভারে, সেখানে এবং দৈনিক মোট ভিজিটর এর সংখ্যা দিয়ে গুন করুন। বিশাল ব্যাপার। যদিও প্রডাকশন লেভেল এর সার্ভারের জন্য সেটা ব্যাপার না। কিন্তু যখন আপনি শেয়ার্ড হোষ্টিং এ আছেন, তখন একই সার্ভারে হিসাব নেই ঠিক কতো সাইট রান করছে, ফলে সার্ভিস এর মান খারাপ হতে থাকে। আবার, আপনার সার্ভার যদি আমেরিকাতে অবস্থিত হয়, তবে একই ইন্টারনেট স্পিড নিয়ে একজন আমেরিকান ইউজার একজন রাশিয়ান ইউজার এর চেয়ে আপনার সাইট বেশি ফাষ্ট ব্রাউজ করতে পারবে। প্রশ্ন হতে পারে, তাদের ইন্টারনেট স্পিড তো একই? একই হলেও, আমেরিকান ইউজার আপনার সার্ভারের তুলনামূলক ভাবে কাছে অবস্থান করছেন, তার রিকোয়েষ্ট রাউট হচ্ছে তুলনামূলক ভাবে কম সময়ে। অপরদিকে, রাশিয়ান আছেন বেশ দূরে। তার রিকোয়েষ্ট কয়েকটা রাউটার/গেটওয়ে পেরিয়ে তারপরে সার্ভারে পৌছায়। ফলে পিং এর পরিমান বেড়ে যায়। ফলাফল, প্রচুর পরিমান প্যাকেট লস এবং লোডিং টাইম বেড়ে যাওয়া।
লাইভ উদাহরন দেখাই,
এই ছবিতে দেখুন, আমি ঢাকার একটা সার্ভারে টেষ্ট করেছি, আমার পিং রেট ৬৪ মিলিসেকেন্ড। এবার আসি অন্য কোথাও,
এই ছবিতে দেখুন, পিং রেটের পরিমান বেড়েছে। এবার টেষ্ট করেছি কোলকাতাতে।
এবারের লোকেশন মায়ানমার, খেয়াল করুন, পিং রেট ভয়াবহ হারে বেড়েছে। কারন ভারতের সাথে আমাদের সাবমেরিন কেবল ছাড়াও আরও ইন্টার্নাল ছয়টি কেবলের সাহায্যে কমিউনিকেশন রাখা হয়, যার কারনে পিং রেট কিছুটা কম। তবে পরিস্থিতি এবং আবহওয়ার ওপরেও অনেক কিছু ডিপেন্ড করে।
এখন যদি আপনার সাইট টি বাংলাদেশী সার্ভারে হোষ্ট করা হয়, তবে দেশের ভেতরের ইউজাররা অসাধারন স্পিড ভাবে, একই ভাবে একজন আমেরিকান ইউজার এর কাছে সাইটটি স্লো মনে হবে। এখন আপনার যদি একটা পার্সোনাল সাইট থাকে, তাহলে সিডিএন নিয়ে এতোটা চিন্তার কোন মানে নেই। কিন্তু এমন কোন সাইট থাকে যেটার দৈনিক ভিজিটর লক্ষাধিক? তাহলে আপনাকে সি ডি এন নিয়ে চিন্তা করতে হবে।
সি ডি এন যেটা করে, তারা জিওগ্রাফিক লোকেশন এর ভিত্তিতে পৃথিবীর বিভিন্ন স্থানে সার্ভার বসিয়ে রাখে। একই ডাটা, প্রতিটা সার্ভারে আছে। জিওগ্রাফিক্যালী যে সার্ভার আপনার কাছে এবং পিং কম, আপনাকে সেখান থেকে ডাটা দেওয়া হবে। ধরুন তাদের একটি সার্ভার আমেরিকাতে, অন্যটি সিঙ্গাপুরে। ফলে যারা আমেরিকাতে আছে, তারা আমেরিকান সার্ভার থেকে ডাটা পাবে, যারা বাংলাদেশে আছে তারা সিংগাপুর থেকে। এর প্রধান কারন সিঙ্গাপুর জিওগ্রাফক্যালী আমাদের কাছে এবং একই সাবমেরিন কেবল নেটওয়ার্কের মধ্যে।
তাই আপনার সাইটে যদি আপনি ম্যাসিভ ইউজার এক্সপেক্ট করেন, তাহলে একটা ভালো মানের সি ডি এন নিয়ে নেওয়াটা সময়োপযোগী সিদ্ধান্ত ! [ ইমেজ অপটিমাইজেশন নিয়ে পরবর্তী পর্ব আসবে খুব তাড়াতাড়ি, আজকে এই পর্যন্তই, নিচে রিসোর্স সেকশন দেওয়া হলো, নজর রাখবেন ]
- PNG ইমেজ অপটিমাইজেশনঃ https://tinypng.com/
- JPEG/JPG অপটিমাইজেশনঃ http://jpgoptimiser.com/
- ফ্রী CDN ( ওয়ার্ডপ্রেস ): http://www.wpexplorer.com/free-cdn-services-for-wordpress/
- ফ্রী CDN ( সবার জন্য ) ঃ http://comluv.com/top-3-free-cdn-content-delivery-network-services-for-your-website/