5 cara untuk mengoptimalkan gambar di situs band Anda

Saat ini, situs web dapat muncul dalam ratusan ukuran layar yang berbeda, bahkan dalam orientasi yang berbeda pada perangkat yang sama (lanskap atau potret). Tampilan yang digunakan orang untuk melihat situs Anda dapat memiliki lebar hanya beberapa ratus piksel di perangkat seluler, hingga lebarnya hingga ribuan piksel pada monitor layar lebar definisi tinggi yang lebih baru.

Karena teknologi baru menyediakan berbagai ukuran layar yang dapat digunakan orang untuk melihat situs Anda, itu juga memerlukan cara berpikir baru tentang desain situs yang memastikan situs tampak hebat di layar apa pun - besar atau kecil, tinggi, atau lebar.

Di sinilah konsep desain situs web 'responsif' berperan!

Cara Kerja Desain Responsif

Situs web responsif dibuat sehingga pemosisian dan ukurannya 'relatif' terhadap ruang yang mereka lihat. Saat situs Anda dilihat di berbagai tampilan, situs akan beradaptasi dengan meregangkan atau mengecilkan; bergerak agar sesuai dengan ruang yang tersedia.

Setiap foto yang Anda unggah ke situs Bandzoogle Anda akan meregang dan berskala tergantung pada seberapa besar 'ruang' gambar tersebut.

Dengan gambar header, ini sangat penting karena gambar responsif akan 'pas' sebaik mungkin ke bingkai. Lebih sedikit pekerjaan memotong banyak gambar berarti lebih banyak waktu, yah, memutar musik, bukan?

Mari kita lihat lima cara untuk mengoptimalkan gambar di situs band Anda untuk mendapatkan desain yang tepat.

1. Pilih gambar yang tepat

Desain responsif menskalakan elemen halaman seperti gambar header Anda 'secara proporsional' dengan ukuran asli file gambar yang Anda gunakan, dan akan melakukan ini 'relatif' terhadap ruang yang disetel gambar di dalam halaman.

Ini berarti proporsi gambar dipertahankan di semua perangkat, dan gambar akan selalu berusaha 'mengisi' ruang tempat mereka berada sebaik mungkin. Hal ini dapat mengakibatkan gambar header memiliki bagian gambar yang tampak 'terpotong' - ini tidak dapat dihindari dalam desain responsif, tetapi memilih gambar yang terpotong dengan baik agar pas, akan membantu.

Artis: Tragedi Ann

Desktop dan layar lebar

Di laptop, gambar header akan diskalakan relatif terhadap lebar layar. Pada perangkat seluler, gambar akan diskalakan berdasarkan ketinggian layar.

Dengan kata lain, gambar Anda akan selalu berskala dalam kaitannya dengan sisi terpanjang dari ruang tersebut.

Sekarang, bayangkan ini pada layar dengan lebar 1.000 piksel - layar desktop / laptop lebih lebar daripada tingginya, dan katakanlah layar yang sama ini juga memiliki tinggi 570 piksel (sekitar rasio 16:9 untuk banyak tampilan).

Dalam skenario ini, gambar kami memiliki lebar 1.000 piksel pada tampilan ini, tetapi telah diskalakan menjadi tinggi 900 piksel, yang berarti, dalam ruang yang tingginya hanya 570 piksel, gambar tersebut akan memotong lebih dari 300 piksel di bagian atas dan bawah gambar. Gambar tanpa kepala, ya!

Orientasi seluler dan potret

Lakukan perhitungan yang sama dengan contoh layar ponsel yang tingginya 600 piksel - katakanlah layar yang sama ini hanya memiliki lebar sekitar 320 piksel. Saat gambar beradaptasi dengan tampilan ini, lebih dari setengah gambar akan terpotong di kedua sisi (ingat ukuran gambar dikurangi menjadi 667 piksel pada layar potret setinggi 600 piksel).

