5 maneiras de otimizar imagens no site da sua banda

Atualmente, os sites podem aparecer em centenas de tamanhos de tela diferentes, mesmo em orientações diferentes no mesmo dispositivo (paisagem ou retrato). As telas nas quais as pessoas veem seu site podem ter apenas algumas centenas de pixels de largura em dispositivos móveis, até milhares de pixels de largura em monitores widescreen de alta definição mais recentes.

Como as novas tecnologias forneceram uma variedade de tamanhos de tela com os quais as pessoas podem ver seu site, também exigiu uma nova maneira de pensar sobre o design do site que garantisse que os sites ficassem ótimos em qualquer tela - grande ou pequena, alta ou larga.

É aqui que entra o conceito de design de site 'responsivo'!

Como funciona o design responsivo

Um site responsivo é construído para que o posicionamento e o tamanho sejam 'relativos' ao espaço em que são visualizados. Quando seu site é visualizado em diferentes telas, ele se adapta ao esticar ou encolher; movendo-se para caber no espaço disponível.

Qualquer foto que você enviar para o seu site do Bandzoogle será esticada e dimensionada dependendo do tamanho do 'espaço' em que a imagem está.

Com imagens de cabeçalho, isso é especialmente importante porque as imagens responsivas se 'ajustarão' da melhor forma possível ao quadro. Menos trabalho cortando um monte de fotos significa mais tempo, bem, tocando música, certo?

Vejamos cinco maneiras de otimizar as imagens no site da sua banda para obter o design perfeito.

1. Escolha a imagem certa

O design responsivo dimensiona os elementos da página como suas imagens de cabeçalho 'proporcionalmente' ao tamanho original do arquivo de imagem que você usa e fará isso 'relativamente' ao espaço em que a imagem está definida na página.

Isso significa que as proporções da imagem são mantidas em todos os dispositivos, e as imagens sempre tentarão 'preencher' o espaço em que estão da melhor maneira possível. Isso pode resultar em imagens de cabeçalho com partes da imagem 'cortadas' - isso é inevitável no design responsivo, mas escolher uma imagem que corte bem para caber ajudará.

Artista: Tragedy Ann

Desktop e widescreen

Em um laptop, as imagens do cabeçalho serão dimensionadas em relação à largura da tela. Em um dispositivo móvel, a imagem seria dimensionada com base na altura da tela.

Em outras palavras, sua imagem sempre será dimensionada em relação ao lado mais longo do espaço.

Agora, imagine isso em uma tela com 1.000 pixels de largura - as telas de desktop / laptop são mais largas do que altas, e digamos que essa mesma tela também tenha 570 pixels de altura (aproximadamente a proporção de 16: 9 para muitos monitores).

Nesse cenário, nossa imagem tem 1.000 pixels de largura nesta tela, mas foi dimensionada para 900 pixels de altura, o que significa que, em um espaço de apenas 570 pixels de altura, ela acaba cortando mais de 300 pixels no valor superior e inferior a imagem. Fotos sem cabeça, caramba!

Orientação móvel e retrato

Faça a mesma matemática com o exemplo da tela do celular com 600 pixels de altura - digamos que essa mesma tela tenha apenas cerca de 320 pixels de largura. Quando a imagem se adapta a esta exibição, mais da metade da imagem seria cortada em ambos os lados (lembre-se de que a imagem é dimensionada para 667 pixels de largura em uma tela de retrato de 600 pixels de altura).

Esta é uma boa maneira de irritar o baterista na borda da foto da sua banda, o que pode ser divertido! Mas ainda...

Otimize e carregue seus arquivos

Uma boa metáfora que você pode usar é imaginar que você está em uma galeria de arte emoldurando fotos - se você colocar a paisagem Monet em uma moldura de retrato da 'Mãe de Whistler', essa moldura cortará muitos nenúfares realmente bonitos ao lado de sua pintura.

É aqui que pode ficar complicado - os criadores de sites não podem antecipar as imagens que você deseja usar (ou o que está mostrando nelas), mas ser seletivo com quais imagens adicionar é um bom primeiro passo.

Algumas dicas fáceis para selecionar a imagem certa para o seu cabeçalho:

• Evite usar imagens que foram 'recortadas' - quanto mais espaço ou preenchimento você tiver ao redor do 'foco' da sua imagem, menor a probabilidade de o foco ser cortado em telas diferentes.
  
• Use imagens grandes - 2000 x 1800 com tamanho de 72 dpi geralmente funciona bem para a maioria dos temas do Bandzoogle e ajuda a garantir que suas imagens fiquem ótimas em todas as telas.
  
• Tente usar imagens que estejam próximas da orientação 'quadrada' - Não precisa ser uma imagem quadrada perfeita, mas o mais próximo possível da altura e largura iguais em sua imagem geralmente funcionará muito bem em qualquer exibição. Esse espaço extra oferece espaço para respirar, independentemente da orientação em que seu site é visualizado.
  
• Tente evitar o uso de imagens com texto ou logotipos na própria imagem - você definitivamente não quer que um texto importante ou sua marca sejam cortados para seus visitantes!
  
