Image Optimization এবং Displaying গাইড ও নোট

Image Optimization এবং Displaying হল ওয়েব অ্যাপ্লিকেশন তৈরির একটি গুরুত্বপূর্ণ অংশ, কারণ এটি অ্যাপ্লিকেশনের লোডিং স্পিড এবং পারফরম্যান্স উন্নত করতে সাহায্য করে। MeanJS স্ট্যাক (MongoDB, Express.js, AngularJS, এবং Node.js) ব্যবহার করে আপনি ইমেজ আপলোড, অপটিমাইজেশন, এবং ডিসপ্লে করতে পারেন। এখানে, আমরা দেখব কিভাবে MeanJS এ ইমেজ অপটিমাইজেশন এবং ডিসপ্লে করা যায়।

Image Optimization কী?

Image Optimization হল একটি প্রক্রিয়া যার মাধ্যমে ইমেজের আকার কমিয়ে ফেলা হয়, তবে তার কোয়ালিটি বজায় থাকে। এর মাধ্যমে ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটের লোড টাইম কমে, যার ফলে ব্যবহারকারীর অভিজ্ঞতা উন্নত হয় এবং সার্চ ইঞ্জিন র‌্যাংকিংও বাড়তে পারে।

এখানে কিছু সাধারণ ইমেজ অপটিমাইজেশন টেকনিক্যাল পদ্ধতি দেওয়া হলো:

• Compression: ইমেজের সাইজ কমানো।
• Resize: ইমেজের ডাইমেনশন কমানো।
• Format Conversion: ইমেজ ফরম্যাট যেমন JPEG, PNG, WebP ইত্যাদির মধ্যে পরিবর্তন করা।
• Lazy Loading: ইমেজ শুধুমাত্র যখন স্ক্রিনে আসবে, তখন লোড করা।

MeanJS এ Image Optimization এবং Displaying কিভাবে কাজ করে?

প্রথমে, আপনি ইমেজ আপলোড, অপটিমাইজ এবং তারপর ডিসপ্লে করার জন্য কিছু স্টেপ ফলো করবেন।

১. Image Uploading in MeanJS (Node.js + Express.js)

ইমেজ আপলোডের জন্য multer প্যাকেজ ব্যবহার করা হয়। এটি একটি Node.js মডিউল যা ফাইল আপলোডের জন্য ব্যবহৃত হয়।

multer ইনস্টল করা

npm install multer --save

Image Uploading API তৈরি করা (Express.js)

এখন, multer ব্যবহার করে ইমেজ আপলোডের API তৈরি করবো।

// server/routes/image.routes.js

const express = require('express');
const multer = require('multer');
const path = require('path');
const router = express.Router();

// Multer স্টোরেজ কনফিগারেশন
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // ফোল্ডারে ইমেজ আপলোড করা হবে
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname)); // ইউনিক নাম দিয়ে ফাইল সংরক্ষণ
  }
});

// Multer মিডলওয়্যার তৈরি
const upload = multer({ storage: storage });

// POST রাউট: ইমেজ আপলোড করা
router.post('/upload', upload.single('image'), (req, res) => {
  if (!req.file) {
    return res.status(400).send({ message: 'No file uploaded.' });
  }
  res.status(200).send({ message: 'Image uploaded successfully', filePath: req.file.path });
});

module.exports = router;

এখানে, multer মডিউল ব্যবহার করে আপলোড করা ইমেজটি uploads/ ফোল্ডারে সংরক্ষণ করা হচ্ছে এবং সেই ফাইলের পথ (path) রিটার্ন করা হচ্ছে।

২. Image Optimization (Node.js)

ইমেজ অপটিমাইজেশনের জন্য sharp প্যাকেজ ব্যবহার করা হয়। এটি ইমেজ কমপ্রেশন এবং রিসাইজের জন্য খুবই জনপ্রিয়।

sharp ইনস্টল করা

npm install sharp --save

Image Optimization (Sharp) API তৈরি করা

