Next.js Image Optimization (next/image) Sinhala Guide | SC Guide

කොහොමද යාළුවනේ! අද අපි කතා කරන්න යන්නේ Next.js වලින් අපේ Web Applications වලට Images සහ අනිත් Assets කොහොමද add කරන්නේ, ඒ වගේම ඒ Images කොහොමද හොඳම විදියට Optimize කරලා, අපේ site එකේ Performance එක වැඩි කරගන්නේ කියලා. Next.js මේ දේට දෙන next/image කියන component එක ඇත්තටම නියමයි!

අද කාලේ වෙබ් අඩවියක සාර්ථකත්වයට Performance කියන එක හරිම වැදගත්. ගූගල් වගේ search engine වල හොඳ Ranking එකක් ගන්නත්, ඒ වගේම User Experience (UX) එක හොඳ කරන්නත්, වෙබ් අඩවිය ඉක්මනින් Load වෙන එක අත්‍යවශ්‍යයි. Images කියන්නේ වෙබ් අඩවියක වැඩිම bandwidth එකක් පරිභෝජනය කරන දේවල් වලින් එකක්. ඒ නිසා Images හරියට Optimize කරගන්නේ නැත්නම්, අපේ site එක හරිම Slow වෙන්න පුළුවන්. නමුත්, Next.js මේ ප්‍රශ්නයට නියම විසඳුමක් දීලා තියෙනවා.

Next.js වල Static Assets කොහොමද Handle කරන්නේ? (public directory)

මචන්ලා, Next.js Project එකක් හදනකොට ඒකේ public කියල folder එකක් තියෙනවා නේද? මේක තමයි අපේ site එකට ඕන කරන හැම static asset එකක්ම (Images, Fonts, Videos, Favicons වගේ දේවල්) තියන්න ඕන තැන. මේ public folder එකේ තියෙන ඕනම file එකක් root path එකෙන් direct access කරන්න පුළුවන්.

උදාහරණයක් විදියට, ඔයාගේ public folder එක ඇතුළේ images කියල folder එකක් හදලා ඒක ඇතුළේ my-profile-pic.jpg කියල image එකක් දැම්මොත්, ඔයාට ඒක Web Application එක ඇතුළේ /images/my-profile-pic.jpg විදියට access කරන්න පුළුවන්.

public Directory එකෙන් Static Assets Access කරන හැටි

මේක හරිම සරලයි. සාමාන්‍ය HTML <img> tag එකක් වුණත් පාවිච්චි කරන්න පුළුවන්, හැබැයි src attribute එකට public folder එකේ root එකෙන් පටන් ගන්න path එක දෙන්න ඕන.

<!-- public/my-logo.png තියෙනවා නම් -->
<img src="/my-logo.png" alt="My Company Logo" />

<!-- public/assets/images/header.jpg තියෙනවා නම් -->
<img src="/assets/images/header.jpg" alt="Header Image" />

<!-- CSS එකකින් background image එකක් දෙනවා නම් -->
.hero-section {
  background-image: url('/background.webp');
}

මේ විදියට static assets යූස් කරන එක හරිම පහසුයි. හැබැයි මේ සාමාන්‍ය <img> tag එකේ ලොකු ගැටලු තියෙනවා, විශේෂයෙන්ම Performance පැත්තෙන්. Images විශාල ප්‍රමාණයක් තියෙන site වල මේකෙන් Performance එකට ලොකු බලපෑමක් වෙන්න පුළුවන්. Slow loading, Layout Shift වගේ ප්‍රශ්න එන්න පුළුවන්. ඔන්න ඔතනට තමයි next/image component එක එන්නේ!

next/image Component එකේ Magical Powers! ✨

Next.js වල next/image component එක කියන්නේ, Images Optimize කරන්නම හදපු විශේෂ component එකක්. මේක සාමාන්‍ය <img> tag එකට වඩා ගොඩක් දේවල් කරනවා, ඔයාගේ වෙහෙසක් නැතුවම. මේකෙන් ඔයාට Image Optimization ගැන වැඩිපුර හිතන්න ඕන වෙන්නේ නැහැ.

next/image වලින් ලැබෙන ප්‍රධාන වාසි:

