আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

রেসপন্সিভ ছবি

একটি ছবি ১০০০ শব্দের সমান এবং প্রতিটি পৃষ্ঠার অবিচ্ছেদ্য অংশ হল ছবি। তবে, বেশিরভাগ ডাউনলোড করা বাইটের জন্য এগুলিই দায়ী। রেসপন্সিভ ওয়েব ডিজাইনের মাধ্যমে শুধু ডিভাইসের বৈশিষ্ট্য অনুযায়ী লেআউটই পরিবর্তন হয় না, ছবিও পরিবর্তন হয়।

Pete LePage

রেসপন্সিভ ওয়েব ডিজাইন বলতে বোঝায় যে ডিভাইসের বৈশিষ্ট্য অনুযায়ী শুধু লেআউটই নয়, কন্টেন্টও পরিবর্তন হতে পারে। যেমন, হাই রেজোলিউশন (2x) ডিসপ্লেতে হাই রেজোলিউশন গ্রাফিক্স শার্পনেস নিশ্চিত করে। ব্রাউজার ৮০০ পিক্সেল চওড়া হলে, ৫০% চওড়া কোনও ছবি ঠিকঠাক কাজ করতে পারে, কিন্তু সরু ফোনের ক্ষেত্রে এটি অনেক বেশি জায়গা নেয় এবং ছোট স্ক্রিনে ফিট করার জন্য স্কেল ডাউন করার সময় একই ব্যান্ডউইথ ওভারহেড প্রয়োজন হয়।

আর্ট ডিরেকশন

অন্যান্য ক্ষেত্রে, ছবি আরও বেশি পরিবর্তন করতে হতে পারে: অনুপাত পরিবর্তন করা, ক্রপ করা এবং এমনকি সম্পূর্ণ ছবি পরিবর্তন করা। এই ক্ষেত্রে, ছবি পরিবর্তন করাকে সাধারণত আর্ট ডিরেকশন বলা হয়। আরও উদাহরণের জন্য responsiveimages.org/demos/ দেখুন।

রেসপন্সিভ ছবি

আপনি কি জানেন যে কোনও ওয়েব পেজ লোড করার জন্য গড়ে যত বাইট প্রয়োজন হয় তার ৬০%-এর বেশি ছবি দিয়ে তৈরি?

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

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

এটি Udacity-এর মাধ্যমে অফার করা একটি ফ্রি কোর্স

কোর্স করুন

মার্কআপে ছবি

img এলিমেন্টটি শক্তিশালী—এটি কন্টেন্ট ডাউনলোড, ডিকোড এবং রেন্ডার করে—এবং আধুনিক ব্রাউজারগুলি বিভিন্ন ধরনের ছবির ফর্ম্যাট সমর্থন করে। বিভিন্ন ডিভাইসে কাজ করে এমন ছবি যোগ করা ডেস্কটপের থেকে আলাদা কিছু নয় এবং ভাল অভিজ্ঞতা তৈরি করতে শুধুমাত্র কয়েকটি ছোটখাটো পরিবর্তন করতে হয়।

সারাংশ

ছবির জন্য আপেক্ষিক সাইজ ব্যবহার করুন যাতে সেগুলি কন্টেনারের বাইরে না বেরিয়ে যায়।
ডিভাইসের বৈশিষ্ট্যের (আর্ট ডিরেকশন নামেও পরিচিত) উপর নির্ভর করে বিভিন্ন ছবি নির্দিষ্ট করতে চাইলে, picture এলিমেন্ট ব্যবহার করুন।
বিভিন্ন ডেনসিটি থেকে বেছে নেওয়ার সময় কোন ছবি ব্যবহার করা সবচেয়ে ভালো হবে সেই সম্পর্কে ব্রাউজারকে ইঙ্গিত দিতে, img এলিমেন্টে srcset এবং x ডেসক্রিপ্টর ব্যবহার করুন।
আপনার পৃষ্ঠায় যদি মাত্র একটি বা দুটি ছবি থাকে এবং সেগুলি আপনার সাইটের অন্য কোথাও ব্যবহার করা না হয়, তাহলে ফাইলের অনুরোধ কমানোর জন্য ইনলাইন ছবি ব্যবহার করার কথা বিবেচনা করুন।

ছবির জন্য আপেক্ষিক সাইজ ব্যবহার করুন

ছবির প্রস্থ নির্দিষ্ট করার সময় আপেক্ষিক ইউনিট ব্যবহার করতে ভুলবেন না, যাতে সেগুলি ভুলবশত ভিউপোর্ট উপচে না যায়। যেমন, width: 50%; ব্যবহার করলে ছবির প্রস্থ কন্টেনিং এলিমেন্টের ৫০% হবে (ভিউ পোর্টের ৫০% বা আসল পিক্সেল সাইজের ৫০% নয়)।

CSS কন্টেন্টকে তার কন্টেনারের বাইরে যাওয়ার অনুমতি দেয় বলে, ছবি এবং অন্যান্য কন্টেন্টকে কন্টেনারের বাইরে যাওয়া থেকে আটকাতে আপনাকে max- width: 100% ব্যবহার করতে হতে পারে। যেমন:

img, embed, object, video {
    max-width: 100%;
}

img এলিমেন্টে alt অ্যাট্রিবিউটের মাধ্যমে অর্থপূর্ণ বিবরণ দিতে ভুলবেন না; এগুলি স্ক্রিন রিডার এবং অন্যান্য সহায়ক প্রযুক্তিকে প্রসঙ্গ প্রদান করে আপনার সাইটকে আরও অ্যাক্সেসযোগ্য করে তুলতে সাহায্য করে।

উচ্চ DPI ডিভাইসের জন্য `srcset`-এর মাধ্যমে `img` উন্নত করুন

srcset অ্যাট্রিবিউট img এলিমেন্টের আচরণকে উন্নত করে, যার ফলে বিভিন্ন ডিভাইসের বৈশিষ্ট্যের জন্য একাধিক ছবির ফাইল প্রদান করা সহজ হয়। CSS-এর নেটিভ image-set CSS ফাংশনের মতো, srcset ব্রাউজারকে ডিভাইসের বৈশিষ্ট্যের উপর নির্ভর করে সেরা ছবি বেছে নিতে দেয়, যেমন 2x ডিসপ্লেতে 2x ছবি ব্যবহার করা এবং ভবিষ্যতে সীমিত ব্যান্ডউইথ নেটওয়ার্কে 2x ডিভাইসে 1x ছবি ব্যবহার করা।

<img src="photo.png" srcset="photo@2x.png 2x" ...>

যেসব ব্রাউজারে srcset কাজ করে না, সেখানে ব্রাউজার src অ্যাট্রিবিউট দ্বারা নির্দিষ্ট করা ডিফল্ট ছবির ফাইল ব্যবহার করে। এই কারণেই, ডিভাইসের ক্ষমতা যাই হোক না কেন, যেকোনও ডিভাইসে দেখানো যেতে পারে এমন একটি 1x ছবি সবসময় অন্তর্ভুক্ত করা গুরুত্বপূর্ণ। srcset কাজ করলে, কোনও অনুরোধ করার আগে কমা দিয়ে আলাদা করা ছবি/শর্তের তালিকা পার্স করা হয় এবং শুধুমাত্র সবচেয়ে উপযুক্ত ছবিটি ডাউনলোড করে দেখানো হয়।

শর্তে পিক্সেল ঘনত্ব থেকে শুরু করে প্রস্থ ও উচ্চতা পর্যন্ত সবকিছু অন্তর্ভুক্ত করা যেতে পারে, তবে বর্তমানে শুধুমাত্র পিক্সেল ঘনত্বই ভালভাবে কাজ করে। ভবিষ্যতের ফিচারের সাথে বর্তমান আচরণ ব্যালেন্স করতে, অ্যাট্রিবিউটে শুধু ২ গুণ ছবি প্রদান করুন।

`picture`-এর সাথে রেসপন্সিভ ছবিতে আর্ট ডিরেকশন

ডিভাইসের বৈশিষ্ট্যের উপর ভিত্তি করে ছবি পরিবর্তন করতে, যা আর্ট ডিরেকশন নামেও পরিচিত, picture এলিমেন্ট ব্যবহার করুন। picture এলিমেন্টটি ডিভাইসের সাইজ, ডিভাইসের রেজোলিউশন, ওরিয়েন্টেশন এবং আরও অনেক কিছুর মতো বিভিন্ন বৈশিষ্ট্যের উপর ভিত্তি করে একটি ছবির একাধিক ভার্সন প্রদান করার জন্য একটি ঘোষণামূলক সমাধান সংজ্ঞায়িত করে।

মনে রাখবেন: picture এলিমেন্ট ব্রাউজারে আসতে শুরু করেছে। যদিও এটি এখনও প্রতিটি ব্রাউজারে উপলভ্য নয়, আমরা এর শক্তিশালী ব্যাকওয়ার্ড কম্প্যাটিবিলিটি এবং Picturefill পলিফিল-এর সম্ভাব্য ব্যবহারের কারণে এটি ব্যবহার করার সাজেশন দিই। আরও বিবরণের জন্য ResponsiveImages.org সাইট দেখুন।

একাধিক ঘনত্বে কোনও ছবির সোর্স থাকলে অথবা রেসপন্সিভ ডিজাইন অনুযায়ী কিছু ধরনের স্ক্রিনে কিছুটা আলাদা ছবি দেখানোর প্রয়োজন হলে, picture এলিমেন্ট ব্যবহার করুন। video এলিমেন্টের মতো, একাধিক source এলিমেন্ট যোগ করা যেতে পারে, যার ফলে মিডিয়া কোয়েরি বা ছবির ফর্ম্যাটের উপর নির্ভর করে বিভিন্ন ছবির ফাইল নির্দিষ্ট করা সম্ভব হয়।

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

এটি ব্যবহার করে দেখুন

উপরের উদাহরণে, ব্রাউজারের প্রস্থ কমপক্ষে ৮০০ পিক্সেল হলে, ডিভাইসের রেজোলিউশনের উপর নির্ভর করে head.jpg অথবা head-2x.jpg ব্যবহার করা হয়। ব্রাউজার ৪৫০ পিক্সেল থেকে ৮০০ পিক্সেলের মধ্যে হলে, ডিভাইসের রেজোলিউশনের উপর নির্ভর করে head-small.jpg অথবা head-small- 2x.jpg ব্যবহার করা হয়। স্ক্রিনের প্রস্থ ৪৫০ পিক্সেলের কম হলে এবং ব্যাকওয়ার্ড কম্প্যাটিবিলিটির ক্ষেত্রে যেখানে picture এলিমেন্ট কাজ করে না, সেখানে ব্রাউজার img এলিমেন্ট দেখায় এবং এটি সবসময় অন্তর্ভুক্ত করা উচিত।

আপেক্ষিক সাইজের ছবি

ইমেজের চূড়ান্ত সাইজ জানা না থাকলে, ইমেজ সোর্সের জন্য ডেনসিটি ডেসক্রিপ্টর নির্দিষ্ট করা কঠিন হতে পারে। এটি বিশেষ করে সেইসব ছবির ক্ষেত্রে প্রযোজ্য যেগুলি ব্রাউজারের প্রস্থের সাথে সামঞ্জস্যপূর্ণ এবং ব্রাউজারের সাইজের উপর নির্ভর করে ফ্লুইড হয়।

ছবির নির্দিষ্ট সাইজ ও ঘনত্ব দেওয়ার পরিবর্তে, আপনি প্রতিটি ছবির সাইজ উল্লেখ করতে পারেন। এর জন্য ছবির এলিমেন্টের সাইজের সাথে প্রস্থের বিবরণ যোগ করতে হবে। এর ফলে ব্রাউজার অটোমেটিক কার্যকর পিক্সেল ঘনত্ব হিসেব করতে এবং ডাউনলোড করার জন্য সেরা ছবি বেছে নিতে পারবে।

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

এটি ব্যবহার করে দেখুন

উপরের উদাহরণে এমন একটি ছবি দেখানো হয়েছে যা ভিউপোর্ট প্রস্থের অর্ধেক (sizes="50vw") এবং ব্রাউজারের প্রস্থ ও ডিভাইসের পিক্সেল অনুপাতের উপর নির্ভর করে, ব্রাউজার উইন্ডো যত বড়ই হোক না কেন, ব্রাউজারকে সঠিক ছবি বেছে নিতে দেয়। উদাহরণস্বরূপ, নিচের সারণীতে দেখানো হয়েছে যে ব্রাউজার কোন ছবিটি বেছে নেবে:

ব্রাউজারের প্রস্থ	ডিভাইসের পিক্সেল রেশিও	ছবি ব্যবহার করা হয়েছে	কার্যকর রেজোলিউশন
৪০০ পিক্সেল	1	`200.jpg`	১x
৪০০ পিক্সেল	2	`400.jpg`	২x
৩২০ পিক্সেল	2	`400.jpg`	২.৫x
৬০০ পিক্সেল	2	`800.jpg`	২.৬৭ গুণ
640px	3	`1000.jpg`	৩.১২৫x
১১০০ পিক্সেল	1	`800.png`	১.৪৫x

রেসপন্সিভ ছবিতে ব্রেকপয়েন্টের জন্য অ্যাকাউন্ট

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

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

এটি ব্যবহার করে দেখুন

উপরের উদাহরণে, sizes অ্যাট্রিবিউট ছবির সাইজ নির্দিষ্ট করতে একাধিক মিডিয়া কোয়েরি ব্যবহার করে। ব্রাউজারের প্রস্থ ৬০০ পিক্সেলের বেশি হলে, ছবিটি ভিউপোর্ট প্রস্থের ২৫% হয়; এটি ৫০০ পিক্সেল এবং ৬০০ পিক্সেলের মধ্যে হলে, ছবিটি ভিউপোর্ট প্রস্থের ৫০% হয়; এবং ৫০০ পিক্সেলের কম হলে, এটি সম্পূর্ণ প্রস্থ হয়।

প্রোডাক্টের ছবি বড় করার সুবিধা দিন

ঞ. প্রোডাক্টের ছবি বড় করে দেখার সুবিধা সহ Crews ওয়েবসাইট — জে. Crew-এর ওয়েবসাইটে প্রোডাক্টের ছবি বড় করে দেখার সুবিধা।

গ্রাহকরা কী কিনছেন তা দেখতে চান। রিটেল সাইটে, ব্যবহারকারীরা প্রোডাক্টের হাই-রেজোলিউশন ক্লোজ-আপ দেখতে চান যাতে তারা প্রোডাক্টের বিবরণ আরও ভালোভাবে দেখতে পারেন এবং স্টাডিতে অংশগ্রহণকারীরা তা করতে না পারলে হতাশ হন।

ট্যাপ করা যায়, বড় করা যায় এমন ছবির একটি ভালো উদাহরণ J. ক্রু সাইট। একটি অদৃশ্য হয়ে যাওয়া ওভারলে ইঙ্গিত করে যে একটি ছবি ট্যাপ করা যায়, যা একটি জুম করা ছবি প্রদান করে ছবিতে সূক্ষ্ম বিবরণ দৃশ্যমান।

অন্যান্য ইমেজ টেকনিক

কম্প্রেসিভ ছবি

কম্প্রেসিভ ইমেজ টেকনিক সব ডিভাইসে অত্যন্ত কম্প্রেস করা 2x ছবি দেখায়, ডিভাইসের আসল ক্ষমতা যাই হোক না কেন। ছবির ধরন ও কম্প্রেস করার লেভেলের উপর নির্ভর করে, ছবির কোয়ালিটি হয়ত পরিবর্তিত হয়েছে বলে মনে হবে না, তবে ফাইলের সাইজ উল্লেখযোগ্যভাবে কমে যাবে।

এটি ব্যবহার করে দেখুন

জাভাস্ক্রিপ্ট ইমেজ রিপ্লেসমেন্ট

জাভাস্ক্রিপ্ট ইমেজ রিপ্লেসমেন্ট ডিভাইসের ক্ষমতা চেক করে এবং "সঠিক কাজ করে।" আপনি window.devicePixelRatio-এর মাধ্যমে ডিভাইস পিক্সেল অনুপাত নির্ধারণ করতে পারেন, স্ক্রিনের প্রস্থ এবং উচ্চতা পেতে পারেন এবং এমনকি navigator.connection-এর মাধ্যমে কিছু নেটওয়ার্ক কানেকশন স্নিফিং করতে পারেন বা একটি জাল অনুরোধ ইস্যু করতে পারেন। এইসব তথ্য সংগ্রহ করার পরে, আপনি কোন ছবি লোড করবেন তা ঠিক করতে পারবেন।

এই পদ্ধতির একটি বড় অসুবিধা হল যে JavaScript ব্যবহার করার অর্থ হল যে আপনি অন্তত লুক-অ্যাহেড পার্সার শেষ না হওয়া পর্যন্ত ছবি লোড হতে দেরি হবে। এর অর্থ হল, pageload ইভেন্ট ফায়ার না হওয়া পর্যন্ত ছবি ডাউনলোড করা শুরুই হবে না। এছাড়াও, ব্রাউজার সম্ভবত 1x এবং 2x উভয় ছবিই ডাউনলোড করবে, যার ফলে পৃষ্ঠার সাইজ বৃদ্ধি পাবে।

ইনলাইনিং ছবি: রাস্টার এবং ভেক্টর

ছবি তৈরি ও স্টোর করার দুটি মৌলিকভাবে আলাদা উপায় আছে—এবং এটি আপনি কীভাবে রেসপন্সিভভাবে ছবি ডিপ্লয় করবেন তা প্রভাবিত করে।

রাস্টার ছবি — যেমন ফটোগ্রাফ এবং অন্যান্য ছবি, রঙের পৃথক বিন্দুর গ্রিড হিসাবে উপস্থাপন করা হয়। রাস্টার ছবি ক্যামেরা বা স্ক্যানার থেকে আসতে পারে অথবা HTML ক্যানভাস এলিমেন্টের মাধ্যমে তৈরি করা হতে পারে। PNG, JPEG এবং WebP-এর মতো ফর্ম্যাট রাস্টার ছবি স্টোর করার জন্য ব্যবহার করা হয়।

