Etkili bir Resim Bileşeni oluşturma

Resim bileşeni, performansla ilgili en iyi uygulamaları içerir ve resimleri optimize etmek için kullanıma hazır bir çözüm sunar.

Resimler, web uygulamaları için performans sorunlarının yaygın bir kaynağı ve optimizasyonun odak noktasıdır. Optimize edilmemiş resimler sayfa şişmesine katkıda bulunur ve şu anda 90. yüzdelik dilimde, bayt cinsinden toplam sayfa ağırlığının% 70'inden fazlasını oluşturmaktadır. Resimleri optimize etmenin birçok yolu, performans çözümlerinin varsayılan olarak eklendiği akıllı bir "resim bileşeni" gerektirir.

Aurora ekibi Next.js ile çalışarak böyle bir bileşen oluşturdu. Amaç, web geliştiricilerin daha fazla özelleştirebileceği optimize edilmiş bir resim şablonu oluşturmaktı. Bileşen iyi bir model işlevi görür ve diğer çerçevelerde, içerik yönetim sistemlerinde (İYS) ve teknoloji yığınlarında resim bileşenleri oluşturmak için bir standart belirler. Benzer bir Nuxt.js bileşeni üzerinde birlikte çalıştık ve gelecek sürümlerde resim optimizasyonu için Angular ile çalışıyoruz. Bu gönderide, Next.js Resim bileşenini nasıl tasarladığımız ve bu süreçte aldığımız dersler ele alınmaktadır.

Resim optimizasyonu sorunları ve fırsatları

Resimler yalnızca performansı değil, işletme faaliyetlerini de etkiler. Bir sayfadaki resim sayısı, web sitelerini ziyaret eden kullanıcılara ilişkin dönüşümlere dair en önemli ikinci gösterge olmuştur. Kullanıcıların dönüşüm gerçekleştirdiği oturumlarda, dönüşüm gerçekleştirmedikleri oturumlara kıyasla% 38 daha az resim gösteriliyor. Lighthouse, en iyi uygulamalar denetimi kapsamında resimleri optimize etmek ve web vitals değerlerini iyileştirmek için birden fazla fırsat listeler. Görüntülerin önemli web verilerini ve kullanıcı deneyimini etkileyebileceği yaygın alanlardan bazıları aşağıda verilmiştir.

Boyutlandırılmamış resimler CLS'ye zarar veriyor

Boyutları belirtilmeden yayınlanan resimler düzenin kararsızlığına neden olabilir ve yüksek bir Cumulative Layout Shift (CLS) değerine neden olabilir. img öğelerinde width ve height özelliklerinin ayarlanması, düzen kaymalarını önlemeye yardımcı olabilir. Örneğin:

<img src="flower.jpg" width="360" height="240">

Genişlik ve yükseklik, oluşturulan resmin en boy oranı doğal en boy oranına yakın olacak şekilde ayarlanmalıdır. En boy oranında önemli bir fark, resmin bozuk görünmesine neden olabilir. CSS'de en boy oranını belirtmenize olanak tanıyan nispeten yeni bir özellik, CLS'yi engellerken resimleri duyarlı bir şekilde boyutlandırmanıza yardımcı olabilir.

Büyük resimler LCP'ye zarar verebilir

Bir resmin dosya boyutu ne kadar büyükse indirme işlemi o kadar uzun sürer. Büyük bir resim, sayfanın "hero" resmi veya görüntü alanında Largest Contentful Paint'i (LCP) tetiklemekten sorumlu en önemli öğe olabilir. Kritik içeriğin parçası olan ve indirilmesi uzun süren bir resim LCP'yi geciktirir.

Çoğu durumda, geliştiriciler daha iyi sıkıştırma ve duyarlı resimler kullanarak resim boyutlarını küçültebilir. <img> öğesinin srcset ve sizes özellikleri, farklı boyutlardaki resim dosyalarının sağlanmasına yardımcı olur. Daha sonra tarayıcı, ekran boyutuna ve çözünürlüğüne göre doğru olanı seçebilir.

