09 — Image komponenta (next/image)

Výuka

Proč to existuje?

Obrázky jsou často největší soubory na webových stránkách — mohou mít několik megabytů. Pokud je nenačítáš efektivně, stránka bude pomalá a uživatelé odejdou.

Tradiční tag má problémy:

• Načítá obrázky v původní velikosti (i když je zobrazuješ malé)
• Nenabízí moderní formáty (WebP, AVIF) které jsou menší
• Načítá všechny obrázky najednou (i ty, které uživatel ještě nevidí)
• Způsobuje "layout shift" — stránka skáče, když se obrázky načtou

next/image všechny tyto problémy řeší automaticky.

Jak to funguje?

Komponenta Image z next/image:

1. Automaticky mění velikost — generuje správnou velikost pro zařízení uživatele
2. Používá moderní formáty — WebP/AVIF místo PNG/JPG (menší soubory)
3. Lazy loading — načítá obrázky, až když jsou blízko zobrazení
4. Prevence layout shift — rezervuje prostor, aby stránka neskákala
5. Blur placeholder — zobrazí rozmazaný náhled během načítání

K čemu to slouží?

• Rychlejší načítání — menší soubory = rychlejší web
• Lepší Core Web Vitals — lepší skóre v Google (SEO)
• Automatická optimalizace — nemusíš ručně upravovat obrázky
• Responsivní — správná velikost pro mobil, tablet, desktop

JavaScript

// app/page.js
import Image from 'next/image'

export default function Home(){
  return (
    <div>
      <h1>Naše galerie</h1>

      {/* Místní obrázek (z public/ složky) */}
      <Image
        src="/logo.png"
        alt="Logo firmy"
        width={200}
        height={100}
      />

      {/* Obrázek z externí URL */}
      <Image
        src="https://example.com/photo.jpg"
        alt="Fotka produktu"
        width={600}
        height={400}
      />

      {/* S prioritou (pro LCP - Largest Contentful Paint) */}
      <Image
        src="/hero.jpg"
        alt="Hlavní obrázek"
        width={1200}
        height={600}
        priority  // Načte se hned, nepoužívá lazy loading
      />
    </div>
  )
}

Import lokálních obrázků (doporučeno)

import Image from 'next/image'
import logoImg from '@/public/logo.png'  // Import obrázku

export default function Header(){
  return (
    <header>
      {/* Next.js automaticky vyplní width a height */}
      <Image
        src={logoImg}
        alt="Logo"
        // width a height se doplní automaticky z importu!
      />
    </header>
  )
}

Responsivní obrázky (fill)

import Image from 'next/image'

export default function Hero(){
  return (
    <div style={{ position: 'relative', width: '100%', height: '400px' }}>
      <Image
        src="/hero.jpg"
        alt="Hero obrázek"
        fill  // Vyplní celý rodičovský element
        style={{ objectFit: 'cover' }}  // Jak se obrázek přizpůsobí
      />
    </div>
  )
}

TypeScript

import Image from 'next/image'
import type { StaticImageData } from 'next/image'
import logoImg from '@/public/logo.png'

export default function Header(): JSX.Element{
  return (
    <header>
      <Image
        src={logoImg}
        alt="Logo"
      />
    </header>
  )
}

// Komponenta s prop pro obrázek
interface AvatarProps {
  src: string | StaticImageData
  alt: string
  size?: number
}

export default function Avatar({ src, alt, size = 64 }: AvatarProps): JSX.Element{
  return (
    <Image
      src={src}
      alt={alt}
      width={size}
      height={size}
      style={{ borderRadius: '50%' }}
    />
  )
}

Rozdíl JS vs TS

TypeScript přidává:

• Typy pro props (ImageProps typ z Next.js)
• StaticImageData typ pro importované obrázky
• Kontrolu povinných props (width, height, nebo fill)

Konfigurace pro externí obrázky

Pro obrázky z externích URL musíš povolit domény v next.config.js:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
      {
        protocol: 'https',
        hostname: 'cdn.example.com',
        pathname: '/images/**',
      },
    ],
  },
}

Důležité props komponenty Image

<Image
  src="/photo.jpg"           // Povinné: cesta k obrázku
  alt="Popis"                // Povinné: popis pro accessibility
  width={600}                // Povinné (kromě fill): šířka
  height={400}               // Povinné (kromě fill): výška

  // Volitelné
  priority={true}            // Načte hned (pro hlavní obrázky)
  quality={90}               // Kvalita 1-100 (výchozí 75)
  placeholder="blur"         // Rozmazaný placeholder během načítání
  blurDataURL="data:..."     // Custom blur placeholder
  fill                       // Vyplní rodičovský element
  sizes="(max-width: 768px) 100vw, 50vw"  // Responsivní velikosti
  style={{ objectFit: 'cover' }}  // CSS object-fit
  className="rounded-lg"     // CSS třída
  onLoadingComplete={() => {}}  // Callback po načtení
/>

Tip

• Vždy používej Image místo — automatická optimalizace zdarma
• Priority pro hlavní obrázky — použij priority pro hero images (zlepší LCP)
• Import lokálních obrázků — Next.js automaticky doplní šířku/výšku
• Externí obrázky — nezapomeň přidat domény do next.config.js
• Alt text je povinný — důležité pro SEO a accessibility
• Fill pro responsivní — když chceš, aby obrázek vyplnil prostor

Blur placeholder (lokální obrázky)

import Image from 'next/image'
import photo from '@/public/photo.jpg'

export default function Gallery(){
  return (
    <Image
      src={photo}
      alt="Fotka"
      placeholder="blur"  // Automatický blur z importu!
    />
  )
}

Sizes prop pro responsivní obrázky

<Image
  src="/photo.jpg"
  alt="Fotka"
  fill
  sizes="(max-width: 768px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  // Na mobilu = 100% šířky viewportu
  // Na tabletu = 50% šířky
  // Na desktopu = 33% šířky
/>