Bubsites Website Service

Eine lächelnde Person mit kurzen Haaren sitzt an einem Tisch und benutzt ein Smartphone. Vor ihr steht ein aufgeklappter Laptop. Die Szenerie scheint ein heller, moderner Raum zu sein. Smiling young woman working on laptop computer while sitting on a kitchen, holding mobile phone

Bildaufbereitung für Websites

Die rich­ti­ge Auf­be­rei­tung von Bil­dern ist eine der wich­tigs­ten Vor­aus­set­zun­gen für eine gut funk­tio­nie­ren­de Web­site. In der Pra­xis sehen wir häu­fig zu gro­ße oder falsch for­ma­tier­te Bild­da­tei­en. Hier fin­den Sie kon­kre­te Richt­wer­te und prak­ti­sche Emp­feh­lun­gen für die Bild­auf­be­rei­tung.

Warum Bildaufbereitung wichtig ist

Nicht oder unzu­rei­chend opti­mier­te Bil­der kön­nen erheb­li­che Aus­wir­kun­gen auf Ihre Web­site haben:

  • Per­for­mance: Zu gro­ße Bild­da­tei­en ver­län­gern die Lade­zei­ten deut­lich und frus­trie­ren Besu­cher.
  • Erschei­nungs­bild: Falsch for­ma­tier­te oder dimen­sio­nier­te Bil­der beein­träch­ti­gen das Erschei­nungs­bild der Web­site.
  • Such­ma­schi­nen­ran­king: Lang­sa­me Lade­zei­ten wir­ken sich nega­tiv auf die Posi­ti­on in den Such­ergeb­nis­sen aus.
  • Kos­ten: Inef­fi­zi­en­te Spei­cher­platz­nut­zung auf Ser­ver und in Back­ups führt zu ver­meid­ba­ren Mehr­kos­ten.
  • Wart­bar­keit: Über­gro­ße Datei­en kön­nen Backup-Prozesse stö­ren und erhö­hen das Risi­ko von Daten­ver­lus­ten.

Richtwerte für Bildgrößen und Dateiformate

Es exis­tiert kei­ne uni­ver­sell gül­ti­ge Regel, den­noch haben sich die fol­gen­den Stan­dards in der Pra­xis bewährt:

Standardformat für Webversionen von Bildern

  • Datei­for­mat: Das JPG-Format eig­net sich für Fotos und rea­lis­ti­sche Bil­der, PNG für Gra­fi­ken und Logos.
  • Alter­na­ti­ve For­ma­te: WebP bie­tet bes­se­re Kom­pres­si­on bei glei­cher Qua­li­tät, SVG eig­net sich für ska­lier­ba­re Gra­fi­ken.
  • Farb­raum: Ver­wen­den Sie aus­schließ­lich den RGB-Farbraum für Web­dar­stel­lung.
  • Bild­grö­ße: Eine Brei­te oder Höhe von 1.200 Pixeln (län­ge­re Sei­te) ist für die meis­ten Anwen­dun­gen aus­rei­chend.
  • Datei­grö­ße: Hal­ten Sie die Datei­grö­ße unter 150 KB für opti­ma­le Per­for­mance.

Ausnahmen für große Bilder

  • Header- und Fullscreen-Bilder: Datei­grö­ße bis maxi­mal 300 KB mög­lich.
  • Abso­lu­te Ober­gren­ze: Auch in Aus­nah­me­fäl­len soll­ten Bil­der 500 KB nicht über­schrei­ten.

Format für Printversionen

Wenn Sie druck­fä­hi­ge Ver­sio­nen zum Down­load anbie­ten möch­ten:

  • Datei­for­mat: Ver­wen­den Sie das JPG-Format für opti­ma­le Kom­pa­ti­bi­li­tät.
  • Farb­raum: Stel­len Sie den CMYK-Farbraum für pro­fes­sio­nel­len Druck sicher.
  • Bild­qua­li­tät: Eine Auf­lö­sung von 300 DPI ist Stan­dard für Druckerzeug­nis­se.
  • Min­dest­grö­ße: Die län­ge­re Sei­te soll­te min­des­tens 12 cm betra­gen (bei 300 DPI etwa 1.400 Pixel). Die tat­säch­lich benö­tig­te Grö­ße rich­tet sich nach dem Ver­wen­dungs­zweck.
  • Datei­grö­ße: Hal­ten Sie die Grö­ße unter 5 MB, sofern kei­ne spe­zi­el­len Anfor­de­run­gen bestehen.

Systematische Benennung der Dateien

Eine durch­dach­te Benen­nungs­struk­tur erleich­tert die Ver­wal­tung Ihrer Bil­der erheb­lich:

Grundlegende Regeln

  • Klein­schrei­bung: Ver­wen­den Sie aus­schließ­lich Klein­buch­sta­ben für bes­se­re Ser­ver­kom­pa­ti­bi­li­tät.
  • Erlaub­te Zei­chen: Ver­wen­den Sie nur Buch­sta­ben des eng­li­schen Alpha­bets, Zah­len, Bin­de­stri­che und Unter­stri­che. Alle ande­ren Zei­chen, ins­be­son­de­re Umlau­te, schar­fes „ß““ und Leer­zei­chen, sind zu ver­mei­den.
  • Trenn­zei­chen: Ver­wen­den Sie Bin­de­stri­che oder Unter­stri­che als Wort­trenn­zei­chen.
  • Kate­go­ri­sie­rung: Set­zen Sie aus­sa­ge­kräf­ti­ge Kür­zel vor den eigent­li­chen Datei­na­men.
  • Ver­sio­nie­rung: Kenn­zeich­nen Sie ver­schie­de­ne Ver­sio­nen durch nach­ge­stell­te Kür­zel.

Bildkategorien (Präfixe)

  • cv: Cover (z.B. Buch­co­ver)
  • pt: Por­trait
  • il: Illus­tra­ti­on
  • ia: Innen­an­sicht
  • ss: Screen­shot
  • bg: Hin­ter­grund
  • ic: Icon
  • bn: Ban­ner
  • sl: Slide
  • ds: Design

Zusätzliche Kennzeichnungen

  • c: Copy­right (vor dem Namen des Urhe­bers)
  • web: Web­ver­si­on
  • print: Print­ver­si­on
  • orig: Ori­gi­nal­ver­si­on

Beispiele

  • Buch­co­ver: cv-kafka-die-verwandlung-web
  • Por­trait: pt-kafka-franz-c-marta-bildlich-web
  • Illus­tra­ti­on: il-kaefer-von-vorne-c-egon-lichter

Automatisierung und Redaktionsservice

Für Web­sites mit hohem Bild­auf­kom­men oder spe­zi­el­len Anfor­de­run­gen bie­ten wir effi­zi­en­te Lösun­gen an. Details dazu fin­den Sie in unse­rem sepa­ra­ten Arti­kel zur auto­ma­ti­sier­ten Bild­op­ti­mie­rung.

Die fach­ge­rech­te Auf­be­rei­tung von Bil­dern und ande­ren Web­in­hal­ten erfor­dert Zeit und Erfah­rung. Wenn Sie Unter­stüt­zung bei der redak­tio­nel­len Arbeit benö­ti­gen, steht Ihnen unser Redak­ti­ons­ser­vice zur Ver­fü­gung. Die­ser lässt sich ide­al mit unse­rem tech­ni­schen War­tungs­ser­vice kom­bi­nie­ren.

Weiterführende Informationen

Ger­ne bera­ten wir Sie zu Ihren kon­kre­ten Anfor­de­run­gen – spre­chen Sie uns an. Wei­te­re hilf­rei­che Infor­ma­tio­nen fin­den Sie in die­sen Arti­keln: