Elementor’da görseller nasıl optimize edilir?

Bir fotoğraf Elementor içinde küçük görünebilir ama indirilirken çok veri tüketebilir. Düzenleyici görünümü kontrol ederken WordPress, barındırma altyapısı ve optimizasyon eklentileri ziyaretçiye sunulan dosyayı etkiler. Bu rehber; görsel bileşenleri, kapsayıcı arka planları ve sayfanın ilk büyük görseli üzerinden bu ilişkiyi açıklar.

Görsel bileşeninde uygun çözünürlüğü seçin

Bir Image bileşeni seçip Content sekmesini açın. Image Resolution ayarını bulun; bazı bileşenlerde veya eski sürümlerde adı Image Size olabilir. Bu ayar Medium, Large veya Full gibi bir WordPress görsel boyutunu seçer. Ayrı Width ve Max Width ayarları ise görselin yerleşimde kapladığı alanı belirler. Elementor’un Image bileşeni belgesi bu kontrolleri açıklar.

Full yalnızca “sütunu doldur” anlamına gelmez. Kaynak olarak tam boyutlu medya dosyasını seçer. Büyük bir görsel için WordPress daha önce küçültülmüş bir tam boyut sürümü oluşturmuş olabilir; dolayısıyla her zaman kameranın dokunulmamış orijinali kullanılmaz. WordPress’in görsel boyutları oluşturma belgesi bu davranışı açıklar.

Tarayıcı da seçime katılır: Yayımlanan görselde srcset ve sizes varsa mevcut dosyalar arasından yerleşime, ekranın piksel yoğunluğuna ve kendi yükleme kararlarına göre seçim yapabilir. Bu nedenle Full, her ziyaretçinin en büyük dosyayı indireceği anlamına gelmez. Yine de uygun bileşen çözünürlüğü ve makul ölçülerde bir kaynak, yalnızca otomatik seçime güvenmekten daha iyi bir başlangıçtır.

Bunlar örnektir, Elementor’un zorunlu ölçüleri değildir. WordPress’te kayıtlı boyutlar ayarlara, temaya ve eklentilere bağlıdır. Yükseklik de planlanan kırpma için yeterli olmalıdır. Gösterim genişliğini iki katına çıkarmak yüksek yoğunluklu ekranlarda yardımcı olabilir; fakat bu, kalite ile dosya boyutu arasında bir tercihtir. Her görseli iki kat ölçüyle dışa aktarmak gerekmez.

Standart boyutlar uygun değilse Custom çözünürlük işe yarayabilir. Kırpmanın doğru olduğunu ve yayımlanan görselin farklı ekranlar için uygun sürümler sunmaya devam ettiğini kontrol edin. Custom her zaman daha iyi dosya sunumu sağlamaz; duyarlı görselleri de mutlaka devre dışı bırakmaz.

Style → Width veya Max Width ayarını değiştirmek kayıtlı dosyayı küçültmez ya da yeniden sıkıştırmaz. Duyarlı görsel işaretlemesi tarayıcının daha küçük bir sürüm istemesine yardımcı olabilir. Ancak yalnızca görünen genişliği azaltmak, daha az veri indirildiğini kanıtlamaz.

Kapsayıcı arka planlarını mobil için optimize edin

Bir kapsayıcının veya bölümün Style → Background ayarlarından eklenen görsel genellikle CSS arka planı olur. HTML görsellerinden farklı olarak srcset veya sizes öznitelikleri bulunmaz. Başka bir sistem alternatifler sağlamıyorsa telefon da masaüstüyle aynı arka planı indirebilir.

Önce görselin arka plan olarak kullanılıp kullanılmaması gerektiğine karar verin. Dekoratif doku veya atmosfer görseli uygun olabilir. Ürün fotoğrafı, diyagram ya da temel bilgi taşıyan görsel genellikle Image bileşeninde daha iyi çalışır; böylece alternatif metin ve farklı ekranlara uygun sürümler sunulabilir.

Arka plan mobilde farklı bir kompozisyon gerektiriyorsa:

1. Kapsayıcıyı veya bölümü seçip Style → Background ayarını açın.
2. Düzenleyiciniz sunuyorsa arka planın duyarlı görünüm kontrolüyle mobil kırılma noktasına geçin.
3. Kapsayıcının oranlarına uygun kırpılmış bir mobil kopya seçin. Yüksek bir ana alan dikey kırpma isterken alçak bir banner yatay kalabilir.
4. Görsel alanı bozulmadan doldurmalıysa Cover seçin. Cover oranları korur ve kapsayıcı dışında kalan kısımları kırpar.
5. Konuyu görünür tutacak şekilde konumu ayarlayın. Yalnızca kırılma noktasını değil, yakın ekran genişliklerini de önizleyin.

Yayımlanmış mobil sayfada kapsayıcı yüksekliğini, metin kontrastını ve görsel isteğini kontrol edin. Başka bir kırpma kompozisyonu iyileştirebilir; ancak yalnızca mobil sürüm büyük dosyanın gerçekten yerine geçiyorsa indirme azalır. Ayrı bir masaüstü bölümünü gizlemek, görsellerinin hiç istenmeyeceğini garanti etmez.

Ana görseli geciktirmeden yükleyin

Largest Contentful Paint (LCP) ilk ekran görünümündeki en büyük içerik öğesinin ne zaman belirdiğini ölçer. Bu, ana görsel, arka plan veya metin bloğu olabilir. Öncelikleri değiştirmeden önce performans raporundan gerçek LCP öğesini bulun.

Gecikmeli yükleme, yani lazy loading, sayfanın aşağısındaki görseller için faydalıdır. Fakat tarayıcı görsele ne zaman ihtiyaç duyulacağını belirlemeyi beklediğinden ana görseli geciktirebilir. Google’ın LCP optimizasyon rehberi, LCP görselinin erken bulunabilmesini ve gecikmeli yüklenmemesini önerir.

• Elementor’un otomatik yönetimiyle başlayın: Aşağıda açıklanan performans ayarlarından Optimized Image Loading’i etkinleştirin, ardından yayımlanan sonucu kontrol edin.
• Diğer gecikmeli yükleme sistemlerini kontrol edin: Önbellek veya görsel optimizasyon eklentileri sonucu değiştirebilir. Ana görseli geciktiriyorlarsa ilgili görseli ya da öğeyi eklentinin hariç tutma ayarına ekleyin.
• Hemen yükleme ile önceliği ayırın: Gecikmeli yükleme kullanılmayan bir HTML görseli normal şekilde yüklenmeye başlayabilir. loading="eager" bunu açıkça ister; fetchpriority="high" ise ayrı bir öncelik ipucudur. Her görsele yüksek öncelik vermek ayarın amacını bozar.
• Ana arka planları ayrı inceleyin: Bunlar bir görsel öğesinin yükleme özniteliklerini kullanmaz. Arka plan LCP öğesiyse ve isteği geç başlıyorsa CSS’nin veya gecikmeli yükleme betiğinin URL’yi ne zaman kullanılabilir kıldığını araştırın. Yalnızca ölçüleri küçültmek bu gecikmeyi çözmez.
• Üstteki slayt gösterilerini değerlendirin: Tek sabit görsele öncelik vermek daha kolaydır. Slayt gösterisini koruyorsanız gizli slaytların ilk görünür görselle yükleme sırasında yarışıp yarışmadığını kontrol edin.

Görsel yüklenmeden önce alanını ayırın

Cumulative Layout Shift (CLS) görünür içerikteki beklenmedik hareketleri ölçer. Tarayıcı görselin ne kadar yer gerektirdiğini bilmiyorsa görsel geldiğinde metinler ve düğmeler kayabilir. Ölçüler bu alanı önceden ayırmaya yardımcı olur.

1. Genişlik ve yükseklik özniteliklerini koruyun: Standart WordPress görsel çıktısı bunları genellikle içerir. Oranları belirtirler ve duyarlı CSS ile birlikte çalışabilirler.
2. Görsel çerçevesini tanımlayın: Tutarlı kırpılan kartlarda uygun en-boy oranı veya açık yerleşim ölçüleriyle yer ayırın. Bileşen kontrollerini ya da gerekirse CSS aspect-ratio özelliğini kullanın. Sabit çerçeveyi doldurmak için object-fit: cover kırpma sırasında oranları korur.
3. Şablonları farklı içeriklerle sınayın: Theme Builder veya Loop Grid içinde yatay, dikey ve eksik öne çıkan görsellere sahip yazıları önizleyin. Karta tutarlı bir görsel alanı ve gerekirse yedek görsel verin.

CSS arka planı kapsayıcısına doğal yükseklik kazandırmaz. Alanı yerleşim, içerik, iç boşluk veya minimum yükseklik belirler. Arka planın bölümü açık tutmasını beklemek yerine her kırılma noktasında bu ayarları kontrol edin.

Galerileri, karuselleri ve lightbox görünümlerini ayrı kontrol edin

