2025 Web Sitesi Görüntü Boyutu Rehberi

Günümüzde daha fazla kişi masaüstü bilgisayar yerine mobil cihazlar ile internette geziniyor. Farklı ekran boyutları kullanıldığından, web sitenizi oluştururken en iyi görüntü boyutlarını seçmeniz gerekir. Böylece tüm ziyaretçileriniz, cihazlarından bağımsız olarak iyi bir kullanıcı deneyimi yaşayabilir.

Görüntülerinizi optimize etmezseniz, web sitenizi ziyaret edenler çok küçük ve bulanık görüntüler görebilir. Ya da çok büyük görüntüler yükleme sürelerinin artmasına neden olurken ziyaretçiler kaydırma ve yakınlaştırma yapmaya zorlanabilirler.

İyi haber şu ki görüntülerinizi birden fazla cihazla uyumlu hale getirmek oldukça kolay. Doğru görüntü boyutlarını seçerek, dosya boyutlarını minimumda tutarak ve duyarlı web tasarımı kullanarak, üst düzey bir gezinti deneyimi sunabilirsiniz.

Aşağıdaki bilgileri takip ederek, görüntülerinizi hem mobil hem de masaüstü cihazlar için optimize edin.

Web siteleri için en iyi görüntü boyutları

Pikselli genişlik: 2500 piksel, çoğu durumda bir tarayıcıda tam ekran için mükemmeldir. Bu boyuttan daha küçük herhangi bir görüntü, tarayıcı genişliğini doldurması gerektiğinde kesilebilir veya bulanık görünebilir.

Görüntü boyutu: Görüntülerinizin en iyi genel (piksel) boyutu, kullanım durumuna bağlıdır; örneğin, arka plan görüntüleri, bir blog yazısı görüntüsünden daha büyük olmalıdır.

Dosya boyutu: 20 megabayttan büyük olan herhangi bir dosya, web sitenizin hızını önemli ölçüde etkileyebilir. Daha küçük görüntüler (2 megabayta kadar, ancak yaklaşık 500 kilobayt) çoğu durumda daha iyidir.

Görüntü niteliği: Görüntü nitelikleri (alt metin veya alt etiket) metin tabanlıdır ve web sitenizin performansını etkilemez. Ancak, ekran okuyucu yazılımları aracılığıyla görüntüleri yorumlamak için kullanılır ve web erişilebilirliği açısından önemli bir unsurdur. Nitelik metninde özlü olun, alt metinlerin 100 karakterin altında tutulması en iyi uygulamadır.

Mobil ve masaüstü cihazlar için en iyi görüntü boyutları

Aşağıdaki tablo, hem masaüstü hem de mobil web siteleri için önerilen görüntü boyutlarını sunmaktadır:

Bunlar önerilen boyutlardır ve duyarlı web tasarımı kullanıp kullanmadığınıza bağlı olarak ayarlanması gerekebilir.

Görüntülerinizin render boyutunun, yükleme boyutundan daha küçük olması genellikle iyi bir fikirdir.

Görüntü boyutu web siteleri için neden önemlidir?

Web siteleri için görüntü boyutu, üç ana nedenle önemlidir:

• Daha iyi bir kullanıcı deneyimi yaratır.
• Web sitesi sayfa hızını arttırır.
• Web sitesi sıralamasına yardımcı olur.

Daha iyi bir kullanıcı deneyimi yaratır

Web sitenizde her kullanım durumu için doğru boyutlandırılmış görüntüler bulundurmak, kullanıcı deneyimini geliştirir. Ziyaretçiler, uygun bir detay seviyesine erişebilir ve tüm görüntüyü görmek için kaydırma yapmaları gerekmez.

Düşük kaliteli, pikselli veya çok küçük görüntüler, içeriğin algılanan kalitesini etkileyebilir. Bir e-ticaret web sitesinde bu durum, müşterilerin işinizin veya ürünlerin kalitesini sorgulamasına yol açabilir.

Öte yandan, yüksek kaliteli, doğru boyutlandırılmış görüntüler, ürünlerin algılanan değerini arttırır ve potansiyel müşterilere daha fazla görsel bilgi sunar.

Örneğin, sürdürülebilir ayakkabı markası Allbirds'in aşağıdaki görüntülerinin, ürünlerin çeşitli özelliklerini net bir şekilde vurgulayarak kullanıcı deneyimini nasıl arttırdığını görebilirsiniz.

Web sitesi sayfa hızını arttırır

Büyük görüntüleri web sitenize yüklediğinizde, sunucunun sayfayı yüklemesi daha uzun sürer. Hem boyut hem de dosya boyutu açısından daha küçük görüntüler cihazlar arasında daha hızlı yüklenme eğilimindedir.

Görüntü yükleme hızı genellikle “içerik boyama” (“contentful paint”) olarak adlandırılır. Web sayfanızın içerik boyama süresini ve diğer sayfa hızı metriklerini Google’ın PageSpeed Insights aracını kullanarak kontrol edebilirsiniz.

Müşterilerin yarısı, bir mağazanın web sayfası üç saniyeden fazla yüklenirse alışveriş sepetini terk edeceğini söylüyor. Bu tür bilgiler, yüksek bir hemen çıkma oranını önlemek için sayfa hızınızı optimize etmenin ne kadar önemli olduğunu gösteriyor.

Web sitesi sıralamasına yardımcı olur

Web sitesi sıralaması, web sitenizin arama motoru sonuç sayfalarındaki (SERP'ler) konumunu ifade eder. Arama için optimize edilmiş web siteleri, ilgili kullanıcı arama sorgularında (bilinen anahtar kelimeler) yüksek sıralarda yer alır.

Google, arama sonuçlarının en üstünde hangi web sayfalarının yer alacağını belirlemek için bir dizi metrik kullanır. Görüntülerin kalitesi (veya daha doğru bir ifadeyle, oluşturdukları geliştirilmiş kullanıcı deneyimi), Google algoritması için muhtemel bir faktördür.

Web sitesi görüntü boyutu kılavuzları

Bir web sitesinde göreceğiniz beş ana görüntü türü vardır:

• Arka plan görüntü boyutları
• Hero görüntü boyutları
• Afiş görüntü boyutları
• Blog görüntü boyutları
• Logo boyutları

Her web görüntü türü için farklı boyut gereksinimleri geçerlidir. Şimdi, yaygın web sitesi görüntü türleri için en iyi görüntü boyutlarına bakalım.

Arka plan görüntü boyutları

Arka plan görüntüleri genellikle bir web sitesindeki en büyük görüntülerdir. Görüntü, bir ana sayfa veya diğer iniş sayfası için arka plan görevi görür.

Örneğin, bisiklet perakendecisi Cowboy, ürünü ön plana çıkarmak için ana sayfada arka plan olarak kullanıyor. Hangi cihazda görüntülenirse görüntülensin ekranı dolduruyor.

Önerilen görüntü genişliği: 2560 piksel

Önerilen görüntü yüksekliği: 1400 piksel

En boy oranı: 16:9

Önerilen dosya boyutu: 20 MB

Hero görüntü boyutları

Hero görüntüleri, arka plan görüntülerine benzer, ancak genellikle yükseklikleri daha az, yaklaşık yarı boyutundadır. Hero görüntüsü, ekranda daha fazla metin sergilemeniz gerektiğinde harika bir seçenektir, böylece kullanıcıların kaydırma yapmasına gerek kalmaz.

Yukarıdaki örnekte, BLK & Bold, ekranı doldurmak için dar bir en boy oranı olan bir hero görüntüsü kullanarak altındaki içerik için yer bırakıyor.

Önerilen görüntü genişliği: 1280 piksel ile 2500 piksel arasında

Önerilen görüntü yüksekliği: 720 piksel ile 900 piksel arasında

En boy oranı: 16:9

Önerilen dosya boyutu: 10 MB

Afiş görüntü boyutları

Afiş görüntüleri, bulundukları yere ve ziyaretçilerinize ne göstermek istediğinize bağlı olarak farklı boyut ve şekillerde olabilir. En yaygın web sitesi afiş türü, afiş reklamıdır. Afiş reklamlarını tanıtmak için en popüler hizmetlerden biri de Google Ads'dir.

Eğer reklam olmayan bir afiş görüntüsü düşünüyorsanız, dikdörtgen seçenekler (örneğin, 300 x 200 piksel veya 970 x 90 piksel) genellikle daha iyidir.

Önerilen görüntü genişliği: Reklam platformuna danışın

Önerilen görüntü yüksekliği: Reklam platformuna danışın

En boy oranı: Çeşitli

Önerilen dosya boyutu: 150 KB (Reklam platformuna danışın)

Blog görüntü boyutları

Blog görüntüleri tür ve boyut açısından değişiklik gösterebilir. Yukarıdaki gönderi, uyku uzmanları Kulala'dan gelmektedir ve öne çıkan görüntünün yükleme boyutu 1200 x 620 piksel olmasına rağmen, render boyutu 894 x 462 pikseldir.

Web sayfalarınız için bir render boyutu ayarlamak, tasarımı geliştirmeye yardımcı olur ve dosyaları küçük tutar (Kulala gönderisindeki görüntü sadece 95,1 KB'dir).

Blog gönderilerinizin ana başlık görüntüleri (sayfanın üst kısmındaki) blogunuzda eşit boyutlarda olmalıdır.

Önerilen görüntü genişliği: 1200 piksel

Önerilen görüntü yüksekliği: 800 piksel

En boy oranı: 3:2

Önerilen dosya boyutu: 3 MB

Logo boyutları

Logonuz muhtemelen web sitenizdeki en küçük görüntülerden biri olacaktır (tab barındaki favicon'u saymazsak). Logo tasarımına bağlı olarak, ya dikdörtgen ya da kare bir en boy oranı tercih etmelisiniz.

Çoğu logo, kare 1:1 oranına uygundur, bu da yukarıdaki Kulala örneğinin sol alt kısmında görebileceğiniz bir orandır.

Dikdörtgen oranlar, daha uzun marka adları için veya logonun grafik yerine kelimelerden oluştuğu durumlarda iyi görünür. Shopify’ın kendi web sitesi logosu, daha uzun bir 4:1 oranı kullanır.

Önerilen görüntü genişliği: 100 piksel

Önerilen görüntü yüksekliği: 100 piksel

En boy oranı: 1:1, 2:3, 4:1

Önerilen dosya boyutu: 1 MB

Mobil görüntü boyutu önerileri

Doğru görüntü boyutlarını seçin

Küçük mobil ekranlarda, birçok kullanıcı bir görüntüyü yakınlaştırabilme özelliğini takdir eder. Bu nedenle, görüntü boyutu ile dosya boyutu arasında bir denge kurmaya çalışın.

Yüksek çözünürlüklü görüntüler, web sitenize profesyonel ve kapsamlı bir görünüm kazandırır, harika yakınlaştırma yetenekleri sunar. Benzer görüntülerin en boy oranlarını aynı tutarak sayfa türleri arasında tutarlı bir tasarım sağlarsınız.

Örneğin, bir e-ticaret mağazasındaki tüm ürün görüntülerini kare yapabilirsiniz. Kare görüntüler, daha küçük ekranlarda yeniden konumlandırmayı kolaylaştırır. Ayrıca, kare ve dikey görüntüler mobil ekranlara iyi uyum sağlar ve ziyaretçilerin kaydırma yapmadan daha fazla görüntü görmesine olanak tanır.

Dosya boyutunu göz önünde bulundurun

Büyük dosya boyutları olan görüntüler, özellikle ziyaretçiler bir akıllı telefon kullanıyorsa, sitenizin hızını etkileyebilir. Birçok web sitesi oluşturma platformunda yüklemelerde maksimum dosya boyutu kısıtlamaları vardır. Örneğin, Shopify maksimum dosya boyutu olarak 20 MB kullanır.

Görüntü boyutunu azaltmak için sıkıştırmanız gerekiyorsa, çevrimiçi görüntü boyutlandırma araçları yardımcı olabilir. Bu araçlarla, büyük görüntü dosyalarını yeni boyutlara veya dosya türlerine dönüştürebilirsiniz.

Genellikle, başlık arka plan görüntülerinin 10 MB'nin altında olması, ürün fotoğraflarının ise çok daha küçük olması -yaklaşık 300 KB- gerekir.

Mobil ekran boyutları için fotoğrafları yeniden boyutlandırın

Shopify, görüntülerinizi otomatik olarak daha küçük ekranlara uyacak şekilde yeniden boyutlandırır. Ancak diğer platformlarda, görüntülerin mobil uyumlu hale gelmesi için manuel düzenleme gerekebilir. Unutmayın ki masaüstü ve mobil ekranların yönleri zıttır.

Ayrıca, büyük dosyaların site yükleme süresini yavaşlattığını unutmayın. Kayıpsız sıkıştırma, en yüksek kaliteli görüntüyü sağlasa da genellikle web sitenizin yüklenmesi için sonsuza kadar sürebilecek büyük dosyalar oluşturur. En iyi çözünürlüğe sahip en küçük görüntü dosyalarını kullanmayı düşünün.

Shopify’ın duyarlı tasarımları ve algoritmaları, görüntüleri cihazlar arasında yeniden boyutlandırma ve görüntüleme konusunda iyi olsa da dosya boyutlandırması açısından yardımcı olmak, daha akıcı bir alışveriş deneyimi sağlayabilir.

Hangi görüntü dosya türü en iyisidir?

Doğru görüntü dosya türü, yüksek kaliteli görüntüler sağlarken dosya boyutunu yönetmeyi kolaylaştırır ve web sitesi performansını arttırır. İşte en yaygın görüntü dosya formatları ve en iyi kullanım durumları:

JPEG

JPEG (veya JPG), dosya boyutu ile görüntü kalitesi arasında bir denge sunduğu için en yaygın kullanılan dijital görüntü dosya formatlarından biridir. Fotoğrafları ve çok renkli karmaşık görüntüleri sergilemek için popüler bir tercihtir.

Ancak, JPEG kayıplı sıkıştırma kullanır; bu da görüntü sıkıştırıldığında görüntü kalitesinin bir miktar kaybolduğu anlamına gelir.

PNG

PNG, kayıpsız sıkıştırma formatıdır; yani görüntü kalitesini koruyarak dosya boyutunu azaltır. Şeffaflığı destekler, bu da şeffaf arka plana ihtiyaç duyan görüntüler için iyi bir seçimdir.

PNG'ler dosya boyutu açısından genellikle JPEG'lerden daha büyük olsalar da, netliklerini koruma yetenekleri nedeniyle ayrıntılı grafikler ve logolar için uygundur.

SVG

SVG (ölçeklenebilir vektör grafiği), bir vektör görüntü formatıdır; yani bir görüntüyü oluşturmak için matematiksel denklemler kullanır. Böylece SVG görüntülerinin kalite kaybı olmadan herhangi bir boyuta ölçeklenebilmesini sağlar.

SVG, birden fazla yerde kullanılacak logolar, simgeler ve diğer grafikler için ideal bir formattır. Ayrıca SVG'lerin dosya boyutu genellikle diğer formatlardan daha küçüktür, bu da yükleme sürelerini iyileştirmeye yardımcı olur.

HEIC

HEIC, yüksek verimli görüntü formatı, Apple cihazları tarafından kullanılan bir dosya formatıdır. Yüksek kaliteli görüntüler oluşturmak için gelişmiş sıkıştırma teknolojisi kullanır ve eşdeğer JPEG'lerden daha küçük dosya boyutları sağlar.

Ancak, HEIC, Apple dışındaki cihazlarda evrensel olarak desteklenmez.

WebP

WebP, Google tarafından geliştirilen bir görüntü formatıdır. Web'deki görüntüler için kayıpsız sıkıştırma sağlar ve genellikle JPEG veya PNG'ye kıyasla dosya boyutunu %30'dan fazla azaltır.

Böylece, web sitesi yükleme sürelerini önemli ölçüde iyileştirebilir, ancak WebP'nin henüz tüm tarayıcılar tarafından evrensel olarak desteklenmediğini belirtmek gerekir.

GIF

GIF, basit animasyonları destekleme yeteneği ile bilinen bir bitmap görüntü formatıdır. Kayıpsız sıkıştırma kullanır ve görüntüleri maksimum 256 renge indirger, bu da daha küçük dosya boyutları sağlar.

GIF, statik görüntüler için PNG ile büyük ölçüde değiştirilmiş olsa da kısa, döngüsel animasyonlar için popüler bir seçim olmaya devam eder ve tarayıcılar tarafından evrensel olarak tanınır.

TIFF

TIFF, etiketli görüntü dosya formatı, yüksek kaliteli, kayıpsız bir format olup, görüntü düzenleme uygulamaları tarafından geniş ölçüde desteklenir. Yüksek çözünürlüğü ve renk derinliği nedeniyle profesyonel baskı için görüntüleri depolamak için idealdir.

TIFF ile birden fazla görüntü ve sayfa tek bir dosyada kolayca kaydedilebilir. Ancak, dosya boyutları genellikle büyüktür.

Bir web sitesindeki görüntü boyutlarını nasıl öğrenebilirim?

Herhangi bir web sayfasındaki bir görüntünün boyutunu (görüntüyü indirmeden) kontrol etmenin en hızlı yolu, tarayıcınızın İncele aracını kullanmaktır.

Bu yöntem, Mac ve Windows'ta, Safari, Chrome veya Firefox tarayıcılarıyla çalışır.

Web sayfasına gidin ve bilgi almak istediğiniz görüntünün üzerine gelin. Fare ile sağ tıklayın ve seçenekler menüsünü açın, ardından İncele seçeneğini arayın:

İncele seçeneğine tıkladığınızda, sayfanın HTML kodu açılacaktır (görünümü korkutucu olabilir, ama endişelenmeyin).

İnceleme panelinde, tıkladığınız görüntü hakkında bilgi vurgulanmalıdır. İlgili kodun üzerine geldiğinizde, görüntü de vurgulanacaktır:

Bu durumda, tarayıcı size görüntünün kaç piksel kullandığını bildirir. Web sayfasını yeniden boyutlandırırsanız, bu rakam da ona göre değişecektir.

Görüntünün orijinal yükleme özelliklerini arıyorsanız, görüntü depolama bağlantısının üzerine gelin:

İnceleme panelinden çıkmak için, sağ üst köşedeki X'e tıklamanız yeterlidir.

Görüntü optimizasyon araçları

Çevrimiçi görüntü optimizasyon araçları, web sitenizdeki görüntüleri yeniden boyutlandırmanın basit, hızlı (ve genellikle ücretsiz) bir yoludur. İşte üç popüler görüntü optimizasyon aracı:

• Görüntü Boyutlandırıcı
• Squirai Görüntü Optimizasyon Aracı
• LoyaltyHarbour Görüntü Optimizasyon Aracı

Görüntü Boyutlandırıcı

Shopify’ın ücretsiz çevrimiçi görüntü boyutlandırma aracı, görüntülerinizi pazarlama kanalları ve sosyal medya için ayarlamanın pratik bir yoludur.

Instagram gönderileri ve hikâyeleri, YouTube küçük resimleri ve diğer sosyal içerik türleri için çeşitli resmi boyutları seçebilirsiniz.

Squirai Görüntü Optimizasyon Aracı

Squirai’nin görüntü optimizasyon aracı, görüntülerinizin SEO uyumlu olmasını sağlamak için hız testine tabi tutulmuştur. Web sitenizdeki tüm görüntüleri -daha sonra eklediğiniz yeni görüntüler dahil- otomatik olarak optimize eder.

Ayrıca, ürün fotoğraflarınızı korumak için bir filigran ekleyebilir ve bunu yapmak için herhangi bir kod bilgisine ihtiyaç duymadan özelleştirebilirsiniz.

LoyaltyHarbour Görüntü Optimizasyon Aracı 

LoyaltyHarbour Görüntü Optimizasyon Aracı, Squirai aracına benzer şekilde, web sitenizdeki görüntüleri otomatik olarak sıkıştırır.

Ayrıca, kontrol paneli, görüntü alt metnini otomatik olarak ayarlamanıza ve sayfa hızını arttırmak için en iyi görüntü dosya türüne dönüştürmenize olanak tanır.

Alternatif olarak, eğer yeteneğiniz varsa, dosya boyutunu azaltmak için Photoshop'u da kullanabilirsiniz. Ancak Photoshop, yukarıdaki araçlardan daha karmaşık olabilir.

Sorun giderme: görüntü formatlama sorunları

Web sitenizi yönetirken, bir noktada görüntü formatlama sorunlarıyla karşılaşmanız muhtemeldir. Görüntülerle ilgili sorunlar, yanlış boyutlandırmadan bozuk bağlantılara kadar değişiklik gösterebilir.

Web sitesi görüntüleriyle ilgili bazı yaygın sorunlara çözümlere bakalım.

Yanlış görüntü boyutu

Sorun: Görüntüler çok büyük veya çok küçük görünüyor ve bir web sayfasının düzenini bozarak kullanıcı deneyimini olumsuz etkiliyor.

Çözüm: Eğer bir web sitesi teması veya şablonu kullanıyorsanız, tasarımınız için doğru görüntü boyutları hakkında kaynaklar arayın. Web sitesi oluşturucunuzda, her görüntü için render boyutlarını seçtiğinizden emin olun, böylece görüntüler tam, orjinal boyutlarında görüntülenmez.

Yavaş yükleme süreleri

Sorun: Görüntüler, bir web sayfasının geri kalanından daha yavaş yükleniyor veya hiç yüklenmiyor.

Çözüm: Yanlış dosya formatı, gereksiz yere büyük dosya boyutlarına yol açarak yükleme sürelerini etkileyebilir. Görüntülerin dosya formatını değiştirmek için bir görüntü düzenleme veya dönüştürme aracı kullanın. Grafikler veya logolarda, kalite kaybı olmadan ölçeklenebilirlik sağlamak için SVG kullanmayı düşünün. Diğer görüntüler için, büyük dosyaları sıkıştırmak için WebP'ye dönüştürmeyi düşünün.

Düşük görüntü kalitesi

Sorun: Görüntüler pikselli veya bulanık görünüyor.

Çözüm: Görüntüleriniz pikselli veya bulanık görünüyorsa, daha yüksek çözünürlüklü bir versiyon bulmayı deneyin. Unutmayın, görüntü çözünürlüğü görüntü boyutundan farklıdır. Çözünürlük, bir görüntünün ne kadar detay içerdiğini ifade eder ve genellikle inç başına piksel (PPI) cinsinden ölçülür. Daha yüksek bir çözünürlük, boyutundan bağımsız olarak daha keskin bir görüntü anlamına gelir.

Eğer görüntü kalitesi sıkıştırma nedeniyle düşüyorsa, sıkıştırma ayarlarını yapın veya PNG gibi kayıpsız bir sıkıştırma formatına geçin.

Görüntüler hiç görüntülenmiyor

Sorun: Bozuk görüntü bağlantıları nedeniyle görüntü görünmüyor.

Çözüm: Görüntülerinizin kaynak URL'sini doğrulayın. Bu URL, görüntü dosyanızın konumuna doğrudan gitmelidir. URL'deki görüntü dosya adını, görüntü dosyanızın gerçek adıyla karşılaştırın. Tam olarak eşleşmeleri gerekir, dosya uzantısı (.jpg, .png, .svg) dahil.

Web sitesi görüntülerini başarı için optimize edin

Web sitenize görüntü eklemek sadece görsel çekicilik sağlamakla kalmaz, kullanıcı deneyimini artırmak ve arama motoru sıralamalarını yükseltmek için önemli bir faktördür.

Görüntü boyutu, bu iki unsuru da etkiler. Çok büyük olursa, web sayfalarınız yavaş yüklenebilir. Çok küçük olursa, görüntüler pikselli veya bulanık görünebilir.

Web sitesi tasarımının görüntü boyutu gereksinimlerini anlamaya ve görüntü çözünürlüğü ile dosya boyutunu dengelemek için doğru dosya formatını seçmeye dikkat edin.