# Bildstorlek på Twitter och design av X-inlägg som syns [Canonical HTML page](https://gradiently.design/sv/guide/x-post-image-design) På X kommer orden först, och bilden måste förtjäna sin plats bredvid dem. Här är storlekarna, hur tidslinjen beskär och designer som tillför något som texten inte kan. ## The short version - Bästa bildstorleken på Twitter för en enda liggande bild på X är 1600×900 pixlar, i formen 16:9. - En stående bild i 1080×1350 tar mer plats på en telefonskärm men kan beskäras i förhandsvisningen i tidslinjen, så håll det viktiga i mitten. - När ett inlägg har två, tre eller fyra bilder lägger X ut dem i ett rutnät och beskär varje bild, så inlägg med flera bilder behöver enkla, centrerade designer. - Bilder på X fungerar bäst när de tillför något som inläggets text inte kan, som en bild, en stark rad eller ett kort som gör en nyhet igenkännbar. - X-headerbilden är 1500×500 pixlar, och profilbilden täcker dess nedre vänstra hörn. Den bästa **bildstorleken på Twitter** för en enskild bild på X är **1600×900 pixlar**, en liggande bild i 16:9 som tidslinjen visar hel på både telefoner och datorer. Vill du ha mer höjd på telefon använder du en stående bild i **1080×1350**, med vetskapen att förhandsvisningen kan beskära den. Profilheadern är **1500×500**. De tre storlekarna täcker nästan allt du kommer att publicera. - Inlägg 1600×900: 1600 × 900 - Stående 1080×1350: 1080 × 1350 - Header 1500×500: 1500 × 500 De tre bildstorlekarna för X, i skala. Inlägget i 16:9 är det säkra standardvalet. ## Så visar X bilder i tidslinjen En enda bild i 16:9 visas hel. Högre bilder visas större på telefoner men kan beskäras i förhandsvisningen tills någon trycker för att öppna dem, så allt viktigt nära över- eller underkanten riskerar att döljas. Med fler än en bild lägger X ut dem i ett rutnät och beskär varje ruta så att den passar. | Bilder i inlägget | Så visar tidslinjen dem | Designa för | | --- | --- | --- | | En | Stor, liggande bild visas hel, höga bilder kan beskäras | 16:9 i 1600×900, eller stående med en säker mitt | | Två | Sida vid sida, var och en beskuren till en hög form | Centrerat innehåll med breda marginaler | | Tre | En stor till vänster, två staplade till höger | Nyckelbilden först, enklare därefter | | Fyra | Ett rutnät på två gånger två, var och en beskuren | Fyra enkla, centrerade kompositioner | Så läggs inlägg med flera bilder ut. Ju fler bilder, desto snävare beskärning, och desto mindre text kan varje bild bära säkert. > **Designa mot mitten** Om du inte vet hur en bild kommer att beskäras håller du ord och ansikten inom den centrala ytan och låter bara bakgrunden gå ut till kanterna. Det är den enda layouten som klarar varje beskärning. ## Textlätta bilder som tillför något X är ett nätverk där texten kommer först. Inlägget bär redan dina ord, så en bild som upprepar dem gör lite nytta. De bilder som fungerar tillför något nytt: en bild folk vill titta på, en kort rad satt med tyngd, en siffra eller ett igenkännbart kort som markerar inlägget som viktigt. ### Tillför lite - En skärmbild av ett stycke - Inläggets text igen, i en bild - Tio fakta ihoppressade i ett kort - Ett generiskt stockfoto ### Förtjänar sin plats - En rad, stor, som texten fyller ut - En enda siffra med det den mäter - Produkten, ett resultat eller ett före och efter - Ett kort i ditt uttryck som folk känner igen ## Nyhetskort för X För lanseringar, nya versioner och nyheter hjälper ett konsekvent nyhetskort inlägget att sticka ut som *den* nyheten i stället för ännu en uppdatering. Använd formen 16:9, lägg rubriken till vänster eller i mitten och håll stödjande detaljer korta, eftersom inläggets text bär hela historien och länken. Hur orden själva rangordnas kan du läsa i [så designar du ett nyhetsinlägg](https://gradiently.design/sv/guide/announcement-post-design). Ett brett nyhetskort med texten Version 2 är här på en gradientbakgrund Ett kort i 1600×900: visas hela i tidslinjen, med rubriken läsbar med en blick. En stående version av samma nyhetskort med orden centrerade Den stående versionen: mer närvaro på telefon, med orden hållna i mitten ifall bilden beskärs. Inlägg som delar en länk utan bild visar i stället sidans Open Graph-bild. Se till att förhandsvisningen har samma uttryck som ditt kort; [storlek på OG-bild](https://gradiently.design/sv/guide/open-graph-image-size) tar upp taggarna och layouten i 1200×630. ## Designa för ljust och mörkt tema Folk läser X i ett ljust tema, ett mörkt tema eller ett dämpat, och din bild hamnar i vilket de än valt. En bild med vit bakgrund flyter ihop med det ljusa temat och lyser skarpt i det mörka. En bild med nästan svart botten gör tvärtom. En färgyta ända ut i kanterna med tydliga gränser ser avsiktlig ut i alla. - Indigoyta: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 55%, #818cf8 100%)` - Blågrön yta: `linear-gradient(135deg, #064e3b 0%, #0f766e 55%, #5eead4 100%)` - Bärnstensyta: `linear-gradient(135deg, #7c2d12 0%, #c2410c 55%, #fdba74 100%)` Ytor som behåller sin form i både ljusa och mörka tidslinjer: var och en går från en djup ton till en klar ljus, så bilden aldrig flyter ihop med något av temana. Mer om hur färg beter sig i mörka gränssnitt finns i [design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design). ## X-headerbilden Headern är **1500×500**, en banner i 3:1. Din profilbild täcker dess nedre vänstra hörn, och telefoner visar den mindre och kan beskära kanterna. Håll den enkel: ditt uttryck, kanske en kort rad i mitten eller till höger, och inget viktigt i nedre vänstra hörnet. [Storlek på Twitter-header](https://gradiently.design/sv/guide/x-header-size) går igenom layouten i detalj. En bred X-header med en kort textrad centrerad på en gradient En header med orden i mitten och nedre vänstra hörnet fritt för profilbilden. ## Exportera och publicera bilder på X 1. **Exportera i angiven storlek** 1600×900 eller 1080×1350, så att X skalar ned, aldrig upp. 2. **Välj rätt format** PNG för text och enfärgade ytor, JPEG av hög kvalitet för foton. Lägg till lätt korn på mjuka gradienter så att komprimeringen inte ger bandning. 3. **Skriv en bildbeskrivning** På X kan du lägga till en beskrivning för varje bild. Skriv vad bilden säger och visar, så att användare av skärmläsare och sökmotorer får samma budskap. 4. **Kontrollera på telefon** Titta på inlägget i tidslinjen på en telefon, i både ljust och mörkt tema, innan du fäster det. Om du publicerar samma nyhet på Instagram, LinkedIn och X designar du den en gång och lägger ut den på nytt för varje form. Hela listan över former finns i [bildstorlekar för sociala medier](https://gradiently.design/sv/guide/social-media-image-sizes), och inför en lansering listar [grafik för lanseringsdagen](https://gradiently.design/sv/guide/launch-day-graphics) allt material du behöver. ## FAQ ### Vilken är den bästa bildstorleken för X (Twitter)? 1600×900 pixlar för en enskild liggande bild, som tidslinjen visar hel. Använd 1080×1350 för en stående bild med det viktiga innehållet i mitten. ### Varför är min bild beskuren på X? Höga bilder kan beskäras i förhandsvisningen i tidslinjen, och inlägg med två till fyra bilder beskär varje bild i ett rutnät. Håll ord och ansikten i mitten. ### Vilken storlek har X-headern? 1500×500 pixlar. Profilbilden täcker dess nedre vänstra hörn, så håll viktigt innehåll borta från det hörnet. ### Ska bilder på X innehålla text? Lite. Inlägget bär redan dina ord, så en bild fungerar bäst med en stark rad, en siffra eller ett igenkännbart kort snarare än ett stycke.