Web Sitesi Görsel Ölçüleri: Slider, Banner ve Kapak Kaç Piksel Olmalı?

Web sitesi görsel ölçülerini nasıl belirlersiniz, tek bir doğru piksel var mı?

Web sitesi görsel ölçüleri, bir görselin sayfada yer alacağı kutuya göre hesapladığınız genişlik ve yüksekliktir; tek bir sabit sayı yoktur. Kutunun genişliğini ve en-boy oranını bulun, yüksekliği hesaplayın, keskin görünmesi için dosyayı yaklaşık iki kat büyük hazırlayın. İki kat çarpanı yaygın uygulamadır, kural değildir.

Örneğin sayfada 600 piksel genişliğinde bir alana girecek görseli, yüksek yoğunluklu ekranlar için 1200 piksel genişliğinde hazırlarsınız. Bu hesabı bir kez yaparsınız, sonra her görsel alanında tekrarlarsınız. Böylece tasarımcıya "kaç piksel olsun?" diye sormak yerine net bir ölçü verirsiniz.

Hesap beş adımdan oluşur:

1. İlk olarak görselin sayfada kaç piksel genişliğinde bir kutuya gireceğini bulun.
2. Ardından kutunun en-boy oranını seçin ve yüksekliği hesaplayın.
3. Daha sonra genişliği ve yüksekliği yoğunluk çarpanıyla, çoğunlukla iki ile çarpın.
4. Gerekirse aynı görselden birkaç küçük kopya üretin, böylece tarayıcı uygun olanı seçer.
5. Son olarak yüklemeden önce kadrajı kontrol edin, özellikle telefon ekranında.

Aşağıda her adımı ve her görsel türü için örnek hesabı gösteriyoruz. Ayrıca favicon (tarayıcı sekmesindeki küçük site simgesi), paylaşım görseli ve Apple simgesi için yalnızca resmi belgelerdeki değerleri kullanıyoruz.

CSS pikseli, cihaz pikseli ve piksel yoğunluğu ne demektir?

Tarayıcı sayfayı CSS pikseliyle yerleştirir. CSS pikseli, tasarımın ölçü birimidir; yani ekrandaki fiziksel noktayla birebir aynı olmak zorunda değildir. Yüksek yoğunluklu bir ekran, bir CSS pikselini birden fazla fiziksel noktayla (cihaz pikseliyle) çizer. Bu orana piksel yoğunluğu (device pixel ratio) denir.

Örnek hesap: 600 CSS pikseli genişliğindeki bir kutu, yoğunluğu 2 olan bir ekranda 1200 fiziksel nokta kaplar. 600 piksellik bir dosya bu kutuya yayılınca tarayıcı eksik noktaları tahmin eder. Sonuçta görsel yumuşar, yani bulanıklaşır.

Tersi de sorun yaratır, çünkü gereğinden büyük dosya ek fayda sağlamaz. Örneğin 3000 piksellik bir dosyayı 600 piksellik kutuda göstermek keskinlik kazandırmaz, yalnızca indirme süresini uzatır. Bu yüzden hedef, kutunun gerektirdiği ölçüye yakın bir dosyadır.

Yoğunluk cihazdan cihaza değişir. Ancak bu yazıdaki iki kat çarpanı, çoğu içerik görseli için yaygın uygulamadır ve resmi bir kural değildir. Siteniz için çarpanı, ziyaretçilerinizin ekranlarına ve kabul edeceğiniz dosya ağırlığına göre kendiniz belirlersiniz. Ayrıca web sitesi görsel ölçülerini yalnızca piksel sayısıyla değil, kutu ve oranla birlikte düşünün.

Görselin sayfadaki kutu genişliğini nasıl bulursunuz?

Kutu genişliği, görselin en geniş düzende ekranda kapladığı alandır. Bu değeri üç yoldan bulabilirsiniz:

• İlk olarak tasarım dosyasına bakın. Tasarımcı her görsel alanının genişliğini ve oranını belirlemiş olmalıdır, belirlemediyse bunu isteyin.
• Ardından tema ya da sayfa oluşturucu belgesini okuyun. Birçok sistem hangi alanda hangi genişliği kullandığını yazar, panelde ilgili ayar da çoğu zaman aynı bilgiyi gösterir.
• Son olarak tarayıcının geliştirici araçlarını açın, görseli seçin ve ekranda kapladığı genişliği okuyun. Bunu hem geniş ekranda hem telefon genişliğinde yapın.

Örnek hesap: Kapsayıcı genişliği 1200 CSS pikseli olan bir temada üç sütunlu kart ızgarası düşünün. Sütunlar arası boşluk 24 pikselse her kart (1200 − 2 × 24) ÷ 3 = 384 piksel genişliğinde olur. Dolayısıyla kart görseli için iki kat çarpanıyla 768 piksel genişlik hazırlarsınız.

Bu envanteri tasarım başlamadan çıkarmak en az emek isteyen yoldur. Kurumsal web tasarım hizmetimizde her görsel alanının genişliğini, oranını ve telefon kadrajını tasarım aşamasında tabloya yazarız. Böylece tasarımcı ve geliştirici aynı belgeyle çalışır.

En-boy oranı nedir ve yüksekliği nasıl hesaplarsınız?

En-boy oranı, genişliğin yüksekliğe oranıdır; 16:9 gibi yazarsınız. Genişliği bildiğinizde yüksekliği, genişlik × (oranın ikinci sayısı ÷ ilk sayısı) formülüyle bulursunuz. Örneğin 1200 piksel genişlikte 16:9 oranının yüksekliği 1200 × 9 ÷ 16 = 675 pikseldir.

Aşağıdaki oranlar sahada sık karşımıza çıkar. Bunlar yaygın uygulamadır, kural değildir; yükseklikler de 1200 piksel genişlik için örnek hesaptır.

• 16:9 oranı geniş ana görsellerde ve video kapaklarında yaygındır, yani yükseklik 675 piksel olur.
• 3:2 ve 4:3 oranları fotoğraf makinelerinin ve telefonların doğal oranlarına yakındır. Bu yüzden kırpma ihtiyacını azaltır; yükseklik sırasıyla 800 ve 900 piksel olur.
• 1:1 yani kare oranı, ekip fotoğraflarında ve bazı ürün kartlarında görürsünüz. Yükseklik 1200 piksel olur.
• 1,91:1 oranı, Meta geliştirici belgesinin link paylaşım görseli için önerdiği orandır. Yani 1200 piksel genişlikte yükseklik yaklaşık 630 pikseldir.

Oranı seçtikten sonra görselleri o orana kırpın. Germek ve kırpmak aynı şey değildir: germe görseli kutuya zorla sığdırır ve yüzleri yamultur, kırpma ise oranı koruyup fazlalığı keser.

Örnek hesap: kutu genişliğinden dosya ölçüsüne nasıl gidersiniz?

Tablodaki kutu genişlikleri örnektir, kendi temanızda farklı olabilir. Formül ise her sitede aynıdır: dosya genişliği, kutu genişliği × yoğunluk çarpanıdır. Dosya yüksekliğini de bu genişlikten ve seçtiğiniz orandan çıkarırsınız.

Tam genişlik görselde kutu, ekranın tamamıdır. Örnek hesap: 1920 CSS pikseli genişliğindeki bir ekranda iki kat çarpanı 3840 piksel ister. Her ziyaretçiye bu kadar büyük bir dosya göndermek ağır olur, bu nedenle bir üst sınır koyarsınız. Üst sınır kural değil, sizin kararınızdır.

Web sitesi görsel ölçüleri tablosunda hangi görsel türü için hangi hesap geçerlidir?

Bu tablo ana görsel, slider (sırayla değişen görsel bandı), banner, kart ve fotoğraf gibi sayfa içi görselleri ve marka işareti dosyasını özetler. Resmi bir ölçü yoksa bunu açıkça yazdık, çünkü kutu genişliği temanıza ve tasarımınıza bağlıdır. Favicon, paylaşım görseli ve Apple simgesi için resmi değerler ise ayrı bir tabloda yer alıyor.

