Görsel ve font

Görsel ve Font Neden Önemli

Görseller ve fontlar sayfanın ilk görünüşünü doğrudan belirler. 2025'te mobil sayfaların %76'sında, masaüstü sayfaların %85'inde Largest Contentful Paint (LCP) öğesi bir görseldi; mobil sayfaların %87'si de en az bir web fontu kullanıyordu.¹ Yanlış yüklenen bir görsel LCP'yi geciktirir, boyutu belirtilmemiş bir görsel ya da geç gelen bir font ise Cumulative Layout Shift (CLS) ile sayfayı kaydırır. Bu metriklerin ne anlama geldiğini Core Web Vitals dersinde gördünüz; burada dört soruya bakıyoruz: hangi format, hangi boyut, hangi öncelik ve yer kayması nasıl önlenir.

Görsel Formatları

Kaynak: MDN'in format rehberi.² WebP bugün tüm modern tarayıcılarda çalışır. AVIF Chrome 85, Firefox 93 ve Safari 16.1'den beri desteklenir ama MDN hâlâ bir yedek format sunmanızı önerir.² Gerçek dünyada geçiş yavaş: 2025'te LCP görsellerinin %57'si JPG, %26'sı PNG, yalnızca %11'i WebP'ydi; AVIF ve diğerleri %2'nin altında kaldı.¹

Birden fazla format sunmanın yolu <picture>'dır. Tarayıcı type'ını desteklemediği <source>'u atlar, hiçbirini desteklemezse <img>'e düşer.³

<picture>
  <source srcset="kapak.avif" type="image/avif" />
  <source srcset="kapak.webp" type="image/webp" />
  <img src="kapak.jpg" width="1200" height="800" alt="Sahilde gün batımı" />
</picture>

Doğru Boyut: srcset ve sizes

Telefona 2000 piksellik masaüstü görselini göndermek, kullanıcının hiç görmeyeceği baytları indirtmektir. srcset tarayıcıya aynı görselin farklı genişlikteki kopyalarını, sizes ise görselin sayfada ne kadar yer kaplayacağını söyler; tarayıcı ekran genişliğine ve piksel yoğunluğuna göre en uygun dosyayı seçer.⁴

<img
  src="kapak-1000.jpg"
  srcset="kapak-500.jpg 500w, kapak-1000.jpg 1000w, kapak-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
  width="1000"
  height="667"
  alt="Sahilde gün batımı"
/>

Bu örnekte görsel 768px ve üstünde 500px genişliğinde, altında ekran genişliğinde gösterilir. 320px genişliğinde, piksel yoğunluğu 3 olan bir telefon 960 piksele ihtiyaç duyar ve tarayıcı 1000w dosyasını seçer.⁴ sizes içinde yüzde kullanılamaz, göreli değer için vw yazılır.⁵ Görsel her ekranda aynı boyuttaysa (avatar, logo) 1x, 2x yoğunluk tanımları yeterlidir.⁴

width ve height ile Yer Ayırmak

Görselin width ve height attribute'larını her zaman yazın. Tarayıcı bu iki değerden en-boy oranını hesaplar ve görsel inmeden önce yerini ayırır; böylece altındaki metin aşağı itilmez.⁷ Boyutu bilemediğiniz durumlarda CSS aspect-ratio ile yer ayırabilirsiniz.⁷ Bu hâlâ en yaygın hatalardan biri: 2025'te mobil sayfaların %62'sinde en az bir görselin boyutu eksikti.¹

loading="lazy": LCP Görselinde Değil

loading="lazy" görselin indirilmesini, görsel ekrana yaklaşana kadar erteler; sayfanın altındaki görseller ilk görünen içerikle bant genişliği için yarışmaz. Desteklemeyen tarayıcı attribute'u yok sayar.⁸

