5 formas de optimizar las imágenes en el sitio web de tu banda

Hoy en día, los sitios web pueden aparecer en cientos de tamaños de pantalla diferentes, incluso en diferentes orientaciones en el mismo dispositivo (horizontal o vertical). Las pantallas en las que las personas ven su sitio pueden tener solo unos cientos de píxeles de ancho en dispositivos móviles, hasta miles de píxeles de ancho en monitores de pantalla ancha de alta definición más nuevos.

Debido a que las nuevas tecnologías proporcionaron una variedad de tamaños de pantalla con los que las personas pueden ver su sitio, también requería una nueva forma de pensar sobre el diseño del sitio que garantizara que los sitios se vieran bien en cualquier pantalla: grande o pequeña, alta o ancha.

¡Aquí es donde entra en juego el concepto de diseño de sitios web 'responsive'!

Cómo funciona el diseño receptivo

Un sitio web receptivo está diseñado para que el posicionamiento y el tamaño sean 'relativos' al espacio en el que se ven. Cuando su sitio se ve en diferentes pantallas, se adaptará al estirarse o contraerse; moverse para adaptarse al espacio disponible.

Cualquier foto que cargue en su sitio web de Bandzoogle se estirará y escalará según el tamaño del "espacio" en el que se encuentre la imagen.

Con las imágenes de encabezado, esto es especialmente importante porque las imágenes receptivas se 'ajustarán' lo mejor posible al marco. Menos trabajo para recortar un montón de imágenes significa más tiempo, bueno, tocando música, ¿no?

Veamos cinco formas de optimizar las imágenes en el sitio web de tu banda para que tu diseño sea perfecto.

1. Elige la imagen adecuada

El diseño receptivo escala los elementos de la página, como las imágenes de su encabezado, 'proporcionalmente' al tamaño original del archivo de imagen que usa, y lo hará 'en relación' con el espacio en el que se encuentra la imagen en la página.

Esto significa que las proporciones de la imagen se mantienen en todos los dispositivos, y las imágenes siempre intentarán "llenar" el espacio en el que se encuentran lo mejor que puedan. Esto puede dar como resultado que las imágenes de encabezado tengan partes de la imagen que aparezcan 'cortadas'; esto es inevitable en el diseño receptivo, pero elegir una imagen que se ajuste bien ayudará.

Artista: Tragedy Ann

Escritorio y pantalla ancha

En una computadora portátil, las imágenes de encabezado se escalarán en relación con el ancho de la pantalla. En un dispositivo móvil, la imagen se escalaría según la altura de la pantalla.

En otras palabras, su imagen siempre se escalará en relación con el lado más largo del espacio.

Ahora, imagine esto en una pantalla que tiene 1,000 píxeles de ancho: las pantallas de computadoras de escritorio / portátiles son más anchas que altas, y digamos que esta misma pantalla también tiene 570 píxeles de alto (aproximadamente la relación 16: 9 para muchas pantallas).

En este escenario, nuestra imagen tiene 1000 píxeles de ancho en esta pantalla, pero se ha escalado a 900 píxeles de alto, lo que significa que, en un espacio que tiene solo 570 píxeles de alto, termina cortando más de 300 píxeles en la parte superior e inferior de la imagen. Imágenes sin cabeza, ¡ay!

Orientación móvil y vertical

Haga los mismos cálculos con el ejemplo de la pantalla móvil que tiene 600 píxeles de alto; digamos que esta misma pantalla tiene solo unos 320 píxeles de ancho. Cuando la imagen se adapte a esta pantalla, más de la mitad de la imagen se cortará a ambos lados (recuerde que el tamaño de la imagen se reduce a 667 píxeles de ancho en una pantalla vertical de 600 píxeles de alto).

Esta es una buena manera de molestar al baterista en el borde de la foto de tu banda, ¡lo cual puede ser divertido! Pero aún...

Optimice y luego cargue sus archivos

Una buena metáfora que puede usar es imaginar que está en una galería de arte enmarcando cuadros: si coloca el paisaje de Monet en un marco de retrato de 'La madre de Whistler', ese marco cortará muchos nenúfares realmente agradables al costado de tu pintura

Aquí es donde puede complicarse: los creadores de sitios no pueden anticipar las imágenes que desea usar (o lo que se muestra en ellas), pero ser selectivo con las imágenes que agregar es un buen primer paso.

Algunos consejos fáciles para seleccionar la imagen correcta para su encabezado:

• Evite usar imágenes que hayan sido 'recortadas': cuanto más espacio o relleno tenga alrededor del 'enfoque' de su imagen, es menos probable que el enfoque se corte en diferentes pantallas.
  
• Use imágenes grandes: 2000 x 1800 a un tamaño de 72 ppp generalmente funciona bien para la mayoría de los temas de Bandzoogle y ayuda a garantizar que sus imágenes se vean bien en todas las pantallas.
  
• Trate de usar imágenes que estén cerca de 'cuadradas' en orientación. No tiene que ser una imagen cuadrada perfecta, pero lo más cerca posible de la misma altura y anchura en su imagen generalmente funcionará muy bien en cualquier pantalla. Este espacio adicional le brinda espacio para respirar sin importar en qué orientación se vea su sitio.
  
• Trate de evitar el uso de imágenes con texto o logotipos en la imagen en sí. ¡Definitivamente no desea que el texto importante o su marca queden cortados para sus visitantes!
  
• En su lugar, agregue su logotipo en la opción 'título/logotipo' de su editor de temas de Bandzoogle. A continuación, agregue el texto que desee en el encabezado a la 'función de encabezado Llamada a la acción'. De esta forma, el borde de la pantalla no cortará sus mensajes importantes.

Artista: Martín y James

2. Recorta para adaptarlo a tu tema

Si ya ha cargado imágenes, Bandzoogle viene con algunas herramientas excelentes para que se muestren aún mejor.

Algunos de nuestros diseños de plantillas se mostrarán en "pantalla completa" cuando se carguen, tienen alturas de encabezado ajustables, pueden mostrar imágenes de encabezado en un espacio limitado, en diferentes formas (como la plantilla Spotlight) o incluso establecer su imagen de encabezado como fondo para tus páginas (Slice, por ejemplo).

Es fácil probar diferentes temas con diferentes opciones de encabezado: puede cambiar el diseño del tema a través de 'editar tema' > 'ver temas', seleccione el tema que desee, personalice ese tema en el editor de diseño, haga clic en 'guardar' y publique su cambios.

Siempre que el tema no configure su encabezado como una imagen de fondo de página completa, también puede ajustar el zoom relativo y el posicionamiento de las imágenes que agrega.

En 'editar contenido', haga clic en la imagen del encabezado en la pestaña de edición de contenido, luego, en el editor de encabezado, haga clic en el enlace 'recortar' debajo de la miniatura de la imagen del encabezado.

A continuación, puede ajustar el zoom con el control deslizante de zoom y hacer clic o arrastrar la imagen a una ubicación relativa.

3. Establecer un punto focal

Al recortar su imagen de encabezado en el editor de encabezado, también puede notar un pequeño punto azul sobre la imagen; esto es para establecer su 'punto focal'. Lo que esto hace es garantizar que dondequiera que se coloque este punto en la imagen, siempre estará 'enfocado', sin importar el tamaño o la orientación de la imagen.

Esto puede ser realmente útil para las imágenes en las que el 'enfoque' de la imagen cargada no está totalmente centrado: hacer clic o arrastrar el punto focal sobre el enfoque de la imagen garantizará que, independientemente de lo que se corte en diferentes pantallas, el enfoque esté al frente y al centro. .

Una vez que configure su recorte, zoom y puntos focales, simplemente haga clic en 'guardar' para aplicar el recorte y luego haga clic en 'guardar' nuevamente en el editor de encabezado para aplicar sus cambios.

Artista: Anna Bassy

4. Personaliza la altura del encabezado móvil

La línea entre lo que es una pantalla móvil y una pantalla que no es móvil se difumina todo el tiempo; por ejemplo, una tableta. No es lo suficientemente grande para ser un 'escritorio', pero no lo suficientemente pequeño para la pantalla de un móvil.

Cuando ve sitios en muchas tabletas en 'horizontal', el sitio puede aparecer como en la pantalla de una computadora de escritorio o portátil. Gire esa tableta de lado como un 'retrato', y todo puede cambiar: la reducción del ancho de la pantalla puede presentar más elementos 'móviles' más cercanos a lo que puede ver en un teléfono.

La mayoría de los temas de Bandzoogle están configurados de manera predeterminada para mostrar un encabezado de "altura completa" en pantallas orientadas a retratos; esto puede ser problemático si la imagen de su encabezado está enfocada hacia los lados izquierdo y derecho.

Para esto, siempre que su tema no esté configurando su encabezado como una imagen de fondo para sus páginas, puede habilitar la opción 'altura de encabezado móvil personalizada' en la configuración de 'encabezado' a través de su pestaña 'editar tema'.

Una vez habilitado, haga clic en el ícono de 'vista previa móvil' en el editor de temas y ajuste el control deslizante 'altura del encabezado (móvil)'; esto puede ayudar a ajustar el espacio en el que se encuentra su imagen para que coincida mejor con las proporciones de su imagen y muestre más de la imagen. ¡Simplemente haga clic en 'guardar' después de configurar esto!

5. Añade filtros

Finalmente, puede agregar algunas vibraciones realmente sorprendentes a sus imágenes de encabezado configurando un filtro. Saca a relucir el blues, dale a tu foto un aspecto más de película de los años 70, o ve al blanco y negro vintage. ¡Hay muchas opciones aquí!

Simplemente haga clic en la pestaña 'editar tema' en su panel de control de Bandzoogle, y debajo de las opciones de 'encabezado', puede seleccionar un filtro prefabricado o crear su propio estilo de filtro personalizado.

Artista: Carleen Williams

Si bien a veces puede ser un poco complicado, el consenso general con los diseñadores web es que la capacidad de respuesta es la mejor manera de hacerlo en términos de su sitio web.

Garantiza que su sitio se verá genial y será legible en todas las pantallas disponibles ahora, así como en el futuro, y sitios como Google lo clasificarán mejor si su sitio utiliza buenas prácticas de respuesta.

A la larga, también es un gran ahorro de tiempo para aquellos de ustedes que administran sus propios sitios: conocer la mejor manera de optimizar sus imágenes y contenido es el primer paso, ¡y Bandzoogle se encarga del resto!

Cree un sitio web de música con imágenes receptivas con solo unos pocos clics. ¡Cree su sitio web con Bandzoogle hoy!