Bildgrößen im HTML und CMS, Online Werbeformate, Videoformate und Social Media Bildformate

von | 16. 4. 2016 | Contentmanagement, Social Business, Webdesign, WordPress Admin | 0 Kommentare

In jedem Template in Contentmanagementsystemen, in jedem Social-Media-Plattform werden andere Bildgrößen für Profilbilder, Boards oder Banner verwendet. Fad, das immer von neuem recherchieren zu müssen; selbst, wenn einem Browser Plug-Ins wie beispielsweise „WebDeveloper“ oder „Measure it“ für Firefox einem dabei helfen.

Die Größe wird hier in Pixel (px), also den Bildschirmpixeln, angegeben, im Normalfall sind die Bildformate GIF, PNG und JPEG erlaubt.
GIF oder PNG empfehlen sich für Icons oder Animationen, JPEG für Fotos, PNG für alle Anwendungsfälle.

Inhalt

HTML

  • Favicon: 16 px mal 16 px in den Formaten ICO, PNG oder GIF in 8 Bit (= 256 Farben).
    ist das Icon der Website, wenn man es bei den Favoriten/Bookmarks des Browsers hinzufügt und wird im Browser auch in der Adresszeile angezeigt. weitere mögliche Auflösungen: 32*32, 48*48, or 64*64 in 8, 16 oder 24 Bit Farbtiefe.
    JPEG wird vom Internet Explorer für das Favicon nicht unterstützt.

Bannerwerbung: Einige Online Werbeformate laut IAB (international Advertising Bureau)

Im Folgenden führe ich hier vor allem die „Standardformate“ und einige „Sonderwerbeformen“ an, die in der Online-Werbung gebräuchlich sind, an. Eine genaue Auflistung findet sich auf der Website des Internet Adverising Bureau Austria, IAB, unter http://standards.iab-austria.at/ bzw. für Deutschland unter http://werbeformen.de
Bilder und Animationen können als GIF, JPEG oder (meist, aber nicht immer) Flash angeliefert werden. Sollten Videos zum Einsatz kommen, empfiehlt das IAB maximal 15-Sekunden-Spots, da diese auf allen Medien geschaltet werden können.

  • Fullbanner: 468 px breit mal 60 px hoch, max. 40 kB.Könnte bei Mouse-over auch als Flap Banner (Sonderwerbeform) aufklappen und den Seiteninhalt überdecken:
    468 px breit mal 60 px hoch wird zu  468 px breit mal 400 px hoch, max. 40 kB.
  • Super Banner: 728 px breit mal 90 px hoch, 40 kBKönnte auch als Flap Super Banner (Sonderwerbeform) bei Mouse-over aufklappen und den Seiteninhalt überdecken:
    728 px breit mal 90 px hoch wird zu 728 px breit mal 400 px hoch, max. 40 kB.oder wird zum Pushdown Banner (Sonderwerbeform): 728 px breit mal 90 px hoch wird zu 728 * 400, 40 kB, der die ganze Seite nach unten schiebt
  • Billboard: mind. 800 px breit mal 250 px hoch, 80 kB
  • Rectangle: 180 px breit mal 150 px hoch, 40 kB
  • Medium Rectangle: 300 px breit mal 250 px hoch, 40 kB
  • (Standard) Skyscraper: 120 px breit mal 600 px hoch, 40 kBKönnte auch als Flap Skyscraper (Sonderwerbeform) bei Mouse over nach links aufklappen und den Seiteninhalt überdecken: 120 px breit mal 600 px hoch wird zu 400 px breit mal 600 px hoch, max. 40 kB.
  • Wide Skyscraper: 160 px breit mal 600 px hoch (max. 200*600), 40 kB
  • L-Ad (Super Banner + Sky): oben 728 px breit mal 90 px hoch und rechts aussen 120 px breit mal 600 ox hoch, 40 kB
  • Maxi Ad: 640 px breit mal 480 px hoch, 80 kB
  • Halfpage Ad: 300 px breit mal 600 px hoch, 40 kB
  • Sitebar: belegt die freie Fläche im Browser rechts von Content, dynamisch 1:2 als Flash, 40 kB
  • Sitebar XL: belegt die freie Fläche im Browser rechts von Content, dynamisch (nicht proportionales Skalieren) als Flash, 40 kB