Bir galeri hem kompakt bir genel görünüm sunmalı hem de görsel açıldığında yeterli ayrıntı göstermelidir. Bu iki iş için farklı dosyalar gerekebilir.

• Çözünürlüğü görünen slayta veya karta göre seçin: Dört küçük görsellik karusel, tek tam genişlikte görselle aynı çözünürlüğe ihtiyaç duymaz. Mobilde daha az eşzamanlı slayt her görseli genişletebileceğinden mobil görünümü de kontrol edin.
• Önizleme ile büyütülmüş görseli ayırın: Izgara için uygun çözünürlük seçin; büyük görünüm gerekiyorsa Media File bağlantılarını ve Lightbox’ı ayarlayın. Büyük dosyayı da optimize edin. Ön yükleme değişebileceğinden açmadan önceki ve sonraki istekleri kontrol edin.
• Döngü şablonunu inceleyin: Arşiv kartlarında ve Loop Grid’de, döngü öğesinin içindeki Featured Image bileşenini ayarlayın. Tekrarlanan aşırı büyük görseller, kartlar küçük görünse de tüm arşivi ağırlaştırabilir.

Görsele uygun dosya biçimini seçin

Biçimleri aynı ölçülerde ve gerçekten yayımlayacağınız kalitede karşılaştırın. Her görsel için geçerli sabit bir tasarruf yüzdesi yoktur.

• WebP: Fotoğraflar ve birçok illüstrasyon için iyi bir başlangıçtır. Kayıplı ve kayıpsız sıkıştırmayı, ayrıca şeffaflığı destekler. JPG’den WebP’ye veya PNG’den WebP’ye araçlarını deneyip ince ayrıntıları ve kenarları kontrol edin.
• JPG: İş akışının başka bir aşaması gerektiriyorsa fotoğraflar için kullanışlıdır. Tek bir yüzdeyi evrensel ayar saymak yerine sonuçları karşılaştırarak kaliteyi ayarlayın.
• PNG: Kayıpsız grafikler, ekran görüntüleri ve bunu gerektiren süreçler için uygundur. Şeffaflık tek başına WebP yerine PNG seçme nedeni değildir. PNG fotoğraflar uygun kayıplı dışa aktarımlardan genellikle çok daha büyüktür.
• AVIF: WordPress, barındırma ve optimizasyon altyapınız destekliyorsa fotoğraflarda karşılaştırmaya değerdir. Tüm kitaplığı dönüştürmeden önce yükleme sonrası işlemeyi ve yayımlanan dosyayı sınayın.
• SVG: Vektör logolar ve simgeler için uygundur. Güvenilir kaynakları kullanın ve dosya temizleme ile yükleme önlemleri dahil Elementor’un SVG yükleme rehberine uyun.

Web için görsel biçimleri rehberimiz seçeneklerin avantajlarını ve sınırlamalarını ayrıntılı açıklar.

Her görseli kullanılacağı yere göre hazırlayın

Orijinali ayrı saklayıp site için bir kopya dışa aktarın. Böylece arka planlarda veya galeriden açılırken kullanılan tam boyutlu dosya da makul kalır.

1. En büyük gösterim boyutunu ölçün: Masaüstü ve mobili kontrol edin. Masaüstünde metnin yanında duran görsel tablette tüm satırı kaplayıp genişleyebilir.
2. Yerleşime göre kırpın: Konuyu koruyarak gereksiz alanları kırpma aracıyla kaldırın. Üzerine gelebilecek metne yer bırakın.
3. Bir kopyayı yeniden boyutlandırın: Uygun ölçüleri görsel boyutlandırma aracıyla karşılaştırın. Küçük bir kaynağı yalnızca önceden belirlenmiş genişliğe ulaşmak için büyütmeyin.
4. Sıkıştırıp kontrol edin: Görsel sıkıştırıcıyı kullanarak çıktıyı hedef gösterim boyutunda karşılaştırın. Ana görsel için 100–200 KB veya içerik görseli için 100 KB altı başlangıç hedefi olabilir. Makul boyutu ayrıntılar, ölçüler ve toplam sayfa ağırlığı belirler.
5. Adlandırın ve açıklayın: office-reception.webp gibi açıklayıcı bir dosya adı kullanın. Anlam taşıyan görsellerin işlevini aktaran alternatif metin ekleyin; dekoratif olanlarda genellikle boş alternatif metin gerekir. Alanları anahtar kelimelerle doldurmadan Google’ın görsel SEO önerilerini izleyin.

Bir eklenti yüklenen dosyayı yeniden optimize ediyorsa son sunulan görseli karşılaştırın. Tekrarlanan kayıplı sıkıştırma, her ayar makul görünse bile ince dokulara ve metne zarar verebilir.

Elementor’un görsel performans ayarlarını kontrol edin

Güncel Elementor belgelerine göre bu kontroller WordPress yönetiminde Elementor → Editor → Settings → Performance altındadır. Eski kurulumların menüsü farklı olabilir. Resmî performans ayarları rehberi, Performance ve Features sekmelerini ayırır.

• Optimized Image Loading: Muhtemel LCP görseline öncelik verilmesine ve aşağıdaki görsellerin gecikmeli yüklenmesine yardımcı olur. Elementor’un yükleme optimizasyon rehberine bakın. Özellikle başka eklentiler de görsel işaretlemesini değiştiriyorsa gerçek sonucu doğrulayın.
• Lazy Load Background Images: Belgelenen davranışa göre ilki hariç arka planların yüklenmesini erteler. Gerçek sayfanızın üstünde görünen arka planın zamanında geldiğini kontrol edin.

Değişiklikleri tek tek etkinleştirin, ilgili önbellekleri temizleyip yayımlanan sayfayı sınayın. Bu ayarlar yükleme davranışını değiştirir; uygun ölçü ve sıkıştırmanın yerini tutmaz.

Yayımlanan sayfayı kontrol edin

Oturum kapalıyken görünümü inceleyin: kırpma doğru mu, metin okunuyor mu, görseller gelirken yerleşim sabit mi? Görsel hâlâ büyük, bulanık veya yavaşsa sunulan dosyayı araştırın.

1. Yayımlanan sayfayı gizli pencerede açın. Geliştirici araçlarında Network sekmesini seçin, Img filtresini kullanın ve araçlar açıkken Disable cache seçeneğini etkinleştirin.
2. Yenileyip görsel isteklerini aktarılan boyuta göre sıralayın. En büyük dosyalardan ve hemen görünen görsellerden başlayın.
3. Gerçek ölçüler için isteğin URL’sine ve önizlemesine bakın. Gösterim boyutu ve piksel yoğunluğuyla karşılaştırın. 350 piksellik kartta 2400 piksellik dosya araştırılmalıdır; 2× ekranda 700 piksel uygun olabilir.
4. Tarayıcı sürekli aşırı büyük dosya seçiyorsa HTML görselinin srcset ve sizes değerlerini inceleyin. Yükleme ve öncelik özniteliklerini yalnızca çevreleyen bileşende değil, gerçek <img> öğesinde kontrol edin.
5. Yenilemeden önce mobil emülasyona geçin ve istenen arka plan ile görsel sürümlerine bakın. Görünümü gerçek telefonda da doğrulayın.

Değişiklikten önce ve sonra benzer koşullarda PageSpeed Insights çalıştırın. Tek toplam puan yerine LCP öğesini ve görsellerle ilgili bulguları inceleyin. İndirmesi geç başlayan küçük ana görsel ile hemen istenen büyük dosyanın sorunu aynı değildir.

Eski görsel kalıyorsa önce bileşenin dosya seçimini ve kırılma noktalarını kontrol edin. Sonra ilgili sayfa, optimizasyon ve CDN önbelleklerini temizleyin. Eski arka plan adresi Elementor CSS’sinden geliyorsa Tools altındaki dosya veya CSS yeniden oluşturma seçeneğini kullanın; adı sürüme göre değişir. CSS’yi yeniden oluşturmak eksik WordPress küçük resim boyutlarını oluşturmaz.

Örnek: metin sütununun yanındaki görsel

Bir ekip fotoğrafının başlangıçta 4800 × 3200 piksel ve 5,4 MB olduğunu düşünün. Sütunu masaüstünde yaklaşık 550 piksel genişliğindedir, ancak tablet görünümünde tüm satırı kaplar.

