6 Dakika

Next.js ve lqip-modern ile LQIP Nasıl Oluşturulur?

Laravel ile çalışan bir projeniz var, modellara, querylere, n+1 problemine ve diğer performans detaylarına dikkat ederek sistem yazdınız. Ancak site açılırken yine de yavaş açılıyor ve çeşitli performans servislerinde düşük puanlar alıyorsunuz.

Eğer böyle bir senaryo içersindeyseniz muhtemelen sorun görsellerinizdedir. Tabiki bunu çözmenin yolları var örneğin defer yani Lazyload.

Ancak size de öyle geliyor mu bilmiyorum ama lazyload UI olarak bana hep kötü bir tercih olarak gelmiştir. Çünkü görseller yüklenene kadar yerleri boş kalıyor ve kötü bir görüntü oluşturuyor.

Siz de benim gibi düşünüyorsunuz o zaman neşelenin, çünkü bu sorunu çözmenin bir yolu daha var. LQIP Modern.

LQIP Nedir?

Öncelikle LQIP'nin ne olduğuna bakalım. LQIP, Low Quality Image Placeholders yani Düşük Kaliteli Görsel Yertutucu.

LQIP'ler söz konusu görseli küçültülerek, bulanıklaştırarak ve kalitesini azaltarak elde edilir. Asıl görsel yüklenene kadar placeholder görevi görür.

Boyutları son derece düşük olduğundan FCP(First Contentful Paint) süresini önemli derecede azaltırlar.

Uyumluluk

Burada ufak bir parantez açalım. WebP'ler neredeyse bütün modern tarayıcılarda desteklenmektedir, ancak macOs kullanıyorsanız Safari'de macOs 11(Big Sur) ve sonrasında desteklenmektedir.

%100 uyumluluk istiyorsanız, JPEG LQIP kullanabilirsiniz.

Next.js ve LQIP Modern

Next.js'in next/image adında local dosyalarda LQIP için in-built paketi mevcut, ancak uzak görüntüleri desteklemiyor maalesef.

LQIP görüntüler derleme sırasında oluşur, yani bu demek oluyorki uzak görsel değişirse LQIP aynı kalacak.

Eğer görselleri bir CMS'ten alıyorsanız bu iyi çünkü next.js'in on-demand Incremental Static Regeneration özelliği ile görsellerde değişiklik olduğunda LQIP'leri tekrar oluşturabilirsiniz.

Bu yazı için Unsplash'ten herhangi bir görsel seçiyorum.

Öncelikle bir Next.js uygulaması oluşturalım.

npx create-next-app next-lqip-demo

Daha sonra pages/index.js dosyasına aşağıdaki kodları ekleyin.

pages/index.js
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Next.js ile LQIP Modern Önizleme Görselleri Oluşturmak</title>
</Head>
<main className={styles.main}>
<div style={{ marginTop: "4rem" }}>
<Image
src="https://images.unsplash.com/photo-1652128656618-918516c50029"
alt="Anastasia Saldatava"
height={1200}
width={800}
/>
</div>
</main>
</div>
);
}

next.config.js içerisine aşağıdaki kodları ekleyin.

next.config.js
const nextConfig = {
reactStrictMode: true,
images: {
domains: ["images.unsplash.com"],
},
};
module.exports = nextConfig;

next/image componentini kullanırken görseli uzaktan çekeceğimiz için görseli çektiğimiz domaini buraya eklememiz gerekiyor.

Şimdi uygulamamızı npm run dev yada yarn dev ile çalıştıralım.


Next LQIP Demo

Sayfayı ilk açtığınızda görselin yüklenmesinin birkaç saniye sürdüğünü fark edeceksiniz. Tabiki bu internet hızınıza göre değişecektir.

Görselleri Optimize Etmek İçin LQIP Kullanma

Öncelikle lqip-modern ve sharp paketlerini yükleyelim. Sharp görselleri manipüle etmemize yarayan lqip-modern tarafından kullanılan bir pakettir.

npm install --save lqip-modern sharp

Daha sonra pages/index.js dosyasıdaki kodu aşağıdakiyle değiştirelim.

pages/index.js
import lqipModern from "lqip-modern";
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
export default function Home({ imageUrl, previewImageUrl }) {
return (
<div className={styles.container}>
<Head>
<title>Next.js ile LQIP Modern Önizleme Görselleri Oluşturmak</title>
</Head>
<main className={styles.main}>
<div style={{ marginTop: "4rem" }}>
<Image
src="https://images.unsplash.com/photo-1652128656618-918516c50029"
alt="Anastasia Saldatava"
height={1200}
width={800}
placeholder="blur"
blurDataURL={previewImageUrl}
/>
</div>
</main>
</div>
);
}
export const getStaticProps = async () => {
const unsplashImageUrl =
"https://images.unsplash.com/photo-1652128656618-918516c50029";
const image = await fetch(unsplashImageUrl);
const imageBuffer = Buffer.from(await image.arrayBuffer());
const previewImage = await lqipModern(imageBuffer);
return {
props: {
imageUrl: unsplashImageUrl,
previewImageUrl: previewImage.metadata.dataURIBase64,
},
};
};

Öncelikle getStaticProps içerisinde görselimizi çekiyoruz ve bunu bir Buffer'e çeviriyoruz. Daha sonra Buffer'a dönüştürdüğümüz objeyi lqip-modern ile manipüle ediyoruz.

lqip-modern bize meta veriler içeren bir object döndürüyor. Bu veriler içerisinden dataURIBase64 değerini alıyoruz ve proplar ile client-side'a gönderiyoruz.

Client-side tarafında Image componentimize placeholder="blur" adında bir parametre ekledik. Bu uzak bir görsel olduğu için componentimize blurDataURL parametresini göndermemiz gerekiyor, buraya proplar ile gönderdiğimiz previewImageUrl değerini veriyoruz.

Şimdi sayfayı yenilediğinizde görsel hala yükleniyor ancak bu sefer LQIP ile birlikte.


Next LQIP Text

lqip-modern bize sadece 94 Bayt büyüklüğünde bir placeholder oluşturdu.


Next LQIP Filesize

Webp Yerine JPEG Kullanmak

Blogun başında da belirttiğim gibi eğer %100 tarayıcı uyumluluğu istiyorsanız WebP değil JPEG kullanmalısınız. previewImage değişkeninin aşağıdaki şekilde güncelleyin.

pages/index.js
const previewImage = await lqipModern(imageBuffer, { outputFormat: "jpeg" });

İşte Bu Kadar!

Evet, işte bu kadar. Umarım bu yazı lqip-modern ve LQIP hakkındaki sorularınıza cevap olmuştur. Yararlı bulduysanız paylaşmayı unutmayın 😚