CORRECT IMAGE SIZE, DO YOU HAVE IT?

CORRECT IMAGE SIZE, DO YOU HAVE IT?

On February 18, 2016, Posted by , In Uncategorised, With No Comments

IMAGE SIZE: Everybody loves some visuals, especially when they can give your social media a significant boost.

But what is the right size for your images? How to improve their appearance?

In order to achieve this, you should focus on Size and Shape, they literally define how the picture will look on the web page.

Also, keep in mind that every social media has its own rules concerning images.

 

A general and quick overview

These are the recommended sizes for the social media we are going to analyse (all sizes are in pixels):

  • FACEBOOK - 1200 x 628

  • TWITTER - 1024 x 512

  • LINKEDIN - 800 x 800

  • GOOGLE+ - 800 x 1200

  • PINTEREST - 735 x 1102

  • INSTAGRAM - 1080 x 1080

A good starting point would be using the Horizontal (landscape, 1024 x 512) and Vertical (portrait, 800 x 1200) templates. Most of today's image editing programs are perfectly suited for creating these 2 templates.

 

Facebook

FB will scale the uploaded image according to its aspect ratio.

Here are some examples:

Horizontal: 1024 x 512 → 470 x 235

1024x512

This applies to smaller images too, but they'll look blurry due to upscaling.

 

470x235

Vertical: 500 x 700 → 281 x 394

500x700

 

281x394

Square: 800 x 800 → 400 x 400

800 x 800

 

400 x 400

Image previews for shared links → 470 x 246

Keep in mind that any image exceeding these dimensions will be cropped from the top to the bottom.

Facebook chooses the image by looking for the page's Open Graph tags (og:image), which specify which image should be showed in FB's news feed. The og:image tag can be manually written in the <head> section of every page of your website or you can let it be handled by a wordpress plugin.

If your link does not have the correct og:image tags or the picture is too small, FB will display it as a little 158 x 158 thumbnail, often regardless of the picture's original aspect ratio. If the image is very tall (eg. infographics), it could be resized to 158 x 237. This could be very useful if that's exactly what you wanted.

Twitter

Twitter's timeline images have a 506 x 253 resolution, meaning that they have a perfect 2:1 aspect ratio. Bigger images will be perfectly scaled and intact as long as the aspect ratio is 2:1.

Uploading a smaller image will result in a white space placed at the right of the picture. Images without a 2:1 aspect ratio will be cropped.

Luckily, Twitter's cropping system is a bit more smart than FB's one and will crop images according to their dominant visual elements.

For example (results may be different):

GT-R

 

T506 x 253

Twitter Cards

Let's focus on two types that are more suited for content sharing:

  • Summary Card
  • Summary Card with large image

Sharing a URL from a site with the correct Twitter Card code allows the summary card to show headline, description, image and link all in one place.

This card pulls the information via HTML tags, usually the same used by Facebook.

A plugin can help you managing that.

Keep in mind these rules when you use standard summary cards:

  • Minimum size of 120 x 120 and less than 1MB
  • Expanded tweets with detail page will have their pictures cropped to a 4:3 aspect ratio and will be resized to 109 x 82
  • Embed tweets will be cropped and resized to 120 x 120.

Summary card with large images should have pictures with a minimum resolution of 280 x 150 and less than 1MB in size.

In this case, all images will be scaled to fit a 506px width.

Landscapes and portraits will be automatically resized to 506 x ... (height not fixed). Squares pictures will be scaled to 506 x 506.

Smaller images will be aligned to the left with white space filling the empty space to the right.

The cropping criteria here is a little different:

  • Square and portraits are cropped from the bottom up
  • Landscapes are cropped from the outside in.

 

LinkedIn

Shared links and articles will have a thumbnail picture sized 180 x 110 px.

Directly uploaded images won't exceed a width of 350 px and the height will be scaled accordingly.

Example: 700 x 349 → 350 x 197

700x394

 

350x197

LinkedIn Showcase Pages are an exception: thumbnails and featured images can be either 180 x 110 or 442 x 248.

Examples:

180x110

 

442x248

LinkedIn uses the same Open Graph tags as Facebook and Twitter, so once you have optimized your site for them, you should be good for this one too.

Another way for sharing content on LinkedIn is to publish articles and make them appear on other people's homepages with LinkedIn Pulse. As you might expect, this function also allows placing featured images in the articles.

The featured image on Pulse updates is 180 x 110 (yes the same as those used for link thumbnails). If the article is in the recommended list, the thumbnail will be 70 x 37.

Thumbnails in the left-hand column of the Pulse page will be 70 x 70.

The picture at the top of the article is 698 x 400.

Example:

698x400

Google+

Featured images for shared links won't be wider than 426 px and the height will be scaled accordingly. This will also be applied to directly uploaded pictures.

Examples (both pictures are 426 px wide):

426ex1

 

426ex2

Just like all previous social media, G+ uses Open Graph tags. If these tags are not found, or the image is smaller than 426 x ... , Google may switch it with a 150 x 150 thumbnail.

In some cases G+ will display pictures in full-width size. The photo will be 886 px wide and its original aspect ratio will be preserved.

Example:

886ex

Pinterest

Pinterest suggests an aspect ratio between 2:3 and 1:3.5 and minimum width of 600 px

Examples:

2:3 → 600 x 900 or 800 x 1200

1:3.5 → 600 x 1200 or 800 x 2800

Pictures with a ratio over 1:3.5 will be cropped from the bottom up. An "Expand Pin" button will appear in the cropped area which will show the entire picture when clicked on.

That being said, there two more things to focus on: Feed images and Expanded Pinned images.

Feed Pictures

Feed images are 235 px wide and their aspect ratio will be preserved when scaled.

Example:

235ex

Pinned pictures

Pinned images will expand when you click on them and will be 736 px wide. Again, aspect ratio will be preserved.

Example:

736ex

Instagram

Instagram is probably the easiest social media to deal with: all its images are square!

Feed (510 x 510)

510x510

Thumbnail (161x161)

161x161

Header (small → 204 x 204 or large → 409 x 409)

204x204

 

 

409x409

This concludes our small overview about image size in social media.

Keep in mind that social media are in constant evolution: by the time you read this, they may have already changed.

Leave a Reply

LA DIMENSIONE GIUSTA, LA TUA IMMAGINE CE L’HA?

LA DIMENSIONE GIUSTA, LA TUA IMMAGINE CE L’HA?

On February 18, 2016, Posted by , In Non categorizzato, With No Comments

DIMENSIONI IMMAGINE: Tutti amano avere qualcosa da guardare, specialmente quando quest'ultima può dare un boost significativo ai tuoi social media.

Ma qual'è la dimensione corretta per le tue immagini? E come si possono migliorare?

Per fare questo devi concentrarti su due cose: Dimensione e Forma. Sono i fattori che regolano letteralmente l'aspetto dell'immagine.

Inoltre, tieni a mente che ogni social ha le proprie regole riguardo le immagini.

 

Una rapida panoramica

Come regola generale, queste sono le dimensioni immagine consigliate per i social media che andremo ad analizzare più in profondità (tutte le dimensioni sono espresse in pixel):

  • FACEBOOK - 1200 x 628

  • TWITTER - 1024 x 512

  • LINKEDIN - 800 x 800

  • GOOGLE+ - 800 x 1200

  • PINTEREST - 735 x 1102

  • INSTAGRAM - 1080 x 1080

Per partire bene sarebbe meglio utilizzare i template  Orizzontale (panoramico, 1024 x 512) e Verticale (ritratto, 800 x 1200). Puoi usare la maggior parte dei programmi di editing immagine per creare i due template.

 

Facebook

FB scala l'immagine caricata in base alle sue proporzioni.

Per esempio:

Orizzontale: 1024 x 512 → 470 x 235

1024x512

Questo succede  anche con immagini più piccole, anche se ovviamente appariranno tutte pixellate a causa dell'upscaling.

 

470x235

Verticale: 500 x 700 → 281 x 394

500x700

 

281x394

Quadrata: 800 x 800 → 400 x 400

800 x 800

 

400 x 400

Anteprima immagini link condivisi → 470 x 246

Considera che le immagini che superano queste dimensioni verranno ritagliate partendo dall'alto.

Facebook "sceglie" le immagini in base ai tag Open Graph (og:image) pensati appositamente per la pagina Novità.Il tag può essere inserito manualmente nella sezione <head> presente in ogni pagina del tuo sito, oppure puoi affidarti a un plugin di wordpress.

Se il tuo link non ha il tag immagine corretto, o l'immagine è troppo piccola, FB la farà apparire come un piccolo thumbnail 158 x 158 ignorandone spesso l'aspetto originale. Se l'immagine è parecchio alta (es. un'infografica) potrebbe venire ridimensionata a 158 x 237, molto utile se è esattamente ciò che volevi.

Twitter

Le immagini nella timeline di Twitter hanno una risoluzione di  506 x 253, questo vuol dire che hanno una proporzione perfetta di 2:1. Le immagini più grandi vengono scalate senza alterare niente fintanto che le proporzioni sono di 2:1.

Se l'immagine è più piccola, una sfondo bianco andrà a riempire lo spazio inutilizzato. Le immagini con proporzione sbagliata verranno ritagliate.

Fortunatamente il sistema di Twitter è più intelligente di quello di FB e le immagini vengono ritagliate in base ai loro elementi visivi dominanti.

Per esempio (i risultati potrebbero variare):

GT-R

 

T506 x 253

Card di Twitter

Concentriamoci sui due tipi più adatti alla condivisione contenuti:

  • Sommario
  • Sommario con immagini grandi

Le twitter card permettono di mostrare titolo, descrizione, immagine e link tutto insieme quando si va a condividere un URL.

Queste card attingono le informazioni tramite tag HTML, solitamente gli stessi usato da Facebook.

Un plugin ti può dare una mano per quello.

Tieni a mente queste regole quando utilizzi le card sommario standard:

  • Dimensione minima 120 x 120 e meno di 1 MB
  • I tweet espansi con pagina dettaglio hanno le immagini ritagliate con proporzione di 4:3  e ridimensionate a 109 x 82
  • I tweet integrati vengono ritagliati e ridimensionati a 120 x 120.

Le card sommario con immagini grandi devono avere una risoluzione minima di 280 x 150 e pesare meno di 1 MB.

In questo caso tutto le immagini vengono scalate in modo da rispettare la larghezza di 506 px.

I panorami e i ritratti vengono ridimensionati automaticamente a  506 x ... (altezza variabile). Le immagini quadrate vengono ridimensionate a 506 x 506.

Le immagini più piccole vengono allineate alla sinistra con uno sfondo bianco a riempire lo spazio vuoto a destra.

Il criterio di ritaglio immagine è leggermente diverso qui:

  • Immagini quadrate e ritratti dall'alto al basso
  • Panorami dall'esterno all'interno

 

LinkedIn

I link condivisi e gli articoli hanno un thumbnail di 180 x 110.

Le immagini caricate direttamente non superano i  350 px di larghezza e l'altezza viene scalata in proporzione ad essa.

Esempio: 700 x 349 → 350 x 197

700x394

 

350x197

Le Showcase page sono un'eccezione: i thumbnail e le immagini di presentazione possono avere dimensioni di 180 x 110442 x 248.

Esempi:

180x110

 

442x248

LinkedIn usa gli stessi tag Open Graph di FB e Twitter perciò, una volta ottimizzato il tuo sito, non dovresti avere problemi neanche con questo.

Un altro modo per condividere contenuti su LinkedIn è tramite la pubblicazione di articoli sulle pagine home di altre persone tramite LinkedIn Pulse. Come puoi immaginare, questa funzione permette anche di inserire foto di presentazione.

Le immagini di quest'ultime negli aggiornamenti Pulse hanno una dimensione di 180 x 110 (esatto, la stessa dei thumbnail dei link). Se l'articolo è nella lista dei consigliati, il thumbnail sarà grande 70 x 37.

I Thumbnail nella colonna laterale della pagina di Pulse è grande 70 x 70.

L'immagine sopra all'articolo è grande 698 x 400.

Esempio:

698x400

Google+

Le immagini di presentazione nei link condivisi non superano la larghezza di 426 px  e l'altezza viene scalata in proporzione. Questo viene applicato anche alle immagini caricate direttamente.

Esempi(entrambe le foto sono larghe 426 px):

426ex1

 

426ex2

Esattamente come tutti i social media precedenti, G+ usa anch'egli i tag Open Graph. Se questi non vengono trovati, o l'immagine è più piccola di 426 x ... Google può scambiarla con un thumbnail grande 150 x 150.

In alcuni casi G+ mostra le immagini a grandezza maggiore. La foto sarà larga 886 px e manterrà le proporzioni originali.

Esempio:

886ex

Pinterest

Pinterest consiglia proporzioni tra 2:3 e 1:3.5  e una larghezza minima di 600 px

Esempi:

2:3 → 600 x 900 o 800 x 1200

1:3.5 → 600 x 1200 o 800 x 2800

Le immagini con proporzioni oltre 1:3.5 vengono ritagliate partendo dal basso vero l'alto. Apparirà un tasto "Espandi" nella zona tagliata per permettere di visualizzarla una volta premuto.

Detto questo, ci sono altre due questioni di cui discutere: le immagini dei feed e le immagini estese.

Immagini Feed

Le immagini feed sono larghe 235 px e le loro proporzioni vengono mantenute durante lo scaling.

Esempio:

235ex

Immagini estese

Queste immagini si estendono quando cliccate, raggiungendo la larghezza di 736 px.  Anche in questo casco le proporzioni vengono mantenute.

Esempio:

736ex

Instagram

Instagram è probabilmente il social media più facile da gestire: tutte le immagini sono quadrate!

Feed (510 x 510)

510x510

Thumbnail (161x161)

161x161

Header (small → 204 x 204 or large → 409 x 409)

204x204

 

 

409x409

Qui si conclude la nostra piccola panoramica sulle immagini consigliate per i social media.

Ricorda che i social sono in costante evoluzione: nel momento in cui leggerai questo articolo saranno probabilmente già cambiati.

Leave a Reply

Motorsport Digital Marketing Tips & Tricks
Get the latest content first.
We respect your privacy and are in line with the GDPR!