ভেক্টর ইমেজ যেমন লোগো এবং লাইন আর্টকে কার্ভ, লাইন, আকার, ভরাট করার রঙ এবং গ্রেডিয়েন্টের সেট হিসাবে সংজ্ঞায়িত করা হয়। Adobe Illustrator বা Inkscape-এর মতো প্রোগ্রামের সাহায্যে ভেক্টর ইমেজ তৈরি করা যেতে পারে অথবা SVG-এর মতো ভেক্টর ফর্ম্যাট ব্যবহার করে কোডে হাতে লেখা যেতে পারে।

SVG

SVG-এর মাধ্যমে ওয়েব পেজে রেসপন্সিভ ভেক্টর গ্রাফিক্স যোগ করা সম্ভব হয়। রাস্টার ফাইল ফরম্যাটের তুলনায় ভেক্টর ফাইল ফরম্যাটের সুবিধা হল, ব্রাউজার যেকোনও সাইজের ভেক্টর ইমেজ রেন্ডার করতে পারে। ভেক্টর ফর্ম্যাট ছবির জ্যামিতি বর্ণনা করে— কীভাবে এটি লাইন, কার্ভ, রঙ ইত্যাদি থেকে তৈরি করা হয়েছে। অন্যদিকে, রাস্টার ফর্ম্যাটে শুধুমাত্র রঙের স্বতন্ত্র ডট সম্পর্কে তথ্য থাকে, তাই স্কেলিং করার সময় ব্রাউজারকে অনুমান করতে হয় যে কীভাবে শূন্যস্থান পূরণ করতে হবে।

নিচে একই ছবির দুটি ভার্সন দেখানো হয়েছে: বাঁদিকে PNG ছবি এবং ডানদিকে SVG ছবি। SVG যেকোনও সাইজে দারুণ দেখায়, যেখানে এর পাশে থাকা PNG বড় ডিসপ্লে সাইজে ঝাপসা দেখাতে শুরু করে।

আপনার পৃষ্ঠা থেকে ফাইল অনুরোধের সংখ্যা কমাতে চাইলে, আপনি SVG বা ডেটা URI ফর্ম্যাট ব্যবহার করে ইমেজ ইনলাইন কোড করতে পারেন। আপনি যদি এই পৃষ্ঠার সোর্স দেখেন, তাহলে দেখতে পাবেন যে নিচে দেখানো দুটি লোগোই ইনলাইন হিসেবে ঘোষণা করা হয়েছে: একটি ডেটা URI এবং একটি SVG।

মোবাইল ও ডেস্কটপে SVG খুব ভালোভাবে কাজ করে এবং অপ্টিমাইজেশন টুল ব্যবহার করে SVG-এর সাইজ উল্লেখযোগ্যভাবে কমানো যায়। নিচে দেখানো দুটি ইনলাইন SVG লোগো দেখতে একই রকম, কিন্তু একটির সাইজ প্রায় ৩কেবি এবং অন্যটির মাত্র ২কেবি:

ডেটা URI

ডেটা URI, Base64 এনকোড করা স্ট্রিং হিসেবে img এলিমেন্টের src সেট করে, ইনলাইন, কোনও ছবি বা ফাইলের মতো, অন্তর্ভুক্ত করার উপায় প্রদান করে, নিম্নলিখিত ফর্ম্যাট ব্যবহার করে:

<img src="data:image/svg+xml;base64,[data]">

উপরে HTML5 লোগোর কোডের শুরুটা এইরকম দেখতে হয়:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(সম্পূর্ণ ভার্সনটি ৫০০০ অক্ষরের বেশি!)

ছবির মতো বাইনারি ফাইলকে ডেটা URI-তে কনভার্ট করার জন্য jpillora.com/base64-encoder-এর মতো টেনে এনে ছেড়ে দেওয়ার টুল উপলভ্য আছে। SVG-এর মতোই, মোবাইল ও ডেস্কটপ ব্রাউজারে ডেটা URI ভালোভাবে কাজ করে।

CSS-এ ইনলাইনিং

ডেটা URI এবং SVG-ও CSS-এ ইনলাইন করা যেতে পারে—এবং এটি মোবাইল ও ডেস্কটপ উভয় ক্ষেত্রেই কাজ করে। এখানে CSS-এ ব্যাকগ্রাউন্ড ছবি হিসেবে প্রয়োগ করা একই রকম দেখতে দুটি ছবি দেওয়া হল; একটি ডেটা URI, একটি SVG:

সুবিধা ও অসুবিধা ইনলাইন করা হচ্ছে

ছবির জন্য ইনলাইন কোড ভার্বোস হতে পারে—বিশেষ করে ডেটা URI—তাহলে আপনি কেন এটি ব্যবহার করতে চাইবেন? HTTP অনুরোধের সংখ্যা কমাতে! SVG এবং ডেটা URI, ছবি, CSS এবং JavaScript সহ একটি সম্পূর্ণ ওয়েব পেজকে একটি অনুরোধের মাধ্যমে পুনরুদ্ধার করতে সক্ষম করতে পারে।

নেতিবাচক দিক:

মোবাইলে, এক্সটার্নাল src থেকে পাওয়া ছবির তুলনায় ডেটা URI অনেক ধীরে লোড হতে পারে।
ডেটা URI, HTML অনুরোধের সাইজ উল্লেখযোগ্যভাবে বাড়িয়ে দিতে পারে।
এগুলি আপনার মার্কআপ ও ওয়ার্কফ্লোকে জটিল করে তোলে।
ডেটা URI ফর্ম্যাট বাইনারির (৩০% পর্যন্ত) থেকে অনেক বড় এবং তাই মোট ডাউনলোড সাইজ কমায় না।
ডেটা URI ক্যাশে করা যায় না, তাই যে পৃষ্ঠায় এটি ব্যবহার করা হয়, সেই পৃষ্ঠার জন্য এটি ডাউনলোড করতে হবে।
IE 6 এবং 7-এ এগুলি কাজ করে না, IE8-এ অসম্পূর্ণভাবে কাজ করে।
HTTP/2-এর মাধ্যমে, অ্যাসেট অনুরোধের সংখ্যা কমানোর অগ্রাধিকার কম হবে।