Kötü görüntü sıkıştırması LCP'ye zarar verebilir

AVIF veya WebP gibi modern resim biçimleri, yaygın olarak kullanılan JPEG ve PNG biçimlerinden daha iyi sıkıştırma sağlayabilir. Daha iyi bir sıkıştırma, resmin kalitesiyle ilgili bazı durumlarda dosya boyutunu% 25 ila% 50 küçültür. Bu düşüş, indirme işlemlerinin daha hızlı ve daha az veri tüketimiyle yapılmasını sağlar. Uygulama, bu biçimleri destekleyen tarayıcılara modern resim biçimleri sunmalıdır.

Gereksiz resimlerin yüklenmesi LCP'ye zarar verir

Sayfa yüklendiğinde, ekranın alt kısmında bulunan veya görüntü alanında olmayan resimler kullanıcıya gösterilmez. Bunlar, LCP'ye katkıda bulunmayacak şekilde ertelenebilir ve geciktirilebilir. Kullanıcı sayfayı doğru kaydırdığında bu tür görüntüleri daha sonra yüklemek için geç yükleme kullanılabilir.

Optimizasyon zorlukları

Ekipler daha önce listelenen sorunlardan kaynaklanan performans maliyetini değerlendirebilir ve bunların üstesinden gelmek için en iyi uygulama çözümlerini uygulayabilir. Ancak, bu durum çoğu zaman uygulamada görülmez ve verimsiz resimler web'i yavaşlatmaya devam eder. Bunun olası nedenleri şunlardır:

• Öncelikler: Web geliştiricileri genellikle kod, JavaScript ve veri optimizasyonuna odaklanır. Bu nedenle, resimlerle veya bunları nasıl optimize edecekleriyle ilgili sorunların farkında olmayabilirler. Tasarımcılar tarafından oluşturulan veya kullanıcılar tarafından yüklenen resimler, öncelik listesinin üst kısmında yer almayabilir.
• Kullanıma hazır çözüm: Geliştiriciler, resim optimizasyonunun inceliklerinin farkında olsalar bile, çerçeveleri veya teknoloji yığınları için kullanıma hazır bir hepsi bir arada çözümün olmaması caydırıcı olabilir.
• Dinamik resimler: Uygulamanın parçası olan statik resimlere ek olarak, dinamik resimler kullanıcılar tarafından yüklenir veya harici veritabanlarından ya da İYS'lerden alınır. Resmin kaynağının dinamik olduğu bu tür resimlerin boyutunu tanımlamak zor olabilir.
• Aşırı işaretleme: Resim boyutunu veya farklı boyutlar için srcset özelliğini ekleme çözümleri her resim için ek işaretleme gerektirir ve bu yorucu olabilir. 2014'te kullanıma sunulan srcset özelliği, günümüzde web sitelerinin yalnızca%26,5'i tarafından kullanılmaktadır. srcset kullanırken, geliştiricilerin çeşitli boyutlarda resimler oluşturması gerekir. just-gimme-an-img gibi araçlar yardımcı olabilir ancak her resimde manuel olarak kullanılmalıdır.
• Tarayıcı desteği: AVIF ve WebP gibi modern resim biçimleri daha küçük resim dosyaları oluşturur, ancak bunları desteklemeyen tarayıcılarda özel işlem gerektirir. Resimlerin tüm tarayıcılara sunulabilmesi için geliştiricilerin içerik pazarlığı veya <picture> öğesi gibi stratejiler kullanması gerekir.
• Geç yükleme özellikleri: Ekranın alt kısmındaki resimlere geç yükleme uygulamak için kullanılabilecek birden fazla teknik ve kitaplık vardır. En iyisini seçmek zor olabilir. Ayrıca geliştiriciler, ertelenmiş resimleri yüklemek için ekranın "kısmına" olan en uygun mesafeyi de bilemeyebilirler. Cihazlardaki farklı görüntü alanı boyutları bunu daha da karmaşık hale getirebilir.
• Değişen ortam: Tarayıcılar, performansı artırmak için yeni HTML veya CSS özelliklerini desteklemeye başladıkça, geliştiricilerin bunların her birini değerlendirmesi zor olabilir. Örneğin, Chrome, Kaynak Deneme olarak Getirme Önceliği özelliğini tanıtıyor. Sayfadaki belirli resimlerin önceliğini artırmak için kullanılabilir. Genel olarak geliştiriciler, bu tür geliştirmelerin bileşen düzeyinde değerlendirilip uygulanması halinde işleri daha kolay bulur.

