Resimler, herhangi bir web sitesinin veya uygulamanın önemli bir parçasıdır. İçeriği daha ilgi çekici ve görsel olarak çekici hale getirmeye yardımcı olurlar.
Ancak, resimler düzgün bir şekilde optimize edilmezse bir siteyi veya uygulamayı da yavaşlatabilir.
Neden Görüntüleri Optimize Etmelisiniz?
Görüntüleri optimize etmenin önemli olmasının birkaç nedeni vardır.
Sitenin veya uygulamanın yüklenme süresini iyileştirmeye yardımcı olabilir.
Bir müşterinin indirmesi gereken veri miktarını azaltabilir ve bu da bant genişliği maliyetlerinden tasarruf sağlayabilir.
Sitenin veya uygulamanın genel performansını iyileştirmeye yardımcı olabilir.
Next.js’de Görüntüler Nasıl Optimize Edilir?
Next.js’de görüntüleri optimize etmenin birkaç yolu vardır. Biri Image bileşenini kullanmaktır. Bu bileşen, görüntüleri performans için otomatik olarak optimize eder.
Görüntüleri optimize etmenin başka bir yolu da yerleşik görüntü işleme yeteneklerini kullanmaktır. Next.js, performans için görüntüleri otomatik olarak yeniden boyutlandırabilir, sıkıştırabilir ve optimize edebilir.
Son olarak, tepki için optimize edilmiş görüntü gibi bir üçüncü taraf kitaplığı kullanabilirsiniz. Bu kitaplık, çeşitli görüntü optimizasyonu yetenekleri sağlar.
Görüntü Bileşenini Kullanma
Görüntü bileşeni, Next.js’de görüntüleri optimize etmenin en kolay yoludur. Kullanmak için, next/image paketinden bileşeni içe aktarmanız yeterlidir .
Bileşeni içe aktardıktan sonra, onu React’teki diğerleri gibi kullanabilirsiniz. Görüntü bileşeni, görüntüleri nasıl işlediğini kontrol etmek için kullanabileceğiniz birkaç donanıma sahiptir.
import Image from ‘next/image’
export default function MyImage() {
return (
<Image
src=”/my-image.jpg”
width=”200″
height=”200″
quality=”100″
alt=”My image”
/>
)
}
Bu örnekte, Görüntü bileşeni, 200 piksel genişliğinde ve 200 piksel yüksekliğinde bir görüntü oluşturur. Uygulamanıza ve resimlerinize stil vermek için CSS’yi veya Tailwind gibi bir çerçeveyi de kullanabilirsiniz .
Görüntü bileşeni için gereken donanımlardan bazıları, genişlik, yükseklik, src ve alt’tır. src prop, kullanmak istediğiniz görüntünün URL’sidir. Görüntünün genişliğini ve yüksekliğini piksel cinsinden ayarlamak için genişlik ve yükseklik payandalarını kullanın. Alt pervane, görüntü için alternatif metindir.
Görüntü bileşeni için bazı isteğe bağlı donanımlar düzen, yükleyici, yer tutucu ve önceliktir. Düzen pervanesi, görüntünün düzenini belirtir. Özel bir görüntü yükleyici belirtmek için loader prop’u kullanabilirsiniz. Yer tutucu prop, özel bir görüntü yer tutucusu belirtir. Priority prop görüntünün önceliğini belirtir.
Image bileşenini kullanmanın faydalarından bazıları şunlardır:
İyileştirilmiş Performans: Görüntü bileşenini kullanmanın ana faydalarından biri, geliştirilmiş performanstır. Bileşen, görüntüleri performans için otomatik olarak optimize eder.
Otomatik Görüntü Yeniden Boyutlandırma: Görüntü bileşenini kullanmanın bir başka yararı da otomatik görüntü yeniden boyutlandırmasıdır. Bileşen, görüntüleri genişlik ve yükseklik payandalarına uyacak şekilde otomatik olarak yeniden boyutlandırabilir.
Otomatik Görüntü Sıkıştırma: Görüntü bileşeni ayrıca dosya boyutunu azaltmak için görüntüleri otomatik olarak sıkıştırabilir.
Yavaş Yükleme Desteği: Görüntü bileşeni aynı zamanda yavaş yüklemeyi de destekler. Bu, görüntüleri yalnızca ekranda göründükleri zaman yükleyeceği anlamına gelir.
Üçüncü Taraf Kitaplığı Kullanma
Görüntü optimizasyonu üzerinde daha fazla kontrole ihtiyacınız varsa, tepki için optimize edilmiş görüntü gibi bir üçüncü taraf kitaplığı kullanabilirsiniz . Bu kitaplık, çeşitli görüntü optimizasyonu yetenekleri sağlar.
Tepki için optimize edilmiş görüntünün bazı özellikleri şunları içerir:
İstemci ve sunucudaki görüntüleri optimize edin: tepki için optimize edilmiş görüntü, istemci ve sunucudaki görüntüleri optimize edebilir. Bu, görüntülerin performans ve dosya boyutu için optimize edildiği anlamına gelir.
Otomatik görüntü yeniden boyutlandırma: tepki için optimize edilmiş görüntü, görüntüleri genişlik ve yükseklik payandalarına uyacak şekilde otomatik olarak yeniden boyutlandırabilir.
Otomatik görüntü sıkıştırma: tepki için optimize edilmiş görüntü, dosya boyutunu azaltmak için görüntüleri otomatik olarak sıkıştırabilir.
Yavaş yükleme desteği: Tepki için optimize edilmiş görüntü aynı zamanda yavaş yüklemeyi de destekler. Bu, görüntüleri yalnızca ekranda göründükleri zaman yükleyeceği anlamına gelir.
Birden çok görüntü biçimi desteği: tepki için optimize edilmiş görüntü, JPEG, PNG ve WebP dahil olmak üzere birden çok görüntü biçimini destekler.
Tepki için optimize edilmiş görüntüyü kullanmak için kitaplığı npm ile kurmanız yeterlidir.
Kitaplığı yükledikten sonra projenize aktarabilirsiniz.
import Img from ‘react-optimized-image’
export default function NextImg() {
return (
<Img
src=”/my-image.jpg”
sizes={[400, 800]}
alt=”My image”
/>
)
}
SVG dosyalarını tepki için optimize edilmiş görüntü ile de kullanabilirsiniz.
import {Svg} from ‘react-optimized-image’
export default function NextImg() {
return (
<Svg
src=”/my-image.svg”
className=“filled-red”
/>
)
}
Bu örnek, SVG için bir sınıf adı belirtmek üzere className prop’u kullanır. SVG’yi CSS ile biçimlendirmek veya JavaScript kullanarak onunla etkileşim kurmak için bu sınıf adını kullanabilirsiniz.
tepki için optimize edilmiş görüntü, yerleşik görüntü optimizasyon yeteneklerine göre birkaç başka avantaj da sağlar.
Yerleşik özellikler yerine bir paket kullanmanın bir avantajı, otomatik olarak farklı boyutlarda görüntüler oluşturabilmesidir. Bu, aynı görüntünün farklı sürümlerini oluşturmanız gerekmediği anlamına gelir.
Diğer bir faydası da, kullanıcının cihazına uygun boyuttaki görüntüyü otomatik olarak sunabilmesidir. Bu, yüksek çözünürlüklü ekrana sahip cihazların yüksek çözünürlüklü, düşük çözünürlüklü ekranlara sahip cihazların ise düşük çözünürlüklü bir görüntü alacağı anlamına gelir.
Son olarak, tepki için optimize edilmiş görüntü tamamen açık kaynaklı bir projedir . Bu, belirli bir özelliğe veya hata düzeltmeye ihtiyacınız varsa kitaplığa katkıda bulunabileceğiniz anlamına gelir.
Hangi Yöntemi Kullanmalısınız?
Peki, Next.js’de görüntüleri optimize etmek için hangi yöntemi kullanmalısınız?
Temel görüntü optimizasyonuna ihtiyacınız varsa yerleşik görüntü işleme yeteneklerini kullanabilirsiniz. Görüntü optimizasyonuna başlamanın en kolay yolu budur.
Görüntü optimizasyonu üzerinde daha fazla kontrole ihtiyacınız varsa, tepki için optimize edilmiş görüntü gibi bir üçüncü taraf kitaplığı kullanabilirsiniz. Bu kitaplık, daha gelişmiş görüntü optimizasyonu yetenekleri sağlar.
Mutlak en iyi performansa ihtiyacınız varsa, yerleşik görüntü işleme yetenekleri ve bir üçüncü taraf kitaplığının bir kombinasyonunu kullanabilirsiniz. Bu size her iki dünyanın da en iyisini verecektir. Ancak bu yaklaşım, daha fazla kurulum gerektirdiğinden yeni başlayanlar için önerilmez.
Optimize Edilmiş Görsellerle SEO’yu İyileştirin
Web sitenizdeki veya uygulamanızdaki görselleri optimize ederek SEO’nuzu iyileştirebilirsiniz. Google’ın algoritması, web sitelerinin ve uygulamaların yüklenme hızını hesaba katar. Web siteniz veya uygulamanız yavaş yüklenirse, SEO’nuzu olumsuz yönde etkiler.
Optimize edilmiş resimlerle, web sitenizin veya uygulamanızın yükleme süresini iyileştirerek SEO’nuzu iyileştirebilirsiniz. Bundan sonra, daha da iyi performans için açık grafik protokolü de ekleyebilirsiniz.