সব রেসপন্সিভ বিজ্ঞাপনের মতো, কোনটি সবচেয়ে ভালো কাজ করে তা আপনাকে পরীক্ষা করে দেখতে হবে। ডাউনলোড করা ফাইলের সাইজ, অনুরোধের সংখ্যা এবং মোট লেটেন্সি পরিমাপ করতে ডেভেলপার টুল ব্যবহার করুন। রাস্টার ছবির জন্য ডেটা URI কখনও কখনও উপযোগী হতে পারে—যেমন, হোমপেজে মাত্র একটি বা দুটি ফটো আছে যা অন্য কোথাও ব্যবহার করা হয় না। আপনাকে ইনলাইন ভেক্টর ইমেজ ব্যবহার করতে হলে, SVG অনেক ভালো বিকল্প।

CSS-এ ছবি

CSS background প্রপার্টি হল এলিমেন্টে জটিল ছবি যোগ করার জন্য একটি শক্তিশালী টুল, যা একাধিক ছবি যোগ করা এবং সেগুলি পুনরাবৃত্তি করা সহজ করে তোলে, এবং আরও অনেক কিছু। মিডিয়া কোয়েরির সাথে যুক্ত করা হলে, ব্যাকগ্রাউন্ড প্রপার্টি আরও শক্তিশালী হয়ে ওঠে, স্ক্রিন রেজোলিউশন, ভিউপোর্ট সাইজ ও আরও অনেক কিছুর উপর ভিত্তি করে কন্ডিশনাল ইমেজ লোডিং চালু করে।

সারাংশ

ডিসপ্লের বৈশিষ্ট্যের জন্য সেরা ছবি ব্যবহার করুন, স্ক্রিনের সাইজ, ডিভাইসের রেজোলিউশন এবং পৃষ্ঠার লেআউট বিবেচনা করুন।
min-resolution এবং -webkit-min-device-pixel-ratio সহ মিডিয়া কোয়েরি ব্যবহার করে হাই DPI ডিসপ্লের জন্য CSS-এ background-image প্রপার্টি পরিবর্তন করুন।
মার্কআপে 1x ছবির পাশাপাশি হাই রেজোলিউশন ছবি প্রদান করতে srcset ব্যবহার করুন।
জাভাস্ক্রিপ্ট ইমেজ রিপ্লেসমেন্ট টেকনিক ব্যবহার করার সময় বা কম রেজোলিউশনের ডিভাইসে অত্যন্ত কম্প্রেস করা হাই রেজোলিউশনের ছবি দেখানোর সময় পারফর্ম্যান্সের খরচ বিবেচনা করুন।

কন্ডিশনাল ইমেজ লোডিং বা আর্ট ডিরেকশনের জন্য মিডিয়া কোয়েরি ব্যবহার করুন

মিডিয়া কোয়েরি শুধু পৃষ্ঠার লেআউটকেই প্রভাবিত করে না; আপনি ভিউপোর্ট প্রস্থের উপর নির্ভর করে শর্তসাপেক্ষে ছবি লোড করতে বা আর্ট ডিরেকশন প্রদান করতেও এটি ব্যবহার করতে পারেন।

যেমন, নিচের স্যাম্পেলে, ছোট স্ক্রিনে শুধু small.png ডাউনলোড করা হয় এবং কন্টেন্ট div-এ প্রয়োগ করা হয়, যেখানে বড় স্ক্রিনে background-image: url(body.png) বডিতে এবং background-image: url(large.png) কন্টেন্ট div-এ প্রয়োগ করা হয়।

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

এটি ব্যবহার করে দেখুন

হাই-রেজোলিউশন ছবি প্রদান করতে image-set ব্যবহার করুন

CSS-এ image-set() ফাংশনটি background প্রপার্টির আচরণকে উন্নত করে, যার ফলে বিভিন্ন ডিভাইসের বৈশিষ্ট্যের জন্য একাধিক ছবির ফাইল প্রদান করা সহজ হয়। এটি ডিভাইসের বৈশিষ্ট্যের উপর নির্ভর করে ব্রাউজারকে সেরা ছবি বেছে নিতে দেয়, যেমন, ২x ডিসপ্লেতে ২x ছবি ব্যবহার করা, অথবা সীমিত ব্যান্ডউইথ নেটওয়ার্কে ২x ডিভাইসে ১x ছবি ব্যবহার করা।

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

সঠিক ছবি লোড করার পাশাপাশি, ব্রাউজার সেই অনুযায়ী সেটির সাইজও পরিবর্তন করে। অন্যভাবে বলতে গেলে, ব্রাউজার ধরে নেয় যে 2x ছবি 1x ছবির থেকে দ্বিগুণ বড়, তাই 2x ছবিকে ২ ফ্যাক্টর দিয়ে ছোট করে, যাতে ছবিটি পৃষ্ঠায় একই সাইজের দেখায়।

image-set()-এর জন্য সহায়তা এখনও নতুন এবং এটি শুধুমাত্র Chrome এবং Safari-তে -webkit ভেন্ডর প্রিফিক্সের সাথে কাজ করে। image-set() কাজ না করলে, ফলব্যাক ছবি অন্তর্ভুক্ত করার ব্যাপারে যত্নবান হন; যেমন:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

এটি ব্যবহার করে দেখুন

উপরের কোডটি ইমেজ-সেট সাপোর্ট করে এমন ব্রাউজারে উপযুক্ত অ্যাসেট লোড করে; অন্যথায় এটি 1x অ্যাসেটে ফিরে যায়। স্পষ্টতই, image-set() ব্রাউজার সাপোর্ট কম হলেও, বেশিরভাগ ব্রাউজার 1x অ্যাসেট পায়।

হাই রেজোলিউশন ছবি বা আর্ট ডিরেকশন প্রদান করতে মিডিয়া কোয়েরি ব্যবহার করুন