• Automatic Image Optimization: Next.js build process එකේදී හෝ request එක එන වෙලාවේදී (on-demand), images optimize කරනවා. ඒ කියන්නේ, images resize කරනවා, වෙනත් format (WebP වගේ) වලට convert කරනවා. මේකෙන් file size එක ගොඩක් අඩු වෙනවා.
• Lazy Loading: Default විදියට images lazy load වෙනවා. ඒ කියන්නේ, image එකක් browser එකේ viewport එකට එනකල් load වෙන්නේ නැහැ. මේකෙන් Initial Load Time එක ගොඩක් අඩු වෙනවා, මොකද මුලින්ම පේන content එකට විතරක් browser එකේ resources වැය වෙන නිසා.
• Responsive Images: විවිධ device sizes වලට ගැලපෙන විදියට images generate කරනවා. ඒ කියන්නේ, phone එකකින් බලන කෙනෙකුට පොඩි image එකකුයි, desktop එකකින් බලන කෙනෙකුට ලොකු image එකකුයි load වෙන්නේ. මේකෙන් bandwidth save වෙනවා, Load time අඩු වෙනවා, සහ User Experience එකත් හොඳ වෙනවා.
• Layout Shift Prevention: width සහ height attributes දෙනකොට, image load වෙනකල් ඒකට තැනක් වෙන් කරලා තියනවා. ඒකෙන් image load වෙනකොට page එකේ content එහාට මෙහාට shift වෙන එක (Layout Shift - CLS) නවතිනවා. මේක Google Core Web Vitals වලටත් හරිම වැදගත්.

next/image කොහොමද පාවිච්චි කරන්නේ?

මුලින්ම ඔයාට next/image component එක next/image වලින් import කරගන්න ඕන.

import Image from 'next/image';

ඊට පස්සේ, ඔයාගේ JSX එක ඇතුළේ <Image> component එක පාවිච්චි කරන්න පුළුවන්. සාමාන්‍යයෙන් src (image path එක) සහ alt (image එක ගැන විස්තරයක්) කියන props දෙක අනිවාර්යයෙන්ම දෙන්න ඕන. width සහ height කියන props දෙකත් Layout Shift නවත්වන්න අනිවාර්යයි.

import Image from 'next/image';

function HomePage() {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>

      <!-- public folder එකේ තියෙන image එකක් -->
      <Image
        src="/images/nextjs-logo.png"
        alt="Next.js Logo"
        width={500} // Image එකේ original width එක හෝ අපිට ඕන width එක
        height={300} // Image එකේ original height එක හෝ අපිට ඕන height එක
      />

      <p>This is a sample image optimized by Next.js.</p>

      <!-- External URL එකකින් image එකක් -->
      <Image
        src="https://via.placeholder.com/600x400.png?text=External+Image"
        alt="A placeholder image from an external source"
        width={600}
        height={400}
      />
    </div>
  );
}

export default HomePage;

උඩ තියෙන example එකේ width සහ height props දෙක දුන්නා මතකද? මේක next/image එක්ක හරිම වැදගත්. මේකෙන් තමයි Next.js ට image එකට කොච්චර ඉඩක් තියාගන්න ඕනද කියලා තේරෙන්නේ, ඒකෙන් Layout Shift නවත්වනවා.

layout Prop එක සහ එහි බලපෑම

layout prop එකෙන් image එක render වෙන විදිය control කරන්න පුළුවන්. මේකෙන් තමයි image එක Responsive වෙන්නේ කොහොමද, නැත්නම් Fixed size එකකට තියෙනවද වගේ දේවල් තීරණය වෙන්නේ. ප්‍රධාන layout types හතරක් තියෙනවා:

1. layout="intrinsic" (Default): Image එකේ original size එකේම render වෙනවා. හැබැයි viewport එක පොඩි වෙනකොට ඒකට ගැලපෙන විදියට scale වෙනවා. Layout shift වළක්වනවා.
2. layout="fixed": Image එක හැමවෙලේම ඔයා දීපු width සහ height වලටම Render වෙනවා. Screen size එක වෙනස් වුණත් මේක වෙනස් වෙන්නේ නැහැ. Icon එකක් වගේ පොඩි, නියත size images වලට මේක හොඳයි.
3. layout="responsive": Image එක container එකේ width එකට relative විදියට scale වෙනවා. width සහ height දෙකම අනිවාර්යයි, ඒකෙන් aspect ratio එක maintain කරනවා. බොහොමයක් content images වලට මේක තමයි හොඳම option එක.
4. layout="fill": Image එක container එකේ සම්පූර්ණ space එක පුරාම fill වෙනවා. මේක object-fit CSS property එක වගේ වැඩ කරනවා. Background images, hero sections වගේ දේවල් වලට මේක ගොඩක් ප්‍රයෝජනවත්. මේක යූස් කරනකොට අනිවාර්යයෙන්ම parent container එකට position: relative (or absolute, fixed, sticky) එකක් දෙන්න ඕන.

import Image from 'next/image';

function ImageLayoutExamples() {
  return (
    <div>
      <h3>Fixed Layout (For fixed size icons/thumbnails)</h3>
      <Image
        src="/images/icon.png"
        alt="Small Icon"
        width={32}
        height={32}
        layout="fixed"
      />

      <h3>Responsive Layout (Scales with parent, maintains aspect ratio)</h3>
      <div style={{ maxWidth: '700px', margin: '20px auto', border: '1px solid #ddd' }}>
        <Image
          src="/images/product-showcase.jpg"
          alt="Product Showcase"
          width={800} // Original width
          height={600} // Original height
          layout="responsive"
        />
      </div>

      <h3>Fill Layout (Fills parent, parent must have position relative/absolute)</h3>
      <div style={{ position: 'relative', width: '100%', height: '300px', border: '1px solid #ddd' }}>
        <Image
          src="/images/hero-background.jpg"
          alt="Hero Background"
          layout="fill"
          objectFit="cover" // Optional: how the image should fit
        />
      </div>
    </div>
  );
}

export default ImageLayoutExamples;

priority Prop එකේ වැදගත්කම

priority කියන prop එක true කරොත්, ඒ image එක "high-priority" image එකක් විදියට සලකනවා. ඒ කියන්නේ, Next.js ඒ image එක වෙන අයට කලින් preload කරනවා. මේක පාවිච්චි කරන්න ඕන, ඔයාගේ page එකේ viewport එකේ මුලින්ම පේන (above-the-fold) images වලට විතරයි. උදාහරණයක් විදියට, Hero image එකකට මේක දෙන්න පුළුවන්. මේක CLS (Cumulative Layout Shift) සහ LCP (Largest Contentful Paint) score වැඩි දියුණු කරන්න උදව් වෙනවා.

import Image from 'next/image';

function HeroSection() {
  return (
    <div>
      <Image
        src="/images/hero-banner.jpg"
        alt="Main Hero Banner"
        width={1920}
        height={1080}
        layout="responsive"
        priority={true} // මේ image එක මුලින්ම load වෙන්න ඕන
      />
      <h2>අපේ අලුත්ම Collection එක බලන්න!</h2>
    </div>
  );
}

export default HeroSection;

ප්‍රායෝගික උපදෙස් සහ ගැටලු නිරාකරණය (Practical Tips & Troubleshooting)

1. Broken Image Paths (Images Load වෙන්නේ නැද්ද?)

ගොඩක් වෙලාවට එන ප්‍රශ්නයක් තමයි image path එක වැරදි වෙන එක. next/image පාවිච්චි කරනකොට, src එකට public folder එකේ root එකෙන් පටන් ගන්න path එක දෙන්න ඕන. / එකෙන් පටන් ගන්නවා කියන්නේ public folder එකෙන් පටන් ගන්නවා කියන එක.

• වැරදි: src="images/my-image.jpg" (relative path)
• නිවැරදි: src="/images/my-image.jpg" (absolute path from public)

External URLs (උදා: Unsplash, Pexels) වලින් images පාවිච්චි කරනවා නම්, Next.js වල next.config.js file එකේ images domain එක allow කරන්න ඕන. නැත්නම් ඒ images load වෙන්නේ නැහැ.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['via.placeholder.com', 'example.com', 'images.unsplash.com'], // ඔයාගේ external domains මෙතනට දාන්න
  },
};

module.exports = nextConfig;

2. Layout Shift (CLS) issues (Images Load වෙනකොට page එක පනිනවද?)

