Next.js Image Component'ini Boşuna Kullanmak

Hero'ya Image koydum, LCP düzeldi. Sonra her ikona, her emoji yerine PNG'ye, her 16 piksellik ok'a da Image sardım. Optimizasyon kuyruğu şişti, remote host reddetti, fill kullandığım bir kart parentsiz olduğu için yükseklik sıfırlandı. Component suçlu değildi. Ben her gördüğüm yere sarmalayıcı koyuyordum.

import Image from "next/image";

export function Cover({
  src,
  alt,
}: {
  src: string;
  alt: string;
}) {
  return (
    
  );
}

Kapak: bilinen oran, geniş kaynak, LCP adayı. width/height rezerv yer tutar, sizes doğru dosyayı seçer, priority preload ister. Bu üçü yoksa Image, ekstra bir wrapper ve /_next/image URL'sidir. 24×24 ikonda srcset üretmek kazanç değil, gezi.

Uzak görsel için remotePatterns şart. Unutunca runtime hata. Her CDN host'unu wildcard açmak da ters uç: optimize edilmemiş her URL senin sunucuna proxy olur. Statik ikon public/ içinde kalır, düz img veya SVG. Image'i 'daha modern img' sanmak, dönüştürücüyü süsle karıştırmak. Dönüştürücü, büyük ve ölçülen yerde durur.

fill ve parent

fill, parent position relative ve bir yükseklik ister. Kartta ikisi de yoksa görsel çöker, layout sıfırlanır. Bunu 'Image bozuk' diye değil, 'kutu yok' diye okuyorum. width/height verebiliyorsam fill kullanmıyorum. fill, oran belli, genişlik akışkan kapaklarda durur. Icon'da fill saçmalık.

priority her kapağa yazılınca LCP adayları çoğalır, tarayıcı hangisini seçeceğini şaşırır. Bir sayfada bir priority. O da gerçekten ilk boyanan kapak. Altındaki üç kart eager kalır veya default lazy. Image varsayılanı tembeldir; her yeri priority yapmak, tembeli iptal etmek. Boşuna kullanmak yalnızca sarmalamak değil, her prop'u varsayılan sanmak da.

SVG ve ikon

SVG'yi Image'e sokmak, vektörü bitmap hattına sokmaktır. Renk currentColor ile gelsin istiyorsan img de yetmez, inline SVG veya ikon bileşeni gerekir. 16 piksellik bir oku /_next/image üzerinden geçirmek, hem hop hem format. public/icons altında durur, düz img veya component. Image, fotoğraf ve geniş kapak içindir. İkon, başka bir aile.

sizes yazmadan width=1200 vermek, dar ekranda 1200'lük dosyayı indirmek olabilir. sizes, dönüştürücünün işini bitirir. Yazmazsan varsayılan 100vw gibi davranır; kart 320 pikselken bile. Boşuna kullanımın sessiz hali budur: component durur, kazanç durmaz. Kazancı ölçmek için network'te görsel URL'sine bakıyorum. w=640 yoksa sizes yok demektir.

Kalite ve format

quality varsayılanı çoğu kapakta yeter. 100'e çekmek, dönüştürücüyü iptal etmek gibi şişirir. placeholder=blur LCP kapağında hoş, ikonda anlamsız. Her prop'u 'tam dolu Image' diye yazmak, onuncu yazının tanımı. Az prop, doğru yer. Çok prop, her yer. İkincisini bırakınca LCP düşmedi, kuyruk düştü. Kuyruk da bir ölçü.

Statik import

import cover from './cover.jpg' width/height'i otomatik verir. Bunu kullanırken Image doğal durur. Uzak URL'de otomatik yok, sen yazarsın. Yazmazsan CLS. Image'i boşuna kullanmanın bir hali de bu: uzak URL, ölçü yok, fill yok, parent yok. Düz img + width/height attribute o durumda daha dürüst olabilir. Component, ölçüyü unutturmamalı. Unutturuyorsa sarmalayıcıdır, dönüştürücü değil.

unoptimized

unoptimized={true} her yerde, Image'i img yapar, kuyruğu da boşuna açarsın. Bazı animasyonlu GIF'lerde bilinçli. Kapakta bilinçsiz. Bayrağı varsayılan şablonuna koyan kişi, onuncu yazının kahramanı değildir. Kahraman, kapakta dönüştürür, ikonda dokunmaz. İkisi de 'görsel' diye aynı kutuya girmez.