Cloudbeds Websites için Görsel Yönergeleri

• Arka Plan Görsel Genişliği: 2880px
• Masaüstü: 1920px
• Tablet: 1280px
• Mobil: 640px Küçük Resim
• Blog Küçük Resmi:
  • 160px
  • 300px

Her görsel yüklediğinde, görselin boyutu küçültülmüş 5 kopyası oluşturulur. Website Builder, masaüstü, tablet ve mobil sitelere uygun boyuttaki görseli otomatik olarak yerleştirir, böylece site ziyaretçilerin cihazlarına uygun doğru boyutta görseli görür.

Webp için Sistem Gereksinimleri

Webp görseller için desteklenen sürümler şunlardır:

• iPhone: v14 ve sonrası
• Mac/Safari: en son 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

• Bir görselin toplam alanı 3.145.728 pikseli geçemez. Görsellerinizin bu sınırı aşması pek olası değildir, ancak piksel genişliği ile yüksekliğini çarparak hızlıca kontrol edebilirsiniz.
• Görsel boyutu 200MB'yi 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 görsel seçicide küçük resimler görüntülenmez
  • Görseller editörde yüklenmez
  • Görseller canlı sitede yüklenmez

Slider

Slider Bileşeni genellikle dramatik etki için daha büyük boyutlu görsellerle kullanılır. Sliderlar genellikle uçtan uca uzanır, bu yüzden slidera uyacak şekilde daha geniş görseller kullanmak iyidir. Kare sliderlar için 1:1 gibi eşit en-boy oranı kullanın.

Görselin ana içeriği yeniden boyutlandırıldığında kesilmemesi için iyi boşluklu görseller seçmek en iyisidir. Tasarım tutarlılığı için sliderdaki görsel oranları aynı olmalıdır.

• Yaygın en-boy oranları: 16:9, 3:4
• Yaygın çözünürlük boyutları (px): 1600x900, 1280x720, 1280x960

Fotoğraf Galerisi

Fotoğraf Galerisi bileşeni, çok sayıda düzen seçeneği olduğu için görsellerle kullanmak için en esnek bileşendir. Örneğin, tüm görsellerin aynı boyutta olduğu karo galerisi veya her görselin farklı boyutta olduğu mozaik galerisi yapabilirsin.

Fotoğraf Galerisindeki görsellerin en-boy oranı, nasıl görüntülenmesini istediğini yansıtmalıdır.

• Örneğin, kare tarzı galerilerde görsellerin 1:1 oranında olması gerekir.
• Uzun görsel tarzı galerilerde daha uzun yükseklik oranları olmalıdır, örneğin 2:5 veya 200px x 500px.

Tasarım tutarlılığı için görsel oranları aynı olmalıdır. Hover efektini kullanmak için görselde biraz boşluk bırak, böylece görsellerin kesilmez.

• Yaygın en-boy oranları: Herhangi bir en-boy oranı.
• Yaygın çözünürlük boyutları (px): Herhangi bir çözünürlük, ancak sayfa hızı için 1500px’den büyük olmamalı.

Simge

Simge, herhangi bir sitenin çok önemli bir parçasıdır. Bilgi için görsel işaretlerdir ve sitene modern bir görünüm katabilirler. Şeffaf PNG, JPEG veya SVG kullanabilirsin.

• Yaygın en-boy oranları: Genellikle 1:1, ancak herhangi bir en-boy oranı işe yarar.
• Yaygın çözünürlük boyutları (px): 200x200, 80x80 veya herhangi bir çözünürlük. SVG’ler herhangi bir çözünürlükte olabilir.

Faviconlar

Faviconlar gerçek sitende kullanılmaz, ancak kullanıcılar web siteni açtığında sekmede görüntülenir. ICO formatı kullanman önerilir. Görsel dosyalarını ICO’ya dönüştürmek için.

• Gerekli en-boy oranı: 1:1
• İzin verilen çözünürlük boyutları (px): 24x24, 36x36, 48x48

Logolar

Logo görselleri için SVG formatı kullanman önerilir, çünkü SVG dosyaları diğer görsel dosyaları gibi optimize edilmez; bu yüzden yüklediğin logo küçük boyutta olsa bile kalite kaybı yaşamazsın.

İki en yaygın en-boy oranını görselleştirmek:

• En boy oranı ve Çözünürlük: En boy oranı, bir görselin genişlik ve yükseklik değerlerinin oranıdır. 16:9 en boy oranı, 16x9 px veya 1600x900 px boyutlarında bir görsel olabilir. Temelde, 16:9 oranına sahip herhangi bir görsel çözünürlüğüdür.
• Cihazlara Göre En Boy Oranları: Sitenizde görseller optimize edilirken, aslında görsellerin tasarımı yeniden boyutlandırılmaz. Masaüstünde 16:9 en boy oranına sahip bir görsel kullanırsanız, masaüstü cihaz geniş olduğu için görsel mükemmel görünür. Ancak mobil cihazlar çok daha küçük olduğundan, 16:9 en boy oranı bazen küçük görünebilir.
  
  Bunu telafi etmek için, ya cihazda gizle özelliğini kullanarak o cihazlar için özel versiyonlar oluşturabilir ya da görselin boyutlarını yeniden boyutlandırabilirsiniz. Boyut değişiklikleri cihazdan bağımsızdır.