La giusta dimensione dell’immagine per il tuo sito web: 10-Minute Monday

Il video qui sotto mostra come trovo la giusta dimensione delle immagini per qualsiasi progetto web

Cosa? Niente immagini?

Se sei come la maggior parte delle persone, quando hai scaricato il tuo primo tema WordPress ti sei chiesto cosa fosse successo alle immagini – quelle stesse immagini che ti hanno spinto a comprare quel tema.

Una volta che hai superato la tua prima GRANDE delusione, che il tuo tema NON era dotato di immagini, la domanda successiva che probabilmente ti sei posto è stata: ‘Come diavolo faccio a far sì che il mio tema WordPress assomigli alla demo?’

Se iniziate a scoprire quale dimensione dell’immagine ha usato la demo del vostro tema, avrete presto un sito migliore della demo perché avrà le immagini che meglio rappresentano voi e la vostra attività.

La giusta dimensione delle immagini

Quando sto costruendo un sito WordPress per i miei clienti, di solito ho bisogno di 4 immagini di dimensioni diverse:

  1. home page / Front Page Header Image (a.k.a. Hero image)
  2. banner dell’intestazione della pagina,
  3. immagini dei post del blog, e
  4. immagini della sidebar.

Come trovare la giusta dimensione

Le informazioni di MEDIA SETTINGS sotto APPEARANCE sono un ottimo punto di partenza perché vi daranno…

  • la migliore larghezza dell’immagine per un post del blog (1024 è per il tema Showcase Pro), e
  • quale dimensione dell’immagine funzionerà meglio nella barra laterale del tuo tema (300)

…MA non ti darà le dimensioni per la tua HOME page / immagine di intestazione della prima pagina o banner di intestazione della pagina.

Troverete le dimensioni della vostra HOME page / Front Page Header Image sotto APPEARANCE -> CUSTOMIZE -> FRONT PAGE HEADER IMAGE.

In questo esempio, la dimensione è 1600 px X 1050 px.

Banner d’intestazione di pagina

Trovare questa dimensione è un po’ più complicato.

Per esempio, il banner d’intestazione demo della pagina TEAM di Showcase Pro è molto più sottile dell’immagine d’intestazione HOME / Front Page, MA la documentazione del tema non mi dice quale dimensione dare al banner d’intestazione della pagina TEAM.

Per trovare qualsiasi dimensione dell’immagine del banner di intestazione della pagina

Inserisci l’URL della demo del tuo tema nel browser Firefox. Usa Firebug per ottenere le dimensioni esatte dell’immagine utilizzata.

  1. Fate clic con il tasto destro del mouse / Control + Click (Mac) sulla pagina web
  2. Scegliete View Page Info
  3. Scegliete Media
  4. Scorrete fino a Background
  5. Selezionate l’immagine che è uguale al banner dell’intestazione
  6. Dimensions: ti dà l’esatta dimensione dell’immagine usata nella demo del tema

La dimensione del banner dell’intestazione TEAM è l’esatta dimensione del banner dell’intestazione della pagina HOME (1600 px X 1050 px), anche se viene visualizzato più sottile.

Guarda il video qui sotto per vedere come uso Firefox per trovare la giusta dimensione dell’immagine.

Cosa? Non tutte le immagini dell’header banner hanno le stesse dimensioni

Quando ho controllato l’header banner del BLOG, sono rimasto sorpreso nell’apprendere che non aveva le stesse dimensioni dell’head banner del TEAM. Invece di essere 1600 x 1050, era 1800 px X 960px.

I banner di testata di questo tema si ridimensionano per mantenere l’aspetto coerente in tutto il sito.

La tua sfida di design sarà trovare immagini che stiano bene in spazi lunghi e stretti.

La “giusta” dimensione dell’immagine del post del blog

Utilizzerai questi stessi passi per trovare la dimensione dell’immagine demo del post del blog:

  • Fai clic con il tasto destro del mouse / Control + Click (Mac) sulla pagina web
  • Scegli informazioni sulla pagina
  • Scegli Media
  • Scorri fino a Sfondo
  • Seleziona l’immagine che è uguale al banner dell’intestazione
  • Dimensioni: ti dà la dimensione esatta dell’immagine utilizzata nella demo del tema
900 px X 600 px

Consiglio finale

Le immagini per il web dovrebbero essere 72 dpi e RGB.

Le immagini per la stampa dovrebbero essere 300 dpi e CMYK.

Guardami mentre uso Firefox per trovare la giusta dimensione delle immagini nella demo del tema

Hai bisogno di aiuto con le tue immagini?

Partecipa a 10-Minute Monday dove condivido consigli e trucchi per chi non è un designer e vuole migliorare la propria immagine professionale.

Puoi anche telefonarmi o mandarmi una mail, in qualsiasi momento. Contact

Join Me Live on My Next 10-Minute Monday

Ricevi un invito ad unirti a me LIVE nel mio prossimo 10-Minute Monday, e ricevi una lista delle mie risorse gratuite preferite per una grande fotografia che puoi usare sul tuo sito web o in qualsiasi progetto.

È LIVE e dura solo 10 minuti. Le sessioni sono brevi e focalizzate su un argomento.

E poiché è LIVE puoi fare domande. Cerco anche di mantenere le sessioni brevi perché so che sei impegnato e non hai tempo da perdere.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *