Website Speed Up

⌘K
  2. Home
  4. Website Speed Up
  6. Html
  8. Image Optimization

Image Optimization

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

চলুন শুরু করা যাক:

১. ছবি প্রস্তুতি:
ধরুন, আপনার কাছে ‘example-image.webp’ নামে একটি WebP ফরম্যাটের ছবি আছে, যা আপনি ইতিমধ্যেই কম্প্রেস করেছেন। এটি 1600×900 পিক্সেলের।

২. HTML স্ট্রাকচার:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ছবি অপটিমাইজেশন উদাহরণ</title>
    <style>
        .image-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        .responsive-image {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="example-image.webp" alt="উদাহরণ ছবি" class="responsive-image">
    </div>
</body>
</html>

৩. ব্যাখ্যা:

ক) CSS এর মাধ্যমে অপটিমাইজেশন:

  • .image-container ক্লাসে max-width: 1200px; ব্যবহার করা হয়েছে। এর মানে হল, ছবি কখনও 1200px এর বেশি প্রশস্ত হবে না।
  • .responsive-image ক্লাসে width: 100%; এবং height: auto; ব্যবহার করা হয়েছে। এটি ছবিকে কন্টেইনারের প্রস্থ অনুযায়ী স্কেল করবে, কিন্তু এর অনুপাত বজায় রাখবে।

খ) কীভাবে এটি কাজ করে:

  • ছোট স্ক্রিনে (যেমন মোবাইল): ছবি স্ক্রিনের পুরো প্রস্থ জুড়ে দেখাবে।
  • মাঝারি স্ক্রিনে (যেমন ট্যাবলেট): ছবি স্ক্রিনের প্রস্থ অনুযায়ী স্কেল হবে।
  • বড় স্ক্রিনে (যেমন ডেস্কটপ): ছবি সর্বোচ্চ 1200px প্রশস্ত হবে এবং পৃষ্ঠার মাঝখানে থাকবে।

গ) অপটিমাইজেশনের সুবিধা:

  • একটি মাত্র ছবি ব্যবহার করে সব ডিভাইসে ভাল দেখাচ্ছে।
  • অতিরিক্ত HTTP রিকোয়েস্ট এড়ানো যাচ্ছে, যা পেজ লোড টাইম কমায়।
  • সার্ভার স্পেস সাশ্রয় হচ্ছে, কারণ একাধিক আকারের ছবি সংরক্ষণ করার প্রয়োজন নেই।

৪. আরও উন্নত করার উপায়:

ক) লেজি লোডিং:

<img src="example-image.webp" alt="উদাহরণ ছবি" class="responsive-image" loading="lazy">

এটি ছবিকে তখনই লোড করবে যখন এটি ভিউপোর্টে আসবে, যা প্রাথমিক পেজ লোড টাইম কমাবে।

খ) srcset ব্যবহার:
যদিও আমরা একটি ছবি ব্যবহার করছি, srcset ব্যবহার করে আমরা ব্রাউজারকে বলতে পারি কোন ডিভাইসে কত বড় ছবি দেখানো উচিত:

<img src="example-image.webp" 
     srcset="example-image.webp 1600w, example-image.webp 1200w, example-image.webp 800w" 
     sizes="(max-width: 800px) 100vw, (max-width: 1200px) 75vw, 1200px"
     alt="উদাহরণ ছবি" 
     class="responsive-image" 
     loading="lazy">

এখানে, আমরা একই ছবি তিনবার উল্লেখ করেছি, কিন্তু ব্রাউজারকে বলছি যে এটি 1600px, 1200px, এবং 800px প্রস্থের জন্য উপযুক্ত। ব্রাউজার নিজেই সিদ্ধান্ত নেবে কোন সাইজটি ডাউনলোড করা উচিত।

গ) ইমেজ CDN ব্যবহার:
যদি সম্ভব হয়, একটি ইমেজ CDN ব্যবহার করুন যা অন-দ্য-ফ্লাই রিসাইজিং সাপোর্ট করে। এটি আপনাকে URL প্যারামিটার দিয়ে বিভিন্ন আকারের ছবি অনুরোধ করতে দেয়।

উদাহরণ:

<img src="https://your-image-cdn.com/example-image.webp?width=800" 
     alt="উদাহরণ ছবি" 
     class="responsive-image" 
     loading="lazy">

৫. অপটিমাইজেশন না করলে কী হত:

যদি আমরা এই অপটিমাইজেশন না করতাম:

  • মোবাইল ডিভাইসে বড় ছবি লোড হত, যা ধীর ইন্টারনেট কানেকশনে সমস্যা সৃষ্টি করত।
  • ছবি স্ক্রিনের বাইরে চলে যেত বা অনুপাত হারিয়ে ফেলত।
  • বড় স্ক্রিনে ছবি অতিরিক্ত স্থান নিত বা ছোট দেখাত।

৬. উপসংহার:

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

প্রশ্ন: srcset ব্যবহার করে কি সার্ভার থেকে স্বয়ংক্রিয়ভাবে বিভিন্ন আকারের ছবি ডাউনলোড হয় এবং ছবির সাইজ কমে?

উত্তর: হ্যাঁ এবং না। চলুন বিস্তারিত দেখি:

১. srcset এর কাজ:
srcset ব্রাউজারকে বলে দেয় যে বিভিন্ন আকারের ছবি উপলব্ধ। কিন্তু এটি নিজে থেকে ছবির সাইজ কমায় না।

২. বাস্তব উদাহরণ:

ধরুন, আপনার একটি ব্লগ পোস্টে একটি ছবি আছে। আপনি চান এই ছবিটি সব ডিভাইসে ভালভাবে দেখাক।

<img src="blog-image-large.jpg" 
     srcset="blog-image-small.jpg 300w,
             blog-image-medium.jpg 600w,
             blog-image-large.jpg 1200w"
     sizes="(max-width: 600px) 300px,
            (max-width: 1200px) 600px,
            1200px"
     alt="ব্লগ পোস্টের ছবি">

এখন, কী ঘটবে:

ক) মোবাইল ফোনে (যেমন 375px স্ক্রিন):

  • ব্রাউজার blog-image-small.jpg (300w) ডাউনলোড করবে।
  • ফাইল সাইজ: ধরুন, 50KB

খ) ট্যাবলেটে (যেমন 768px স্ক্রিন):

  • ব্রাউজার blog-image-medium.jpg (600w) ডাউনলোড করবে।
  • ফাইল সাইজ: ধরুন, 100KB

গ) ডেস্কটপে (যেমন 1920px স্ক্রিন):

  • ব্রাউজার blog-image-large.jpg (1200w) ডাউনলোড করবে।
  • ফাইল সাইজ: ধরুন, 200KB

৩. কীভাবে এটি ছবির সাইজ কমায়:

  • প্রতিটি ডিভাইস শুধুমাত্র তার জন্য উপযুক্ত আকারের ছবি ডাউনলোড করে।
  • মোবাইলে 50KB, ট্যাবলেটে 100KB, ডেস্কটপে 200KB ডাউনলোড হয়।
  • যদি srcset না থাকত, সব ডিভাইসে 200KB ডাউনলোড হত।

৪. গুরুত্বপূর্ণ বিষয়:

  • আপনাকে আগে থেকেই বিভিন্ন আকারের ছবি তৈরি করে সার্ভারে আপলোড করতে হবে।
  • srcset নিজে থেকে ছবি রিসাইজ করে না। এটি শুধু ব্রাউজারকে সঠিক ছবি বেছে নিতে সাহায্য করে।

৫. সুবিধা:

  • ডেটা সাশ্রয়: ছোট ডিভাইসে কম ডেটা ব্যবহার হয়।
  • দ্রুত লোডিং: ছোট ছবি দ্রুত লোড হয়।
  • ভাল দেখা: প্রতিটি ডিভাইসে সঠিক আকারের ছবি দেখায়।

৬. অসুবিধা:

  • একাধিক ছবি তৈরি করতে হয়।
  • সার্ভারে বেশি স্পেস লাগে।

উপসংহার:
srcset ব্যবহার করে আপনি প্রতিটি ডিভাইসের জন্য উপযুক্ত আকারের ছবি সরবরাহ করতে পারেন। এটি সরাসরি ছবির সাইজ কমায় না, কিন্তু প্রতিটি ডিভাইসে ডাউনলোড হওয়া ছবির সাইজ কমিয়ে দেয়। ফলে, ওয়েবসাইট দ্রুত লোড হয় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।

কীভাবে বিভিন্ন আকারের ছবি সংরক্ষণ করা যায়, ফাইল নামকরণ পদ্ধতি, এবং ফোল্ডার স্ট্রাকচার সম্পর্কে। এটি বাংলায় এবং বাস্তব উদাহরণসহ ব্যাখ্যা করা হবে।

১. ফাইল নামকরণ পদ্ধতি:

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