Weitere Sonderwerbeformen:

  • Universal Flash Layer: Platzierung erfolgt beim Aufruf der Website direkt über dem Content (Interstitial)
    400 px breit mal 400 px hoch, 80 kB
  • Flashbar: Animiertes Flash-Banner, dass immer unten im Sichtbereich platziert bleibt – auch beim Scrollen.
    dynamisch 10:1
    1024 px breit mal 100 px hoch, 40 kB
  • Flashbar XL: wie oben, aber doppelt so hoch
    initial 1200 px breit mal 200 px hoch -> wird zu 1200 * 400, 40 kB

InText Ads

  • Bei einer InText-Anzeige werden im Content die vom Anzeigenkunden gebuchten Begriffe identifiziert und zu unterstrichenen Hyperlinks umgewandelt. Bei Mouse-over öffnet sich ein Anzeige-Layer mit Informationen mit einem Link zum externen Angebot
  • Bei einem InText-Video öffnet sich bei Mouse-over über den gebuchten Begriffen ein Video-Layer mit bis zu 4 verschiedenen Werbevideos. Verweilt der User auf diesem Layer, expandiert das gewählte Video.

In Deutschland zählen zu den Standard Werbeformen auch:

  • Mobile Content-Ad 4:1
    300 px breit mal 75 px hoch (Breite max. 320)
  • Mobile Content Ad 6:1
    300 px breit mal 50 px hoch (Breite max. 320)
  • Mobile Promotion Link:
    67 px breit mal 50 px hohes Teaserbild links, maximal 110 Zeichen Text rechts

WordPress Theme ZerifPro

Dieses Theme wird hier auf der Website eingesetzt. Die in Zerif Plus verwendeten Bildgrößen gelten aber nicht für andere WordPress Themes. Die Dokumentation für ZerifPro findet sich auf themeisle.com.

  • Background Image/Slider:
    • laut Dokumentation 2048 px breit mal 1365 px hoch
    • ich verwende 1920 px breit mal 800 px, da sonst zu viele Bildteile in „kleineren“ Bildschirmauflösungen „verschwinden“
  • alternativ Background Image Video: maximal 20 MB, mp4 video
  • Website Icon: 512 px mal 512 px (steht extrem verkleinert auch in der Adreßleiste des Browsers)
  • Our Focus: 150 px mal 150 px
  • Our Team: 174 px mal 174 px
  • Testimonial: 73 mal 73 px
  • Client Logo: 130 px breit mal 50 px hoch

Video-Formate (Auswahl)

veraltet (4:3)

  • NTSC (VGA): 640 px breit mal 480 px hoch (entspricht 4:3) mit 30 Hz bzw. 30 fpm (Frames per second)
  • PAL (DVB): 768 px breit mal 576 px hoch (entspricht 4:3) mit 25 Hz bzw. 25 fpm
  • HD720 oder HDTV: 960 px breit mal 720 px hoch (entspricht 4:3) mit 50 oder 60 Hz

aktuell (16:9)

  • 720p oder HD720 oder HDTV oder High Definition Television:
    1280 px breit mal 720 px hoch (entspricht dem Format 16:9) mit 50 oder 60 Hz bzw. fpm
  • 1080p oder Full HD oder Full HDTV oder HD1080:
    1920 px breit mal 1080 hoch (16:9) mit 25 oder 30 Hz bzw. fpm
  • 4K oder Ultra High Definition Television (UHDTV oder Ultra HDTV) oder Ultra High Definition Video (UHDV) oder Super Hi-Vision (Japan) oder UHD-1:
    3840 px breit mal 2160 hoch (16:9, doppelte Seitenlänge und damit vierfache Fläche von Full HD) mit 60 Hz, maximal 120 Hz.
    Benötigt einen Durchsatz von 10,2 Gigabit pro Sekunde, also am besten einen Internet-Zugang mit mindestens 25 Mbit/s.
  • 8K oder UHD-2:
    7680 px breit mal 4320 Pixel (16:9, viermal größere Seitenlänge und damit 16fache Fläche von Full HD)

YouTube Video-Formate

YouTube unterstütz die folgenden Videoformate für den Import:

  • MOV (Apple Quicktime Movie)
  • MPEG4
  • AVI
  • WMV (Windows Media)
  • MPEGPS
  • FLV (Adobe Flash)
  • 3GPP
  • WebM

Standardmäßig dürfen YouTube Filme nur 15 Minuten lang sein, man kann aber sein Konto bei YouTube bestätigen lassen und darf danach Videos bis 128 GB Größe und maximal 11 Stunden Spielzeit uploaden (wenn es der Browser erlaubt).

Wenn man ein Video in der besten verfügbaren Qualität hochgeladen hat, erzeugt YouTube selbst die kleineren Videoformate. Darum muss man sich nicht kümmern, das passiert am Server von selbst, dauert aber einige Zeit, bis alle Ausgabegrößen vorliegen. Dabei bildet YoutUbe natürlich nur diejenigen Formate, die gleich und kleiner als das beigestellte Format sind. Bei Videos, die im Format 4:3 vorliegen (z. B. 768*576) fügt YouTube links und rechts schwarze Balken hinzu, da der Youtube Player immer alles im Format 16:9 anzeigt. Übrigens: Sie können auch auf YouTube einstellen, dass Ihre Filme privat und nur ausgewählten Personen zugänglich sind: Gut für das Sammeln von Feedback.
Weitere Infos unter https://support.google.com/youtube/?hl=de

Auf YouTube können sich dann die folgenden Ausgabegrößen finden:

  • 2160p: 3840 px breit mal 2160 px hoch (16:9)
  • 1440p: 2560 px breit mal 1440 px hoch (16:9)
  • 1080p: 1920 px breit mal 1080 px hoch (16:9)
  • 720p: 1280 px breit mal 720 px hoch (16:9)
  • 480p: 854 px breit mal 480 px hoch (16:9)
  • 360p: 640 px breit mal 360 px hoch (16:9)
  • 240p: 426 px breit mal 240 px hoch (16:9)

Udemy Upload-Formate für Trainingsvideos

Kurs-Videos müssen bei Udemy.com können im HD-Format oder Full-HD-Format upgeloaded werden, letzteres ist natürlich besser und zukunftssicherer. Udemy kümmert sich dann selbst um die Optimierung der Videos – Sie müssen also nur ihr bestes Format bereitstellen. Beim Upload bitte die folgenden Einstellungen immer beachten:

  • Video-Kompression H.264 oder MPEG-4
  • Frame rate für Screencast Videos (Aufzeichnung des Bildschirminhaltes): 10 Frames Per Second (10 FPS)
  • Frame rate für “Talking Head videos“ (normale Filme von Menschen): 30 Frames Per Second (30 FPS)
  • 16:9 Aspect Ratio

Spezielle Einstellungen bei HD (1.280*720):

  • Größe: 1.280 px breit mal 720 px hoch
  • Data Rate/ Bit Rate: 3.000 kBits/Sekunde

Spezielle Einstellungen bei Full HD (1.920*1080)

  • Größe: 1.920 px breit mal 1080 px hoch
  • Data Rate/Bit Rate: 3.000–5.000 kBits/Sekunde

 

Social Media Bild- und Werbegrößen (Image Sizes)

Im Folgenden nun eine Zusammenstellung über die Bildgrößen in Sozialen Netzwerken, die den tollen Beitrag auf HubSpot „The Ultimate Cheat Sheet of Photo & Image Sizes on Facebook, Twitter, LinkedIn & Other Social Networks [Infographic]“ sowie die Grafik Social Media Ad Size 2016 auf bannersnack als Basis haben.

