WordPress'te Hangi Boyutta Resim Kullanılmalı (Önemli Faktörler ve İpuçları)

Web sitesi yükleme hızlarının yavaş olduğunu mu yaşıyorsunuz? Düşük web sitesi hızı birçok faktörden kaynaklanabilir ve büyük resim boyutları bunlardan biridir. Çok fazla içeriğe sahip bir web siteniz varsa, görsel boyutu muhtemelen sitenizin yavaş hızının ardındaki faktörlerden biri olabilir. Bu nedenle, WordPress görsellerinizi sitenizi engellememeleri için optimize etmeniz önemlidir. Bu kılavuz, WordPress web siteniz için en iyi görsel boyutunu belirlemeniz için size genel bir bakış sunacaktır. Bu, müşteri etkileşimini artırmaya ve verimliliği artırmaya yardımcı olacaktır.

WordPress'te Resim Boyutlarını Anlamak

WordPress'teki görsel boyutları, görsel dosyasının boyutlarına (piksel cinsinden) ve kilobayt (KB) veya megabayt (MB) cinsinden boyutuna göre belirlenir. WordPress sitenizde bir görsel görüntülerken, görsel boyutunun sadece estetikle ilgili olmadığını bilmek önemlidir; site performansını, kullanıcı deneyimini ve arama motoru optimizasyonunu (SEO) doğrudan etkiler. WordPress, yükleme sırasında otomatik olarak ölçeklendirilmiş bir sürüm oluşturarak kullanıcıların aşırı büyük resimler kullanmasını önlemeye yardımcı olacaktır. Ayrıca yüklediğiniz her görselin, sitenizde kullanıldığı yere bağlı olarak farklı varyasyonları veya boyutları görüntülenir. Aşağıda bununla ilgili daha fazla bilgi bulabilirsiniz.

SRCSet İşlevselliği

WordPress'e bir görsel yüklediğinizde platform otomatik olarak o görselin birden fazla boyutunu (küçük resim, orta, büyük vb.) oluşturur. SRCset özelliği, tarayıcının cihazın ekran boyutuna ve piksel yoğunluğuna bağlı olarak en uygun görüntü boyutunu seçmesine olanak tanır.

Örneğin, blog yayınınız bir resim içeriyorsa ve bir kullanıcı web sitenizi geniş ekranlı bir masaüstünden ziyaret ediyorsa, tarayıcı büyük sürümü (ör. 1024 piksel) yükleyebilir. Öte yandan, kullanıcı cep telefonundan geziniyorsa tarayıcı, yüklenmesi daha hızlı olan daha küçük bir sürümü (örneğin 300 piksel) seçecektir.

WordPress'e yüklediğiniz her görsel için alacağınız varsayılan boyutlar şunlardır:

• Küçük resim: 150 x 150 piksel
• Orta: 300 x 300 piksel (ayarlarınıza göre değişiklik gösterebilir)
• Büyük: 1024 x 1024 piksel (ayarlarınıza göre değişiklik gösterebilir)
• Tam boyut: Orijinal boyutlar

Varsayılan görsel boyutlarını değiştirmek istiyorsanız bunları WordPress kontrol panelindeki Ayarlar → Medya bölümünde bulabilirsiniz:

WordPress'te Hangi Boyutta Resim Kullanılır?

Çoğu durumda resim dosyanızın boyutu 200kb'ı geçmemelidir. Çoğu görsel 50kb-100kb'ye yakın veya daha az olmalıdır. Resim dosyalarınızı bu aralıkta tutmak için boyutlar gibi diğer faktörleri de dikkate almanız gerekir.

WordPress için yaygın olarak önerilen bazı görsel boyutları şunlardır:

• Blog Yazısı Görselleri: 1200 x 630 piksel
• Öne Çıkan Görseller (Küçük Resimler): 1200 x 800 piksel
• Başlık Görselleri / Kahraman Görselleri: 1600 x 900 piksel veya 1920 x 1080 piksel
• Arka Plan Resimleri: 1920 x 1080 piksel
• Kaydırıcılar ve Banner'lar: 1200 x 600 piksel veya 1920 x 800 piksel
• Ürün Görselleri (WooCommerce): 800 x 800 piksel veya 1000 x 1000 piksel
• Logo Resmi: 200 x 100 piksel veya 250 x 100 piksel

Özel bir nedeniniz olmadığı sürece 5000 piksel genişliğinde 5mb görsel yüklememelisiniz. WordPress, kullanabileceğiniz daha web sitesi dostu sürümler oluşturarak yardımcı olacaktır. Ancak bu orijinal boyutu görüntülerseniz sayfa yükleme hızınız düşecektir.

WordPress'e yüklemek için doğru görsel boyutunu seçmek, web sitenizin performansını optimize etmek ve görsellerin tüm cihazlarda net görünmesini sağlamak için çok önemlidir. İdeal görsel boyutu, görselin kullanılacağı bağlama (örneğin blog gönderileri, küçük resimler, kaydırıcılar vb.) yanı sıra yanıt verme hızına, dosya boyutuna ve kalite hususlarına bağlıdır.

WordPress Boyutu Resmi için Dikkat Edilmesi Gereken Temel Faktörler

WordPress için görsel seçerken veya oluştururken performans ve tasarım açısından optimize edildiklerinden emin olmak için birkaç temel faktör dikkate alınmalıdır. Bu faktörler görüntü boyutunu, dosya türünü, boyutları ve daha fazlasını içerir. İşte ayrıntılı bir döküm:

Resim Boyutları

Görsel boyutları, görsellerin web sitenizin farklı bölümlerinde nasıl görüneceğini doğrudan etkiler. Çok büyük görsellerin kullanılması yükleme sürelerini yavaşlatır, kullanıcı deneyimini ve SEO'yu olumsuz etkiler. Çok küçük görseller pikselli veya bulanık görünerek sitenizin genel görsel kalitesini düşürebilir.

WordPress temanız genellikle başlıklar, blog gönderileri veya galeriler gibi farklı bölümler için ideal görsel boyutlarını belirler. Önerilen boyutlar için temanızın belgelerine bakın.

Dosya Boyutu

Daha büyük dosya boyutları daha yavaş yükleme sürelerine neden olur ve bu da hem kullanıcı deneyimine (özellikle mobil cihazlarda) hem de arama motoru sıralamanıza zarar verir. Yavaş siteler daha yüksek hemen çıkma oranlarına yol açar; bu da ziyaretçilerin siteniz tam olarak yüklenmeden ayrılma olasılığının daha yüksek olduğu anlamına gelir.

İdeal olarak görsel dosyası boyutlarını 500 KB'ın altında tutun. Ancak görüntü belirgin bir şekilde görüntüleniyorsa daha iyi kalite için 1 MB'a kadar izin verebilirsiniz. Görsel kaliteyi korurken dosya boyutlarını azaltmak için görüntü sıkıştırma araçlarını kullanın. Manuel sıkıştırma için TinyPNG veya JPEG-Optimizer gibi araçlar iyi çalışır. Sıkıştırdıktan sonra Google PageSpeed ​​Insights veya GTmetrix gibi araçları kullanarak sayfanızın yüklenme süresini test edin. Yükleme süreleri yavaşsa görsel boyutlarını daha da azaltın.

Dosya Formatı

Farklı dosya formatları farklı amaçlara hizmet eder ve doğru olanı seçmek kalite ile performansı dengeleyebilir. Yanlış formatın kullanılması, özellikle şeffaflık veya keskin kenarlar söz konusu olduğunda gereksiz derecede büyük dosya boyutlarına veya düşük görüntü kalitesine neden olabilir.

JPEG (JPG), birçok renk ve degradeye sahip fotoğraflar veya görüntüler için en iyisidir. Kayıplı sıkıştırmayı destekler; bu, bazı ayrıntıları ortadan kaldırarak dosya boyutunu küçülttüğü anlamına gelir, ancak karmaşık görüntülerin dosya boyutlarını azaltmak için harikadır. Öte yandan PNG, şeffaflık içeren logolar, simgeler veya görseller için idealdir. PNG, daha büyük dosya boyutları pahasına görüntü kalitesini koruyarak kayıpsız sıkıştırma sağlar.

En Boy Oranı

Tutarlı bir en boy oranı, görsellerinizin farklı cihazlarda ve ekran boyutlarında doğru şekilde görüntülenmesini sağlar. Tutarsız en boy oranlarının kullanılması görsellerin kırpılmasına, bozulmasına veya kötü hizalanmasına yol açarak sitenizin görsel tutarlılığını etkileyebilir.

Sabit düzenlerdeki (kaydırıcılar veya banner'lar gibi) görseller için her zaman temanız veya eklenti belgelerinizde önerilen en boy oranını izleyin (örneğin, banner'lar için 16:9 oranı). Galeriler veya ızgaralar için tek bir en boy oranı seçin (örneğin, kare küçük resimler için 4:3 veya 1:1) ve tekdüzelik sağlamak için tüm görüntüleri bu orana göre kırpın. Duyarlı resim ayarlarını kullanıyorsanız en boy oranlarının çeşitli görünüm alanlarında iyi çalıştığından emin olmak için sitenizi farklı cihazlarda ve ekran boyutlarında test edin.

WordPress Resim Boyutları için En İyi Uygulamalar

Web sitesi hızı, kullanıcı deneyimi ve SEO için çok önemlidir ve büyük boyutlu resimler WordPress sitenizi önemli ölçüde yavaşlatabilir. Kaliteden ödün vermeden hızlı yükleme sürelerini korumak için görsel boyutlarınızı optimize etmek önemlidir. Burada resim boyutlarını etkili bir şekilde küçültmeye ve sitenizin performansını artırmaya yönelik kısa bir kılavuz bulunmaktadır.

Görüntüleri Uygun Boyutlara Yeniden Boyutlandırın

Sitenizin görüntüleme ihtiyaçlarına uygun boyutlarda görseller yükleyin. Depolama alanını ve bant genişliğini tüketeceği için WordPress tarafından otomatik olarak yeniden boyutlandırılan büyük görselleri yüklemekten kaçının. Görselleri yüklemeden önce tema düzeninize göre ihtiyacınız olan maksimum boyutları belirleyin. Örneğin içerik alanınız 800 piksel genişliğindeyse, bundan daha geniş görseller doğru şekilde görüntülenmez ve sayfanızı yavaşlatır.

WordPress'teki Görselleri Yeniden Boyutlandırın

Zaten büyük boyutlu bir görsel yüklediyseniz, onu doğrudan WordPress'te yeniden boyutlandırabilirsiniz. WordPress kontrol panelinizde Medya > Kütüphane'ye gidin.

Mevcut bir görsele tıklayın veya yeni bir görsel dosyası yükleyin. Bizim durumumuzda yeni bir resim dosyası yüklemeyi seçtik.

Eklenen resme tıkladıktan sonra tüm detayları gösterilecektir. Eklenen ayarlara erişmek için sağ alt köşedeki 'Daha fazla ayrıntıyı düzenle'yi tıklayın.

Görüntü ayrıntılarında Görüntüyü Düzenle düğmesini tıklayın.

Görüntüyü Ölçeklendir altında, yeni boyutları (genişlik veya yükseklik) girin; WordPress görüntüyü orantılı olarak ölçeklendirecektir. Değişiklikleri uygulamak için Ölçekle'ye tıklayın.

NOT: Resimlerinizi orijinal versiyondan daha büyük ölçekleyemezsiniz. WordPress bunu yapmanız durumunda size bilgi verecektir.

Görüntü Sıkıştırma Araçlarını Kullanın

Daha önce tartışıldığı gibi görsellerinizi sıkıştırmak, dosya boyutlarının küçültülmesine yardımcı olur. Adobe Photoshop veya Microsoft Photos gibi düzenleme yazılımları da dahil olmak üzere çeşitli görüntü sıkıştırma araçları mevcuttur.

Alternatif olarak bunu başarmak için TinyPNG gibi çevrimiçi araçları kullanabilirsiniz.

Bu araç WEBP, JPEG ve PNG dosyalarınızın boyutunu en aza indirmek için kayıplı sıkıştırmayı tercih eder. Basitçe görsellerinizi yükleyin; TinyPNG sıkıştırmayı sizin için halledecektir.

Alternatif olarak Imagify gibi güçlü bir görsel optimizasyon eklentisinden yararlanabilirsiniz. Yüklemeden ve etkinleştirmeden önce WordPress kontrol panelinizin "Eklentiler" bölümünden yeni bir eklenti ekleyin.

Imagify'ı WordPress sitenize yükleyip etkinleştirdikten sonra, sıkıştırma tercihlerinizi yapılandırmak için Ayarlar > Imagify'a gidin:

Ayarladıktan sonra Değişiklikleri Kaydet'e tıklayın. Imagify daha sonra sitenize yüklediğiniz görselleri otomatik olarak sıkıştıracaktır.

Maksimum Yükleme Sınırını Değiştir

WordPress, barındırma sağlayıcınızın uyguladığı sınırlara göre farklılık gösterebilecek bir maksimum dosya yükleme boyutu belirler. Mevcut dosya yükleme sınırınızı belirlemek için WordPress kontrol panelinizde Medya > Yeni Ekle seçeneğine gidin. Yükleme boyutu sınırlaması bu sayfada görüntülenecektir.

Daha büyük dosyalar yüklemeyi planlamıyorsanız, genellikle bu sınırı ayarlamanıza gerek yoktur. Ancak, özellikle çok yazarlı bir blog yönetiyorsanız, başkalarının gereksiz derecede büyük resimler yüklemesini önlemek için dosya boyutu sınırını düşürmek yararlı olabilir. Maksimum yükleme boyutunu değiştirmek veya php.ini dosyasını düzenleyerek sınırı güncellemek için barındırma sağlayıcınızla iletişime geçebilirsiniz.

Tembel Yüklemeyi Kullan

Tembel yükleme, bir web sayfasındaki görsellerin yüklenmesini gerçekten ihtiyaç duyulana kadar geciktiren, performansı artıran bir tekniktir. Bir sayfaya erişildiğinde tüm görsellerin hemen yüklenmesini zorlamak yerine, yavaş yükleme, görselleri yalnızca kullanıcı aşağı kaydırdığında ve görüntülendiğinde yükler. Bu, sayfanın ilk yükleme süresini azaltır, bant genişliğinden tasarruf sağlar ve kullanıcı deneyimini iyileştirir.

Günümüzde çoğu WordPress teması ve eklentisi, yavaş yükleme için yerleşik destek sunmaktadır. WordPress'in kendisi bile 5.5 sürümünden itibaren yerel tembel yüklemeyi içeriyor. Ek olarak, WP Rocket, Lazy Load by WP Rocket ve a3 Lazy Load gibi çeşitli eklentiler, tembel yükleme süreci üzerinde daha gelişmiş kontrol ve özelleştirme sunarak, çok fazla teknik uzmanlık gerektirmeden herhangi bir WordPress sitesine uygulanmasını kolaylaştırır.

Tüm bu uygulamalar WordPress'te profesyonel görsel boyutlarını korumak için temeldir. Ancak üretken WordPress temamız ve oluşturucumuz Divi, duyarlı özellikleriyle onları daha da ileriye taşıyor.

Divi ile Mükemmel Görüntü Boyutları Nasıl Oluşturulur

Görsel tasarımınız ve boyutlandırma seçenekleriniz üzerinde daha fazla kontrol sahibi olmak istiyorsanız Divi gibi bir sayfa oluşturucu kullanabilirsiniz. Divi, gelişmiş duyarlı özelliklerle donatılmıştır. Bu araç, görsel yeniden boyutlandırma da dahil olmak üzere çeşitli işlevleri WordPress sitenize entegre eder. Burada, Divi'nin kalitelerini korurken görsellerinizin boyutlarını nasıl iyileştirebileceğini inceleyeceğiz.

1. Divi'yi indirin ve yükleyin

Divi, iki fiyatlandırma seçeneği sunan Elegant Temalar aracılığıyla satın alınabilir: 89 ABD dolarına yıllık lisans veya 249 ABD dolarına ömür boyu lisans. Satın aldıktan sonra aşağıdaki adımları izleyerek temayı WordPress sitenize kolayca indirip yükleyebilirsiniz:

1. WordPress kontrol panelinizde Görünüm > Temalar'a gidin.
2. Yeni Ekle'yi tıklayın ve ardından Tema Yükle'yi seçin.
3. İndirilen Divi .zip dosyasını seçin ve Şimdi Kur'a tıklayın.
4. Kurulum tamamlandıktan sonra Divi'yi aktif temanız yapmak için 'Etkinleştir'i tıklayın.

Ayrıntılı bir kılavuz için aşağıdaki videoya göz atın.

Kurulumu tamamladıktan sonra sitenizi oluşturmaya başlayabilirsiniz. İşleme önceden alışmak için Divi Builder'ı kullanmaya ilişkin eğitimimize bir göz atın.

Divi'yi Kullanmaya Başlayın

2. Web Sitenizi Oluşturun, Divi Builder'ı Açın ve Resminizi Seçin

Divi Temasını WordPress’e yükledikten sonra hızlı bir şekilde web sitenizi oluşturabilirsiniz. Divi, web sitenizi oluşturmak için size birden fazla seçenek sunar. Web sitenizi sıfırdan oluşturabilir, önceden hazırlanmış düzenlerimizden yararlanabilir veya web sitenizi oluşturmak için Divi AI'yı kullanabilirsiniz.

Ayrıca Divi Quick Sites'ı kullanarak bir veya iki dakika içinde profesyonel bir web sitesi oluşturabilirsiniz.

Web sitenizi oluşturup ilgili görsellerinizi ekledikten sonra Divi Builder'a erişebilir ve WordPress görsel boyutlarınızı yapılandırabilirsiniz. Öncelikle, kurulu Divi web sitenize gidin ve 'Visual Builder'ı Etkinleştir'i tıklayın.

Yeniden boyutlandırmak amacıyla eklenen herhangi bir resme tıklayın. Tekerlek simgesine tıklayarak Divi görüntü modülünü açın.

3. Divi Responsive Ayarlarıyla WordPress'e Eklenen Resimlerinizi Yeniden Boyutlandırın

Divi'nin duyarlı ayarları, WordPress'teki görsellerin farklı cihazlar (masaüstü, tablet ve mobil) için yeniden boyutlandırılmasını kolaylaştırır. Görüntü Modülü ayarlarında "Tasarım" sekmesine gidin. Duyarlı ayarlar da dahil olmak üzere özelleştirmenin çoğunun gerçekleştiği yer burasıdır. Tasarım sekmesinde “Boyutlandırma” bölümünü bulmak için aşağı kaydırın.

Burada, seçtiğiniz görselin aşağıdaki gibi birden fazla boyutunu ayarlayabilirsiniz:

1. Genişlik
2. Maksimum Genişlik
3. Modül Hizalaması
4. Minimum Yükseklik
5. Yükseklik
6. Maksimum Yükseklik

NOT: Sağlanan seçeneği etkinleştirerek de tam genişliği zorlayabilirsiniz. Ancak bu, genişliği ve maksimum genişliği değiştirilemez hale getirecektir.

Her özelliğin yanında akıllı telefona veya tablete benzeyen küçük bir simge (duyarlı ayarlar simgesi) göreceksiniz. Farklı Masaüstü, Tablet ve Mobil görünüm ayarlarını etkinleştirmek için bu simgeyi tıklayın.

Bu durumda tablet sürümünün maksimum genişliğini %85'e ayarlayacağız. Azaltılmış genişlik ve ortalanmış konumlandırma, ana sayfada yerden tasarruf sağlayacak ve görüntüyü daha küçük cihazlarda görsel olarak daha çekici hale getirecektir. Kaydedilen değişiklikleri uygulamak için yeşil onay düğmesine tıklayın.

SRCSet işlevselliği

Divi, tüm görseller için yerel SRCSET desteği sunarak temanın görsellerinizi otomatik olarak duyarlı hale getirmesine olanak tanır. Her cihaza uygun boyutlu görüntünün iletilmesini sağlar ve daha küçük aygıtlara daha küçük görüntüler sunarak yükleme hızlarını artırır. Hepsinden iyisi, sizin herhangi bir ek çaba göstermenize gerek kalmadan otomatik olarak gerçekleşir.

Divi'yi edinin

Görüntü Optimizasyonu için Diğer Araçlar

Divi'nin duyarlı ayarları, WordPress'teki resimleri yeniden boyutlandırmak için harika bir çözüm sunsa da, Divi'de şu anda bulunmayan ek optimizasyon araçlarına ihtiyacınız olabilir. Kullanabileceğiniz bazı harici görüntü optimizasyon araçları şunlardır:

1. EWWW Image Optimizer: Yükleme sırasında yeni görselleri otomatik olarak sıkıştıran ve mevcut medya için Toplu Optimize Edici sunan güçlü bir WordPress eklentisi. Görüntünün yeniden boyutlandırılmasına ve meta verilerin kaldırılmasına olanak tanır ve daha iyi sıkıştırma için yavaş yüklemeyi ve WebP formatına dönüştürmeyi destekler. Ücretsiz sürüm, dosya boyutu sınırı olmaksızın doğrudan sunucunuzda çalışır; premium sürüm ise gelişmiş optimizasyon ve daha yüksek sıkıştırma oranları için bulut hizmetlerinden yararlanır.
2. ShortPixel Image Optimizer: Bu eklenti, görüntüleri ve PDF dosyalarını optimize ederken görüntüleri otomatik olarak yeniden boyutlandırır. Kullanıcılara dengeli bir seçim sunarak esnek sıkıştırma seçenekleri (kayıplı, kayıpsız ve parlak) sunar. Eklenti orijinal görselleri yedekler, meta verileri kaldırır ve PNG'leri JPEG'lere dönüştürerek Retina görsellerini ve küçük resimleri optimize eder. Ancak API anahtarı için e-postanızı paylaşmanız gerekir.
3. Optimole: Görüntüleri bulut tabanlı bir sunucu aracılığıyla gerçek zamanlı olarak işleyen ücretsiz, hepsi bir arada görüntü optimizasyon eklentisi. Bir ziyaretçinin görüntü alanına göre en uygun görüntü boyutunu seçerek ve verimli görüntüleme için yavaş yükleme uygulayarak kendisini farklılaştırır. Premium plana yükseltme, sınırsız görüntü dönüştürme ve dosya boyutunu küçültürken orijinal netliği koruyan yüksek kaliteli sıkıştırma ve Retina ve WebP sürümlerinin otomatik olarak oluşturulması dahil gelişmiş özellikler sunar.
4. WP Smush: Bu eklenti WPMU DEV eklenti paketinin bir parçasıdır. Resimleri WordPress sitenize yükledikten sonra otomatik olarak optimize eder. WP Smush, aynı anda 50'ye kadar görüntüyü sıkıştırmanıza olanak tanıyan ve mevcut medyanızı geliştirmenizi kolaylaştıran bir toplu optimizasyon seçeneğine sahiptir. Eklenti ayrıca görseli yeniden boyutlandırma ve yavaş yükleme seçeneklerini de içerir ve bunu, yükleme sırasında görsellerden meta verileri kaldıracak şekilde yapılandırabilirsiniz. 5 MB'a kadar görüntüleri destekler, ancak daha büyük dosyaları optimize etmek için premium sürüme yükseltmeniz gerekir.

Yaklaşımınız ne olursa olsun, web sitenizin performansını artırabilirsiniz. Görsellerin optimizasyonu, yükleme sürelerinin iyileştirilmesine ve daha iyi bir kullanıcı deneyimine katkıda bulunur.

Çözüm

2024'te WordPress'te başarılı bir site oluşturmak, temel işlevlerin ötesine geçiyor; Müşterilerinize kusursuz ve ilgi çekici bir deneyim sunmak çok önemlidir. Resim boyutlarının optimize edilmesi, hızlı yükleme sürelerinin sağlanmasına ve markanızın kimliğini yansıtan görsel olarak çekici bir düzen sağlanmasına yardımcı olduğundan, bunu başarmak için çok önemlidir. Akıllı eklentileri ve özelleştirme seçeneklerini kullanarak sitenizin performansını artırabilir ve sitenizi ziyaretçileri büyüleyen davetkar bir vitrine dönüştürebilirsiniz.

Görsel oluşturucu kullanarak görsellerinizi boyutlandırmak için daha fazla özelleştirme seçeneği arıyorsanız Divi, görsellerinizin tüm cihazlarda mükemmel görünmesini sağlamak için bu ayarlamaları anında yapmayı kolaylaştırır.

Divi'yi edinin

WordPress web sitenizi güçlendirmek mi istiyorsunuz? Web sitenizin performansını ve görsel çekiciliğini artırmak için ideal görsel boyutlarını keşfedin. Daha iyi bir kullanıcı deneyimi için görsel boyutlarını etkili bir şekilde yönetmenize yardımcı olabilecek, özenle seçilmiş araç ve ipuçları listemizi keşfedin.