Çözüm olarak resim bileşeni

Resimleri optimize etme fırsatları ve bunları her uygulama için ayrı ayrı uygulamadaki zorluklar bizi bir resim bileşeni fikrine yönlendirdi. Bir resim bileşeni, en iyi uygulamaları içerebilir ve uygulayabilir. Geliştiriciler, <img> öğesini resim bileşeniyle değiştirerek resim performansıyla ilgili sorunların daha iyi üstesinden gelebilir.

Geçtiğimiz yıl boyunca, Resim bileşenlerini tasarlamak ve implement için Next.js çerçevesiyle çalıştık. Aşağıdaki gibi Next.js uygulamalarındaki mevcut <img> öğelerinin yerine eklenen bir yedek olarak kullanılabilir.

// Before with <img> element:
function Logo() {
  return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}

// After with image component:
import Image from 'next/image'

function Logo() {
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}

Bileşen, resimle ilgili sorunları zengin bir özellik ve ilke kümesi üzerinden genel bir şekilde ele almaya çalışır. Ayrıca, geliştiricilerin resmi çeşitli resim gereksinimleri için özelleştirmelerine olanak tanıyan seçenekler de sunar.

Düzen kaymalarına karşı koruma

Daha önce belirtildiği gibi, boyutlandırılmamış resimler düzen kaymalarına ve CLS'ye katkıda bulunur. Geliştiriciler Next.js Resim bileşenini kullanırken düzen kaymasını önlemek için width ve height özelliklerini kullanarak bir resim boyutu sağlamak zorundadır. Boyut bilinmiyorsa, geliştiricilerin, boyutlu bir kapsayıcıda bulunan boyutlandırılmamış resmi sunmak için layout=fill etiketini belirtmeleri gerekir. Alternatif olarak, derleme zamanında sabit sürücüdeki gerçek görüntünün boyutunu almak ve bunu görüntüye eklemek için statik görüntü içe aktarma işlemlerini kullanabilirsiniz.

// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />

// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />

// Image component with image import
import Image from 'next/image'
import logo from './logo.png'

function Logo() {
  return <Image src={logo} alt="logo" />
}

Geliştiriciler, Resim bileşenini boyutsuz olarak kullanamayacağından, tasarım zaman ayırıp resim boyutlandırmasını yapmalarına ve düzen kaymalarının önlenmesine olanak tanır.

Yanıt vermeyi kolaylaştırma

Geliştiriciler, resimleri farklı cihazlarda duyarlı hale getirmek için <img> öğesinde srcset ve sizes özelliklerini ayarlamalıdır. Resim bileşeniyle bu çabayı azaltmak istedik. Next.js Resim bileşenini, özellik değerlerini uygulama başına yalnızca bir kez ayarlayacak şekilde tasarladık. Bunları, düzen moduna bağlı olarak Resim bileşeninin tüm örneklerine uygularız. Üç bölümden oluşan bir çözüm bulduk:

1. deviceSizes özelliği: Bu özellik, uygulama kullanıcı tabanında ortak olan cihazlara göre kesme noktalarını tek seferlik yapılandırmak için kullanılabilir. Kesme noktalarının varsayılan değerleri yapılandırma dosyasına eklenir.
2. imageSizes özelliği: Bu aynı zamanda, cihaz boyutu ayrılma noktalarına karşılık gelen resim boyutlarını almak için kullanılan yapılandırılabilir bir özelliktir.
3. Her resimde layout özelliği: Bu, her bir resim için deviceSizes ve imageSizes özelliklerinin nasıl kullanılacağını belirtmek amacıyla kullanılır. Düzen modu için desteklenen değerler şunlardır: fixed, fill, intrinsic ve responsive

