Een nieuw jaar, dat betekent goede voornemens. Een artikel schrijven is alvast een van mijn goede voornemens! In het Engels spreekt men dan over New Year’s resolutions, dus… schrijf ik een artikel over beeldresoluties.
Er heerst heel wat verwarring over resoluties van beelden en video’s, en terecht. Het internet staat vol met regels en adviezen, maar 1) waar we niet altijd zeker over zijn (zijn ze nog niet gedateerd?), 2) waar we zien dat ze contradictorisch zijn en 3) waar het niet duidelijk is of het over adviezen gaat of echte vereisten.
Before we get lost in translation
- Pixels per inch (ppi) = dots per inch (dpi) = eenheid voor resolutie
- 720p – 1080p: beeldhoogte van (web)video’s, waarbij 1080p gelijk is aan HD resolutie
- Minimale vereisten vs. geadviseerde afmetingen: respectievelijk minimumspecificaties die worden opgegeven voor een werkbaar resultaat versus de meest optimale oplossing. Optimaal wil in de eerste plaats zeggen: compatibel volgens de vele verschillende schermresoluties, en daarbij ook met de meest optimale kwaliteit.
Let’s get digital
Voor digitale beeldresolutie zijn enkele constanten waarmee we kunnen rekening houden: zo zijn bijvoorbeeld digitale beelden doorgaans 72dpi. Maar er zijn meer variabelen dan constanten. De complexiteit ligt in de reeks van toestellen en hun respectievelijke specificaties die het toestel visueel kan opbrengen.
Anderzijds ligt de complexiteit ook in de diversiteit van kanalen, die elk hun eigen regels hanteren om bv. digitale beelden te publiceren. Moderne websites hebben in hun opbouw duidelijke responsive regels voorzien voor een optimale weergave van beelden, zowel voor desktop als mobile screens. Meestal zit er een designer achter de opgeladen beelden, die de beelden ook geoptimaliseerd heeft voor de webpagina op desktop en mobile view.
Maar dan zijn er sociale media: hier zit niet altijd een designer achter. De sociale media proberen hier zo goed mogelijk bij te staan om handige visualisatie tools te ontwikkelen en informatiepagina’s op te maken. Maar dan nog, het is soms verwarrend en tijdrovend als men zelf de afbeeldingen moet gaan genereren of selecteren. Dit geldt ook soms voor designers, aangezien sociale media hun beeldvereisten bijna steeds onaangekondigd aanpassen.
Uitgangspunten
Denk ‘mobile-first’: meestal is deze weergave kritiek voor een goede weergave van banners en beelden.
Staar je niet blind op de aangewezen vereisten van de kanalen zelf: het mag altijd een beetje meer zijn, maar weet dat bij het opladen de afbeeldingen deels gecomprimeerd zullen worden.
Proporties zijn belangrijk: als een vierkant beeld wordt gevraagd (bv. voor profielfoto’s) zal een deel van de afbeelding worden weggesneden door de upload-applicatie. Hou hier rekening mee.
Ideale proporties: als je één post wil die op alle kanalen hetzelfde wordt weergegeven, en zoveel mogelijk schermoppervlakte in neemt, dan adviseer ik voor een vierkant formaat te gaan, of zelfs een staand ontwerp.
Kijk ook naar je eigen gemak: voor social posts is het altijd makkelijk om één ontwerp op te maken voor alle kanalen. Bovendien blijven we hierdoor meer consistent.
Zet zo weinig mogelijk tekst op banners of posts: responsive cropping laat tekst mogelijk wegvallen, mogelijk onscherpe tekst, doet meestal afbreuk aan een sterke visual, wordt minder getoond bij promotie,…
TOT SLOT – MYTHBUSTERS
Mythe
“Mijn beeld is groot genoeg voor desktop, dus zal het zeker goed genoeg zijn voor mobile.”
Niet noodzakelijk. Door responsive layouts krijgt een afbeelding verschillende verhoudingen als men desktop en mobile vergelijkt. De originele afbeelding gaat dan in een andere container (kader) geplaatst worden. Er gaat dus een deel afgesneden worden van de afbeelding. Je positioneert dan best alle relevante visuele informatie zodat het voor alle screens goed zichtbaar is. In sommige gevallen wordt de afbeelding zelfs verschaald, om bv. aan te sluiten bij de hoogte van een container. Voor sociale media banners gebruik ik een template die het zichtbare gebied voor een desktop en mobile view weergeeft.
Mythe
“72 dpi is voldoende voor schermen”
Niet altijd voor kleine schermen: hoe dichter je kijkt op een scherm, hoe meer scherpte je nodig hebt, logisch. Voor kleine schermen bv. Voor je smartphone, wordt er zelfs 300dpi aangewezen. Alles wat daar voorbij ligt draagt minder bij tot een merkbaar scherpteverschil. Voor presentaties gebruik je zelfs best een resolutie van 150-200 dpi, om alles goed scherp te houden.
Mythe
“Dus, hoe meer pixels, hoe beter?”
Wel, niet altijd. Als je te grote beelden wil opladen op je website, zal de webpagina langer moeten laden, heb je meer drop-out bij bezoekers, lagere Google score,… Het beste is om de grootste kritieke maat te gebruiken. Full-screen afbeeldingen die groter zijn dan 5000 pixels breedte verklein je best. Voor andere afbeeldingen zijn 2000 pixels breedte meestal voldoende
Als je beelden aanlevert met een heel hoge resolutie, en je moet ze downsizen naar een kleiner bannerformaat, dan worden pixels samengedrukt, waardoor het beeld lijkt waziger te worden. Logisch, maar het voordeel dat je hebt met een kwalitatief, gedetailleerd beeld valt hierdoor weg. Groter is dus niet altijd beter.
CLEAR?
We kunnen alvast het nieuwe jaar starten met scherpe web banners en een klare kijk. Stay tuned voor het (minder uitgebreide) deel 2 over printresoluties. Zijn er nog mythes die je wil aftoetsen, of zijn er adviezen van jouw kant?
overzicht SOCIALE MEDIA
Facebook
HEADERS VOLGENS FACEBOOK
Groups header: 820x250px
Pages header: 820x312px
Profile header: 851x315px
Event header: 1920x1080px
MIJN ADVIES
Maak een afbeelding aan met HD resolutie (1920x1080px) en positioneer deze optimaal voor desktop. Wacht, waarom deze resolutie? Omdat de HD resolutie een referentieverhouding is voor een fullscreen mobile weergave. In het kader van ‘mobile-first’ is dit eigenlijk de meest kritieke maat. Als je een beeld gaat opladen van letterbox-grootte (minimum vereiste zoals bovenstaande), dan gaat deze afbeelding ook gebruikt worden voor mobile, en hiervoor is deze niet altijd geschikt. Dus, 1920x1080px voor alle Facebook headers!
PROFIELFOTO VOLGENS FACEBOOK
180x180px (minimum, ook voor business page)
MIJN ADVIES
Neem hiervoor dezelfde afmetingen als een gewone vierkante post: 1200×1200 pixels. Als mensen op jouw afbeelding klikken, of indien je nieuwe foto in het nieuwsoverzicht verschijnt dan wordt deze tenminste mooi weergegeven.
POSTS VOLGENS FACEBOOK
Afbeelding post: 1200x630px (aangewezen)
Carrousel: 1080x1080px (aangewezen)
Video post: 1280x720px (aangewezen)
MIJN ADVIES
Voor vierkante posts gebruik je best 1200×1200 pixels. Voor video previews kan je de 1200×630 pixels resolutie gebruiken voor gewone posts. Voor carrousel beelden kan je even goed dezelfde 1200×1200 resolutie gebruiken. Er zal een beetje compressie optreden, maar dit zal nauwelijks merkbaar zijn.
Upload je video’s altijd op in optimale kwaliteit: bij voorkeur HD (1920x1080px). Mogelijk wil je deze video ook op Vimeo of Youtube plaatsen, dus dan kan je beter één kwalitatieve moederfile gebruiken. Gebruik je deze enkel voor Facebook, dan kan je experimenteren met een vierkante of staande video voor meer reacties.
INSTAGRAM
PROFIELFOTO VOLGENS INSTAGRAM
110x110px (minimum)
MIJN ADVIES
Neem hiervoor dezelfde afmetingen als een gewone vierkante post: 1200x1200px. Beelden worden gecomprimeerd, maar er is geen/nauwelijks verschil tussen het opladen van een afbeelding op maat, en een grote afbeelding.
POSTS VOLGENS INSTAGRAM
Afbeelding post: 1080x1080px (aangewezen)
Video post: 600x600px (aangewezen)
MIJN ADVIES
Instagram kent zijn oorsprong in vierkante polaroid-beelden. Sinds Instagram en Facebook aan elkaar verbonden zijn is het makkelijker geworden om foto’s van het ene kanaal met het andere te delen, dus posts werken bij voorkeur ook voor Facebook. Om deze reden, én om future-proof te zijn, adviseer ik om eveneens 1200x1200px te hanteren voor beelden en video.
STORIES VOLGENS INSTAGRAM
600x1067px (minimum)
1080x1920px (aangewezen)
MIJN ADVIES
Voor Instagram Stories is de 1080x1920px ideaal. Niet alleen is de beeldverhouding optimaal voor mobiele schermen, het is een van de weinige afbeeldingsstandaarden die HD als aangewezen resolutie neemt. Opgelet! Bovenaan en soms onderaan is er een overlay van UI-elementen, zoals een profielfoto en paginatabs bovenaan en een slider onderaan. Dus, geen tekst of essentiële elementen in deze zones plaatsen!
LINKEDIN
PROFIELFOTO VOLGENS LINKEDIN
Persoonlijk: 400x400px (minimum)
Bedrijf: 300x300px (minimum)
MIJN ADVIES
Aangezien je voor Facebook waarschijnlijk een profielfoto hebt aangemaakt op 1200x1200px (zie boven), kan je dezelfde afbeelding gebruiken. Compressie is niet merkbaar.
BANNER VOLGENS LINKEDIN
Persoonlijk: 1584x396px
Bedrijf: 1536x768px
MIJN ADVIES
Aangewezen afmetingen mogen worden aangehouden. Let wel dat er bij het positioneren een deel van de banner wegvalt. Tekst is hier uiterst uit den boze, aangezien de LinkedIn banner niet alleen sterk wordt bijgesneden voor responsive layouts (mobile vs. desktop), maar ook omdat de banner deels overlapt wordt door de profielfoto. Mijn advies is om een template te gebruiken die de visibiliteit tussen verschillende beeldverhoudingen optimaliseert.
TWITTER
PROFIELFOTO VOLGENS TWITTER
400x400px (aangewezen)
MIJN ADVIES
Hier treedt wel zware compressie om bij beelden. Hanteer maar gerust de aangewezen afmetingen, maar voor eenvoudige profielfoto’s (bv. beeldmerk) kan de 1200x1200px afbeelding voor overige socials gebruikt worden.
HEADER VOLGENS LINKEDIN
Hero banner: 1500x500px
MIJN ADVIES
Er treedt opvallende compressie op bij te grote afbeeldingen. Hanteer deze aangewezen afmetingen. Desnoods kan je de LinkedIn banner gebruiken hiervoor, aangezien de afmetingen en verhoudingen in de buurt liggen.