মিডিয়া কোয়েরি ডিভাইসের পিক্সেল রেশিওর ভিত্তিতে নিয়ম তৈরি করতে পারে, যার ফলে 2x বনাম 1x ডিসপ্লের জন্য আলাদা ছবি নির্দিষ্ট করা সম্ভব হয়।

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome, Firefox এবং Opera-তে স্ট্যান্ডার্ড (min-resolution: 2dppx) কাজ করে, কিন্তু Safari এবং Android ব্রাউজারে dppx ইউনিট ছাড়া পুরনো ভেন্ডর প্রিফিক্সড সিনট্যাক্স প্রয়োজন হয়। মনে রাখবেন, ডিভাইস মিডিয়া কোয়েরির সাথে ম্যাচ করলে তবেই এইসব স্টাইল লোড করা হয় এবং আপনাকে বেস কেসের জন্য স্টাইল উল্লেখ করতে হবে। ব্রাউজার রেজোলিউশন-নির্দিষ্ট মিডিয়া কোয়েরি সাপোর্ট না করলে, কিছু রেন্ডার করা হয়েছে কিনা তা নিশ্চিত করার সুবিধাও এটি প্রদান করে।

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

এটি ব্যবহার করে দেখুন

এছাড়াও, ভিউপোর্ট সাইজের উপর নির্ভর করে বিকল্প ছবি দেখাতে আপনি min-width সিনট্যাক্স ব্যবহার করতে পারেন। এই টেকনিকের সুবিধা হল, মিডিয়া কোয়েরি ম্যাচ না করলে ছবি ডাউনলোড হয় না। যেমন, ব্রাউজারের প্রস্থ ৫০০ পিক্সেল বা তার বেশি হলে তবেই bg.png ডাউনলোড করা হয় এবং body-এ প্রয়োগ করা হয়:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

আইকনের জন্য SVG ব্যবহার করুন

আপনার পৃষ্ঠায় আইকন যোগ করার সময়, যেখানে সম্ভব সেখানে SVG আইকন অথবা কিছু ক্ষেত্রে ইউনিকোড অক্ষর ব্যবহার করুন।

সারাংশ

রাস্টার ছবির পরিবর্তে আইকনের জন্য SVG বা ইউনিকোড ব্যবহার করুন।

ইউনিকোড দিয়ে সাধারণ আইকন পরিবর্তন করুন

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

সাধারণ অক্ষর সেট ছাড়াও, ইউনিকোডে তীর (←), গাণিতিক অপারেটর (√), জ্যামিতিক আকার (★), কন্ট্রোল ছবি (▶), মিউজিক নোটেশন (♬), গ্রীক অক্ষর (Ω), এমনকি দাবা খেলার গুটির (♞) মতো চিহ্নও থাকতে পারে।

নামযুক্ত এন্টিটির মতোই ইউনিকোড অক্ষর যোগ করা হয়: &#XXXX, যেখানে XXXX ইউনিকোড অক্ষর সংখ্যাকে দেখায়। যেমন:

You're a super &#9733;

আপনি একজন সুপার ★

SVG দিয়ে জটিল আইকন পরিবর্তন করুন

আরও জটিল আইকন সংক্রান্ত প্রয়োজনীয়তার জন্য, SVG আইকন সাধারণত লাইটওয়েট, ব্যবহার করা সহজ এবং CSS-এর মাধ্যমে স্টাইল করা যায়। রাস্টার ছবির তুলনায় SVG-এর অনেক সুবিধা আছে:

এগুলি হল ভেক্টর গ্রাফিক্স যা অসীমভাবে স্কেল করা যেতে পারে।
রঙ, শ্যাডোয়িং, ট্রান্সপারেন্সি ও অ্যানিমেশনের মতো CSS এফেক্ট সহজেই ব্যবহার করা যায়।
SVG ছবি ডকুমেন্টের মধ্যে ইনলাইন করা যেতে পারে।
সেগুলি সেম্যান্টিক।
উপযুক্ত অ্যাট্রিবিউট সহ এগুলি আরও ভালো অ্যাক্সেসিবিলিটি প্রদান করে।

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

এটি ব্যবহার করে দেখুন

সতর্ক হয়ে আইকন ফন্ট ব্যবহার করুন

এমন একটি পৃষ্ঠার উদাহরণ যা ফন্ট আইকনের জন্য FontAwesome ব্যবহার করে। — FontAwesome ব্যবহার করে এমন একটি পৃষ্ঠার উদাহরণ।

আইকন ফন্ট জনপ্রিয় এবং ব্যবহার করা সহজ, তবে SVG আইকনের তুলনায় এতে কিছু অসুবিধা আছে:

এগুলি হল ভেক্টর গ্রাফিক্স যা অসীমভাবে স্কেল করা যেতে পারে, তবে অ্যান্টি-অ্যালাইজড হতে পারে যার ফলে আইকনগুলি প্রত্যাশা অনুযায়ী শার্প হয় না।
CSS-এর মাধ্যমে সীমিত স্টাইলিং।
লাইনের উচ্চতা, অক্ষরের মধ্যে স্পেস ইত্যাদির উপর নির্ভর করে, Pixel-এ নিখুঁত পজিশনিং করা কঠিন হতে পারে।
এগুলি শব্দার্থিক নয় এবং স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তির সাথে ব্যবহার করা কঠিন হতে পারে।
সঠিকভাবে স্কোপ করা না হলে, উপলভ্য আইকনের ছোট সাবসেট ব্যবহার করার জন্য এগুলি বড় ফাইল সাইজের কারণ হতে পারে।

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

এটি ব্যবহার করে দেখুন

Font Awesome, Pictos এবং Glyphicons সহ শত শত ফ্রি এবং পেড আইকন ফন্ট উপলভ্য।

অতিরিক্ত HTTP অনুরোধ এবং ফাইলের সাইজের সাথে আইকনের প্রয়োজনীয়তার ভারসাম্য বজায় রাখতে ভুলবেন না। যেমন, আপনার যদি মাত্র কয়েকটি আইকন প্রয়োজন হয়, তাহলে ছবি বা ইমেজ স্প্রাইট ব্যবহার করা ভাল হতে পারে।