මේක තමයි next/image පාවිච්චි නොකරනකොට එන ප්‍රධානම ප්‍රශ්නයක්. next/image පාවිච්චි කරනකොටත් width සහ height props දෙක අනිවාර්යයෙන්ම දෙන්න ඕන. මේකෙන් image එක load වෙන්න කලින් ඒකට කොච්චර ඉඩක් තියාගන්න ඕනද කියලා browser එකට කියනවා. ඒකෙන් page එක load වෙනකොට content එහාට මෙහාට පනින එක නවතිනවා. (layout="fill" නම් width/height දෙන්න අවශ්‍ය නැහැ, මොකද ඒක parent එක fill කරන නිසා, හැබැයි parent එකේ height/width එකක් තියෙන්න ඕන.)

layout="responsive" හෝ layout="intrinsic" පාවිච්චි කරනකොට width සහ height දෙන්නම ඕන, ඒකෙන් aspect ratio එක maintain වෙනවා.

3. next/image පාවිච්චි නොකළ යුත්තේ කවදාද?

ගොඩක් වෙලාවට next/image පාවිච්චි කරන එක තමයි හොඳම දේ. හැබැයි සමහර වෙලාවට සාමාන්‍ය <img> tag එක පාවිච්චි කරන්න වෙන අවස්ථා තියෙනවා:

• හරිම පොඩි icons වලට (16x16, 24x24 වගේ). මේවා optimize කරන එකෙන් ලැබෙන වාසියට වඩා component එකේ overhead එක වැඩි වෙන්න පුළුවන්. ඒ වගේම මේවා CSS Sprites හෝ SVG icons විදියට යොදාගන්න පුළුවන්.
• Inline SVG images වලට.
• ඔයාට දැනටමත් වෙන custom image CDN එකක් හෝ optimization service එකක් තියෙනවා නම්, ඒක Next.js වලට වඩා හොඳට optimize කරනවා නම්.

Best Practices & Common Issues

• හැමවිටම next/image පාවිච්චි කරන්න: ගොඩක් images වලට මේක තමයි හොඳම option එක. Performance, SEO, සහ User Experience වලට මේකෙන් ලොකු දායකත්වයක් දෙනවා.
• Pre-optimize Original Images: Next.js optimize කළත්, original image එක හැකි තරම් කුඩා size එකක තියාගන්න එක වැදගත්. Photoshop, Squoosh.app, TinyPNG වගේ tools පාවිච්චි කරන්න. ඒකෙන් Next.js ටත් optimize කරන්න පහසු වෙනවා.
• Semantic alt Text: හැම image එකකටම ඒ image එක ගැන හොඳ විස්තරයක් alt attribute එකෙන් දෙන්න. මේක SEO වලටත්, Accessibility වලටත් හරිම වැදගත්. Screen readers පාවිච්චි කරන අයට මේකෙන් තමයි image එක තේරෙන්නේ.
• priority එක බුද්ධිමත්ව පාවිච්චි කරන්න: Page එක load වෙනකොට මුලින්ම පේන (above-the-fold) images වලට විතරක් priority={true} දෙන්න. අනවශ්‍ය විදියට මේක පාවිච්චි කළොත් Performance එකට නරක විදියට බලපාන්න පුළුවන්.

අවසාන වශයෙන් (Conclusion)

Next.js වල next/image component එක කියන්නේ Web Performance ගැන හිතන ඕනම Developer කෙනෙකුට හරිම වටින tool එකක්. මේක පාවිච්චි කරන එකෙන් ඔයාට images manually optimize කරන්න, lazy load කරන්න, responsive කරන්න වෙන වෙහෙස ගොඩක් අඩු කරගන්න පුළුවන්. ඒ වගේම මේකෙන් ඔයාගේ Application එකේ Load Time එක අඩු වෙලා, User Experience එකත්, SEO Ranking එකත් වැඩි වෙනවා.

ඉතින්, මේක ඔයාගේ Next.js Project වලට apply කරලා බලන්න. මොන වගේ වෙනසක්ද ඔයාට දැනුනේ? ඔයා මේකේදී මුහුණ දුන්න ගැටලු මොනවද? පහළින් Comment කරලා ඔයාගේ අත්දැකීම් අපිත් එක්ක බෙදාගන්න. මේ වගේ තවත් Next.js tips & tricks ගැන දැනගන්න අපිත් එක්ක රැඳී සිටින්න!