Ini adalah cara yang baik untuk mengganggu drummer di tepi foto band Anda, yang bisa menyenangkan! Tetapi tetap saja...

Optimalkan, lalu unggah file Anda

Sebuah metafora yang baik yang dapat Anda gunakan adalah membayangkan Anda berada di galeri seni membingkai gambar - jika Anda menempatkan lanskap Monet ke dalam bingkai potret 'Whistler's Mother', bingkai itu akan memotong banyak bunga lili air yang sangat bagus di sisinya. lukisan Anda.

Di sinilah hal itu bisa menjadi rumit - pembuat situs tidak dapat mengantisipasi gambar yang ingin Anda gunakan (atau apa yang ditampilkan di dalamnya), tetapi selektif dengan gambar apa yang akan ditambahkan adalah langkah pertama yang baik.

Beberapa tip mudah untuk memilih gambar yang tepat untuk header Anda:

• Hindari menggunakan gambar yang telah 'dipotong dekat' - semakin banyak ruang atau bantalan yang Anda miliki di sekitar 'fokus' gambar Anda, semakin kecil kemungkinan fokus akan terpotong pada tampilan yang berbeda.
  
• Gunakan gambar besar - 2000 x 1800 pada ukuran 72dpi biasanya berfungsi dengan baik untuk sebagian besar tema Bandzoogle, dan membantu memastikan gambar Anda terlihat bagus di setiap tampilan.
  
• Coba gunakan gambar yang orientasinya mendekati 'persegi' - Tidak harus gambar persegi yang sempurna, tetapi sedekat mungkin dengan tinggi dan lebar yang sama dalam gambar Anda biasanya akan berfungsi dengan baik pada tampilan apa pun. Ruang ekstra ini memberi Anda ruang untuk bernafas, apa pun orientasi situs Anda dilihat.
  
• Cobalah untuk menghindari penggunaan gambar dengan teks atau logo di dalam gambar itu sendiri - Anda pasti tidak ingin teks penting atau merek Anda terpotong untuk pengunjung Anda!
  
• Tambahkan logo Anda di bawah opsi 'judul / logo' editor tema Bandzoogle Anda. Kemudian tambahkan teks apa pun yang Anda inginkan di tajuk ke 'fitur tajuk Ajakan Bertindak'. Dengan cara ini, pesan penting Anda tidak akan terpotong oleh tepi layar.

Artis: Martin dan James

2. Pangkas sesuai tema Anda

Jika Anda memiliki gambar yang sudah diunggah, Bandzoogle hadir dengan beberapa alat hebat untuk membuatnya tampil lebih baik!

Beberapa desain template kami akan menampilkan 'layar penuh' saat dimuat, memiliki ketinggian header yang dapat disesuaikan, dapat menampilkan gambar header dalam ruang terbatas, dalam berbagai bentuk (seperti template Spotlight), atau bahkan mengatur gambar header Anda sebagai latar belakang halaman Anda (Slice, misalnya).

Sangat mudah untuk mencoba tema yang berbeda dengan opsi tajuk yang berbeda - Anda dapat mengubah desain tema melalui 'edit tema' > 'tampilan tema', pilih tema yang Anda inginkan, sesuaikan tema itu di editor desain, klik 'simpan' dan publikasikan perubahan.

Asalkan tema tidak mengatur header Anda sebagai gambar latar halaman penuh, Anda juga dapat menyesuaikan zoom relatif dan posisi gambar yang Anda tambahkan.

Di 'edit konten' klik gambar header di tab edit konten, lalu di editor header, klik tautan 'pangkas' di bawah thumbnail gambar header.

Anda kemudian dapat menyesuaikan zoom dengan penggeser zoom, dan mengeklik/menarik gambar ke penempatan relatif.

3. Tetapkan titik fokus

Saat memotong gambar header di editor header, Anda mungkin juga melihat titik biru kecil di atas gambar - ini untuk mengatur 'titik fokus' Anda. Apa yang dilakukan adalah memastikan di mana pun titik ini diposisikan pada gambar, akan selalu 'dalam fokus', tidak peduli ukuran atau orientasi gambar Anda.

Ini bisa sangat berguna untuk gambar di mana 'fokus' gambar yang Anda unggah tidak sepenuhnya terpusat - klik / seret titik fokus di atas fokus gambar akan memastikan bahwa apa pun yang terpotong di layar yang berbeda, fokusnya ada di depan dan tengah .

Setelah Anda mengatur cropping, zoom, dan focal point, cukup klik 'save' untuk menerapkan crop, lalu klik 'save' lagi di editor header untuk menerapkan perubahan Anda.

Artis: Anna Bassy

4. Sesuaikan tinggi tajuk seluler

Garis antara apa yang layar seluler dan layar non-seluler menjadi kabur sepanjang waktu - ambil perangkat tablet misalnya. Tidak cukup besar untuk menjadi 'desktop', tetapi tidak cukup kecil untuk layar ponsel.

Saat Anda melihat situs di banyak tablet dalam 'lanskap', situs mungkin muncul seperti halnya di layar desktop atau laptop. Putar tablet itu ke samping sebagai 'potret', dan semuanya bisa berubah - pengurangan lebar layar dapat menghadirkan lebih banyak elemen 'seluler' lebih dekat dengan apa yang mungkin Anda lihat di ponsel.

Sebagian besar tema Bandzoogle secara default diatur untuk menampilkan header 'tinggi penuh' di layar berorientasi potret - ini bisa menjadi masalah jika gambar header Anda berisi fokus ke sisi kiri dan kanan.

Untuk ini, asalkan tema Anda tidak menyetel tajuk Anda sebagai gambar latar belakang untuk halaman Anda, Anda dapat mengaktifkan opsi 'tinggi tajuk seluler khusus' di pengaturan 'tajuk' melalui tab 'edit tema' Anda.

Setelah diaktifkan, klik ikon 'pratinjau seluler' di editor tema, dan sesuaikan penggeser 'tinggi header (seluler)' - ini dapat membantu menyesuaikan ruang tempat gambar Anda berada agar lebih cocok dengan proporsi gambar Anda, dan menampilkan lebih banyak gambar. Cukup klik 'simpan' setelah Anda mengatur ini!

5. Tambahkan filter

Terakhir, Anda dapat menambahkan beberapa getaran yang sangat menakjubkan ke gambar header Anda dengan mengatur filter. Keluarkan nuansa birunya, berikan gambar Anda tampilan film tahun 70-an, atau gunakan warna hitam dan putih vintage. Ada banyak pilihan di sini!

Cukup klik tab 'edit tema' di panel kontrol Bandzoogle Anda, dan di bawah opsi 'tajuk', Anda dapat memilih filter cetakan, atau membuat gaya filter kustom Anda sendiri.

Artis: Carleen Williams

Meskipun terkadang agak membingungkan, konsensus keseluruhan dengan desainer web adalah bahwa responsif adalah cara yang lebih baik untuk pergi ke situs web Anda.

Ini menjamin situs Anda akan terlihat bagus dan dapat dibaca di setiap layar yang tersedia sekarang, serta di masa mendatang, dan situs seperti Google akan memberi peringkat lebih baik kepada Anda jika situs Anda menggunakan praktik responsif yang baik.

Dalam jangka panjang, ini juga merupakan penghemat waktu yang tepat bagi Anda yang mengelola situs Anda sendiri - mengetahui cara terbaik untuk mengoptimalkan gambar dan konten Anda adalah langkah pertama, dan Bandzoogle akan menangani sisanya!

Buat situs web musik dengan gambar responsif hanya dalam beberapa klik. Bangun situs web Anda dengan Bandzoogle hari ini!