responsive veya fill düzen modlarıyla bir resim istendiğinde, Next.js, sayfayı isteyen cihazın boyutuna göre sunulacak resmi tanımlar ve resimdeki srcset ile sizes değerlerini uygun şekilde ayarlar.

Aşağıdaki karşılaştırmada, düzen modunun farklı ekranlardaki resmin boyutunu kontrol etmek için nasıl kullanılabileceği gösterilmektedir. Next.js dokümanlarında paylaşılan, bir telefonda ve standart bir dizüstü bilgisayarda görüntülenen bir demo resmi kullandık.

Yerleşik geç yükleme sağlayın

Resim bileşeni, varsayılan olarak yerleşik, yüksek performanslı bir geç yükleme çözümü sunar. <img> öğesi kullanılırken geç yükleme için birkaç yerel seçenek vardır ancak bunların tümünde, kullanımı zorlaştıran dezavantajlar bulunur. Bir geliştirici aşağıdaki geç yükleme yaklaşımlarından birini kullanabilir:

• loading özelliğini belirtin: Bu özelliğin uygulanması kolaydır ancak şu anda bazı tarayıcılarda desteklenmemektedir.
• Intersection Observer API'yi kullanın: Özel bir geç yükleme çözümü derlemek için çaba ve iyi düşünülmüş bir tasarım ile uygulama gerekir. Geliştiriciler bunun için her zaman yeterli zamana sahip olmayabilir.
• Resimleri geç yüklemek için üçüncü taraf kitaplığını içe aktarın: Geç yükleme için uygun bir üçüncü taraf kitaplığını değerlendirmek ve entegre etmek için ek çaba gerekebilir.

Next.js Resim bileşeninde, yükleme varsayılan olarak "lazy" değerine ayarlanır. Geç yükleme, modern tarayıcıların çoğunda bulunan Intersection Observer kullanılarak uygulanır. Geliştiricilerin bu özelliği etkinleştirmek için fazladan bir şey yapmaları gerekmez, ancak gerektiğinde devre dışı bırakabilirler.

Önemli resimleri önceden yükleyin

LCP öğeleri genellikle resimdir ve büyük resimler LCP'yi geciktirebilir. Tarayıcının söz konusu resimleri daha kısa sürede keşfedebilmesi için kritik resimleri önceden yüklemek iyi bir fikirdir. Bir <img> öğesi kullanılırken, HTML başlığına aşağıdaki gibi önceden yükleme ipucu eklenebilir.

<link rel="preload" as="image" href="important.png">

İyi tasarlanmış bir resim bileşeni, kullanılan çerçeveden bağımsız olarak resimlerin yükleme sırasını değiştirmek için bir yol sunmalıdır. Next.js Resim bileşeni söz konusu olduğunda geliştiriciler, resimler bileşeninin priority özelliğini kullanarak önceden yükleme için iyi bir aday olan resmi belirtebilirler.

<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />

priority özelliği eklemek, işaretlemeyi basitleştirir ve kullanımı daha kolay olur. Resim bileşeni geliştiricileri, sayfada belirli ölçütleri karşılayan ekranın üst kısmındaki resimlerin önceden yüklenmesini otomatikleştirmek için buluşsal yöntemler uygulama seçeneklerini de keşfedebilir.

Yüksek performanslı resim barındırmayı teşvik edin

Resim optimizasyonunu otomatikleştirmek için resim CDN'lerin kullanılması önerilir. Ayrıca, WebP ve AVIF gibi modern resim biçimlerini de destekler. Next.js Resim bileşeni, yükleyici mimarisi aracılığıyla varsayılan olarak bir resim CDN kullanır. Aşağıdaki örnek, yükleyicinin Next.js yapılandırma dosyasında CDN'nin yapılandırmasına izin verdiğini göstermektedir.

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://ImgApp/imgix.net',
  },
}