Tablodaki "resmi ölçü yok" ifadesi bir eksiklik değil, bilinçli bir dürüstlüktür. Çünkü bu görsellerin ölçüsü sizin sayfa düzeninize bağlıdır ve her sitede farklı çıkar. Bu yüzden internette gördüğünüz tek bir sabit ölçüye güvenmeyin.

Tam genişlik ana görsel ve slider kaç piksel olmalı?

Tam genişlik ana görsel için tek ölçü yoktur, çünkü kutu ekranın tamamıdır. Ölçüyü, desteklemek istediğiniz en büyük ekran genişliğine ve kabul edeceğiniz dosya ağırlığına göre seçersiniz. Yaygın uygulama, bir üst sınır koyup aynı görselin birkaç genişlikte kopyasını hazırlamaktır.

Üst sınırı seçerken analitik aracınızın cihaz ve ekran boyutu raporuna bakın. Ziyaretçilerinizin çoğu dizüstü bilgisayar ve telefon kullanıyorsa, çok geniş bir dosya yalnızca küçük bir kitleye fayda sağlar. Böylece gereksiz ağırlığı baştan engellersiniz.

Slider için ek kurallar vardır:

• Tüm slaytlar aynı oranda olmalıdır. Aksi halde kutunun yüksekliği slayttan slayta değişir, sayfa kayar ya da kenarlarda boşluk kalır.
• Başlığı ve düğmeyi görselin içine gömmeyin. Canlı metin küçük ekranda da okunaklı kalır ve ekran okuyuculara ulaşır.
• Önemli konuyu ortada tutun, çünkü dar ekranlarda kenarlar kırpılabilir.
• Ayrıca metnin arkasındaki bölgenin kontrastına bakın, yoksa yazı fotoğrafın içinde kaybolur.

Slider'ın gerekli olup olmadığı ayrı bir sorudur. Web sitesinde slider kullanmalı mı yazımızda dönüşüme etkisini ve doğru kullanımı anlatıyoruz. Burada ise yalnızca ölçü tarafına odaklanıyoruz.

İçerik içi banner mobilde neden okunaksız kalır, nasıl hazırlarsınız?

Banner, sayfa içinde bir kampanyayı ya da duyuruyu öne çıkaran geniş bir banttır. Örnek hesap: 1200 piksel genişliğindeki bir bant, 390 piksellik bir telefon ekranına yerleşince yaklaşık üçte birine iner. İçine gömdüğünüz yazı da aynı oranda daralır ve okunaksız hale gelir.

Çözüm üç adımdan oluşur:

1. İlk olarak metni görselden ayırın, başlığı ve düğmeyi canlı yazı olarak ekleyin.
2. Ardından görselde yalnızca arka planı bırakın ve konuyu güvenli alanda tutun.
3. Son olarak telefon için daha dikey bir kadraj hazırlayın ve tarayıcının hangisini göstereceğini picture öğesiyle belirtin.

Metni görselde tutmak erişilebilirlik sorunu da yaratır. W3C'nin WCAG 2.2 erişilebilirlik yönergelerindeki 1.4.5 ölçütü (AA düzeyi), bilgiyi görsel yerine metinle vermenizi ister, çünkü kullanıcılar görseldeki yazının görünümünü değiştiremez. Marka adı gibi logotip metinleri ise istisnadır.

Not: Reklam ağlarının banner ölçüleri ayrı bir konudur ve platformdan platforma değişir. Bu nedenle Google Ads gibi sistemlerin güncel görsel ölçülerini ilgili yardım sayfalarından kontrol edin. Bu yazı ise sitenizin kendi sayfalarındaki bannerları ele alır.

Blog kapak görseli kaç piksel olmalı?

Kapak görseli aynı anda dört yerde karşınıza çıkar. Bunlar blog listesindeki kart, yazının başı, sosyal medya paylaşımı ve Google Discover gibi öneri alanlarıdır. Her yerin kırpımı farklıdır, bu yüzden tek bir ana dosyayı merkezde güvenli bir alan bırakarak hazırlarsınız.

Resmi değerler iki kaynaktan gelir. Google Search Central'ın Discover belgesi, büyük görseller için en az 1200 piksel genişlik ve max-image-preview:large ayarını ister. Meta ise paylaşım görselinde en az 1200 × 630 piksel önerir. Dolayısıyla 1200 × 630 ölçüsü iki koşulu birden karşılar.

Örnek hesap: 1200 × 630 pikselli bir dosyayı tema kareye kırparsa ortadaki 630 piksel kalır, yani genişliğin yüzde 52,5'i. Ayrıca 4:3 kırpımında 840, 16:9 kırpımında 1120 piksel genişlik ekranda kalır. Konuyu ortadaki 630 pikselde tutarsanız her kırpımda yerinde durur.

Google ayrıca Discover için site logosu gibi genel görselleri og:image etiketinde ve schema.org işaretlemesinde kullanmaktan kaçınmanızı söyler. Bu yüzden her yazıya o yazıya özgü bir görsel verin.

Kart, ekip ve referans fotoğraflarını hangi ölçüde hazırlarsınız?

Kartlarda temel kural, ızgaradaki tüm görsellerin aynı oranda olmasıdır. Oranlar farklıysa kartların yüksekliği değişir ya da tema görselleri kendi başına kırpar. Üstelik otomatik kırpma çoğu zaman ortadan keser; bu yüzden bir ürünün ya da kişinin yarısı kaybolabilir.

Hesap bellidir. Örnek hesap: Kart genişliği 384 piksel ve oran 4:3 ise iki kat çarpanıyla 768 × 576 piksellik bir dosya yeterlidir. Dolayısıyla her kart görselini yüklemeden önce bu ölçüye kırpın.

Ekip ve referans fotoğraflarında kare ya da dikey oran yaygındır. Ayrıca tüm kişilerde aynı kadrajı, aynı ışığı ve benzer bir arka planı tutmak sayfaya düzen ve güven katar. Örnek hesap: 200 piksellik bir portre kutusu için 400 × 400 piksel yeterli olur.

Küçük bir dosyayı büyütmek yüzü yumuşatır ve netliği geri getirmez. Bunun yerine orijinal fotoğraftan yeniden dışa aktarın. Gerçek fotoğrafın siteye ne kattığını ise profesyonel fotoğraf ve stok fotoğraf karşılaştırmamızda anlattık.

Marka işareti dosyası neden vektör olmalı?

Marka işareti (logo) dosyası, sitenin üstünde ve altında görünen en küçük ama en sık görülen görseldir. Vektör bir dosya (örneğin SVG), ölçeğe göre yeniden çizildiği için her ekran yoğunluğunda keskin kalır. PNG ve JPG gibi piksel dosyaları ise sabit sayıda noktadan oluşur.

Pratikte iki dosya hazırlayın. Sitede kullanmak için vektör sürümü, e-posta imzası ya da sosyal profil gibi vektör kabul etmeyen yerler için de PNG sürümü saklayın. Örnek hesap: PNG sürümü üst bölümde 48 piksel yüksekliğinde duruyorsa 96 piksel yükseklikte dışa aktarın.

Marka işareti ile favicon aynı dosya olmak zorunda değildir. Favicon sekmede çok küçük göründüğü için daha sade olmalıdır. Ayrıca WCAG, marka adı gibi logotip metnini istisna sayar; yine de marka işaretine anlamlı bir alt metin verin.

Favicon, paylaşım görseli ve Apple simgesi için resmi ölçüler nelerdir?

Aşağıdaki değerler ilgili resmi belgelerden alınmıştır. Platformlar kuralları güncelleyebildiği için yayına almadan önce kaynak sayfayı kontrol edin.

Marka işareti, kart ve slider gibi sayfa içi görseller için bu düzeyde bir resmi ölçü yoktur. Bu yüzden onları kutu genişliğinden hesaplarsınız.

Google aramada favicon görünsün diye nelere dikkat edersiniz?

Google Search Central'ın favicon belgesi küçük ama net kurallar koyar. Favicon kare olmalı ve en az 8 × 8 piksel olmalıdır. Google ayrıca çeşitli yüzeylerde iyi görünmesi için 48 × 48 pikselden büyük bir dosya önerir.

Belgeden çıkan pratik kontrol listesi şöyledir:

• Ana makine adı (hostname) başına tek favicon kullanın, çünkü alt dizinler ana sayfanınkini paylaşır.
• Favicon adresini sık değiştirmeyin, yani adres kararlı kalsın.
• Google'ın görsel tarayıcısı dosyaya, ana sayfa tarayıcısı da ana sayfaya erişebilmelidir. Dolayısıyla robots.txt ile engel koymayın.
• Ana sayfanın başlık bölümüne favicon bağlantısını ekleyin.
• Markayı temsil eden sade bir işaret seçin, özellikle küçük boyutta okunmayan ayrıntılardan kaçının.

Bu kurallara uysanız bile favicon aramada hemen görünmeyebilir, çünkü güncelleme zaman alır. Sorunu adım adım çözmek için Google arama sonuçlarında favicon görünmüyor yazımıza bakın.

Paylaşım görselini nasıl hazırlar ve test edersiniz?

Paylaşım görseli, bir sayfa adresini mesajlaşma uygulamasına ya da sosyal ağa yapıştırdığınızda çıkan karttaki görseldir. Meta'nın geliştirici belgesi en az 1200 × 630 piksel önerir. Büyük kart için alt sınır 600 × 315 pikseldir ve dosya 8 MB'ı aşmamalıdır.

Belge ayrıca 1,91:1 orana yakın kalmanızı önerir, böylece görselin tamamı haber akışında kırpılmadan ekranda yer alır. Daha küçük görseller yine çıkar, ama kart çok daha küçük olur. Hazırlarken üç şeye dikkat edin:

• Her sayfanın kendi paylaşım görseli olsun, aksi halde kart görselsiz ya da istenmeyen bir görselle çıkabilir.
• Konuyu ortada tutun ve kenarlara boşluk bırakın, çünkü platformlar farklı biçimlerde kırpabilir.
• Yazıyı görselin içine koyacaksanız kısa tutun. Ayrıca aynı bilgiyi sayfada metin olarak da verin.

Test için link önizleme aracımızı kullanın. Sayfa adresini yapıştırırsınız, araç WhatsApp, Facebook, X, LinkedIn ve Telegram kartlarını gösterir. Üstelik eksik etiketlerle görsel hatalarını bulur. Görseli değiştirdiyseniz platformların eski önizlemeyi bir süre saklayabileceğini unutmayın.

Apple dokunmatik simgesi için hangi dosyayı hazırlarsınız?

Apple dokunmatik simgesi, iPhone ya da iPad kullanan biri sitenizi ana ekranına eklediğinde çıkan simgedir. Apple'ın Safari web içeriği kılavuzu, tüm site için kök klasöre apple-touch-icon.png adlı bir PNG dosyası koymanızı söyler.

Tek tek sayfalar için ayrı bir bağlantı öğesi yazabilir, birden çok cihaz çözünürlüğü için de sizes özelliğini ekleyebilirsiniz. Kılavuzdaki örnek işaretleme 152 × 152, 167 × 167 ve 180 × 180 piksellik dosyaları gösterir. Ancak kılavuz, güncel simge ölçüleri için Apple'ın Human Interface Guidelines sayfasına yönlendirir.

Cihaz için önerilen ölçüde simge yoksa kılavuza göre önerilenden büyük olanların en küçüğü devreye girer. Büyük simge de yoksa eldeki en büyüğü gelir. Bu nedenle tek bir büyük, kare PNG dosyası hiç dosya olmamasından iyidir.

Google da favicon ararken bu bağlantı türünü kabul eder. Böylece tek bir iyi simge iki işe birden yarar.

Web sitesi görsel ölçüleri mobilde nasıl değişir, kırpılmayı nasıl önlersiniz?

Dar ekranda kutu daralır. Oran aynı kalırsa yükseklik de azalır ve konu küçük kalır. Üstelik tema görseli kutuyu dolduracak biçimde yerleştiriyorsa kenarlardan kesim olur; ekran genişliğine göre yüzün ya da yazının bir kısmı kaybolabilir.

MDN'in duyarlı görsel rehberi (Mozilla'nın web belgeleri) iki ayrı sorunu birbirinden ayırır. Birincisi çözünürlük seçimidir: dar ekranlara daha küçük dosya göndermek istersiniz. İkincisi sanat yönetimidir: farklı yerleşimler için farklı kadrajlar sunmak istersiniz.

• Çözünürlük seçimi için aynı kadrajın birkaç genişlikte kopyasını hazırlarsınız, örneğin 480, 800, 1200 ve 2400 piksel. Ardından srcset özelliğiyle listeyi, sizes özelliğiyle görselin sayfada ne kadar yer kaplayacağını bildirirsiniz; tarayıcı uygun olanı seçer.
• Sanat yönetimi için picture öğesini kullanırsınız. Telefona kare ya da dikey bir kadraj, masaüstüne geniş kadraj verirsiniz. MDN, picture içinde src ve alt içeren bir img öğesi bulunması gerektiğini, aksi halde hiçbir görselin gelmeyeceğini belirtir.
• Birçok içerik yönetim sistemi yüklediğiniz görselden küçük kopyalar üretir. Ancak hangi genişliklerde ürettiğini temanızın belgesinden ve panelde ilgili ayardan kontrol edin.

Hazırlık sırasında odak noktasını belirleyin: yüz, ürün ya da başlık hangi bölgede kalmalı? Daha sonra dışa aktarmadan önce telefon ve masaüstü genişliklerinde kırpımı deneyin. Son olarak gerçek bir telefonda kontrol edin, çünkü tarayıcı simülasyonu her farkı göstermez.

Doğru boyutta yükledikten sonra sıkıştırma, kayma ve hız için ne yaparsınız?

Boyutu doğru hazırlamak ilk adımdır. İkinci adım sıkıştırma ve dosya biçimidir, ama bu konu ayrı bir yazıyı hak ediyor. Web sitesi görsel optimizasyonu yazımızda biçimleri, sıkıştırmayı ve yüklemeyi anlattık, burada tekrarlamıyoruz.

Üçüncü adım, genişlik ve yükseklik bildirmektir. Görselin genişlik ve yükseklik değerlerini sayfa kodunda belirtirseniz tarayıcı görsel inmeden önce yer ayırır. Böylece sayfa yüklenirken içerik aşağı kaymaz. Bu kaymayı ölçen puan CLS adını taşır (Cumulative Layout Shift, kümülatif düzen kayması). Ayrıntılar için CLS yazımıza bakın.

Dördüncü adım ana görselin hızıdır. Sayfanın en üstündeki geniş görsel çoğu zaman en büyük içerik öğesidir; yani LCP (Largest Contentful Paint, en büyük içerik boyaması) süresini belirler. Gereğinden büyük ya da geç yüklenen bir ana görsel sayfayı yavaş gösterir. LCP yazımızda nedenleri ve çözümleri bulabilirsiniz.

Slider'da farklı oranlar da kaymaya yol açar. Bu yüzden tüm slaytları aynı oranda hazırlamak hem görünümü hem CLS'yi korur.

Görseller bulanık, yamuk ya da kırpık görünüyorsa önce neyi kontrol edersiniz?

Aşağıdaki sıra, sahada en sık karşılaştığımız sebepten başlar. Önce birinci maddeye bakın, çünkü bulanıklığın en yaygın nedeni orada yatar.

1. Dosyanın piksel genişliğini, kutu genişliği × yoğunluk çarpanıyla karşılaştırın. Dosya daha küçükse orijinalden yeniden dışa aktarın, çünkü büyütmek netliği geri getirmez.
2. Görselin oranını kutunun oranıyla kıyaslayın. Farklıysa görsel uzar ya da basıklaşır, bu yüzden germek yerine kırpın.
3. Ardından kırpılma sorununu arayın. Tema görseli kutuya doldurarak yerleştiriyorsa konuyu ortaya alın ya da telefon için ayrı kadraj hazırlayın.
4. Sayfa ağırsa görselin kutunun gereğinden çok daha büyük olup olmadığına bakın. Önce boyutu küçültün, daha sonra sıkıştırın.
5. Yüklenirken içerik kayıyorsa genişlik ve yükseklik bilgisini ve slayt oranlarını kontrol edin.
6. Son olarak paylaşımda yanlış görsel çıkıyorsa sayfanın paylaşım görseli etiketini ve platform önbelleğini kontrol edin.