পারফর্ম্যান্সের জন্য ছবি অপ্টিমাইজ করুন

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

সারাংশ

ছবি ফর্ম্যাট বেছে নেওয়ার সময় এলোমেলোভাবে বেছে নেবেন না—উপলভ্য বিভিন্ন ফর্ম্যাট সম্পর্কে জানুন এবং সবচেয়ে উপযুক্ত ফর্ম্যাটটি ব্যবহার করুন।
ফাইলের সাইজ কমাতে আপনার ওয়ার্কফ্লোতে ইমেজ অপ্টিমাইজেশন ও কম্প্রেশন টুল অন্তর্ভুক্ত করুন।
ঘন ঘন ব্যবহার করা ছবি, ইমেজ স্প্রাইটে রেখে http অনুরোধের সংখ্যা কমান।
প্রাথমিক পৃষ্ঠা লোড হওয়ার সময় উন্নত করতে এবং প্রাথমিক পৃষ্ঠার সাইজ কমাতে, ছবি স্ক্রল করে ভিউতে আসার পরেই সেগুলি লোড করার কথা বিবেচনা করুন।

সঠিক ফর্ম্যাট বেছে নিন

দুই ধরনের ছবি বিবেচনা করতে হবে: ভেক্টর ইমেজ এবং রাস্টার ইমেজ। রাস্টার ছবির জন্য, আপনাকে সঠিক কম্প্রেশন ফর্ম্যাটও বেছে নিতে হবে, যেমন: GIF, PNG, JPG।

ফটোগ্রাফ ও অন্যান্য ছবির মতো রাস্টার ছবি, স্বতন্ত্র ডট বা পিক্সেলের গ্রিড হিসেবে দেখানো হয়। রাস্টার ছবি সাধারণত ক্যামেরা বা স্ক্যানার থেকে আসে অথবা ব্রাউজারে canvas এলিমেন্ট ব্যবহার করে তৈরি করা যায়। ছবির সাইজ যত বড় হবে, ফাইলের সাইজও তত বড় হবে। রাস্টার ছবিকে তার আসল সাইজের থেকে বড় করলে, সেটি অস্পষ্ট হয়ে যায় কারণ ব্রাউজারকে অনুমান করতে হয় যে কীভাবে মিসিং পিক্সেল পূরণ করা যায়।

লোগো ও লাইন আর্টের মতো ভেক্টর ইমেজ, কার্ভ, লাইন, আকার ও ভরাট করার রঙের সেট দ্বারা সংজ্ঞায়িত করা হয়। Adobe Illustrator বা Inkscape-এর মতো প্রোগ্রামের সাহায্যে ভেক্টর ইমেজ তৈরি করা হয় এবং SVG-এর মতো ভেক্টর ফর্ম্যাটে সেভ করা হয়। ভেক্টর ইমেজ সাধারণ প্রিমিটিভের উপর ভিত্তি করে তৈরি হয় বলে, ফাইলের সাইজ পরিবর্তন না করে বা কোয়ালিটি নষ্ট না করেই এটিকে স্কেল করা যায়।

উপযুক্ত ফর্ম্যাট বেছে নেওয়ার সময়, ছবির উৎস (রাস্টার বা ভেক্টর) এবং কন্টেন্ট (রঙ, অ্যানিমেশন, টেক্সট ইত্যাদি) উভয়ই বিবেচনা করা গুরুত্বপূর্ণ। কোনও একটি ফর্ম্যাট সব ধরনের ছবির জন্য উপযুক্ত নয় এবং প্রতিটি ফর্ম্যাটের নিজস্ব সুবিধা ও অসুবিধা আছে।

উপযুক্ত ফর্ম্যাট বেছে নেওয়ার সময় এইসব নির্দেশিকা দিয়ে শুরু করুন:

ফটোগ্রাফিক ছবির জন্য JPG ব্যবহার করুন।
ভেক্টর আর্ট এবং সলিড কালার গ্রাফিক্স যেমন লোগো এবং লাইন আর্টের জন্য SVG ব্যবহার করুন। ভেক্টর আর্ট উপলভ্য না থাকলে, WebP বা PNG ব্যবহার করে দেখুন।
GIF-এর পরিবর্তে PNG ব্যবহার করুন কারণ এটি আরও বেশি রঙ দেখায় এবং আরও ভালো কম্প্রেশন রেশিও অফার করে।
আরও দীর্ঘ অ্যানিমেশনের জন্য <video> ব্যবহার করার কথা বিবেচনা করুন, যা আরও ভালো ছবির কোয়ালিটি প্রদান করে এবং ব্যবহারকারীকে প্লেব্যাকের উপর নিয়ন্ত্রণ দেয়।

ফাইলের সাইজ কমানো

ছবি সেভ করার পরে "পোস্ট-প্রসেসিং" করে আপনি ছবির ফাইলের সাইজ উল্লেখযোগ্যভাবে কমাতে পারেন। ছবি কম্প্রেস করার জন্য অনেক টুল আছে—লসি এবং লসলেস, অনলাইন, GUI, কমান্ড লাইন। সম্ভব হলে, ইমেজ অপ্টিমাইজেশন অটোমেট করার চেষ্টা করা সবচেয়ে ভালো, যাতে এটি আপনার ওয়ার্কফ্লোতে বিল্ট-ইন থাকে।

এমন অনেক টুল উপলভ্য আছে যা ছবির কোয়ালিটিতে কোনও প্রভাব না ফেলে JPG এবং PNG ফাইলের উপর আরও বেশি, লসলেস কম্প্রেশন করে। JPG-এর জন্য, jpegtran বা jpegoptim ব্যবহার করে দেখুন (শুধুমাত্র Linux-এ উপলভ্য; --strip-all বিকল্পের সাথে রান করুন)। PNG-এর জন্য, OptiPNG বা PNGOUT ব্যবহার করে দেখুন।

ছবি স্প্রাইট ব্যবহার করুন

