Yüksek kaliteli görseller, bir web sitesinin estetik temelini oluşturur, kullanıcı etkileşimini artırır ve doğrudan rezervasyon dönüşümlerini destekler.
Kurulumu kolaylaştırmak için, Website Builder görsel varlıklarını otomatik olarak Cloudbeds PMS Tesis Profili ve Konaklama ayarlarından alır ve web sitesi medya galerisine aktarır.
Bu makalede, Cloudbeds Websites içinde görsel medyaya dair temel özellikler, boyut kriterleri ve yönetim süreçleri özetlenmektedir.
Medya Yöneticisine Erişim
- Cloudbeds PMS Ana Menü'sünden Dijital Pazarlamaya git ve Web Sitesi sekmesini seç.
- Web sitemi düzenleye tıkla ve Website Editor arayüzünü başlat.
- Sol taraftaki editör araç panelinde CMS'i seç ve Medya Yöneticisini seçerek önceden yüklenmiş tesis görsel klasörlerini görüntüle.
Cloudbeds Web Siten için görselleri yönet
Görsel türüne göre boyutlar
Arka plan görselleri, Görsel bileşeni (Widget) ve Fotoğraf Galerisi bileşeni (Widget) için optimizasyon devre dışı bırakılabilir.
- Görsel optimizasyonunu devre dışı bırakmak sayfa hızı ve/veya performansı etkileyebilir.
- Arka Plan Görseli Genişliği: 2880px
- Masaüstü: 1920px
- Tablet: 1280px
- Mobil: 640px Küçük Görsel
-
Blog Küçük Görsel:
- 160px
- 300px
Görsel kuralları
Gereksinimler ve görsel dosya türleri
Her görsel yüklediğinde, görselin 5'e kadar küçültülmüş kopyası oluşturulur. Website Builder, uygun boyuttaki görseli otomatik olarak masaüstü, tablet ve mobil sitelere ekler; böylece site ziyaretçilerin cihazına uygun boyutta görseli her zaman görür.
Site başına 15.000 adede kadar dosya (görseller, videolar, ses dosyaları ve diğer dosyalar dahil) yüklenebilir ve her dosya 200 MB'dan büyük olmamalıdır.
Webp için Sistem Gereksinimleri
Webp görselleri için aşağıdaki sürümler desteklenmektedir:
- iPhone: v14 ve sonrası
- Mac/Safari: en güncel sürüm
- Chrome: tüm sürümler
- Android: tüm sürümler
Desteklenen görsel dosya türleri şunlardır:
- png
- jpg
- jpeg
- gif
- svg
- svg+xml
- ico
- x-icon
- webp
Cihaza göre optimize edilmiş görsel boyutları
- Yüklenen görselin boyutu arttırılmaz ve yalnızca orijinalden küçük olan görseller oluşturulur.
- Örneğin, 2000px genişliğinde bir görsel yüklersen, 5 yeni optimize edilmiş kopya oluşturulur. 100px genişliğinde bir görsel yüklersen, yeni görsel oluşturulmaz.
Maksimum görsel boyutu
- Bir görselin toplam alanı 3.145.728 pikseli geçemez. Görsellerinin bu sınırı aşması pek olası değildir, ancak piksel genişliği ile yüksekliği çarparak hızlıca kontrol edebilirsin.
- Görsel boyutu 200MB'ı geçmemelidir.
- Sınırı aşan bir görsel yüklemek aşağıdaki hatalara yol açabilir:
- Görseller yüklenemez
- Görseller yüklenir, ancak seçicide küçük görseller (thumbnail) görünmez
- Görseller editörde yüklenmez
- Görseller canlı sitede yüklenmez
Bileşene (Widget) göre görsel boyutu kuralları
Slider
Slider bileşeni (Widget) genellikle daha büyük boyutlu görsellerle kullanılır ve etkileyici bir görünüm sağlar. Sliderlar genellikle uçtan uca uzanır, bu nedenle slidera uygun genişlikte görseller kullanmak iyidir. Kare sliderlar için 1:1 gibi eşit bir oran kullanabilirsin.
Görselin ana içeriğinin yeniden boyutlandırıldığında kesilmemesi için iyi bir boşluk bırakmak en iyisidir. Tasarım bütünlüğü için sliderdaki görsellerin oranları aynı olmalıdır.
- Yaygın oranlar: 16:9, 3:4
- Yaygın çözünürlükler (px): 1600x900, 1280x720, 1280x960
Mobil cihazlar genellikle masaüstü cihazlara göre ters oranlara sahiptir. Mobil sliderların doğru görünmesi için cihazda gizle özelliğini kullanman gerekebilir.
Fotoğraf Galerisi
Fotoğraf Galerisi bileşeni (Widget), görsellerle kullanmak için en esnek bileşendir çünkü birçok düzen seçeneği sunar. Örneğin, tüm görsellerin aynı boyutta olduğu döşeme galerisi veya her görselin farklı boyutta olduğu mozaik galerisi oluşturabilirsin.
Fotoğraf Galerisindeki görsellerin oranı, nasıl görünmesini istediğine göre belirlenmelidir.
- Örneğin, kare tarzı galerilerde 1:1 oran kullanılmalıdır.
- Uzun görsel tarzı galerilerde daha uzun yükseklik oranları, 2:5 veya 200px x 500px gibi oranlar kullanılabilir.
Tasarım bütünlüğü için görsel oranları aynı olmalıdır. Hover efekti için görselde biraz boşluk bırak; böylece görsellerin kesilmez.
- Yaygın oranlar: Herhangi bir oran.
- Yaygın çözünürlükler (px): Herhangi bir çözünürlük, ancak sayfa hızı için 1500px'den büyük olmamalı.
Simgeler
Simgeler, her sitenin önemli bir parçasıdır. Bilgi için görsel işaretlerdir ve sitene modern bir görünüm kazandırabilir. Şeffaf PNG, JPEG veya SVG kullanabilirsin.
- Yaygın oranlar: Genellikle 1:1, ancak herhangi bir oran kullanılabilir.
- Yaygın çözünürlükler (px): 200x200, 80x80 veya herhangi bir çözünürlük. SVG'ler herhangi bir çözünürlükte olabilir.
SVG'ler, HTML kodu içeren görsel dosyalarıdır; yani bir SVG simgesini sitene eklediğinde aynı zamanda kod satırları da eklemiş olursun.
- Birden fazla karmaşık SVG, binlerce satır kod ekleyebilir ve sitenin yavaş yüklenmesine neden olabilir. Aynı sayfada birden fazla SVG simgesi kullanman gerekiyorsa, bazılarını normal görsellere (.png, .jpeg vb.) dönüştürmeni öneririz; böylece yükleme veya işlev sorunları yaşamazsın.
Favicons
Favicons, sitende doğrudan kullanılmaz; kullanıcılar web siteni sekmede açtığında görünür. ICO formatı kullanman önerilir. Görsel dosyalarını ICO'ya dönüştürebilirsin.
- Gerekli oran: 1:1
- İzin verilen çözünürlükler (px): 24x24, 36x36, 48x48
Logolar
Logo görselleri için SVG formatı kullanman önerilir; çünkü SVG dosyaları diğer görseller gibi optimize edilmez ve küçük boyutlu bir logo yüklesen bile kalite kaybı olmaz.
En yaygın iki oranı görselleştirmek:
- Oran vs Çözünürlük: Oran, bir görselin genişlik ve yükseklik oranıdır. 16:9 oranı, 16x9 px veya 1600x900 px olabilir. Yani, 16:9 oranına sahip herhangi bir çözünürlük olabilir.
-
Cihaza göre oranlar: Görseller sitende optimize edilse de, sitendeki görsellerin tasarımı yeniden boyutlandırılmaz. Masaüstünde 16:9 oranlı bir görsel kullanırsan, masaüstünde mükemmel görünür çünkü masaüstü cihazlar geniştir. Ancak mobil cihazlar çok daha küçüktür ve 16:9 oranı bazen küçük görünebilir.
Bunu telafi etmek için cihazda gizle özelliğini kullanarak o cihazlara özel sürümler oluşturabilir veya görselin boyutlarını yeniden ayarlayabilirsin. Boyut değişiklikleri cihazdan bağımsızdır.
Önemli noktalar
Siten için en yüksek çözünürlükte görsel yüklemek, müşterilerin ve misafirlerin için yüksek çözünürlüklü görseller sağlar.
- Ancak, büyük görsellerin sayfa hızını ciddi şekilde etkileyebileceğini unutma. Yüksek çözünürlüklü görseller küçültülerek gösterildiği için kullanıcılar genellikle çözünürlük farkını fark etmez.
- Görselleri, kullanılacağı boyutta yüklemek daha iyidir. Örneğin, sitende 300x300 px olarak gösterilecek bir görselin 4000x4000 px olarak yüklenmesi gerekmez.
Yorumlar
Yorum yazmak için lütfen oturum açın: oturum aç.