Örnek senaryo: Bir işletme, telefonla çektiği 4000 piksel genişliğindeki fotoğrafı doğrudan kart alanına yükler. Kart 384 piksel genişliğinde göründüğü için dosya gereğinden çok büyüktür. Üstelik tema kareye kırptığı için konu da yarım kalır. Çözüm iki adımdır: önce fotoğrafı 4:3 orana kırpın, sonra 768 piksel genişliğe indirin.

Web sitesi görsel ölçüleri için tasarımcıya ya da ajansa hangi brifi verirsiniz?

Brif, işi tanımlayan kısa belgedir. İyi bir brif, "kaç piksel olsun?" sorusunu baştan kapatır. Aşağıdaki liste, tasarımcıya ya da ajansa verebileceğiniz asgari içeriği gösterir.

• Tüm görsel alanlarının listesi: ana görsel, slider, banner, kapak, kartlar, ekip fotoğrafları, marka işareti, favicon, paylaşım görseli ve Apple simgesi.
• Her alan için masaüstü ve telefon kutu genişliği ile oran, çünkü ölçüler buradan çıkar.
• Yoğunluk çarpanı ve tam genişlik görsellerde üst sınır.
• Güvenli alan, odak noktası ve telefon için ayrı kadraj gerekip gerekmediği.
• Metin politikası: yazıları canlı metin olarak ekleyin, görsele gömmeyin; logotip bunun dışındadır.
• Teslim biçimi: kaynak dosya, dışa aktarılan kopyalar, ayrıca marka işareti için vektör ve PNG.
• Dosya adlandırma, alt metin sorumlusu ve fotoğrafların kullanım hakkı bilgisi.
• Kabul testi, yani telefonda ve masaüstünde kontrol ile link önizleme testi.

Mevcut sitenizi başka bir platformdan taşıyorsanız, görsel envanterini taşıma planına ekleyin. Wix sitesini taşıma rehberimiz sürecin genel akışını anlatır. Ancak görsel ölçü planını yeni sitenin tasarımıyla birlikte yeniden çıkarmanız gerekir.

Hangi ücretsiz araçlarımız ölçü işini hızlandırır?

Üç ücretsiz aracımız bu hesapları ve kontrolleri kolaylaştırır. İlk ikisi dosyalarınızı sunucuya yüklemeden tarayıcınızda çalışır.

• Resim küçültme aracı: Genişliği yazarsınız, oran kilidi yüksekliği sizin yerinize hesaplar. Ardından JPG, WebP ya da PNG olarak indirirsiniz.
• Resim format dönüştürücü: JPG, PNG ve WebP arasında toplu dönüştürür. Ayrıca kaliteyi ve arka plan rengini siz ayarlarsınız.
• Link önizleme aracı: Sayfa adresini yapıştırırsınız, araç paylaşım görselini ölçer. Böylece kartların nasıl çıkacağını önceden görürsünüz.

Önce kutu genişliğini bulun, sonra resim küçültme aracına bu ölçünün iki katını girin. Son olarak sayfayı yayına aldıktan sonra paylaşım kartını link önizleme aracıyla kontrol edin.

Bu işi bizimle yapmak isterseniz nasıl ilerleriz?

Web sitesi görsel ölçülerini tasarım ve kurulum sürecinin başında çıkarmak hem işi hızlandırır hem sonradan düzeltme ihtiyacını azaltır. Biz web sitenizi tasarlar, kurar, taşır ve yönetiriz. Ayrıca sürecin başında görsel envanterini ve ölçü planını yazılı hale getiririz.

Projeniz için web sitesi tasarımı sayfamızı inceleyebilir ve teklif alabilirsiniz. Projenizin kapsamını dinler, ihtiyacınıza göre teklif hazırlarız.

Özetle: kutu genişliğini bulun, oranı seçin, yoğunlukla çarpın ve kadrajı telefonda kontrol edin. Resmi değerleri ise ilgili belgeden doğrulayın.