CSS স্প্রাইটিং হল এমন একটি টেকনিক যার মাধ্যমে একাধিক ছবিকে একটি "স্প্রাইট শিট" ছবিতে একত্রিত করা হয়। তারপর আপনি কোনও এলিমেন্টের (স্প্রাইট শিট) জন্য ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট করে এবং সঠিক অংশটি দেখানোর জন্য অফসেট যোগ করে আলাদা আলাদা ছবি ব্যবহার করতে পারেন।

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

এটি ব্যবহার করে দেখুন

স্প্রাইটিংয়ের সুবিধা হল, একাধিক ছবি পাওয়ার জন্য প্রয়োজনীয় ডাউনলোডের সংখ্যা কমে যায়, যদিও ক্যাশিং চালু থাকে।

ধীরে ধীরে লোড করার পদ্ধতিটি বিবেচনা করুন

যেসব দীর্ঘ পৃষ্ঠায় ফোল্ডের নিচে অনেক ছবি থাকে, সেখানে ধীরে ধীরে লোড করার পদ্ধতি ব্যবহার করলে, পৃষ্ঠা লোড হওয়ার গতি উল্লেখযোগ্যভাবে বৃদ্ধি পায়। এই পদ্ধতিতে ছবিগুলি প্রয়োজন অনুযায়ী অথবা প্রাথমিক কন্টেন্ট লোড ও রেন্ডার হওয়ার পরে লোড করা হয়। পারফর্ম্যান্স উন্নত করার পাশাপাশি, ধীরে ধীরে লোড করার পদ্ধতি ব্যবহার করলে, সীমাহীন স্ক্রল করার অভিজ্ঞতা তৈরি করা যেতে পারে।

ইনফিনিট স্ক্রলিং পৃষ্ঠা তৈরি করার সময় সতর্ক থাকুন—কারণ কন্টেন্ট দৃশ্যমান হওয়ার সাথে সাথে লোড হয়, সার্চ ইঞ্জিন হয়ত সেই কন্টেন্ট কখনই দেখতে পাবে না। এছাড়াও, যেসব ব্যবহারকারী ফুটার থেকে তথ্য পেতে চান, তারা কখনই ফুটার দেখতে পান না কারণ নতুন কন্টেন্ট সবসময় লোড হতে থাকে।

ছবি সম্পূর্ণভাবে এড়িয়ে চলুন

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

ছবিতে এম্বেড করার পরিবর্তে মার্কআপে টেক্সট যোগ করুন

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

ছবি পরিবর্তন করতে CSS ব্যবহার করা

আধুনিক ব্রাউজারগুলি CSS ফিচার ব্যবহার করে এমন স্টাইল তৈরি করতে পারে যার জন্য আগে ছবির প্রয়োজন হত। যেমন: background প্রপার্টি ব্যবহার করে জটিল গ্রেডিয়েন্ট তৈরি করা যেতে পারে, box-shadow ব্যবহার করে শ্যাডো তৈরি করা যেতে পারে এবং border-radius প্রপার্টি ব্যবহার করে গোলাকার কোণ যোগ করা যেতে পারে।

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

মনে রাখবেন যে এইসব টেকনিক ব্যবহার করার জন্য রেন্ডারিং সাইকেলের প্রয়োজন হয়, যা মোবাইলে গুরুত্বপূর্ণ হতে পারে। অতিরিক্ত ব্যবহার করলে, আপনি যে সুবিধা পেয়েছেন তা হারাবেন এবং এটি পারফর্ম্যান্সে বাধা সৃষ্টি করতে পারে।

আর্ট ডিরেকশন

রেসপন্সিভ ছবি

মার্কআপে ছবি

সারাংশ

ছবির জন্য আপেক্ষিক সাইজ ব্যবহার করুন

উচ্চ DPI ডিভাইসের জন্য srcset-এর মাধ্যমে img উন্নত করুন

picture-এর সাথে রেসপন্সিভ ছবিতে আর্ট ডিরেকশন

আপেক্ষিক সাইজের ছবি

রেসপন্সিভ ছবিতে ব্রেকপয়েন্টের জন্য অ্যাকাউন্ট

প্রোডাক্টের ছবি বড় করার সুবিধা দিন

অন্যান্য ইমেজ টেকনিক

কম্প্রেসিভ ছবি

জাভাস্ক্রিপ্ট ইমেজ রিপ্লেসমেন্ট

ইনলাইনিং ছবি: রাস্টার এবং ভেক্টর

SVG

ডেটা URI

CSS-এ ইনলাইনিং

সুবিধা ও অসুবিধা ইনলাইন করা হচ্ছে

CSS-এ ছবি

সারাংশ

কন্ডিশনাল ইমেজ লোডিং বা আর্ট ডিরেকশনের জন্য মিডিয়া কোয়েরি ব্যবহার করুন

হাই-রেজোলিউশন ছবি প্রদান করতে image-set ব্যবহার করুন

হাই রেজোলিউশন ছবি বা আর্ট ডিরেকশন প্রদান করতে মিডিয়া কোয়েরি ব্যবহার করুন

আইকনের জন্য SVG ব্যবহার করুন

সারাংশ

ইউনিকোড দিয়ে সাধারণ আইকন পরিবর্তন করুন

SVG দিয়ে জটিল আইকন পরিবর্তন করুন

সতর্ক হয়ে আইকন ফন্ট ব্যবহার করুন

পারফর্ম্যান্সের জন্য ছবি অপ্টিমাইজ করুন

সারাংশ

সঠিক ফর্ম্যাট বেছে নিন

ফাইলের সাইজ কমানো

ছবি স্প্রাইট ব্যবহার করুন

ধীরে ধীরে লোড করার পদ্ধতিটি বিবেচনা করুন

ছবি সম্পূর্ণভাবে এড়িয়ে চলুন

ছবিতে এম্বেড করার পরিবর্তে মার্কআপে টেক্সট যোগ করুন

ছবি পরিবর্তন করতে CSS ব্যবহার করা

উচ্চ DPI ডিভাইসের জন্য `srcset`-এর মাধ্যমে `img` উন্নত করুন

`picture`-এর সাথে রেসপন্সিভ ছবিতে আর্ট ডিরেকশন