Пріоритетне та відкладене завантаження зображень · fullstack.org.ua

fullstack.org.ua

Пріоритетне та відкладене завантаження зображень · fullstack.org.ua

import Image from "next/image";

export default function Gallery() {
  return (
    <section>
      <h2>Фотогалерея</h2>

      <Image
        src="/images/photo-1.jpg"
        alt="Гори на заході сонця"
        width={1200}
        height={800}
      />
    </section>
  );
}

tsx

import Image from "next/image";

export default function ArticleHeader() {
  return (
    <header>
      <Image
        src="/images/nextjs-guide-cover.jpg"
        alt="Обкладинка посібника з Next.js"
        width={1600}
        height={900}
        preload
      />

      <h1>Оптимізація зображень у Next.js</h1>
    </header>
  );
}

tsx

import Image from "next/image";

const paragraphs = [
  "Next.js оптимізує зображення та допомагає контролювати їхнє завантаження.",
  "Критичні ресурси потрібно завантажувати якомога раніше.",
  "Некритичні зображення краще завантажувати лише тоді, коли вони наближаються до viewport.",
];

export default function ArticlePage() {
  return (
    <main>
      <article>
        <header>
          <Image
            src="/images/article-cover.jpg"
            alt="Розробник працює над вебзастосунком"
            width={1600}
            height={900}
            preload
          />

          <h1>Як пришвидшити завантаження сторінки</h1>
        </header>

        {paragraphs.map((paragraph) => (
          <p key={paragraph}>{paragraph}</p>
        ))}

        <Image
          src="/images/article-diagram.jpg"
          alt="Схема завантаження ресурсів сторінки"
          width={1200}
          height={700}
          loading="lazy"
        />

        <p>
          Відкладене завантаження дає браузеру змогу спочатку зосередитися на
          ресурсах, потрібних для першого екрана.
        </p>

        <Image
          src="/images/article-example.jpg"
          alt="Приклад оптимізованого інтерфейсу"
          width={1200}
          height={700}
          loading="lazy"
        />
      </article>
    </main>
  );
}

tsx

import Image from "next/image";

export default function Hero() {
  return (
    <section className="hero">
      <Image
        src="/images/hero.jpg"
        alt="Місто в ранковому тумані"
        fill
        preload
        sizes="100vw"
        style={{ objectFit: "cover" }}
      />
    </section>
  );
}

tsx

<Image src="/images/one.jpg" alt="..." width={800} height={500} preload />
<Image src="/images/two.jpg" alt="..." width={800} height={500} preload />
<Image src="/images/three.jpg" alt="..." width={800} height={500} preload />