Gatsby Image Optimization with GraphQL Fragments

Yavaş yüklenen görseller kullanıcı deneyimini mahvedebilir ve web sitenizin arama motoru sıralamalarına zarar verebilir. Gatsby'de modern görsel optimizasyonunda uzmanlaşmak, web sayfalarınızın zarif yer tutucu geçişleriyle anında yüklenmesini sağlar. Bu yalnızca metin içeren kurs, modern Gatsby görsel işleme araçlarını ve GraphQL sorgularını kullanarak yüksek performanslı görselleri yapılandırma konusunda size rehberlik eder. Veri çekme sürecinizi basitleştirmeyi, ortak kodları (boilerplate) azaltmayı ve kullanıcıların ilgisini canlı tutan harika önizleme efektleri uygulamayı öğreneceksiniz. Neler öğreneceksiniz: Web görsel optimizasyonunun temel kavramlarını ve duyarlı görsel sunumunu anlamak; WebP ve AVIF gibi modern formatları otomatik olarak oluşturmak için Gatsby görsel araçlarını yapılandırmak; Bileşen sorgu yapılarınızı basitleştirmek ve temizlemek için GraphQL fragment'larını uygulamak; Algılanan yükleme sürelerini iyileştirmek için bulanıklaştırma (blurred-up) ve izlenmiş SVG (traced SVG) efektleri gibi yer tutucu tekniklerini uygulamak; Açık en-boy oranları ve duyarlı kapsayıcılar ayarlayarak düzen kaymalarını (layout shift) önlemek; Her cihaz için yalnızca gerekli görsel boyutlarını çeken verimli sorgular yazma alıştırması yapmak. Temel görsel optimizasyon ilkeleriyle başlayan bu kurs, Gatsby'nin görsel sistemini yapılandırma, GraphQL sorguları oluşturma ve gelişmiş yer tutucu stratejileri uygulama adımlarında size rehberlik eder. Bu kurs, site performansını artırmak isteyen ve halihazırda React ile GraphQL hakkında temel bir anlayışa sahip olan başlangıç ve orta seviye web geliştiricileri için tasarlanmıştır. Gelişmiş görsel işleme konusunda önceden deneyim gerekmez. Daha hızlı, daha cilalanmış web deneyimleri oluşturmak için bugün okumaya başlayın.