facebook Bildgrößen

  • Cover photo: 851 px breit mal 315 px hoch
  • Profile image: 180 px breit mal 180 px hoch
  • Highlighted image: 1200 px breit mal 717 px hoch
  • Shared image: 1200 px breit mal 630 px hoch
  • Shared link thumbnail image: 1200 px breit mal 627 px hoch

facebook Werbeformate (Sommer 2016)

  • Page Likes: 1200 px breit mal 444 px hoch
  • Local Awareness Lead Generation, Offer Claims,
    App Installs & Engagement, Event Responses:
    1200 px breit mal 628 px hoch
  • Page Post Engagament: 1200 px breit mal 900 px hoch
  • Click to Website, Website Conversion:
    1200 px breit mal 444 px hoch oder
    600 px breit mal 600 px hoch

Google+ Bildgrößen

  • Profile image: 250 px breit mal 250 px hoch
  • Cover image: 1080 px breit mal 608 px hoch
  • Shared image (on home stream): 497 px breit mal 373 px hoch
  • Shared image (on feed or your page): 150 px breit mal 150 px hoch

Instagram Bildgrößen

  • Profile image: 110 px breit mal 110 px hoch
  • Photo size: 1080 px breit mal 1080 px hoch
  • Photo thumbnails: 161 px breit mal 161 px hoch

Instagram Werbeformate (Sommer 2016)

  • Page Post Engagament: 1200 px breit mal 628 px hoch
  • Click to Website, Website Conversion, Page Post Engagement, Mobile App Installs, Mobile Engagement:
    1080 px breit mal 1080 px hoch
  • Click to Website, Website Conversion:
    1936 px breit mal 1936 px hoch

LinkedIn Bildgrößen

  • Background image: 1500 px breit mal 425 px hoch
  • Profile image: 400 px breit mal 400 px hoch
  • Career cover photo: 974 breit px breit mal 330 px hoch
  • Banner image: 646 px breit mal 220 px hoch (minimum)
  • Standard logo: 400 px breit mal 400 px hoch (maximum)

LinkedIn Werbeformate (Sommer 2016)

  • Medium Rectangle:
    300 px breit mal 250 px hoch
  • Wide Skyscraper:
    160 px breit mal 600 px hoch
  • Leaderboard:
    728 px breit mal 90 px hoch

Pinterest Bildgrößen

  • Profile image: 165 px breit mal 165 px hoch
  • Board display: 22 px breit mal 150 px hoch
  • Pin sizes: 236 px breit

Pinterest Werbeformate (Sommer 2016)

  • Promoted Pin:
    600 px breit mal 900 px hoch oder
    600 px breit mal 1200 px hoch

reddit Bildgrößen

reddit Werbeformate (Sommer 2016)

  • Banner: 300 px breit mal 100 px hoch
  • Medium Rectangle: 300 px breit mal 250 px hoch

Snapchat Bildgrößen

Snapchat Werbeformate (Sommer 2016)

  • Snapchat GeoFilters: 1080 px breit mal 1920 px hoch

Tumblr Bildgrößen

  • Profile image: 128 px breit mal 128 px hoch
  • Image post: 500 px breit mal 750 px hoch

twitter Bildgrößen

  • Header photo: 1500 px breit mal 500 px hoch
  • Profile image: 400 px breit mal 400 px hoch
  • In-stream photo: 440 px breit mal 220 px hoch

twitter Werbeformate (Sommer 2016)

  • Website Card, Image App Card:
    800 px breit mal 320 px hoch
  • Lead Generation Card:
    800 px breit mal 200 px hoch
  • Single Image Tweets:
    1200 px breit mal 675 px hoch

YouTube Bildgrößen

  • Display Ads: 300 px breit mal 60 px hoch oder
    300 px breit mal 250 px hoch
  • Overlay Ads: 728 px breit mal 90 px hoch oder
    468 px breit mal 60 px hoch

YouTube Werbeformate (Sommer 2016)

  • Website Card, Image App Card:
    800 px breit mal 320 px hoch

 

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert