Duyarlı görseller: telefon ve bilgisayar için doğru boyutu seçin

Sitenizin düzenleyicisinden başlayın

WordPress veya bir site oluşturma aracı kullanıyorsanız önce mevcut görsel bloğunun nasıl çalıştığını kontrol edin. Siteniz tek bir yüklemeden küçük sürümleri zaten oluşturuyor olabilir.

1. İhtiyacınız olan en büyük görünüm için yeterli ayrıntıya sahip, net bir orijinal yükleyin.
2. Bu ayar varsa blokta uygun görsel çözünürlüğünü seçin. Bloğu daraltmak indirilen dosyayı mutlaka değiştirmez.
3. Sayfayı telefonda ve bilgisayarda önizleyin. Kırpmayı, küçük yazıları ve görselin netliğini kontrol edin.

Sitenizi yöneten kişi, sayfanın uygun boyutları sunduğunu doğrulayabilir. HTML’yi kendiniz düzenliyorsanız aşağıdaki örnekler dışa aktardığınız dosyaları nasıl bağlayacağınızı gösterir.

Duyarlı görseller nedir?

Duyarlı sayfa düzeni, sayfanın ekrana nasıl uyduğunu değiştirir. Duyarlı görsel sunumu ise tarayıcının hangi dosyayı istediğini değiştirir. Bunlar ilişkili fakat farklı işlerdir: CSS ile görseli küçük göstermek, indirilen veriyi mutlaka azaltmaz.

3000 piksel genişliğindeki fotoğraf küçük kartta gösterilse de alternatif sunmazsanız ziyaretçi dosyanın tamamını indirebilir. Duyarlı görseller, mevcut alana uygun sürümler sunar. Önemli görselleri net tutarken verimliliği artırabilir.

İki karar vardır. Çözünürlük seçimi aynı kompozisyonu koruyup farklı piksel boyutları sunar. Kompozisyona göre seçim ise geniş görsel dar düzende işe yaramadığında kırpmayı veya kompozisyonu değiştirir. MDN duyarlı görseller kılavuzu bu ayrımı açıklar.

Ekran genişliği, gösterim alanı ve görsel pikselleri

Önce önemli olan, görselin sayfada gerçekten kapladığı alanın CSS pikseliyle ölçülen genişliğidir. Telefonun görünüm alanı 390 piksel olabilir; iki yanda 16 piksel boşluk varsa tam genişlikteki görsel 358 CSS pikseli kaplar. Bilgisayarda üç sütunlu bir kart yalnızca 320 CSS pikseli genişliğinde olabilir.

CSS pikseli, sayfa düzenindeki görünür boyutu ölçer. Yoğun pikselli ekranlarda bir CSS pikseli birden çok fiziksel ekran pikseli kullanabilir. Bu yüzden net bir görsel, görünen genişliğinden daha fazla görsel pikseline ihtiyaç duyabilir.

Piksel yoğunluğu ikinci etkendir. Başlangıç tahmini olarak alan genişliğini cihaz piksel oranıyla çarpın. 2× ekranda 358 CSS piksellik alan yaklaşık 716 görsel pikseli önerir. Bu, adayları oluşturmak için başlangıç noktasıdır; her tarayıcının aynı dosyayı isteyeceğinin garantisi değildir.

Bu yüzden bilgisayar ekranı otomatik olarak en büyük dosyayı sunma gerekçesi değildir. Tersine, her telefona çok küçük görsel vermek yüksek yoğunluklu ekranlarda bulanıklık yaratabilir. Gerçek alanı ve görünen sonucu inceleyin.

Kullanışlı görsel boyutları nasıl oluşturulur?

1. En büyük hedef gösterim genişliğini bulun. Tüm ekranı değil sayfanın içerik sütununu veya kartını kontrol edin.
2. Temsilî bir genişlik grubu seçin. En fazla 800 CSS pikseli gösterilen bir makale görseli için 400, 800, 1200 ve 1600 piksel ilk denemeye uygundur. Bunlar örnektir, her site için zorunlu bir dizi değildir.
3. Her adayı aynı özgün dosyadan üretin. Pixilo boyutlandırma aracını kullanın ve çözünürlük seçimi için en boy oranını aynı tutun. Özgün dosyayı ayrıca saklayın.
4. Biçim ve kaliteyi karşılaştırın. Yayınlama sistemi destekliyorsa WebP veya JPG → AVIF / PNG → AVIF / WebP → AVIF deneyin. Küçülmenin okunamaz metinden veya kaybolan ayrıntılardan kaynaklanmadığını doğrulayın.
5. Dosyaları yükleyip sayfaya bağlayın. Pixilo görsel dosyaları oluşturur; sitenin HTML, CMS veya CDN ayarlarını yapmaz.
6. Yayınlanan sayfayı kontrol edin. Farklı ekran genişliklerinde istenen dosyayı, boyutlarını ve görünümünü doğrulayın.

Küçük bir özgün görseli sırf hedef sayıya ulaşmak için büyütmeyin. Büyütme gerçek ayrıntıyı geri getirmez. Kaynak büyük gösterim için yetersizse daha küçük sunum kullanın veya daha iyi kaynak bulun. Oranları korumak için görseli bozmadan boyutlandırma kılavuzuna bakın.

WordPress veya başka CMS’de neler kontrol edilmeli?

Yayınlama sistemi zaten farklı boyutlar ve duyarlı kod üretiyor olabilir. Paralel bir manuel yapı kurmadan önce son sayfayı inceleyin. Üretilen boyutların temanın gerçek alanlarına uyduğunu ve biçimin bütün görsel işleme sürecinde desteklendiğini kontrol edin.

Eklenti veya CDN dosyaları istek üzerine dönüştürebilir. Bu durumda kaynak yüklemenin adına değil tarayıcının aldığı dosyaya bakın. Kaynağı değiştirmek eski önbellek kopyalarını hemen kaldırmayabilir. Sonucu değerlendirmeden önce yeni görselin sunulduğunu doğrulayın.

WordPress adımları için WordPress görsellerini optimize etme kılavuzunu okuyun. Amaç, her bileşenin görevi açık olan öngörülebilir bir sunum düzenidir.

İsteğe bağlı: HTML’de srcset ve sizes kullanın

Aşağıdaki örnek, toplam 32 piksel kenar boşluğu dışında ekranı dolduran ve en fazla 800 CSS pikseli genişleyen bir makale görselini tanımlar. Dosya adları örnektir; kendi çıktılarınızı yükleyip gerçek yollarını ve boyutlarını kullanın.

<img
  src="/images/coast-800.webp"
  srcset="/images/coast-400.webp 400w,
          /images/coast-800.webp 800w,
          /images/coast-1200.webp 1200w,
          /images/coast-1600.webp 1600w"
  sizes="(max-width: 832px) calc(100vw - 32px), 800px"
  width="1600" height="1067"
  alt="Sakin mavi denizin yanındaki kayalık kıyı">

w tanımlayıcıları, her dosyanın gerçek piksel genişliğiyle eşleşmelidir. sizes, beklenen gösterim genişliğini anlatarak tarayıcının uygun adayı seçmesine yardımcı olur. Görselin sayfadaki genişliğini ayarlamaz; CSS’iniz tanımlanan düzene uymalıdır.

Bu örnekte en fazla 800 piksel genişleyen kapsayıcı ve display: block; width: 100%; height: auto; stilli görsel beklenen ölçeklemeyi sağlar. Örneğin sizes değerini başka düzene sahip kartlara aynen kopyalamayın. Küçük bilgisayar kartını 100vw diye tanımlamak gereksiz büyük dosya indirilmesine yol açabilir.

Tarayıcı seçimi yoğunluğu ve başka koşulları dikkate alabilir; tek bir dosya adı değil uygun bir aday bekleyin. Genişlik tanımlayıcılarıyla 2x gibi yoğunluk tanımlayıcılarını aynı listede karıştırmayın. Kurallar için MDN srcset başvurusuna bakın.

Telefon için farklı kırpma ne zaman gerekir?

Geniş afiş telefonda çok kısa görünebilir; görsel net olsa bile konu küçücük kalır. Daha çok piksel bu kompozisyonu düzeltmez. Konuyu görünür tutan daha sıkı kırpma oluşturup picture ve medya koşuluyla seçin.

Alternatifi bilinçli hazırlamak için Görseli kırp aracını kullanın. Fotoğrafın anlaşılması için yeterli bağlamı koruyun. Üzerine metin gelecekse konumunu kontrol edin: tek başına güzel duran kırpma, konuyu düğmenin veya başlığın altında bırakabilir.

Farklı kompozisyonlar ayrı kontrol gerektirdiğinden bakım yükü artar. Her görsele ayrı telefon kırpması yapmak yerine dar düzen gerçekten gerektiriyorsa kullanın. En boy oranları farklıysa her ekran eşiğinde doğru alanı ayıracak düzeni kurun. Picture öğesi başvurusu kaynak seçimini açıklar.

Boyutlar, gecikmeli yükleme ve ana görsel

Dosya gelmeden tarayıcıya oranı bildirmek için doğru width ve height değerleri verin. Orantılı CSS boyutlandırmasıyla bunlar alan ayırmaya yardımcı olur. CSS iki boyutu sabitliyorsa veya farklı kırpıyorsa ayrılan alanın son görünümle eşleştiğini kontrol edin.

İlk görünümün çok altındaki görseller loading="lazy" için uygundur. Sayfa açılır açılmaz görülen önemli görsel genellikle gecikmeli yüklenmemelidir. Ana görseli ertelemek küçük dosyada bile deneyimi bozabilir. Web.dev’in tarayıcıda görsel yükleme kılavuzuna bakın.

Ölçümler belirli bir görselin Largest Contentful Paint öğesi olduğunu gösteriyorsa o görsele fetchpriority="high" vermeyi değerlendirin. Her görsele yüksek öncelik vermeyin. Duyarlı boyutlandırma yükleme stratejisinin bir parçasıdır; yavaş sunucuyu veya geç bulunan ana görseli tek başına düzeltmez.

Duyarlı görsellerin çalıştığı nasıl test edilir?

1. Yayınlanan sayfayı dar telefon, tablet ve bilgisayar genişliklerinde açın.
2. Görselin gösterim genişliğini ve tarayıcının seçtiği URL’yi inceleyin. currentSrc özelliği seçilen kaynağı gösterir.
3. Aktarılan dosya boyutunu ağ isteğinde kontrol edin. Yeni test için gerektiğinde önbelleği devre dışı bırakın.
4. Görseli normal boyutta, metni, kenarları ve hedef kırpmayı dikkate alarak karşılaştırın.
5. Her boyutta yeni yükleme yapın. Yüklenmiş sayfayı boyutlandırmak, yeni ziyaretin görsel seçimini güvenilir biçimde taklit etmez.
6. Değişiklikten önce ve sonra yüklemeyi benzer koşullarda ölçün.

Telefon hâlâ dev dosya istiyorsa son sayfada srcset bulunduğunu, tanımlayıcıların gerçek genişliklerle eşleştiğini ve sizes değerinin gerçek alanı yansıttığını kontrol edin. Görsel bulanıksa kaliteyi artırmadan önce kaynak boyutlarına bakın. Görsel esniyorsa daha büyük dosya eklemek yerine en boy oranını düzeltin.

Duyarlı görseller ve SEO

Duyarlı sunum, ziyaretçiye gereksiz görsel verisi indirtmemenizi sağlar; sıralama garantisi vermez. Görseli sayfayla ilgili tutun, yararlı alternatif metin yazın ve picture içinde geçerli src içeren img öğesini koruyun. Google’ın görsel SEO belgeleri görsellerin bulunmasını ve duyarlı kodu açıklar.

Görsel yükleme, yerleşim kaymaları ve sayfa deneyimi ilişkisi için görseller ve Core Web Vitals kılavuzuna bakın. Küçük çıktıyı tüm performans ölçütlerinin iyileştiğinin kanıtı saymak yerine gerçek sayfayı ölçün.

Sık sorulan sorular

Width: 100% bir görseli duyarlı yapmak için yeterli mi?

Görseli kapsayıcıya görsel olarak uydurabilir. Daha küçük indirilebilir dosyalar oluşturmaz. Bunun için uygun kaynak dosyaları ve duyarlı kod gerekir.

Her telefon için ayrı görsel gerekiyor mu?

Hayır. Düzeninize uygun, yönetilebilir bir boyut grubu sunun. Tarayıcı seçim yapar; her cihaz modelini tanımanız gerekmez.

Her görsel gösterim genişliğinin iki katı mı olmalı?

Hayır. 2× sürüm bazı ekranlar için yararlı adaydır, evrensel koşul değildir. Netlik ile dosya boyutunu dengeleyin ve küçük sürümleri de sunun.

Pixilo siteme srcset ekleyebilir mi?

Pixilo boyutlandırılmış dosyalar oluşturmanıza yardımcı olur. Dosyaları yayınlayıp duyarlı kodu yapılandırmak sitenin, şablonun, CMS’nin veya görsel hizmetinin görevidir.

Yapay zekâyla özetleChatGPT (yeni sekmede açılır)Grok (yeni sekmede açılır)Google (yeni sekmede açılır)Perplexity (yeni sekmede açılır)Claude (yeni sekmede açılır)