• Adicione seu logotipo na opção 'título / logotipo' do seu editor de temas do Bandzoogle. Em seguida, adicione qualquer texto que desejar no cabeçalho ao recurso de cabeçalho 'Call to Action'. Dessa forma, suas mensagens importantes não serão cortadas pela borda da tela.

Artista: Martin e James

2. Corte para se adequar ao seu tema

Se você já tiver imagens enviadas, o Bandzoogle vem com ótimas ferramentas para torná-las ainda melhores!

Alguns de nossos designs de modelo exibirão 'tela cheia' quando forem carregados, têm alturas de cabeçalho ajustáveis, podem mostrar imagens de cabeçalho em um espaço limitado, em diferentes formas (como o modelo Spotlight) ou até mesmo definir sua imagem de cabeçalho como plano de fundo para suas páginas (Slice, por exemplo).

É fácil experimentar diferentes temas com diferentes opções de cabeçalho - você pode alterar o design do tema em 'editar tema' > 'visualizar temas', selecionar o tema desejado, personalizar esse tema no editor de design, clicar em 'salvar' e publicar seu mudanças.

Desde que o tema não defina seu cabeçalho como uma imagem de fundo de página inteira, você também pode ajustar o zoom relativo e o posicionamento das imagens adicionadas.

Em 'editar conteúdo', clique na imagem do cabeçalho na guia de edição de conteúdo e, no editor de cabeçalho, clique no link 'cortar' abaixo da miniatura da imagem do cabeçalho.

Você pode então ajustar o zoom com o controle deslizante de zoom e clicar/arrastar a imagem em um posicionamento relativo.

3. Defina um ponto focal

Ao cortar sua imagem de cabeçalho no editor de cabeçalho, você também pode notar um pequeno ponto azul sobre a imagem - isso é para definir seu 'ponto focal'. O que isso faz é garantir que, onde quer que esse ponto esteja posicionado na imagem, esteja sempre 'em foco', não importa o tamanho ou a orientação da imagem.

Isso pode ser realmente útil para imagens em que o 'foco' da sua imagem enviada não está totalmente centralizado - clique / arraste o ponto focal sobre o foco da imagem para garantir que, não importa o que seja cortado em telas diferentes, o foco seja frontal e central .

Depois de definir seu corte, zoom e pontos focais, basta clicar em 'salvar' para aplicar o corte e, em seguida, clicar em 'salvar' novamente no editor de cabeçalho para aplicar suas alterações.

Artista: Anna Bassy

4. Personalize a altura do cabeçalho móvel

A linha entre o que uma tela móvel e uma tela não móvel está sendo borrada o tempo todo - veja um tablet, por exemplo. Não é grande o suficiente para ser um 'desktop', mas não é pequeno o suficiente para uma tela de celular.

Quando você visualiza sites em muitos tablets em 'paisagem', o site pode aparecer da mesma forma que em uma tela de desktop ou laptop. Vire o tablet de lado como um 'retrato', e tudo pode mudar - a redução da largura da tela pode apresentar mais elementos 'móveis' mais próximos do que você pode ver em um telefone.

A maioria dos temas do Bandzoogle são configurados por padrão para mostrar um cabeçalho de 'altura total' em telas orientadas para retrato - isso pode ser problemático se a imagem do cabeçalho contiver foco nos lados esquerdo e direito.

Para isso, desde que seu tema não esteja definindo seu cabeçalho como uma imagem de fundo para suas páginas, você pode ativar a opção 'altura de cabeçalho móvel personalizada' nas configurações de 'cabeçalho' por meio da guia 'editar tema'.

Uma vez ativado, clique no ícone 'visualização móvel' no editor de temas e ajuste o controle deslizante 'altura do cabeçalho (móvel)' - isso pode ajudar a ajustar o espaço em que sua imagem está para corresponder melhor às proporções da imagem e mostrar mais do imagem. Basta clicar em 'salvar' depois de definir isso!

5. Adicione filtros

Finalmente, você pode adicionar algumas vibrações realmente incríveis às suas imagens de cabeçalho definindo um filtro. Traga o blues, dê à sua imagem uma aparência mais dos anos 70 ou use preto e branco vintage. Tem muitas opções aqui!

Basta clicar na guia 'editar tema' no painel de controle do Bandzoogle e, nas opções de 'cabeçalho', você pode selecionar um filtro pré-fabricado ou criar seu próprio estilo de filtro personalizado.

Artista: Carleen Williams

Embora às vezes possa ser um pouco difícil de entender, o consenso geral com os web designers é que responsivo é o melhor caminho a percorrer em termos de seu site.

Isso garante que seu site ficará ótimo e legível em todas as telas disponíveis agora e no futuro, e sites como o Google classificarão você melhor se seu site usar boas práticas responsivas.

A longo prazo, também é uma grande economia de tempo para aqueles que gerenciam seus próprios sites - saber a melhor maneira de otimizar suas imagens e conteúdo é o primeiro passo, e o Bandzoogle cuida do resto!

Crie um site de música com imagens responsivas em apenas alguns cliques. Construa seu site com o Bandzoogle hoje!