Tuzak, ilk ekranda görünen görseli de lazy yapmaktır. Tarayıcı görselin ekranda olduğunu ancak sayfayı yerleştirdikten sonra anlar ve indirme gecikir.⁸ WordPress üzerinde yapılan bir testte ilk ekrandaki görselleri lazy loading'den çıkarmak mobil LCP'yi %18 iyileştirdi, tasarruf edilen bayt miktarı ise değişmedi.⁹ Buna rağmen 2025'te mobil sayfaların yaklaşık %17'si LCP görselini hâlâ lazy yüklüyordu.¹

fetchpriority="high"

Tarayıcı ekrandaki bir görselin önceliğini normalde sayfayı yerleştirdikten sonra yükseltir. fetchpriority="high" LCP görselinin bunu beklemeden, baştan yüksek öncelikle istenmesini sağlar.¹⁰ Google Flights'ta LCP arka plan görseline yüksek öncelik vermek LCP'yi 2,6 saniyeden 1,9 saniyeye indirdi.¹⁰

<img src="hero.avif" fetchpriority="high" width="1200" height="600" alt="Kampanya görseli" />

Bu bir ipucudur, emir değil; tarayıcı yine kendi kararını verebilir.¹⁰ Bir carousel'de yalnızca ilk görsele high verin; her şeye yüksek öncelik vermek hiçbirini öne çıkarmaz.¹¹ Chrome DevTools'taki "LCP request discovery" insight'ı tam olarak üç şeye bakar: LCP görseli HTML'de doğrudan bulunabiliyor mu, fetchpriority=high var mı ve lazy yüklenmiyor mu.¹²

Next.js <Image>

next/image, <img>'in üstüne kurulu bir component'tir: srcset'i sizin yerinize üretir, tarayıcının desteklediği formatı Accept header'ına bakarak seçer ve varsayılan olarak lazy yükler.¹³

import Image from "next/image";
import hero from "./hero.jpg";

export function Hero() {
  return (
    <Image
      src={hero}
      alt="Kampanya görseli"
      sizes="100vw"
      loading="eager"
    />
  );
}

• Boyut: width ve height zorunludur ve yalnızca en-boy oranını bildirir, görünen boyutu CSS belirler; statik import edilen görsellerde (import hero from "./hero.jpg") otomatik okunur. Boyut bilinmiyorsa fill kullanılır, ebeveynin position: relative olması gerekir.¹³

• sizes: fill ya da CSS ile responsive yapılan görsellerde verin. Verilmezse tarayıcı görselin ekran genişliğinde (100vw) olduğunu varsayar ve gereğinden büyük dosya indirebilir.¹³

• LCP görseli: Varsayılan lazy olduğu için LCP görseline loading="eager" ya da fetchPriority="high" verin. Next.js 16'da priority prop'u kaldırılmaya aday (deprecated), yerine preload geldi; doküman çoğu durumda preload yerine bu iki seçeneği önerir.¹³

• Format: Varsayılan çıktı WebP'dir. AVIF için next.config içinde formats: ["image/avif", "image/webp"] yazılır.¹³

• Dış kaynak: Başka bir domain'deki görseller için remotePatterns ile izin vermek gerekir. Next.js 16'dan beri kalite değerleri de qualities listesiyle sınırlıdır, varsayılan [75].¹³

Font Formatı ve Barındırma

Font için tek format yeterlidir: WOFF2. WOFF'tan yaklaşık %30 daha iyi sıkıştırır ve geniş tarayıcı desteğine sahiptir.¹⁴¹⁵ Web'deki font isteklerinin yaklaşık %65'i bugün WOFF2.¹⁶

Fontu kendi domain'inizden sunmak (self-hosting) çoğu durumda üçüncü parti bir sunucudan indirmekten hızlıdır, çünkü ek bağlantı kurulmaz.¹⁵ Sitelerin yaklaşık %72'si en az bir fontu kendi domain'inden sunuyor.¹⁶

Kritik bir fontu erken indirtmek için preload kullanılabilir. Fontlar CORS ile indirildiği için crossorigin şarttır; her fontu preload etmek ise bant genişliğini diğer kritik dosyalardan çalar.¹⁵

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

font-display

Font inene kadar metnin ne yapacağını @font-face içindeki font-display belirler.¹⁵¹⁴

swap metni en hızlı gösteren değerdir ve sayfaların yaklaşık yarısında kullanılıyor.¹⁴¹⁶ Layout shift'i tamamen önlemek istiyorsanız optional en güvenli seçenektir, bedeli ilk ziyarette fontun görünmeyebilmesidir.⁷¹⁴

Subset ve Variable Font

• Subset: Fontta kullanmadığınız karakterleri (glyph) çıkarmaktır ve dosya boyutunu ciddi küçültür. unicode-range ile tarayıcıya fontun hangi karakterleri kapsadığını söylerseniz, dosya yalnızca sayfada o karakterlerden biri geçtiğinde indirilir.¹⁴ Ortanca font dosyası sıkıştırılmış hâlde 35 KB civarındadır; en büyük %10'luk dilim 100 KB'ı aşar ve bunun nedenleri arasında subset yapılmamış dosyalar da vardır.¹⁶

• Variable font: Light, regular, bold gibi ayrı dosyalar yerine tek dosyada tüm kalınlıkları taşır.¹⁴ Masaüstü sitelerin %39'u, mobil sitelerin %41'i en az bir variable font kullanıyor.¹⁶ Tek dosya tek bir statik dosyadan büyük olabilir; çok sayıda kalınlık kullanmıyorsanız kazanç az olur.¹⁴

Yedek Font ve Layout Shift

Font değiştiğinde sayfa kayar, çünkü web fontu ile yedek font aynı metin için farklı genişlik ve yükseklik kaplar.¹⁴ Çözüm, yedek fontu web fontuna benzetmektir: size-adjust, ascent-override, descent-override ve line-gap-override descriptor'ları yedek fontun ölçülerini ayarlar.⁷

Next.js'te bu ayarı elle yapmanız gerekmez: next/font yedek fontu sizin yerinize hesaplar.¹⁷

next/font

next/font, Google Fonts dahil fontları build sırasında indirip kendi domain'inizden sunar; tarayıcı Google'a hiç istek atmaz.¹⁷ Varsayılanları performans için ayarlıdır: display: "swap", preload: true ve CLS'i azaltmak için otomatik hesaplanan bir yedek font (adjustFontFallback).¹⁷

// app/layout.tsx
import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="tr" className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

/* app/globals.css */
@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-inter);
}

• Next.js variable font kullanmanızı önerir; variable olmayan bir fontta weight zorunludur.¹⁷

• subsets hangi karakter setinin preload edileceğini belirler; preload açıkken boş bırakırsanız uyarı alırsınız. Fontunuzun hangi subset'leri olduğunu Google Fonts sayfasından kontrol edin.¹⁷

• Kendi font dosyanız için next/font/local ve src: "./fonts/marka.woff2" kullanılır.¹⁷

Detaylı Öğrenmek İçin

• Kurs: web.dev'in ücretsiz Learn Performance kursundaki görsel ve font bölümleri.⁴¹⁵

• Veri: Web Almanac 2025'in Fonts bölümü; formatlar, barındırma, font-display ve variable font kullanımı.¹⁶

• Konuşma: Paul Calvano'nun HTTP Archive verisiyle sık yapılan performans hatalarını anlattığı konuşma (Lazy Load '22); ilk ekrandaki görselleri lazy yüklemek dahil.¹⁸

• Konuşma: Andrea Verlicchi'nin responsive görselleri otomatikleştirmeyi anlattığı konuşma (Lazy Load '22).¹⁹

• Yazı: Addy Osmani'nin fetchpriority ipucu; LCP görseli ve önceliği düşürülecek script'ler için kısa örnekler.²⁰