ক) আকার-ভিত্তিক নামকরণ:

  • ছবির-নাম-small.jpg
  • ছবির-নাম-medium.jpg
  • ছবির-নাম-large.jpg

উদাহরণ:

  • blog-header-small.jpg
  • blog-header-medium.jpg
  • blog-header-large.jpg

খ) প্রস্থ-ভিত্তিক নামকরণ:

  • ছবির-নাম-300w.jpg
  • ছবির-নাম-600w.jpg
  • ছবির-নাম-1200w.jpg

উদাহরণ:

  • product-image-300w.jpg
  • product-image-600w.jpg
  • product-image-1200w.jpg

গ) রেজোলিউশন-ভিত্তিক নামকরণ:

  • ছবির-নাম-1x.jpg
  • ছবির-নাম-2x.jpg
  • ছবির-নাম-3x.jpg

উদাহরণ:

  • logo-1x.png
  • logo-2x.png
  • logo-3x.png

২. ফোল্ডার স্ট্রাকচার:

একটি সুসংগঠিত ফোল্ডার স্ট্রাকচার আপনাকে ছবিগুলি সহজে পরিচালনা করতে সাহায্য করবে। এখানে একটি উদাহরণ দেওয়া হলো:

📁 public
  📁 images
    📁 blog
      📁 headers
        📄 first-post-300w.jpg
        📄 first-post-600w.jpg
        📄 first-post-1200w.jpg
      📁 thumbnails
        📄 first-post-small.jpg
        📄 first-post-medium.jpg
    📁 products
      📄 tshirt-blue-300w.jpg
      📄 tshirt-blue-600w.jpg
      📄 tshirt-blue-1200w.jpg
    📁 logos
      📄 company-logo-1x.png
      📄 company-logo-2x.png
      📄 company-logo-3x.png

৩. HTML-এ ব্যবহার:

এই ফাইল স্ট্রাকচার ব্যবহার করে, আপনি আপনার HTML-এ নিম্নলিখিতভাবে srcset ব্যবহার করতে পারেন:

<img src="/images/blog/headers/first-post-600w.jpg" 
     srcset="/images/blog/headers/first-post-300w.jpg 300w,
             /images/blog/headers/first-post-600w.jpg 600w,
             /images/blog/headers/first-post-1200w.jpg 1200w"
     sizes="(max-width: 600px) 300px,
            (max-width: 1200px) 600px,
            1200px"
     alt="প্রথম ব্লগ পোস্টের হেডার ছবি">

৪. ছবি আপডেট বা প্রতিস্থাপন:

যখন আপনি কোনো ছবি আপডেট বা প্রতিস্থাপন করতে চান:

ক) একই নামে নতুন ফাইল আপলোড করুন:

  • পুরানো first-post-300w.jpg কে নতুন first-post-300w.jpg দিয়ে প্রতিস্থাপন করুন।
  • এটি করলে, HTML কোড পরিবর্তন করার প্রয়োজন নেই।

খ) ক্যাশিং সমস্যা এড়াতে:

  • ফাইলের নামে একটি ভার্সন বা টাইমস্ট্যাম্প যোগ করুন।
    উদাহরণ: first-post-300w-v2.jpg বা first-post-300w-20230915.jpg
  • HTML আপডেট করুন নতুন ফাইল নাম দিয়ে।

৫. অটোমেটেড টুল ব্যবহার:

বড় প্রজেক্টের জন্য, আপনি অটোমেটেড টুল ব্যবহার করতে পারেন যা একটি বড় ছবি থেকে বিভিন্ন আকারের ছবি তৈরি করে:

  • Gulp বা Webpack এর মতো টাস্ক রানার ব্যবহার করুন।
  • ImageMagick বা Sharp এর মতো কমান্ড লাইন টুল ব্যবহার করুন।

উদাহরণ কমান্ড (ImageMagick ব্যবহার করে):

convert original.jpg -resize 300x first-post-300w.jpg
convert original.jpg -resize 600x first-post-600w.jpg
convert original.jpg -resize 1200x first-post-1200w.jpg

৬. সতর্কতা:

  • সব ছবির জন্য সব আকার তৈরি করবেন না। শুধু প্রয়োজনীয় আকারগুলি তৈরি করুন।
  • ছবির গুণগত মান বজায় রাখুন। অত্যধিক কম্প্রেশন এড়িয়ে চলুন।
  • ফাইল নামে বাংলা অক্ষর ব্যবহার এড়িয়ে চলুন, কারণ এটি URL-এ সমস্যা সৃষ্টি করতে পারে।

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

নিশ্চয়, আমি আপনাকে এই কোডটি বিস্তারিতভাবে ব্যাখ্যা করব এবং এর সাথে সম্পর্কিত সেরা কৌশলগুলি সম্পর্কে বলব। আসুন এটি ধাপে ধাপে দেখি:

১. কোড ব্যাখ্যা:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="An optimized image">
</picture>

ক) <picture> ট্যাগ:

  • এটি একটি কন্টেইনার যা একাধিক ইমেজ সোর্স নির্দিষ্ট করতে ব্যবহৃত হয়।
  • ব্রাউজার এর মধ্যে থেকে প্রথম সমর্থিত সোর্স বেছে নেয়।

খ) <source> ট্যাগ:

  • এটি একটি বিকল্প ইমেজ সোর্স নির্দিষ্ট করে।
  • srcset অ্যাট্রিবিউট ছবির URL নির্দেশ করে।
  • type অ্যাট্রিবিউট ছবির ফরম্যাট নির্দিষ্ট করে (এখানে WebP)।

গ) <img> ট্যাগ:

  • এটি ডিফল্ট ছবি এবং ফলব্যাক হিসেবে কাজ করে।
  • যদি ব্রাউজার WebP সমর্থন না করে বা <picture> ট্যাগ না বোঝে, তাহলে এই JPG ছবি দেখাবে।

২. বাস্তব উদাহরণ:

আসুন একটি বাস্তব উদাহরণ দেখি, যেখানে আমরা বিভিন্ন আকারের ছবিও ব্যবহার করব:

<picture>
  <source
    srcset="/images/products/tshirt-blue-300w.webp 300w,
            /images/products/tshirt-blue-600w.webp 600w,
            /images/products/tshirt-blue-1200w.webp 1200w"
    sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
    type="image/webp">
  <source
    srcset="/images/products/tshirt-blue-300w.jpg 300w,
            /images/products/tshirt-blue-600w.jpg 600w,
            /images/products/tshirt-blue-1200w.jpg 1200w"
    sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
    type="image/jpeg">
  <img src="/images/products/tshirt-blue-600w.jpg" alt="নীল টি-শার্ট">
</picture>

এই উদাহরণে:

  • প্রথমে WebP ফরম্যাটের ছবি দেওয়া হয়েছে, কারণ এটি সাধারণত JPG থেকে ছোট।
  • WebP না চললে, JPG ফরম্যাট ব্যবহার করা হবে।
  • প্রতিটি ফরম্যাটের জন্য তিনটি আকারের ছবি দেওয়া হয়েছে।
  • sizes অ্যাট্রিবিউট ব্যবহার করা হয়েছে স্ক্রিন সাইজ অনুযায়ী সঠিক ছবি বেছে নেওয়ার জন্য।

৩. সেরা কৌশল:

ক) ফরম্যাট অগ্রাধিকার:
WebP > AVIF > JPG/PNG

  • WebP সাধারণত সবচেয়ে ভাল কম্প্রেশন অফার করে।
  • AVIF আরও ভাল, কিন্তু এখনও সব ব্রাউজারে সমর্থিত নয়।
  • JPG/PNG সর্বাধিক সমর্থিত, তাই ফলব্যাক হিসেবে ব্যবহার করুন।

খ) প্রগতিশীল লোডিং:

<img src="..." alt="..." loading="lazy">

এটি ছবিকে তখনই লোড করবে যখন এটি ভিউপোর্টের কাছাকাছি আসবে।

গ) placeholder ব্যবহার:
ছবি লোড হওয়ার আগে একটি low-resolution placeholder দেখান।

<img src="full-image.jpg" 
     alt="..." 
     style="background-image: url('low-res-placeholder.jpg'); background-size: cover;">

ঘ) ক্যাশিং:
সার্ভারে ক্যাশিং হেডার সেট করুন যাতে ব্রাউজার ছবিগুলি ক্যাশে রাখে।

ঙ) CDN ব্যবহার:
Content Delivery Network ব্যবহার করুন ছবি দ্রুত সরবরাহ করার জন্য।

চ) ছবি অপটিমাইজেশন:
আপলোড করার আগে ছবিগুলি অপটিমাইজ করুন। TinyPNG বা ImageOptim এর মতো টুল ব্যবহার করুন।

ছ) অটোমেশন:
Gulp বা Webpack এর মতো টুল ব্যবহার করে ছবি অপটিমাইজেশন এবং বিভিন্ন ফরম্যাট জেনারেশন অটোমেট করুন।

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

How can we help?