5 modi per ottimizzare le immagini sul sito web della tua band

Al giorno d'oggi, i siti Web possono essere visualizzati su centinaia di dimensioni dello schermo diverse, anche con orientamenti diversi sullo stesso dispositivo (orizzontale o verticale). I display su cui le persone vedono il tuo sito possono essere larghi solo poche centinaia di pixel sui dispositivi mobili, fino a migliaia di pixel sui monitor widescreen ad alta definizione più recenti.

Poiché le nuove tecnologie hanno fornito una gamma di dimensioni dello schermo con cui le persone possono vedere il tuo sito, hanno anche richiesto un nuovo modo di pensare alla progettazione del sito che garantisse che i siti fossero fantastici su qualsiasi schermo, grande o piccolo, alto o largo.

È qui che entra in gioco il concetto di design del sito Web "reattivo"!

Come funziona il design reattivo

Un sito web reattivo è costruito in modo che il posizionamento e le dimensioni siano "relativi" allo spazio in cui vengono visualizzati. Quando il tuo sito viene visualizzato su display diversi, si adatterà allungandosi o restringendosi; muoversi per adattarsi allo spazio disponibile.

Qualsiasi foto che carichi sul tuo sito Web Bandzoogle si allungherà e ridimensionerà a seconda di quanto è grande lo "spazio" in cui si trova l'immagine.

Con le immagini di intestazione, questo è particolarmente importante perché le immagini reattive si "adatteranno" nel miglior modo possibile al frame. Meno lavoro per ritagliare un mucchio di immagini significa più tempo, beh, ascoltare musica, giusto?

Diamo un'occhiata a cinque modi per ottimizzare le immagini sul sito Web della tua band per ottenere il design giusto.

1. Scegli l'immagine giusta

Il design reattivo ridimensiona gli elementi della pagina come le immagini dell'intestazione "proporzionalmente" alla dimensione originale del file immagine che usi e lo farà "relativamente" allo spazio all'interno dell'immagine è impostata sulla pagina.

Ciò significa che le proporzioni dell'immagine vengono mantenute su tutti i dispositivi e le immagini cercheranno sempre di "riempire" lo spazio in cui si trovano nel miglior modo possibile. Ciò può comportare che le immagini di intestazione con parti dell'immagine appaiano "tagliate" - questo è inevitabile nel design reattivo, ma la scelta di un'immagine che si ritaglia bene per adattarla, aiuterà.

Artista: tragedia Ann

Desktop e widescreen

Su un laptop, le immagini dell'intestazione verranno ridimensionate in base alla larghezza dello schermo. Su un dispositivo mobile, l'immagine viene ridimensionata in base all'altezza dello schermo.

In altre parole, l'immagine verrà sempre ridimensionata in relazione al lato più lungo dello spazio.

Ora, immaginalo su uno schermo largo 1.000 pixel: gli schermi di desktop / laptop sono più larghi che alti e diciamo che lo stesso schermo è alto anche 570 pixel (circa il rapporto 16:9 per molti display).

In questo scenario, la nostra immagine è larga 1.000 pixel su questo display, ma è stata ridimensionata a 900 pixel di altezza, il che significa che, in uno spazio alto solo 570 pixel, finisce per tagliare oltre 300 pixel nella parte superiore e inferiore di la foto. Immagini senza testa, cavolo!

Orientamento mobile e verticale

Fai la stessa matematica con l'esempio dello schermo mobile che è alto 600 pixel: supponiamo che lo stesso display sia largo solo circa 320 pixel. Quando l'immagine si adatta a questo display, più della metà dell'immagine verrebbe tagliata su entrambi i lati (ricorda che l'immagine viene ridimensionata fino a 667 pixel di larghezza su uno schermo verticale alto 600 pixel).

Questo è un buon modo per infastidire il batterista ai margini della foto della tua band, il che può essere divertente! Ma ancora...

Ottimizza, quindi carica i tuoi file

Una buona metafora che puoi usare è immaginare di essere in una galleria d'arte a inquadrare le immagini: se metti il ​​paesaggio di Monet in una cornice per ritratto "La madre di Whistler", quella cornice taglierà molte belle ninfee sul lato di il tuo dipinto

È qui che può diventare complicato: i costruttori di siti non possono anticipare le immagini che si desidera utilizzare (o ciò che viene mostrato in esse), ma essere selettivi con quali immagini aggiungere è un buon primo passo.

Alcuni semplici suggerimenti per selezionare l'immagine giusta per la tua intestazione:

• Evita di utilizzare immagini che sono state "ritagliate ravvicinate": maggiore è lo spazio o il riempimento che hai attorno alla "messa a fuoco" dell'immagine, meno è probabile che la messa a fuoco venga tagliata su schermi diversi.
  
• Usa immagini di grandi dimensioni: 2000 x 1800 a 72 dpi di solito funziona bene per la maggior parte dei temi Bandzoogle e aiuta a garantire che le tue immagini abbiano un bell'aspetto su ogni display.
  
• Prova a utilizzare immagini vicine al "quadrato" nell'orientamento: non deve essere un'immagine quadrata perfetta, ma il più vicino possibile alla stessa altezza e larghezza nella tua immagine di solito funzionerà perfettamente su qualsiasi display. Questo spazio extra ti dà respiro, indipendentemente dall'orientamento in cui viene visualizzato il tuo sito.
  
• Cerca di evitare di utilizzare immagini con testo o loghi nell'immagine stessa: non vuoi assolutamente che il testo importante o il tuo marchio vengano tagliati per i tuoi visitatori!
  
• Aggiungi invece il tuo logo sotto l'opzione "titolo/logo" del tuo editor di temi Bandzoogle. Quindi aggiungi il testo che desideri nell'intestazione alla "funzione di intestazione Call to Action". In questo modo, i tuoi messaggi importanti non verranno tagliati dal bordo del display.

Artista: Martin e James

2. Ritaglia per adattarlo al tuo tema

Se hai già caricato delle immagini, Bandzoogle include alcuni ottimi strumenti per farle visualizzare ancora meglio!

Alcuni dei nostri modelli di design visualizzeranno "schermo intero" quando vengono caricati, hanno altezze di intestazione regolabili, possono mostrare immagini di intestazione in uno spazio limitato, in forme diverse (come il modello Spotlight) o persino impostare l'immagine di intestazione come sfondo su le tue pagine (Slice, per esempio).

È facile provare diversi temi con diverse opzioni di intestazione: puoi modificare il design del tema tramite "modifica tema" > "visualizza temi", seleziona il tema desiderato, personalizza quel tema nell'editor di design, fai clic su "salva" e pubblica il tuo i cambiamenti.

A condizione che il tema non imposti l'intestazione come immagine di sfondo a pagina intera, puoi anche regolare lo zoom relativo e il posizionamento delle immagini che aggiungi.

In "modifica contenuto", fai clic sull'immagine dell'intestazione nella scheda di modifica del contenuto, quindi nell'editor dell'intestazione, fai clic sul collegamento "ritaglia" sotto la miniatura dell'immagine dell'intestazione.

È quindi possibile regolare lo zoom con il dispositivo di scorrimento dello zoom e fare clic/trascinare l'immagine in una posizione relativa.

3. Impostare un punto focale

Quando ritagli l'immagine dell'intestazione nell'editor dell'intestazione, potresti anche notare un piccolo punto blu sull'immagine: questo serve per impostare il tuo "punto focale". Ciò che fa è garantire che ovunque questo punto sia posizionato sull'immagine, sarà sempre "a fuoco", indipendentemente dalle dimensioni o dall'orientamento dell'immagine.

Questo può essere davvero utile per le immagini in cui la "messa a fuoco" dell'immagine caricata non è completamente centrata: fare clic/trascinare il punto focale sopra la messa a fuoco dell'immagine assicurerà che, indipendentemente da ciò che viene tagliato su schermi diversi, la messa a fuoco è anteriore e centrale .

Dopo aver impostato il ritaglio, lo zoom e i punti focali, fai clic su "salva" per applicare il ritaglio, quindi fai nuovamente clic su "salva" nell'editor di intestazione per applicare le modifiche.

Artista: Anna Bassy

4. Personalizza l'altezza dell'intestazione mobile

Il confine tra ciò che uno schermo mobile e uno schermo non mobile è sempre offuscato: prendi un tablet, ad esempio. Non abbastanza grande per essere un "desktop", ma non abbastanza piccolo per uno schermo mobile.

Quando visualizzi i siti su molti tablet in "orizzontale", il sito potrebbe apparire come su uno schermo desktop o laptop. Ruota il tablet di lato come un "ritratto" e tutto può cambiare: la riduzione della larghezza dello schermo può presentare più elementi "mobili" più vicini a ciò che potresti vedere su un telefono.

La maggior parte dei temi di Bandzoogle sono impostati per impostazione predefinita per mostrare un'intestazione "a tutta altezza" negli schermi orientati al ritratto: questo può essere problematico se l'immagine dell'intestazione contiene lo stato attivo verso i lati sinistro e destro.

Per questo, a condizione che il tuo tema non imposti l'intestazione come immagine di sfondo per le tue pagine, puoi abilitare l'opzione "altezza intestazione mobile personalizzata" nelle impostazioni "intestazione" tramite la scheda "modifica tema".

Una volta abilitato, fai clic sull'icona "anteprima mobile" nell'editor del tema e regola il dispositivo di scorrimento "altezza intestazione (mobile)": questo può aiutare a regolare lo spazio in cui si trova l'immagine in modo che corrisponda meglio alle proporzioni dell'immagine e mostrare più del Immagine. Basta fare clic su "Salva" dopo averlo impostato!

5. Aggiungi filtri

Infine, puoi aggiungere delle vibrazioni davvero sorprendenti alle tue immagini di intestazione impostando un filtro. Tira fuori il blues, dai alla tua foto un aspetto più da "film anni '70" o vai in bianco e nero vintage. Ci sono molte opzioni qui!

Basta fare clic sulla scheda "modifica tema" nel pannello di controllo di Bandzoogle e, sotto le opzioni "intestazione", puoi selezionare un filtro prefabbricato o creare il tuo stile di filtro personalizzato.

Artista: Carleen Williams

Anche se a volte può essere un po' perplesso, il consenso generale con i web designer è che reattivo è il modo migliore per andare in termini di sito web.

Garantisce che il tuo sito avrà un bell'aspetto e sarà leggibile su ogni schermo disponibile ora, così come in futuro, e siti come Google ti classificheranno meglio se il tuo sito utilizza buone pratiche di risposta.

A lungo termine, è anche un ottimo risparmio di tempo per quelli di voi che gestiscono i propri siti: conoscere il modo migliore per ottimizzare le immagini e i contenuti è il primo passo e Bandzoogle si occupa del resto!

Crea un sito Web musicale con immagini reattive in pochi clic. Costruisci il tuo sito web con Bandzoogle oggi stesso!