Bu yapılandırmayla geliştiriciler, resim kaynağında göreli URL'ler kullanabilir. Çerçeve ise mutlak URL'yi oluşturmak için göreli URL'yi CDN yoluyla birleştirir. Imgix, Cloudinary ve Akamai gibi popüler resim CDN'leri desteklenir. Mimari, uygulama için özel bir loader işlevi uygulayarak özel bulut sağlayıcısı kullanımını destekler.

Kendi bünyesinde barındırılan görüntüleri destekleme

Web sitelerinin görüntü CDN'lerini kullanamadığı durumlar olabilir. Bu tür durumlarda, bir resim bileşeni kendiliğinden barındırılan resimleri desteklemelidir. Next.js Resim bileşeni, CDN benzeri bir API sağlayan yerleşik resim sunucusu olarak bir resim optimize edici kullanır. Optimize Edici, sunucuda yüklüyse üretim resim dönüşümleri için Sharp'ı kullanır. Bu kitaplık, kendi resim optimizasyonu ardışık düzenini oluşturmak isteyen herkes için iyi bir seçenektir.

Progresif yüklemeyi destekleme

Aşamalı yükleme, gerçek resim yüklenirken genellikle önemli ölçüde düşük kaliteli bir yer tutucu resim görüntüleyerek kullanıcıların ilgisini çekmek için kullanılan bir tekniktir. Algılanan performansı iyileştirir ve kullanıcı deneyimini iyileştirir. Ekranın alt kısmındaki resimler veya ekranın üst kısmındaki resimler için geç yüklemeyle birlikte kullanılabilir.

Next.js Resim bileşeni, placeholder özelliği aracılığıyla resim için aşamalı yüklemeyi destekler. Bu, gerçek resim yüklenirken düşük kaliteli veya bulanık bir resmin gösterilmesi için LQIP (Düşük kaliteli resim yer tutucusu) olarak kullanılabilir.

Etki

Yukarıdaki tüm optimizasyonları dahil ettiğimizde, üretim aşamasında Next.js Resim bileşeni ile başarı elde ettik ve benzer resim bileşenleri üzerindeki diğer teknoloji yığınlarıyla da çalışıyoruz.

Leboncoin, eski JavaScript ön ucunu Next.js'ye taşıdığında, resim ardışık düzenini de Next.js Resim bileşenini kullanacak şekilde yükseltti. <img> öğesinden sonraki/resim bölümüne taşınan bir sayfada LCP 2,4 saniyeden 1,7 saniyeye düştü. Sayfa için indirilen toplam resim baytı 663 KB'tan 326 KB'a yükselmiştir (yaklaşık 100 KB geç yüklenen resim baytı).

Alınan Dersler

Next.js uygulaması oluşturan herkes, optimizasyon için Next.js Resim bileşeninden yararlanabilir. Ancak başka bir çerçeve veya İYS için benzer performans soyutlamaları oluşturmak istiyorsanız aşağıda, süreç boyunca öğrendiğimiz ve yararlı olabilecek birkaç ders verilmiştir.

Güvenlik valfleri, faydadan çok zarara neden olabilir

Next.js Resim bileşeninin erken bir sürümünde, geliştiricilerin boyut şartını atlamasına ve belirtilmemiş boyutlara sahip resimler kullanmasına olanak tanıyan bir unsized özelliği sağlamıştık. Resmin yüksekliğini veya genişliğini önceden bilmenin imkansız olduğu durumlarda bunun gerekli olacağını düşündük. Bununla birlikte, kullanıcıların, sorunu CLS'yi kötüleştirmeyen yöntemlerle çözebildikleri durumlarda bile, boyut şartıyla ilgili sorunlara herkesi kapsayan bir çözüm olarak GitHub'daki unsized özelliğini önerdiğini fark ettik. Bunun ardından unsized özelliğini kullanımdan kaldırdık ve kaldırdık.

Faydalı zorlukları anlamsız sıkıntılardan ayırın

Bir resmin boyutlandırma şartı, "yararlı olanaklara" bir örnektir. Bileşenin kullanımını kısıtlar ancak karşılığında çok büyük performans avantajları sağlar. Kullanıcılar, performansın potansiyel avantajlarını net bir şekilde görebilirse bu sınırlamayı kolayca kabul ederler. Bu nedenle, bu dengeyi dokümantasyonda ve bileşen hakkında yayınlanan diğer materyallerde açıklamak önemlidir.

Ancak performanstan ödün vermeden bu tür sorunlara yönelik çözümler bulabilirsiniz. Örneğin, Next.js Resim bileşeninin geliştirilmesi sırasında, yerel olarak depolanan resimlerin boyutlarını aramanın rahatsız edici olduğuna dair şikayetler aldık. Babel eklentisiyle oluşturma sırasında yerel görüntülerin boyutlarını otomatik olarak alarak bu süreci kolaylaştıran statik resim içe aktarma özellikleri ekledik.

Kolaylık sağlama özellikleri ile performans optimizasyonları arasında denge kurun

Resim bileşeniniz, kullanıcılarına "yararlı olanaklar" sağlamaktan başka bir işe yaramıyorsa geliştiriciler genellikle onu kullanmak istemeyecektir. Resim boyutlandırma ve srcset değerlerinin otomatik olarak oluşturulması gibi performans özelliklerinin en önemli olduğunu tespit ettik. Otomatik geç yükleme ve yerleşik bulanık yer tutucular gibi geliştiricilere yönelik kolaylık özellikleri, Next.js Resim bileşenine de ilgi çekti.

Benimseme oranını artıracak özellikler için yol haritası belirleme

Her durum için mükemmel çalışan bir çözüm oluşturmak çok zordur. Kullanıcıların% 75'i için iyi sonuç veren bir şey tasarlayıp diğer% 25'e "bu durumlarda, bu bileşenin size uygun olmadığını" söylemek cazip gelebilir.

Pratikte bu strateji, bir bileşen tasarımcısı olarak hedeflerinizle çelişkili görünüyor. Geliştiricilerin, bileşeninizin performans avantajlarından faydalanabilmeleri için bileşeninizi benimsemelerini istersiniz. Taşıma işlemini gerçekleştiremeyen ve sohbetin dışında hissedilen bir grup kullanıcı varsa bunu yapmak zordur. Muhtemelen hayal kırıklığını ifade ederek ürünü benimsemeyi etkileyen olumsuz algılara yol açıyorlar.

Bileşeniniz için uzun vadede makul kullanım alanlarının tümünü kapsayan bir yol haritasının olması önerilir. Bileşenin çözmeyi amaçladığı sorunlarla ilgili beklentileri belirlemek için, dokümanlarda neyin neden desteklenmediğini açıkça belirtmeniz de işe yarar.

Sonuç

Görüntü kullanımı ve optimizasyonu karmaşıktır. Geliştiriciler mükemmel bir kullanıcı deneyimi sağlarken performans ile resimlerin kalitesi arasında dengeyi bulmak zorundadır. Bu, resim optimizasyonunu yüksek maliyetli ve yüksek etkili bir çalışma haline getirir.

Her uygulamanın tekerleği yeniden icat etmesini sağlamak yerine, geliştiricilerin, çerçevelerin ve diğer teknoloji yığınlarının kendi uygulamaları için referans olarak kullanabileceği bir en iyi uygulama şablonu oluşturduk. Biz diğer çerçeveleri görsel bileşenlerinde desteklediğimizden bu deneyim gerçekten de değerli olacak.

Next.js Resim bileşeni, Next.js uygulamalarında performans sonuçlarını başarıyla iyileştirip kullanıcı deneyimini iyileştirdi. Bunun daha geniş ekosistemde işe yarayacak harika bir model olduğuna inanıyoruz ve projelerinde bu modeli benimsemek isteyen geliştiricilerden düşüncelerini almak isteriz.