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, bileşeni bilgisayardan içe aktarmanız yeterlidir. sonraki/resim paket.
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.
içe aktarmak resim itibaren "sonraki/resim"ihracatvarsayılanişlevBenim görselim() {
geri dönmek (
<resim
kaynak="/my-image.jpg"
genişlik="200"
yükseklik="200"
kalite="100"
alt="Benim görselim"
/>
)
}
Bu örnekte, Görüntü bileşeni, 200 piksel genişliğinde ve 200 piksel yüksekliğinde bir görüntü oluşturur. Ayrıca CSS veya Tailwind gibi bir çerçeve uygulamanıza ve resimlerinize stil vermek için.
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:
- Geliş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 geç 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, aşağıdaki gibi bir üçüncü taraf kitaplığı kullanabilirsiniz: tepki için optimize edilmiş görüntü. 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 resim 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ü ayrıca dosya boyutunu azaltmak için görüntüleri otomatik olarak sıkıştırabilir.
- Tembel 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ü formatını 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.
içe aktarmak görüntü itibaren "tepki için optimize edilmiş görüntü"ihracatvarsayılanişlevsonraki resim() {
geri dönmek (
<görüntü
kaynak="/my-image.jpg"
boyutlar={[400, 800]}
alt="Benim görselim"
/>
)
}
SVG dosyalarını tepki için optimize edilmiş görüntü ile de kullanabilirsiniz.
içe aktarmak {Svg} itibaren "tepki için optimize edilmiş görüntü"ihracatvarsayılanişlevsonraki resim() {
geri dönmek (
<Svg
kaynak="/my-image.svg"
sınıfAdı=“dolu-kırmızı”
/>
)
}
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 avantajı da, kullanıcının cihazı için uygun boyutta 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 kaynak projesi. 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 ile 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.
