Facebook Photos Storleksguide | Ny Facebook-layout

I mitten av 2020 började Facebook lansera en ny skrivbordslayout för sin webbplats. Det är renare, med mer vitt utrymme och närmar det i linje med mobilversionen. Men det är också helt annorlunda. Så det här är en reviderad version av min inofficiella Facebook-bildstorleksguide för att ta hänsyn till den senaste layouten, som de kallar New Facebook (den gamla versionen heter Classic Facebook) .1

Ursprungligen är den här nya layout är en opt-in-uppdatering, och du kan växla tillbaka till Classic Facebook-layouten från New Facebook. Men det kommer så småningom att rulla ut för alla. Om du råkar använda den gamla layouten (eller Classic Facebook, som de kallar det) kan du hitta den tidigare versionen av Facebook-storleksguiden här.

Under lanseringen kommer vissa användare att se din sida med den nya layouten och en del med den gamla layouten. Men om du laddar upp nytt innehåll är det förmodligen mer meningsfullt att optimera det för den nya layouten.

Bilder är en viktig del av att använda Facebook, men om du har kommit över den här sidan har du utan tvekan själv fått reda på att det inte är så enkelt att räkna ut vilka bildstorlekar som ska användas på Facebook. Det innebär en del krångel för att få de resultat du vill ha. Varje typ av bild på en sida, profil och tidslinje har sin egen storlek och särdrag. Och Facebook har aldrig varit så bra med att göra sina hjälpsidor lätta att hitta.

Att hålla sakerna ännu mer frustrerande är på Facebook ändrar saker från tid till annan, vanligtvis utan någon varning. Ibland är det en liten, inkrementell tweak. Ibland är det en hel översyn (till exempel när tidslinjer introducerades och igen när de ändrades från två kolumner till en kolumn). Så det är alltid ett rörligt mål. Och det verkar alltid finnas ett nytt system precis runt hörnet.

Så oavsett om du använder Facebook-sidor för marknadsföring på sociala medier eller bara försöker lägga upp foton för vänner och familj, här är min 2020-version av inofficiell guide för storleken på Facebook-foton på de olika delarna av webbplatsen.

Detta är ett preliminärt försök att dekonstruera skärmstorlekarna när uppdateringen rullas ut. Jag strävar efter att uppdatera det när vissa av specifikationerna blir tydligare. Om du stöter på olika visningsbeteenden, låt mig veta så att jag kan undersöka och uppdatera vid behov.

Facebook Cover Photo Size

Rekommendation: Använd en bild som är minst 940 pixlar bred med 352 pixlar hög. Men om du vill ha bättre kvalitet, använd en bild på minst 1800 pixlar med 704 pixlar.

Facebook-omslagsbilden är det stora panoramabildutrymmet högst upp på tidslinjen. Det kallas ibland också bannerbilden eller rubrikbildet.

Dess display är lyhörd. På ett annat sätt, storleken som den visas på varierar beroende på storleken på webbläsarfönstret eller enhetsskärmen. Du kan se denna effekt om du ändrar storlek om webbläsarfönstret medan du tittar på sidan.

Med den tidigare layouten var det lite komplicerat att försöka lista ut vad som skulle visas korrekt på Facebook-omslagsbildet, för inte alla delar av bilden skulle visas i alla storlekar. Det fanns säkra zoner och remsor som trimmades av på skrivbordet.

Den nya versionen har förenklat saker. Hela bilden visas och ändras på ett mycket enklare sätt.

Som sagt, det finns några saker att se upp för.

För det första har de gått tillbaka till att ha en smal band av graderad skuggning längst ner. Det är ett överlägg, vilket innebär att det sitter i ett lager ovanpå din bild. Så du vill inte inkludera någon viktig text eller detalj i den nedre remsan.

För det andra tar den färgen på de yttersta pixlarna från bilden och använder dem för att skapa en skuggad färgavsnitt på tomt avsnittet bakom bilden. Här är ett exempel på vad jag menar, med att det tar det röda från bildens yttre kant och applicerar det på det vita avsnittet bakom. (Jag har beskurit profilbilden här för att förenkla saker.) Varumärken med en specifik färgpalett vill ta särskild not för att inkludera önskade färger längst ner i bilden.

För det tredje är nedre hörnen blir något rundade (eller kantradie, för att vara teknisk). Det är dock inte särskilt aggressivt, så det är osannolikt att det orsakar problem för många användare.Men om du använder en strecklinje runt din bild eller annan detaljerad inramning kan det orsaka problem. Den tillämpas automatiskt och det finns inget sätt att stänga av den.

För det fjärde är nu profilbilden tillbaka till omslagsbilden. Även om det bara är subtilt i den här versionen, och bara en fläck skymmer omslagsbildet.

Ändra ditt Facebook-omslagsfoto

Om du precis har skapat en ny Facebook-profil eller -sida och har ännu inte ett försättsfoto, klicka bara på knappen ”Lägg till ett omslag” högst upp på sidan där omslagsbilden ska gå.

När du har lagt till ditt foto kan du ersätta det när du är inloggad på ditt konto och tittar på din sida klickar du på knappen Edit längst ned till höger.

Om du klickar på det öppnas en droppe -menyn där du kan välja källa för det nya fotot. Detta är också samma meny som du kan använda om du vill ta bort eller flytta ett befintligt foto eller använda ett videomomslag eller bildspelomslag.

Omslag Fototyper: Enstaka bilder

När det gäller typer av bilder är panorama perfekt. Enkla grödor fungerar också, även om effektiviteten uppenbarligen kommer att variera beroende på vad det är i bilden. Och det finns inget som hindrar dig från att montera mult iple foton till ett collage i din bildprogramvara, spara den som en enda bildfil och ladda upp den. Som dessa, till exempel:

Omslagsbildspel: Flera bilder

Fram till ganska nyligen var det bara möjligt att välja ett foto för att fungera som ditt statiska omslagsfoto. Men en ny funktion har lagts till: bildspel. Du kan nu välja upp till 5 foton som roterar. Gå till den här funktionen via samma meny som låter dig lägga till eller ändra omslagsfotoet (dvs. kameraikonen längst upp till vänster i omslagsbildsektionen).

När du skapar ett bildspel får du möjlighet att välja upp till 5 bilder som ska användas. Använd filmremsan överst för att välja bilder antingen från befintliga bilder eller ladda upp nya. Du kan sedan klicka på miniatyren och få en förhandsvisning av hur den kommer att se ut i det större utrymmet nedanför miniatyrerna. Du kan klicka och dra i det avsnittet för att flytta bilden i visningsområdet.

Du kan också ha en dynamiskt genererad version som låter Facebook välja foton baserat på vad som fungerar bra och baserat på aktiviteten på din sida . Du kan aktivera eller inaktivera den här funktionen med reglaget längst upp till höger på bildredigeringsskärmen.

Om du använder bildspelskåpan kan dina besökare navigera genom bildspelet med hjälp av pilarna på varje sida (den tidigare layouten hade positionsindikatorer längst ner, men de är borta i den nya versionen).

Det finns några saker som jag tycker är konstiga om hur bildspelet för närvarande visas för besökare. Det första är att bildspelet inte går vidare automatiskt. Så för att se mer än en bild i bildspelet måste dina besökare veta att manuellt gå vidare genom att använda pilknapparna vid sidan av bilden. Jag misstänker att endast en mycket liten andel kommer att göra det. Den andra saken är att om du stänger av alternativet för Facebook att välja bilder, visar det bilderna i samma ordning varje gång snarare än slumpmässigt. Resultatet av båda dessa saker är att de allra flesta av dina sidbesökare, åtminstone i hur det för närvarande implementeras, sannolikt bara kommer att se den första bilden. Det tredje konstiga – åtminstone för mig – är att rymma den nya skuggade färgmarkeringen i bakgrundsavsnittet. Eftersom det hämtas från den visade profilbilden ändras den tillsammans med profilbilden. Det är inte nödvändigtvis en dålig sak, men det är något som är värt att veta.

Cover Videos

Du kan nu också använda videofiler för ditt bannerområde. De måste vara mellan 20 och 90 sekunder och mäta minst 820 gånger 312 pixlar. Den rekommenderade storleken är 820 gånger 462.

Om du tar ett videoklipp för detta med en kamera som låter dig välja videoupplösning, skulle 720p-läget vara ett bra ställe att börja eftersom det mäter 1280 av 720, vilket bekvämt har tillräckligt med upplösning.

Jag har mer detaljerad guide på Facebook-videomslag separat.

Facebook-profilbild

Jag har ett mer detaljerat inlägg på Facebook-profilbildstorlek separat, men här är kärnan.

Displaytyp	Mått
Desktop / Laptop webbläsare	132 pixlar
Smartphones	128 pixlar
Funktionstelefoner	36 pixlar

Facebook-profilbilden nu längst ner till vänster om omslagsbilden, överlappar något med omslagsfotoets botten. Det har krympt något från tidigare versioner, ner till en cirkel med 132 pixlar i diameter.

Den har en tunn vit linje runt den som appliceras automatiskt – du kan inte ta bort den eller kontrollera den.

Den goda nyheten är att du inte behöver ladda upp en cirkulär bild, något som skulle vara lite ont att skapa. Istället kan du ladda upp vilken vanlig rektangulär eller fyrkantig bild som helst. Oavsett vilken form bilden är som du laddar upp, beskärs den till en cirkel när den visas.

Facebook-profilbildstorlekar

Webbläsare på stationär / bärbar dator. I en vanlig sidvy, till exempel när någon checkar ut din profil, visas den i en skrivbords webbläsare som en cirkel med en diameter på 132 pixlar.

Telefoner. Storleken profilbilden visar på mobiltelefoner varierar beroende på typ av telefon. På moderna smartphones visas den som en cirkel med 128 pixlar i diameter. På äldre telefoner visas den med en diameter på 36 pixlar.

När du är uppe väljer du ett foto för att lägga till en profilbild får du möjlighet att flytta fokusområdet (förutsatt att det inte är fyrkantigt) samt zooma in och ut (så länge det överskrider den minsta upplösningen).

Profilbilden som visas bredvid ditt namn på kommentarer och inlägg i tidslinjen är samma bild och är fortfarande en cirkel, men det är automatiskt nedskalat till en diameter på 40 pixlar.

Storlekskrav för Facebook-profilbild

Eftersom den visar så liten är det osannolikt att du stöter på ett problem med bildstorlekar. Så länge din bild har minst 132 pixlar i sin kortaste storlek (vilket är ganska liten), bör du vara bra att gå.

Delade länkminiatyrer

Miniatyrbilderna för delade länkar visas i en webbläsare med 500 pixlar brett och 261 pixlar högt.

Under ett tag var det möjligt att välja en annan delad länkbild, men den funktionen har tagits bort. För närvarande finns det åtminstone en lösning om du delar länkarna med en social mediahanteringstjänst som buffert, men du kan inte välja en annan bild att använda inom Facebook längre.

Om du delar länkar från din egen webbplats, det är möjligt att ange vilken bild du vill använda som miniatyrbild, men det är något som du måste ställa in på din webbplats och ligger utanför detta inläggs räckvidd. Men om du letar efter vilka villkor för Google om detta, vad du försöker göra är att ställa in ”og: image” -egenskapen i sidans Open Graph-metadata. Här är Facebooks dokumentation och om du använder ett CMS som WordPress för din webbplats finns plugins som kan hantera det åt dig.

Vad du fortfarande kan göra är att lägga till fler miniatyrer som är utöver originalet (inte på plats). När du går för att dela en länk , använd den nedre delen av popup-fönstret för att lägga till fler bilder. Men du kan inte avmarkera originalbilden längre som du brukade kunna.

Foton på tidslinjen

storlek och layouter av miniatyrer på tidslinjen varierar beroende på hur många bilder du delar i samma inlägg samt vilken orientering specifika bilder har.

Så här visas olika kombinationer. Alla bilder får en 1pix vit streck runt gränsen.

Enstaka foto på tidslinjen

När du laddar upp en bild till tidslinjen genereras en miniatyrbild automatiskt för att passa in i en låda som är 500 pixlar bred och upp till 750 pixlar lång. Så om du vill använda det maximala tillgängliga utrymmet, ladda upp en bild i stående orientering (vertikal) som är i förhållandet 3: 2. Detta är ett exempel på att använda maximalt tillgängligt utrymme:

Om du laddar upp en liggande (horisontell) bild skalas den till 500 pixlar och behåller sin form. Bildens hela område visas utan beskärning.

Detta är en annan rektangel i liggande orientering, men det är ett mycket smalare bildförhållande som en banner eller panorama. Bredden är åter 500px och bilden skalas så att hela bildområdet visas.

Om du laddar upp samma bild roterad 90 grader, så att den är lång snarare än bred, beskärs den maximalt tillgängligt område på 500 pixlar med 750 pixlar.

Och om du laddar upp en kvadrat visas hela bilden med bredden 500px.

Lägga ut flera bilder samtidigt till en sidas tidslinje

Du kan ladda upp flera bilder samtidigt till tidslinjen. Hur de visas beror på hur många bilder du laddar upp och riktningen på vad jag kommer att kalla den primära bilden.

Den primära bilden är det jag kallar den som visas först i uppladdningen popup, och den visas också större i vissa layouter. Såvitt jag vet finns det inget officiellt namn på det, men jag kommer att fortsätta och använda ”primär bild”. Så det är vad jag hänvisar till i avsnittet nedan.

Förutom att den först visas har den primära bilden en annan viktig roll. Den bestämmer layouten du får. Om du laddar upp tre bilder med en fyrkantig primär bilden får du en annan layout än om du laddar upp 3 bilder med en rektangulär primärbild.

Det enklaste sättet att välja vilken bild som fungerar som den primära bilden är att dra den åt vänster i uppladdningsdialogen.

Här är ett exempel på vad jag menar. I den här laddar jag upp två bilder, en orange fyrkant och en grön vertikal rektangel. Om den orange fyrkanten är i första positionen i uppladdningsdialogen, så här:

publicerar den så här:

Överför exakt samma två bilder men vänder dem så att den vertikala rektangeln är först, så här:

visas så här:

Samma princip gäller om du laddar upp två, tre eller fyra bilder – layouten kommer alltid att ha sin kö från den primära bilden.

2 bilder med horisontell (liggande) primär bild

Hela bredden blir 500 pixlar. Den översta bilden är 250 pixlar hög; botten är 249 pixlar hög. Det finns en 2px vit linje mellan dem.

2 bilder med vertikal (stående) primärbild

2 bilder med fyrkantig primärbild

3 bilder med horisontell (liggande ) Primär bild

Eftersom layouten tar sin ledtråd från den primära bilden kan du blanda och matcha orienteringen för de icke-primära bilderna – de visar fortfarande samma.

3 bilder med vertikal (stående) primärbild

3 bilder med fyrkantig primärbild

4 bilder med en horisontell (liggande) primärbild

Du kan blanda och matcha orienteringen för de icke-primära bilderna – de kommer fortfarande att visa samma.

4 bilder med en vertikal (stående) primärbild

4 bilder med en fyrkantig primär bild

5 eller fler bilder med en horisontell (stående) primärbild

De fem första bilderna visas i ett slags mosaikmönster, så här. Om du tar med fler än fem bilder får du en liten knappöverlagring plus symbol för att visa de andra.

5 eller fler bilder med en fyrkantig eller vertikal (stående) primärbild

Du får samma skärm oavsett om den primära bilden är en kvadratisk eller en vertikal rektangel.

Foton i full bredd på Facebooks tidslinje

Ja, de var coola. Bilden spände över båda kolumnerna. Men Facebook avskaffade dem i sin redesign i mitten av 2014. Dina uppdateringar visas nu bara i en enda kolumn, och det finns inget sätt att göra foton bredare än den kolumnen.

Event Header Images

Oavsett vilken formbild du laddar upp som rubrikbild för ett evenemangsinlägg beskärs det till ett bildförhållande på 16: 9. För bästa resultat, ladda upp en bild som är 1920 x 1080 pixlar. Men något att se upp för är att det i huvudhändelsevyn är nedskalat ganska mycket, så använd inte teckensnitt som är för små (människor kan klicka på bilden för att öppna en större version, men inte alla kommer att göra

När den visas på huvudevenemangssidan skalas den till 500 med 262 pixlar, så här:

Facebook Image Quality Issues

Något att vara medveten om är att Facebook komprimerar vissa bilder ganska aggressivt när du laddar upp och visar dem.

Det är vettigt – naturligtvis vill de påskynda sidladdningar och minska bandbredd genom att använda så mycket komprimering som de kan komma undan med . Jag är inte den enda som önskar att de skulle vara mindre aggressiva med sin komprimering, men hur märkbar det är beror på om saker som färgutbudet i din bild och mängden detaljer i ditt foto.

I exemplen ovan är JPG-komprimeringen mycket mer märkbar i montageversionen än i Sydney Harbour Bridge-versionen. Jag ställde in kvalitets- och skärpningsinställningarna lika för var och en i originalen innan de laddades upp. Vissa användare har rapporterat att bilder med massor av röda och apelsiner verkar visa effekterna av komprimeringen mer än bilder med blått och grönt, men det beror på den faktiska bilden.

Det verkar också bero på vad vilken bild du visar. Fotogalleribilder verkar ha mindre komprimering vid visning än designelement som omslagsfoto och profilbild.

Det finns några saker du kan göra när du förbereder bilderna innan de laddas upp som kan hjälpa till att minska risken för att din bild kommer att se galen ut.

Ladda upp bilder som är 99 kB eller mindre i filstorlek. Facebook ska lämna bilder mindre än det orörda, vilket ger dig kontroll över hur komprimeringen tillämpas.

Ladda upp bilder som inte har mycket komprimering redan tillämpats. För JPG, till exempel, försök att hålla kvalitetsinställningen 80 eller högre – Facebook kommer att komprimera det igen ändå. Om du använder programvara som påverkar färgutrymmet (som Lightroom eller Photoshop), använd sRGB-färgutrymme. Och att ladda upp bilder som redan har ändrats till nära eller vid målvisningsstorleken och inte är alltför skärpade verkar fungera bra.

Om inget av dessa fungerar, ta en titt på mitt inlägg om hur man får skarp text på Facebook-bilder.

Få suddig text, logotyper eller vattenstämplar på bilder?

Om du inkluderar text, en logotyp eller vattenstämpel och upptäcker att det hamnar suddigt och oklart på grund av JPG-artefakterna har jag ett separat inlägg som beskriver hur jag fixar det: Hur får jag skarp text på Facebook-bilder.

Bildmetadata på Facebook

Även om det inte är specifikt relaterat till bildstorlekar, är det värt att veta att Facebook tar bort alla metadata från dina bilder. Det inkluderar all GPS, kameratyp och annan data som din kamera kan bädda in, samt allt som nyckelord eller copyrightinformation du kan ha lagt till. (Ett undantag är om du befinner dig i Tyskland).

Facebook-bilder Cheat Sheet

	Bredd	Höjd	Anteckningar
Omslagsfoto / omslagsbildspel	820px	360px
Profilbild i rubrik	172px	172px	Måste vara minst 180px med 180px
Profilbild på tidslinjen	40px	40px	Samma bild som huvudprofilbild, nedskalas automatiskt
Thumbnail för delad länk	500px	261px	Endast för enstaka miniatyrer. Flera miniatyrer är beskurna.
Uppladdad tidslinje Foto-miniatyrbild	500px max	750px max	Se undantag ovan för flera bilder.
Bild av händelsens huvud	500px	262px	bildförhållande 16: 9 endast. För bästa resultat, ladda upp 1920 x 1080 px bild.