ইমেজ আপলোড করার পর, আমরা সেই ইমেজটি অপটিমাইজ করব sharp এর মাধ্যমে।

// server/routes/image.routes.js

const sharp = require('sharp');

// Image Optimization ফাংশন
router.post('/optimize', upload.single('image'), (req, res) => {
  if (!req.file) {
    return res.status(400).send({ message: 'No file uploaded.' });
  }

  // ইমেজ অপটিমাইজেশন
  const optimizedPath = 'uploads/optimized-' + req.file.filename;

  sharp(req.file.path)
    .resize(800, 800)  // ইমেজের আকার রিসাইজ করা
    .jpeg({ quality: 80 })  // JPEG ফরম্যাটে কমপ্রেশন করা
    .toFile(optimizedPath, (err, info) => {
      if (err) {
        return res.status(500).send({ message: 'Error optimizing image.' });
      }
      res.status(200).send({ message: 'Image optimized successfully', filePath: optimizedPath });
    });
});

এখানে, sharp ব্যবহার করে ইমেজের সাইজ 800x800 পিক্সেলে রিসাইজ করা হচ্ছে এবং JPEG ফরম্যাটে কোয়ালিটি 80% রেখে ইমেজ কমপ্রেশন করা হচ্ছে।

৩. Image Displaying in AngularJS

এখন, AngularJS ব্যবহার করে আপলোড এবং অপটিমাইজ করা ইমেজটি ডিসপ্লে করা হবে।

Image Displaying in AngularJS

// app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>Upload and Display Image</h1>
      <input type="file" (change)="onFileSelected($event)" />
      <img *ngIf="imagePath" [src]="imagePath" alt="Uploaded Image" />
    </div>
  `
})
export class AppComponent {
  imagePath: string;

  constructor(private http: HttpClient) {}

  // ফাইল সিলেক্ট হওয়ার পর ইমেজ আপলোড করা
  onFileSelected(event) {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('image', file);

    // ইমেজ আপলোড করা
    this.http.post<{ message: string, filePath: string }>('http://localhost:3000/api/upload', formData)
      .subscribe(response => {
        console.log(response.message);
        this.imagePath = `http://localhost:3000/${response.filePath}`;  // ইমেজের path সেট করা
      });
  }
}

এখানে, AngularJS এর মাধ্যমে ফাইল সিলেক্ট করা হচ্ছে এবং HttpClient ব্যবহার করে সার্ভারে ফাইল পাঠানো হচ্ছে। তারপর, সাফল্যের সাথে ইমেজ আপলোড হলে, imagePath প্রপার্টি ব্যবহার করে ইমেজটি ডিসপ্লে করা হচ্ছে।

৪. Lazy Loading (Optional)

ইমেজ লোডিং স্পিড আরও দ্রুত করতে Lazy Loading ব্যবহার করা যেতে পারে, যেখানে ইমেজটি তখনই লোড হয় যখন এটি স্ক্রিনে ভিউ করা হয়।

AngularJS এ lazy loading করার জন্য:

<img [lazyLoad]="imagePath" alt="Image" />

এই ক্ষেত্রে, ইমেজটি তখনই লোড হবে যখন এটি ভিউপোর্টে আসবে। Angular বা JavaScript এর অন্যান্য লাইব্রেরি ব্যবহার করে lazy loading আরও কাস্টমাইজ করা যেতে পারে।

সারাংশ

MeanJS স্ট্যাক ব্যবহার করে ইমেজ অপটিমাইজেশন এবং ডিসপ্লে একটি কার্যকর প্রক্রিয়া। multer ব্যবহার করে ফাইল আপলোড, sharp ব্যবহার করে ইমেজ অপটিমাইজেশন এবং AngularJS ব্যবহার করে ইমেজ ডিসপ্লে করা হয়। ইমেজের সাইজ কমানোর জন্য রিসাইজ এবং কমপ্রেশন করা যেতে পারে, এবং লোডিং স্পিড উন্নত করার জন্য lazy loading ব্যবহার করা যেতে পারে।