1. En geniş kullanımı kontrol edin: Görsel tablette yaklaşık 700 piksele ulaşıyorsa karşılaştırmayı yalnızca dar masaüstü sütununa değil bu genişliğe göre yapın.
2. Kırpma ve ölçüleri hazırlayın: 4:3 kompozisyona uygunsa 1000 × 750 ve 1400 × 1050 çıktıları karşılaştırın. Yüzleri ve önemli ayrıntıları son gösterim boyutunda inceleyin.
3. Sıkıştırmayı karşılaştırın: Orta kaliteyle WebP deneyip sonucu kontrol edin. Gerçek boyutu kaydedin; ayrıntılı grup fotoğrafı aynı ölçülerdeki sade portreden daha fazla veri gerektirebilir.
4. Bileşeni ayarlayın: Seçilen çıktıyı yükleyin, uygun alternatif metin ekleyip Image Resolution seçin. 1400 piksellik yüklemede büyük sürümü sunmak için Full gerekebilir. Sayfanın sunduğu duyarlı dosyaları kontrol edin.
5. Sonucu doğrulayın: Masaüstü ve mobil isteklerini, netliği ve yerleşim kararlılığını kontrol edin. Fotoğraf aşağıdaysa gecikmeli yükleme uygun olabilir; LCP görseliyse zamanında yüklenmelidir.

Yaygın Elementor görsel sorunlarını çözün

Görsel neden bulanık?

Image Resolution ayarını, kaynak ölçülerini ve tarayıcının seçtiği dosyayı kontrol edin. 300 piksellik küçük resim 600 piksellik sütuna gerildiğinde yumuşar, ancak yüksek çözünürlük orijinalde olmayan ayrıntıyı geri getiremez. Sıkıştırmayı ve küçük alanı büyüten kırpmaları da inceleyin. Bulanık web görselleri rehberimize bakın.

Mobil arka plan neden yok veya yanlış kırpılmış?

Mobil kırılma noktasındaki görseli, devralınan ayarları, görünürlüğü ve kapsayıcı yüksekliğini kontrol edin. Cover alanı kırparak doldurur; konu kayboluyorsa konumu veya kırpmayı değiştirin. Oranlar bozulmamalıdır. Dosya hiç yüklenmiyorsa kırpmadan önce istekteki hatayı araştırın.

Değişiklikler neden canlı sitede görünmüyor?

Doğru bileşeni, şablonu ve kırılma noktasını güncellediğinizi doğrulayın. Eski dosya ile eski stili ayırmak için canlı görsel URL’sini inceleyin. İlgili önbellekleri temizleyin; CSS eski arka plana işaret ediyorsa yeniden oluşturun. Sebebi bulmadan tekrarlanan yüklemeler gereksiz kopyalar bırakabilir.

Sık sorulan sorular

Full seçeneğinden her zaman kaçınmalı mıyım?

Hayır. O konum için hazırlanmış dosyada Full uygun olabilir. Kaynak ölçülerini, duyarlı sürümleri ve indirilen dosyayı kontrol edin. Full sütunu doldurma ayarı değildir; bunu yerleşim ayarları yönetir.

Elementor yüklenen görselleri otomatik sıkıştırır mı?

Sayfa oluşturucunun çözünürlük ve yükleme kontrolleri yüklediğiniz dosyayı sıkıştırmaz. WordPress boyutlar oluşturur ve biçime özel kalite ayarları uygular; ancak optimize edilmiş kitaplığı garanti etmez. Elementor ayrıca ayrı Image Optimizer ürününü sunar. Barındırma veya eklentiler de benzer işleme yapabilir. Yeni sistem eklemeden önce etkin olanı kontrol edin.

WebP’yi doğrudan yükleyebilir miyim?

WordPress WebP yüklemelerini destekler. Küçük sürümlerin oluşturulması için barındırma ortamında uyumlu görsel işleme de gerekir. Tüm kitaplığı dönüştürmeden önce bir dosyayı yüklemeden bileşen seçimine ve yayımlanan sunuma kadar sınayın.

Ana görsel için hangi ölçüler uygun?

En büyük gösterim boyutunu ve kırpmayı esas alın. 1600–1920 piksel genişlik birçok masaüstü yerleşiminde makul karşılaştırma başlangıcıdır; Elementor sınırı veya her ekranda netlik garantisi değildir. Mobil için ayrı kırpma gerekip gerekmediğini kontrol edin; dosya boyutunu görünür ayrıntılarla karşılaştırın.

Görsel optimizasyonu Google sıralamasını iyileştirir mi?

Yüklemeyi ve sayfa deneyimini iyileştirebilir, ancak daha yüksek sıralamayı garanti etmez. Google’ın sayfa deneyimi rehberi Core Web Vitals’ın sıralama sistemlerinde kullanıldığını, iyi puanların tek başına üst sıraları garanti etmediğini açıklar. İlgili görseller, açıklayıcı adlar ve yararlı alternatif metinler içeriğin anlaşılmasına da yardımcı olur. Alternatif metin ve dosya adı rehberimize bakın.