Web sitenizin y\u00fcklenme h\u0131z\u0131ndan, kullan\u0131c\u0131 deneyimine ve hatta arama motoru s\u0131ralaman\u0131za kadar her \u015feyi etkileyen en \u00f6nemli fakt\u00f6rlerden biri g\u00f6rsellerdir. \u00d6zellikle React ve Next.js gibi modern frontend \u00e7er\u00e7evelerinde, g\u00f6rselleri cihaz tabanl\u0131 olarak optimize etmek, performans zirvesine ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu makale, g\u00f6rsellerinizi her cihazda kusursuz g\u00f6stermek ve sayfa h\u0131z\u0131n\u0131z\u0131 f\u0131rlatmak i\u00e7in ihtiyac\u0131n\u0131z olan ileri d\u00fczey teknikleri ad\u0131m ad\u0131m ele al\u0131yor.<\/p>\n
G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar h\u0131z konusunda olduk\u00e7a sab\u0131rs\u0131z. Saniyenin onda biri kadar gecikme bile kullan\u0131c\u0131 kayb\u0131na ve marka itibar\u0131n\u0131n zedelenmesine yol a\u00e7abilir. Bu noktada, genellikle web sayfalar\u0131ndaki en b\u00fcy\u00fck dosya boyutunu olu\u015fturan g\u00f6rseller, performans darbo\u011faz\u0131n\u0131n en \u00f6nemli kaynaklar\u0131ndan biri haline geliyor. \u00d6zellikle mobil cihazlarda, yava\u015f y\u00fcklenen g\u00f6rseller k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimi sunman\u0131n yan\u0131 s\u0131ra, Google’\u0131n Core Web Vitals metriklerini de olumsuz etkiler. Large Contentful Paint (LCP), web sayfas\u0131n\u0131n ana i\u00e7eri\u011finin ne kadar s\u00fcrede y\u00fcklendi\u011fini \u00f6l\u00e7erken, g\u00f6rseller LCP’nin en yayg\u0131n tetikleyicilerinden biridir. Bir g\u00f6rselin gere\u011finden b\u00fcy\u00fck, yanl\u0131\u015f formatta veya optimize edilmemi\u015f bir \u015fekilde sunulmas\u0131, LCP s\u00fcresini uzatarak sitenizin hem kullan\u0131c\u0131 nezdinde hem de arama motorlar\u0131 kar\u015f\u0131s\u0131nda de\u011fer kaybetmesine neden olur.<\/p>\n
Peki, bu durum React ve Next.js projeleriniz i\u00e7in ne anlama geliyor? Bu modern \u00e7er\u00e7eveler, geli\u015ftiricilere harika ara\u00e7lar sunsa da, g\u00f6rsel optimizasyonu genellikle ayr\u0131 bir \u00e7aba gerektirir. Varsay\u0131lan olarak her cihaza ayn\u0131 y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rseli g\u00f6ndermek, hem bant geni\u015fli\u011fini israf eder hem de sayfan\u0131n gereksiz yere a\u011f\u0131rla\u015fmas\u0131na yol a\u00e7ar. Bir masa\u00fcst\u00fc monit\u00f6rde harika g\u00f6r\u00fcnen 4K \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir g\u00f6rsel, bir cep telefonunda ayn\u0131 kalitede g\u00f6r\u00fcnse de, telefonun ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcnden \u00e7ok daha b\u00fcy\u00fck bir boyutta indirildi\u011fi i\u00e7in ciddi bir performans d\u00fc\u015f\u00fc\u015f\u00fcne neden olur. Kullan\u0131c\u0131lar, fark\u0131nda olmadan gereksiz yere b\u00fcy\u00fck dosyalar indirir, bu da \u00f6zellikle d\u00fc\u015f\u00fck internet ba\u011flant\u0131s\u0131 olan veya veri paketi s\u0131n\u0131rl\u0131 kullan\u0131c\u0131lar i\u00e7in can s\u0131k\u0131c\u0131 bir deneyim yarat\u0131r.<\/p>\n
Geli\u015fmi\u015f g\u00f6rsel optimizasyonu, bu sorunlar\u0131 ortadan kald\u0131rmay\u0131 hedefler. Temel prensip, her kullan\u0131c\u0131ya cihaz\u0131n\u0131n ihtiya\u00e7lar\u0131na en uygun g\u00f6rseli sunmakt\u0131r. Bu sayede, masa\u00fcst\u00fc kullan\u0131c\u0131s\u0131 y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir ekran i\u00e7in optimize edilmi\u015f bir g\u00f6rsel al\u0131rken, mobil kullan\u0131c\u0131 daha k\u00fc\u00e7\u00fck boyutlu, daha h\u0131zl\u0131 y\u00fcklenen bir versiyonu elde eder. Bu sadece h\u0131z avantaj\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda sunucu maliyetlerini d\u00fc\u015f\u00fcr\u00fcr ve \u00e7evresel ayak izini azalt\u0131r. Dolay\u0131s\u0131yla, sadece basit bir estetik iyile\u015ftirme olman\u0131n \u00f6tesinde, g\u00f6rsel optimizasyonu, modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r ve React\/Next.js uygulamalar\u0131n\u0131z\u0131n ba\u015far\u0131s\u0131 i\u00e7in hayati \u00f6neme sahiptir. Bu teknikleri anlamak ve uygulamak, sitenizi rekabette bir ad\u0131m \u00f6ne ta\u015f\u0131yacakt\u0131r.<\/p>\n
Duyarl\u0131 G\u00f6rsellerin Temel Ta\u015flar\u0131 Nelerdir? S\u0131f\u0131rdan Bir Bak\u0131\u015f<\/h2>\n
Duyarl\u0131 g\u00f6rseller, farkl\u0131 ekran boyutlar\u0131na ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerine sahip cihazlarda en uygun g\u00f6rsel deneyimi sunmak i\u00e7in tasarlanm\u0131\u015f g\u00f6rsellerdir. Bu kavram\u0131n merkezinde yatan temel ama\u00e7, her cihaza gere\u011finden fazla veri g\u00f6ndermeden, en iyi kaliteyi sa\u011flamakt\u0131r. Bu hedefi ger\u00e7ekle\u015ftirmek i\u00e7in HTML’de birka\u00e7 g\u00fc\u00e7l\u00fc ara\u00e7 bulunur: srcset<\/code>, sizes<\/code> ve <\/code> elementi. Bu ara\u00e7lar, taray\u0131c\u0131ya \u00e7e\u015fitli g\u00f6rsel kaynaklar\u0131 ve bu kaynaklar\u0131n ne zaman kullan\u0131laca\u011f\u0131na dair ipu\u00e7lar\u0131 vererek ak\u0131ll\u0131 g\u00f6rsel y\u00fcklemeyi m\u00fcmk\u00fcn k\u0131lar.<\/p>\n
srcset<\/code> ve sizes<\/code>: Ak\u0131ll\u0131 Kaynak Se\u00e7imi<\/h3>\n
<\/code> etiketinin srcset<\/code> \u00f6zelli\u011fi, taray\u0131c\u0131ya tek bir g\u00f6rselin farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerde veya geni\u015fliklerde birden fazla versiyonunu sunar. Bu, taray\u0131c\u0131n\u0131n ekran boyutuna, cihaz piksel yo\u011funlu\u011funa (DPR – Device Pixel Ratio) ve hatta a\u011f ko\u015fullar\u0131na ba\u011fl\u0131 olarak en uygun g\u00f6rseli se\u00e7mesine olanak tan\u0131r. srcset<\/code> genellikle iki farkl\u0131 \u015fekilde kullan\u0131l\u0131r:<\/p>\n\n
Geni\u015flik Tan\u0131mlay\u0131c\u0131 (Width Descriptor – w<\/code>):<\/strong> Bu, taray\u0131c\u0131ya her g\u00f6rsel dosyas\u0131n\u0131n ger\u00e7ek geni\u015fli\u011fini (piksel olarak) bildirir. Taray\u0131c\u0131, g\u00f6rselin g\u00f6r\u00fcnt\u00fcleme alan\u0131na ve CSS taraf\u0131ndan belirlenen geni\u015fli\u011fe g\u00f6re en uygun g\u00f6rseli se\u00e7er.<\/li>\n
Piksel Yo\u011funlu\u011fu Tan\u0131mlay\u0131c\u0131 (Pixel Density Descriptor – x<\/code>):<\/strong> Bu y\u00f6ntem, \u00f6zellikle farkl\u0131 piksel yo\u011funlu\u011funa sahip ekranlar (Retina ekranlar gibi) i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, 1x<\/code> normal yo\u011funluklu ekranlar i\u00e7in, 2x<\/code> ise Retina ekranlar i\u00e7indir.<\/li>\n<\/ol>\n
sizes<\/code> \u00f6zelli\u011fi ise, taray\u0131c\u0131ya g\u00f6rselin ekranda kaplayaca\u011f\u0131 alan\u0131 (CSS pikseli olarak) bildirir. Bu bilgi, taray\u0131c\u0131n\u0131n srcset<\/code> i\u00e7inde belirtilen geni\u015flik tan\u0131mlay\u0131c\u0131lar\u0131 ile birlikte en uygun g\u00f6rseli se\u00e7mesine yard\u0131mc\u0131 olur. sizes<\/code> \u00f6zelli\u011fi medya sorgular\u0131yla birlikte kullan\u0131larak, farkl\u0131 ekran boyutlar\u0131 i\u00e7in farkl\u0131 g\u00f6rsel geni\u015flikleri tan\u0131mlanabilir. Bu ikilinin do\u011fru kullan\u0131m\u0131, taray\u0131c\u0131n\u0131n do\u011fru g\u00f6rseli se\u00e7me s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r ve optimize eder.<\/p>\n
\u00d6rne\u011fin:<\/p>\n
\n\n<\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekte, taray\u0131c\u0131 \u015funlar\u0131 yapar: E\u011fer ekran geni\u015fli\u011fi 600 pikselden az ise, g\u00f6rselin 480 piksel geni\u015fli\u011finde olaca\u011f\u0131n\u0131 bilir ve srcset<\/code> i\u00e7inden 480w'ye en yak\u0131n g\u00f6rseli (gorsel-kucuk.jpg<\/code>) se\u00e7er. E\u011fer 601-1024 piksel aras\u0131ndaysa 800 piksel, daha geni\u015fse 1200 piksel g\u00f6rseli se\u00e7meye \u00e7al\u0131\u015f\u0131r. Bu, taray\u0131c\u0131n\u0131n en verimli g\u00f6rseli indirmesini sa\u011flayan g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r.<\/p>\n
<\/code> Elementi: Tam Kontrol ve Sanatsal Y\u00f6nlendirme<\/h3>\n
<\/code> elementi, srcset<\/code> ve sizes<\/code>'tan daha fazla kontrol ve esneklik sunar. Temel olarak iki ana kullan\u0131m senaryosu vard\u0131r:<\/p>\n\n
Sanatsal Y\u00f6nlendirme (Art Direction):<\/strong> Farkl\u0131 ekran boyutlar\u0131 i\u00e7in g\u00f6rselin farkl\u0131 k\u0131rp\u0131lm\u0131\u015f versiyonlar\u0131n\u0131 veya tamamen farkl\u0131 g\u00f6rsellerini sunmak istedi\u011finizde kullan\u0131l\u0131r. \u00d6rne\u011fin, bir masa\u00fcst\u00fcnde geni\u015f bir yatay banner g\u00f6rseli kullan\u0131rken, mobil cihazda ayn\u0131 konuyu dikey olarak k\u0131rp\u0131lm\u0131\u015f bir g\u00f6rselle sunmak isteyebilirsiniz.<\/li>\n
Farkl\u0131 G\u00f6rsel Formatlar\u0131:<\/strong> Taray\u0131c\u0131 deste\u011fine ba\u011fl\u0131 olarak farkl\u0131 g\u00f6rsel formatlar\u0131n\u0131 (\u00f6rne\u011fin, yeni nesil WebP veya AVIF) sunmak i\u00e7in kullan\u0131l\u0131r. Bu, performans\u0131 daha da art\u0131r\u0131r \u00e7\u00fcnk\u00fc modern formatlar genellikle JPEG'den \u00e7ok daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sunar.<\/li>\n<\/ol>\n
<\/code> elementi, bir veya daha fazla <\/code> etiketi ve bir adet <\/code> etiketi i\u00e7erir. Taray\u0131c\u0131, <\/code> etiketlerini yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru de\u011ferlendirir ve ilk uygun olan\u0131 kullan\u0131r. Hi\u00e7biri uygun olmazsa veya taray\u0131c\u0131 <\/code>'\u0131 desteklemezse, <\/code> etiketi yedek olarak kullan\u0131l\u0131r.<\/p>\n
Bu \u00f6rnekte, taray\u0131c\u0131 \u00f6nce AVIF format\u0131n\u0131 destekleyip desteklemedi\u011fini kontrol eder. E\u011fer destekliyorsa gorsel.avif<\/code>'i y\u00fckler. Desteklemiyorsa WebP'ye ge\u00e7er. E\u011fer WebP'yi de desteklemiyorsa, son olarak gorsel.jpg<\/code>'yi y\u00fckler. Bu sayede, taray\u0131c\u0131lar her zaman en k\u00fc\u00e7\u00fck ve en modern format\u0131 kullanmaya \u00e7al\u0131\u015f\u0131r, bu da performans\u0131 ciddi \u015fekilde art\u0131r\u0131r.<\/p>\n
Bu temel HTML yap\u0131 ta\u015flar\u0131, duyarl\u0131 g\u00f6rsellerin omurgas\u0131n\u0131 olu\u015fturur. React ve Next.js ortam\u0131nda bu teknikleri nas\u0131l uygulayaca\u011f\u0131m\u0131z\u0131 ve daha da ileriye nas\u0131l ta\u015f\u0131yaca\u011f\u0131m\u0131z\u0131 sonraki b\u00f6l\u00fcmlerde detayland\u0131raca\u011f\u0131z.<\/p>\n
React ve \u00f6zellikle Next.js, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. G\u00f6rsel optimizasyonu, bu \u00e7er\u00e7evelerde do\u011fru yakla\u015f\u0131mlarla uyguland\u0131\u011f\u0131nda, uygulama performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir. Geleneksel HTML yakla\u015f\u0131mlar\u0131n\u0131 bu \u00e7er\u00e7evelere entegre etmek veya yerle\u015fik optimizasyon ara\u00e7lar\u0131ndan faydalanmak, bu s\u00fcrecin temelini olu\u015fturur.<\/p>\n
Next.js, g\u00f6rsel optimizasyonu i\u00e7in geli\u015ftirilmi\u015f \u00f6zel bir <\/code> komponenti sunar. Bu komponent, \"zero-config\" g\u00f6rsel optimizasyonu vaat ederek geli\u015ftiricilerin y\u00fck\u00fcn\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. <\/code> komponenti, g\u00f6rselleri otomatik olarak optimize eder ve \u00e7e\u015fitli ileri d\u00fczey \u00f6zellikleri varsay\u0131lan olarak sunar:<\/p>\n
\n
Otomatik Optimizasyon:<\/strong> G\u00f6rselleri otomatik olarak farkl\u0131 boyutlara ve modern formatlara (WebP gibi) d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu, g\u00f6rselleri manuel olarak farkl\u0131 formatlara \u00e7evirme veya farkl\u0131 boyutlar olu\u015fturma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r.<\/li>\n
Duyarl\u0131 Tasar\u0131m:<\/strong> srcset<\/code> ve sizes<\/code> \u00f6zelliklerini otomatik olarak olu\u015fturarak cihaz tabanl\u0131 duyarl\u0131 g\u00f6rselleri kolayca sa\u011flar.<\/li>\n
Gecikmeli Y\u00fckleme (Lazy Loading):<\/strong> Varsay\u0131lan olarak, g\u00f6rseller g\u00f6r\u00fcn\u00fcm alan\u0131na girene kadar y\u00fcklenmez. Bu, ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini (initial load time) azalt\u0131r. loading=\"lazy\"<\/code> \u00f6zelli\u011fi otomatik olarak eklenir.<\/li>\n
Boyutland\u0131rma ve D\u00fczenleme:<\/strong> layout<\/code> \u00f6zelli\u011fi ile g\u00f6rsellerin d\u00fczenini kontrol edebilirsiniz (\u00f6rne\u011fin, fill<\/code>, fixed<\/code>, intrinsic<\/code>, responsive<\/code>). Bu, Cumulative Layout Shift (CLS) sorunlar\u0131n\u0131 en aza indirmeye yard\u0131mc\u0131 olur.<\/li>\n
\u00d6nceliklendirme (Priority):<\/strong> LCP (Largest Contentful Paint) i\u00e7in kritik olan g\u00f6rselleri daha erken y\u00fcklemek \u00fczere i\u015faretleyebilirsiniz.<\/li>\n<\/ul>\n
Kullan\u0131m\u0131 olduk\u00e7a basittir:<\/p>\n
\nimport Image from 'next\/image';\n\nfunction BenimSayfam() {\n return (\n
Burada width<\/code> ve height<\/code> belirtmek, yer tutucu alan\u0131 (placeholder) do\u011fru \u015fekilde ayarlar ve CLS'yi \u00f6nler. layout=\"responsive\"<\/code> g\u00f6rselin \u00fcst \u00f6\u011fenin geni\u015fli\u011fine uyum sa\u011flayaca\u011f\u0131n\u0131 belirtirken, priority<\/code> bu g\u00f6rselin y\u00fcksek \u00f6ncelikli oldu\u011funu ve LCP i\u00e7in kritik oldu\u011funu i\u015faret eder.<\/p>\n
Manuel <\/code> Tag Optimizasyonu ve React<\/h3>\n
E\u011fer bir React projesinde Next.js kullanm\u0131yorsan\u0131z veya <\/code> komponentinin t\u00fcm \u00f6zelliklerine ihtiyac\u0131n\u0131z yoksa, geleneksel <\/code> etiketini srcset<\/code> ve sizes<\/code> ile manuel olarak optimize edebilirsiniz. Bu, React bile\u015fenlerinizde HTML \u00f6zelliklerini do\u011frudan kullanmak anlam\u0131na gelir.<\/p>\n
Bu yakla\u015f\u0131mda, g\u00f6rsellerin farkl\u0131 boyutlardaki versiyonlar\u0131n\u0131 kendiniz olu\u015fturman\u0131z ve sunman\u0131z gerekir. Bu genellikle bir g\u00f6rsel i\u015fleme k\u00fct\u00fcphanesi (\u00f6rne\u011fin Sharp.js) veya bir CDN hizmeti (Cloudinary, Imgix) kullan\u0131larak yap\u0131l\u0131r.<\/p>\n
Hem Next.js'in <\/code> komponenti hem de standart <\/code> etiketi i\u00e7in gecikmeli y\u00fckleme, \u00f6nemli bir performans iyile\u015ftirmesidir. loading=\"lazy\"<\/code> \u00f6zelli\u011fi, g\u00f6rselin sadece kullan\u0131c\u0131 g\u00f6r\u00fcn\u00fcm alan\u0131na girdi\u011finde y\u00fcklenmesini sa\u011flar. Bu, \u00f6zellikle uzun sayfalar ve \u00e7ok say\u0131da g\u00f6rsel i\u00e7eren i\u00e7erikler i\u00e7in ba\u015flang\u0131\u00e7 y\u00fckleme performans\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n
\n\n<\/pre>\n
<\/code><\/p>\n
\n Uzman \u0130pucu: loading=\"lazy\"<\/code> \u00f6zelli\u011fi LCP (Largest Contentful Paint) i\u00e7in kritik olan g\u00f6rsellerde kullan\u0131lmamal\u0131d\u0131r<\/strong>. Sayfan\u0131n en \u00fcst\u00fcnde, g\u00f6r\u00fcn\u00fcm alan\u0131nda hemen g\u00f6r\u00fcnmesi gereken g\u00f6rseller i\u00e7in bu \u00f6zelli\u011fi atlay\u0131n veya Next.js <\/code> komponentinde priority<\/code> \u00f6zelli\u011fini kullan\u0131n.\n<\/div>\n
Yer Tutucular (Placeholders) ve CLS \u00d6nleme<\/h3>\n
G\u00f6rseller y\u00fcklendik\u00e7e, bo\u015f bir alandan aniden belirmeleri veya y\u00fcklenirken sayfa d\u00fczenini bozarak i\u00e7eri\u011fin kaymas\u0131na (Cumulative Layout Shift - CLS) neden olmalar\u0131 kullan\u0131c\u0131 deneyimi i\u00e7in olumsuzdur. Bunu \u00f6nlemek i\u00e7in yer tutucular kullan\u0131l\u0131r:<\/p>\n
\n
D\u00fc\u015f\u00fck Kaliteli G\u00f6rsel Yer Tutucular (LQIP):<\/strong> G\u00f6rselin \u00e7ok d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ve bulan\u0131k bir versiyonunu an\u0131nda y\u00fckleyip, tam g\u00f6rsel y\u00fcklendi\u011finde bunun \u00fczerine ge\u00e7i\u015f yapmak. Next.js <\/code> komponenti bunu otomatik olarak destekler (placeholder=\"blur\"<\/code>).<\/li>\n
Renk Yer Tutucular:<\/strong> G\u00f6rselin ana rengini veya bir gradyan\u0131n\u0131 arka plan olarak kullanmak.<\/li>\n
Sabit Boyutlar:<\/strong> G\u00f6rselin geni\u015flik ve y\u00fcksekli\u011fini HTML veya CSS'te belirterek, g\u00f6rsel y\u00fcklenmeden \u00f6nce alan\u0131n ayr\u0131lmas\u0131n\u0131 sa\u011flamak. Next.js <\/code> komponentinde width<\/code> ve height<\/code> \u00f6zelliklerinin belirtilmesi bu amaca hizmet eder.<\/li>\n<\/ul>\n
Bu, Next.js <\/code> komponentinin basit kullan\u0131m\u0131yla bile elde edilebilecek \u00f6nemli bir performans kazanc\u0131n\u0131 g\u00f6stermektedir.<\/p>\n
Cihaza \u00d6zel Duyarl\u0131 G\u00f6rseller Nas\u0131l Olu\u015fturulur? Medya Sorgular\u0131 ve \u00d6tesi<\/h2>\n
Cihaz tabanl\u0131 duyarl\u0131 g\u00f6rseller olu\u015fturmak, her kullan\u0131c\u0131ya ekran boyutuna, \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcne ve hatta cihaz t\u00fcr\u00fcne \u00f6zel olarak optimize edilmi\u015f g\u00f6rsel sunma sanat\u0131d\u0131r. Bu yakla\u015f\u0131m, sadece g\u00f6rselin boyutunu k\u00fc\u00e7\u00fcltmekle kalmaz, ayn\u0131 zamanda farkl\u0131 senaryolarda farkl\u0131 k\u0131rpmalar veya farkl\u0131 formatlar sunarak kullan\u0131c\u0131 deneyimini zenginle\u015ftirir. Temel olarak srcset<\/code> ve sizes<\/code> \u00f6zelliklerini medya sorgular\u0131yla birle\u015ftirerek ve <\/code> elementini kullanarak bu yetene\u011fi kazan\u0131r\u0131z.<\/p>\n
srcset<\/code> ve sizes<\/code> ile Medya Sorgular\u0131n\u0131n G\u00fcc\u00fc<\/h3>\n
sizes<\/code> \u00f6zelli\u011fi, CSS medya sorgular\u0131na benzer bir s\u00f6zdizimi kullanarak, taray\u0131c\u0131ya belirli ekran geni\u015fliklerinde g\u00f6rselin hangi geni\u015flikte g\u00f6r\u00fcnt\u00fclenece\u011fini s\u00f6yler. Taray\u0131c\u0131 bu bilgiyi ve srcset<\/code>'teki g\u00f6rsel kaynaklar\u0131n\u0131n geni\u015fliklerini kullanarak en uygun g\u00f6rseli se\u00e7er. Bu, cihaz boyutuna g\u00f6re g\u00f6rselin geni\u015fli\u011fini dinamik olarak ayarlaman\u0131n en yayg\u0131n yoludur.<\/p>\n
\u00d6rnek bir <\/code> etiketi:<\/p>\n
\n\n<\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte:<\/p>\n
\n
srcset<\/code>: Taray\u0131c\u0131ya be\u015f farkl\u0131 g\u00f6rsel versiyonu ve her birinin ger\u00e7ek geni\u015fli\u011fi bildiriliyor (\u00f6rne\u011fin, 320w<\/code>, 640w<\/code>).<\/li>\n
sizes<\/code>: Taray\u0131c\u0131ya, g\u00f6rselin farkl\u0131 ekran geni\u015fliklerinde (medya sorgular\u0131 ile belirlenen) kaplayaca\u011f\u0131 alan\u0131 bildiriyor. \u00d6rne\u011fin, e\u011fer ekran geni\u015fli\u011fi 480 pikselden az ise, g\u00f6rselin g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n tamam\u0131n\u0131 (100vw<\/code>) kaplayaca\u011f\u0131n\u0131 s\u00f6yl\u00fcyoruz. Taray\u0131c\u0131 bu bilgiyi kullanarak srcset<\/code>'ten hangi g\u00f6rseli indirece\u011fine karar verir. \u00d6rne\u011fin, 400px geni\u015fli\u011finde bir mobil cihazda, g\u00f6rselin 400px geni\u015fli\u011finde olmas\u0131 gerekti\u011fini anlar ve 320w<\/code> veya 640w<\/code> g\u00f6rsellerinden hangisinin daha uygun oldu\u011funa karar verir.<\/li>\n<\/ul>\n
<\/code> Elementi ile Sanatsal Y\u00f6nlendirme ve Format Optimizasyonu<\/h3>\n
Daha karma\u015f\u0131k senaryolarda, \u00f6rne\u011fin farkl\u0131 ekran boyutlar\u0131 i\u00e7in g\u00f6rselin farkl\u0131 k\u0131rp\u0131lm\u0131\u015f versiyonlar\u0131n\u0131 sunmak (sanatsal y\u00f6nlendirme) veya taray\u0131c\u0131 deste\u011fine g\u00f6re farkl\u0131 g\u00f6rsel formatlar\u0131n\u0131 (WebP, AVIF) kullanmak istedi\u011finizde <\/code> elementi devreye girer.<\/p>\n
Vaka Analizi: Haber Portal\u0131 Ana Sayfas\u0131<\/strong><\/p>\n
B\u00fcy\u00fck bir haber portal\u0131, ana sayfas\u0131ndaki man\u015fet g\u00f6rsellerinin mobil cihazlarda \u00e7ok yava\u015f y\u00fcklenmesinden ve masa\u00fcst\u00fc g\u00f6rsellerinin mobil ekranlarda k\u00f6t\u00fc g\u00f6r\u00fcnmesinden \u015fikayet\u00e7iydi. Masa\u00fcst\u00fc i\u00e7in yatay, geni\u015f a\u00e7\u0131l\u0131 g\u00f6rseller kullan\u0131l\u0131yordu, ancak mobil ekranlarda bu g\u00f6rseller k\u00fc\u00e7\u00fclt\u00fcld\u00fc\u011f\u00fcnde detaylar kayboluyor ve metinler okunaks\u0131z hale geliyordu. \u00c7\u00f6z\u00fcm olarak <\/code> elementi kullan\u0131ld\u0131:<\/p>\n
\n\n \n \n \n \n \n<\/picture>\n<\/pre>\n
<\/code><\/p>\n
Bu yap\u0131yla:<\/p>\n
\n
Masa\u00fcst\u00fc (1024px ve \u00fczeri) kullan\u0131c\u0131lar\u0131 i\u00e7in yatay, y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ve WebP format\u0131nda g\u00f6rseller sunuldu. Retina ekranlar i\u00e7in 2x<\/code> versiyonlar\u0131 da mevcuttu.<\/li>\n
Mobil (1023px ve alt\u0131) kullan\u0131c\u0131lar\u0131 i\u00e7in, haberin ana oda\u011f\u0131n\u0131 koruyan dikey, daha k\u00fc\u00e7\u00fck boyutlu ve WebP format\u0131nda k\u0131rp\u0131lm\u0131\u015f g\u00f6rseller sunuldu.<\/li>\n
Sonu\u00e7 olarak, mobil LCP de\u011ferleri %60 iyile\u015ftirildi, sayfa y\u00fckleme s\u00fcreleri d\u00fc\u015ft\u00fc ve mobil kullan\u0131c\u0131 deneyimi \u00f6nemli \u00f6l\u00e7\u00fcde artt\u0131.<\/li>\n<\/ul>\n
\n Uzman \u0130pucu: G\u00f6rsel kaynaklar\u0131n\u0131 (\/images\/small-320w.jpg<\/code> gibi) manuel olarak olu\u015fturmak yerine, Cloudinary, Imgix gibi CDN servislerini veya Next.js'in kendi g\u00f6rsel optimizasyon \u00f6zelliklerini kullanarak bu s\u00fcreci otomatikle\u015ftirebilirsiniz. Next.js <\/code> komponenti, bu srcset<\/code> ve sizes<\/code> mant\u0131\u011f\u0131n\u0131 arka planda otomatik olarak halleder, bu da geli\u015ftirici i\u00e7in b\u00fcy\u00fck bir kolayl\u0131k sa\u011flar.\n<\/div>\n
Next.js Image<\/code> ile Cihaz Tabanl\u0131 Optimizasyon<\/h3>\n
Next.js'in <\/code> komponenti, bu karma\u015f\u0131k srcset<\/code> ve sizes<\/code> mant\u0131\u011f\u0131n\u0131 sizin i\u00e7in otomatik olarak y\u00f6netir. deviceSizes<\/code> ve imageSizes<\/code> yap\u0131land\u0131rmalar\u0131 ile Next.js'e hangi cihaz geni\u015fliklerine odaklanmas\u0131 gerekti\u011fini s\u00f6yleyebilirsiniz.<\/p>\n
Bu ayarlar sayesinde, <\/code> komponenti otomatik olarak belirtilen deviceSizes<\/code> ve imageSizes<\/code> de\u011ferlerini kullanarak srcset<\/code> ve sizes<\/code> niteliklerini olu\u015fturur. Sizin tek yapman\u0131z gereken do\u011fru src<\/code>, width<\/code>, height<\/code> ve layout<\/code> \u00f6zelliklerini sa\u011flamakt\u0131r.<\/p>\n
\nimport Image from 'next\/image';\n\n\n<\/pre>\n
<\/code><\/p>\n
Bu sayede Next.js, g\u00f6rseli kullan\u0131c\u0131n\u0131n cihaz\u0131na en uygun boyutta sunar, b\u00f6ylece hem performans artar hem de bant geni\u015fli\u011fi tasarrufu sa\u011flan\u0131r. G\u00f6rsel optimizasyonunu elle y\u00f6netmek yerine bu t\u00fcr otomasyonlar\u0131 kullanmak, modern web geli\u015ftiricileri i\u00e7in hayati \u00f6nem ta\u015f\u0131r.<\/p>\n
G\u00f6rsel optimizasyonu, srcset<\/code> ve sizes<\/code> kullanman\u0131n \u00f6tesine ge\u00e7erek, daha ileri tekniklerle web uygulaman\u0131z\u0131n performans\u0131n\u0131 daha da yukar\u0131ya ta\u015f\u0131yabilir. Bu teknikler, genellikle modern g\u00f6rsel formatlar\u0131, ak\u0131ll\u0131 g\u00f6rsel i\u015fleme servisleri ve Next.js gibi \u00e7er\u00e7evelerin sundu\u011fu \u00f6zel yap\u0131land\u0131rma se\u00e7eneklerini kapsar.<\/p>\n
Modern G\u00f6rsel Formatlar\u0131: WebP ve AVIF<\/h3>\n
JPEG ve PNG gibi geleneksel formatlar hala yayg\u0131n olsa da, WebP ve AVIF gibi yeni nesil formatlar, daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 ve daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sunarak ayn\u0131 g\u00f6rsel kaliteyi \u00e7ok daha verimli bir \u015fekilde sa\u011flar. \u00d6rne\u011fin, bir JPEG g\u00f6rselinin kalitesinden \u00f6d\u00fcn vermeden dosya boyutunu %25-35 oran\u0131nda azaltmak i\u00e7in WebP, %50'ye kadar azaltmak i\u00e7in ise AVIF format\u0131 kullan\u0131labilir. Bu formatlar, hem mobil hem de masa\u00fcst\u00fc cihazlarda h\u0131zla benimsenmekte ve desteklenmektedir.<\/p>\n
Bu formatlar\u0131 <\/code> elementi ile entegre etmek, taray\u0131c\u0131 deste\u011fine g\u00f6re en verimli format\u0131 sunman\u0131n en iyi yoludur:<\/p>\n
\n\n \n \n \n<\/picture>\n<\/pre>\n
<\/code><\/p>\n
Bu yakla\u015f\u0131m, taray\u0131c\u0131lar\u0131n \u00f6nce AVIF'i, sonra WebP'yi denemesini ve desteklemezlerse JPEG'ye geri d\u00f6nmesini sa\u011flar. Next.js <\/code> komponenti, bu format d\u00f6n\u00fc\u015f\u00fcm\u00fcn\u00fc ve <\/code> elementi kullan\u0131m\u0131n\u0131 \u00e7o\u011fu durumda otomatik olarak halleder, geli\u015ftiricinin manuel olarak bu etiketleri y\u00f6netmesine gerek kalmaz.<\/p>\n
CDN Kullan\u0131m\u0131 ve G\u00f6rsel D\u00f6n\u00fc\u015f\u00fcm Hizmetleri<\/h3>\n
B\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar i\u00e7in g\u00f6rselleri manuel olarak farkl\u0131 boyutlara ve formatlara d\u00f6n\u00fc\u015ft\u00fcrmek pratik de\u011fildir. Bu noktada, Cloudinary, Imgix, Akamai Image Manager veya Squoosh.app gibi g\u00f6rsel d\u00f6n\u00fc\u015f\u00fcm hizmetleri ve CDN'ler (Content Delivery Network) devreye girer. Bu hizmetler, g\u00f6rsellerinizi bulutta bar\u0131nd\u0131r\u0131r ve URL parametreleri arac\u0131l\u0131\u011f\u0131yla an\u0131nda farkl\u0131 boyutlarda, formatlarda, kalitelerde ve k\u0131rpmalarda sunar.<\/p>\n
\u00d6rne\u011fin, Cloudinary ile:<\/p>\n
\n\n<\/pre>\n
<\/code><\/p>\n
Burada w_auto<\/code> geni\u015fli\u011fi otomatik olarak cihaz ekran\u0131na g\u00f6re ayarlar, f_auto<\/code> taray\u0131c\u0131ya g\u00f6re en iyi format\u0131 (WebP\/AVIF vb.) se\u00e7er ve q_auto<\/code> kaliteyi optimize eder. Next.js'in <\/code> komponenti, bu t\u00fcr harici y\u00fckleyicilerle (custom loaders) entegre edilebilir, b\u00f6ylece Next.js'in performans avantajlar\u0131n\u0131 CDN'in g\u00fcc\u00fcyle birle\u015ftirebilirsiniz.<\/p>\n
\n Uzman \u0130pucu: Next.js'in <\/code> komponenti i\u00e7in \u00f6zel bir y\u00fckleyici (custom loader) tan\u0131mlayarak, g\u00f6rsellerinizi kendi CDN'iniz veya harici bir g\u00f6rsel servis sa\u011flay\u0131c\u0131n\u0131z \u00fczerinden optimize edebilirsiniz. Bu, Next.js'in yerle\u015fik optimizasyon yeteneklerini daha geni\u015f bir kontrolle birle\u015ftirmenizi sa\u011flar.\n<\/div>\n
Bu kurulumla, Next.js <\/code> komponentiniz art\u0131k Cloudinary \u00fczerinden g\u00f6rselleri optimize edilmi\u015f bir \u015fekilde \u00e7ekecektir.<\/p>\n
priority<\/code> Niteli\u011fi ve LCP Optimizasyonu<\/h3>\n
<\/code> komponentinde kullan\u0131lan priority<\/code> \u00f6zelli\u011fi, sayfan\u0131n Largest Contentful Paint (LCP) metri\u011fi i\u00e7in kritik olan g\u00f6rsellerin (genellikle ana sayfa ba\u015fl\u0131k g\u00f6rselleri veya ilk ekran i\u00e7eri\u011fi) daha erken y\u00fcklenmesini sa\u011flar. Bu, taray\u0131c\u0131n\u0131n di\u011fer kaynaklara g\u00f6re bu g\u00f6rsellere daha y\u00fcksek \u00f6ncelik vermesini ve bunlar\u0131 preloading mekanizmalar\u0131yla daha h\u0131zl\u0131 indirmesini tetikler. Her sayfada yaln\u0131zca bir veya iki kritik g\u00f6rsel i\u00e7in kullan\u0131lmal\u0131d\u0131r, aksi takdirde performansa zarar verebilir.<\/p>\n
Client Hints, taray\u0131c\u0131lar\u0131n sunucuya cihaz\u0131n yetenekleri hakk\u0131nda bilgi g\u00f6ndermesini sa\u011flayan HTTP ba\u015fl\u0131klar\u0131d\u0131r. \u00d6rne\u011fin, Accept-CH: DPR, Width, Viewport-Width<\/code> ba\u015fl\u0131klar\u0131 ile sunucu, kullan\u0131c\u0131n\u0131n cihaz\u0131n\u0131n piksel yo\u011funlu\u011funu (DPR), g\u00f6rselin g\u00f6r\u00fcnt\u00fcleme geni\u015fli\u011fini (Width) ve viewport geni\u015fli\u011fini (Viewport-Width) alabilir. Bu sayede sunucu, g\u00f6rselleri iste\u011fe ba\u011fl\u0131 olarak ve daha do\u011fru bir \u015fekilde optimize edebilir. Next.js, bu ba\u015fl\u0131klar\u0131 kullanarak g\u00f6rsel optimizasyonunu daha da ak\u0131ll\u0131 hale getirebilir.<\/p>\n
Bu ileri d\u00fczey tekniklerin kombinasyonu, React\/Next.js uygulamalar\u0131n\u0131zdaki g\u00f6rsel performans\u0131n\u0131 maksimize etmenize ve her cihazda h\u0131zl\u0131, verimli ve g\u00f6rsel a\u00e7\u0131dan \u00e7ekici bir deneyim sunman\u0131za olanak tan\u0131r. G\u00f6rsel optimizasyonu, tek seferlik bir i\u015flem de\u011fil, s\u00fcrekli bir s\u00fcre\u00e7tir ve bu teknikleri \u00f6\u011frenmek, modern web geli\u015ftiricileri i\u00e7in bir gerekliliktir.<\/p>\n
![\"\u00d6rnek](\"gorsel-kucuk.jpg\"\n)
\n<\/pre>\n![\"Modern](\"gorsel.jpg\")
\n<\/picture>\n<\/pre>\n![\"Cihaz](\"\/images\/default-image.jpg\"\n)
\n<\/pre>\n![\"G\u00fcn\u00fcn](\"\/haber-gorsel-default.jpg\"\n)
\n<\/picture>\n<\/pre>\n![\"CDN](\"https:\/\/res.cloudinary.com\/your-cloud-name\/image\/upload\/w_auto,f_auto,q_auto\/my-image.jpg\"\n)
\n<\/pre>\n![](\"gorsel.avif\")
<\/code> etiketi yedek olarak kullan\u0131l\u0131r.<\/p>\n