Schnellanfrage +49 781 31055-100
Sie können Ihre Einwilligung jederzeit per E-Mail an info@vioma.de widerrufen. Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer Datenschutzerklärung.
  • info@vioma.de
  • +49 781 31055-100
  • Unverbindliche Beratung anfordern!
  • +49 781 31055-100
  • Unverbindliche Beratung anfordern!
  • info@vioma.de
  • Call+49781310550
  • Company
    • Leadership
    • History
    • Karriere
    • Sales
    • Buchhaltung
    • Kontakt
    • Impressum
    • Datenschutzhinweise
  • Systems
    • Buchungsstrecke
    • Verwaltungssystem CST PRO
    • Gutscheinverkauf
    • Schnittstellen
    • Channel Manager
    • Angebotsmanagement
    • Support & Software Consulting
    • Reputationsmanagement
    • vioma PAY
    • Meta Search
    • Multi Property Engine
    • Tech-News
  • Websites
    • Webdesign & Konzeption
    • Conversion Rate & Usabilty
    • Team Websites
    • Referenzen
    • Website-Check
    • Hilfe & Support
  • Online Marketing & Consulting
    • Consulting & Strategie
    • Suchmaschinenwerbung
    • Suchmaschinenoptimierung
    • Newsletter-Marketing
    • E-Mail-Marketing
    • Portal-Marketing
    • Social Media
    • Workshops
  • Helpdesk & Support
  • Facebook
  • Twitter
  • Xing
  • YouTube
  • Instagram
  • Linkedin

Websites Wiki: Bilder fürs Web optimieren - welche Bilddateiformate sind geeignet?

Bilder für das Web optimieren und speichern

Bilder können in verschiedenen Dateiformaten gespeichert und ins Netz hochgeladen werden. JPEG, PNGs, GIF, WEBP, Bitmap und einige Formate mehr. Wer auf die Seitenladegeschwindigkeit der eigenen Website einen hohen Wert legt, sollte seine Bilder allerdings nicht willkürlich in irgendeinem Format abspeichern. In diesem Artikel erklären wir, welches Dateiformat sich für welche Art von Bild am besten für das Web eignet.

  1. vioma GmbH
  2. Bilder für das Web optimieren

Inhaltsverzeichnis

    Fragen und Antworten
  1. Warum Bilder für das Web optimieren?
  2. Welche Dateiformate für welchen Anwendungsfall am besten verwenden?
    1. Bildformate für Fotos: WebP oder JPEG (Qualität: 70)
    2. Bildformate für Logos: SVG, WebP oder PNG (8-Bit)
    3. Bildformate für Icons: Font, SVG oder PNG
    4. Bildformate für Bilder mit Text: PNG
    5. Animierte Bilder: WebP oder GIF
  3. Was sollte ich für optimierte Bilder im Web noch beachten?
    Weitere Infos
  1. Beratung zu Pagespeed Optimierung
  2. Newsletter

Warum Bilder für das Web optimieren?

Gerade für Nutzer, die mit Mobilgeräten auf Ihre Website zugreifen, ist es empfehlenswert die richtigen Dateiendungen für Bilder zu wählen. Einige Bildformate wie JPEG sind komprimiert, ähnlich einer ZIP-Datei, welche weniger Dateigröße benötigt und demnach schneller und mit weniger Datenlast an den Nutzer ausgeliefert werden kann. Andere Bildformate wie PNGs oder GIF-Dateien sind nicht komprimiert und haben damit eine höhere Dateigröße, haben dafür aber andere Vorzüge und Möglichkeiten wie Transparenz zum Hintergrund.

Um Nutzern also möglichst Datenlast zu ersparen und die Website schneller laden zu lassen, sollte man seine Bilder für das Web optimieren und in den wie folgt beschriebenen Anwendungsfällen abspeichern und hochladen.

Welche Dateiformate für welchen Anwendungsfall am besten verwenden?

Nicht jedes Bildformat ist für jeden Einsatz geeignet. Hier eine Auflistung, wann JPEG, PNG, SVG oder GIF für das Web am besten zum Einsatz kommen.

Bildformate für Fotos: WebP oder JPEG (Qualität: 70)

Fotos haben viele reichhaltige Details in sich, was es für unkomprimierte Dateiformate sehr schwer an Datenlast macht. Entsprechend sollte für Fotos immer ein Bildformat gewählt werden, das eine Komprimierung zulässt. Hierfür wurde das Format JPEG entwickelt, das mit .jpg oder .jpeg im Dateinamen endet.

JPEG-Bilder haben darüber hinaus die Fähigkeit, eine Qualitätsrate zwischen dem Wert 0 und Wert 100 festlegen zu können. Je niedriger der Wert, desto geringer ist die Dateigröße - allerdings nimmt dabei die Qualität des Bildes immer deutlicher ab. Für das Web empfielt sich der Einsatz der Qualitätsstufe 70.

Unterstützt Ihre Website auch die dynamische Ausgabe von WebP-Bildern, sollten Sie standardmäßig allerdings WebP für Fotos einsetzen. WebP ist noch mal deutlich kleiner als JPEG, wird allerdings nicht von allen Browsern unterstützt.

Fotogrößen anhand Dateiformaten - Beispiele:

Zur Vergrößerung auf das Bild klicken:

WebP Bild BeispielWebP: 83,45 KB
  • 1920x1277 Pixel
  • Wird von Internet Explorer nicht unterstützt.
  • Wird erst ab Safari 14 unter macOS 11 Big Sur oder höher unterstützt.
JPG Bild Qualität 70JPG (70 Qualität): 258,08 KB
  • 1920x1277 Pixel
JPG Bild Beispiel Qualität 100JPG (100 Qualität): 924,05 KB
  • 1920x1277 Pixel
PNG Bild BeispielPNG: 2,29 MB
  • 1920x1277 Pixel
GIF Bild BeispielGIF: 1,2 MB
  • 1920x1277 Pixel
  • Einschränkung auf 256 Farben

Bildformate für Logos: SVG, WebP oder PNG (8-Bit)

Logos enthalten üblicherweise scharfe Kanten und der Hintergrund soll in der Regel transparent sein. In solchen Fällen eignet sich eine Vektorgrafik am besten. Vektorgrafiken wie das Bildformat SVG es bereitstellt enthalten nur die Formen in einem Bildkoordinatensystem und die Farbwerte und ist damit extrem klein. Ein weiterer großer Vorteil von SVG-Dateien ist, dass diese ihre Qualität beim Vergrößern der Datei - dank dem Koordinatensystem - nicht verlieren. Ein SVG-Logo kann sowohl klein im Header, als auch groß im Footer eingesetzt werden, obwohl es sich dabei um exakt das gleiche Bild handelt.

PNG-Dateien wären die Zweitwahl für Logos, wenn keine SVG-Vektorgrafik vorliegt. PNG ist unkomprimiert, aber erlaubt scharfe Kanten und hat keine "Komprimierungs-Artefakte", wie sie bei JPEG etwa vorkommen. Zusätzlich erlauben sie einen transparenten Hintergrund über einen Alpha Kanal, was für Logos auf einer Bildergalerie im Hintergrund zum Einsatz kommen kann.

Empfohlene Logoformate - Beispiele:

Zur Vergrößerung auf das Bild klicken:

SVG Logo BeispielSVG: 2,28 KB
  • 417x228 Pixel
  • Größe "unendlich" skalierbar
WebP Logo BeispielWebP: 3,91 KB
  • 417x228 Pixel
  • Transparenz möglich
  • Wird von Safari und Internet Explorer nicht unterstützt.
PNG 8-bit Logo BeispielPNG (8 Bit) 4,08 KB
  • 417x228 Pixel
  • Transparenz möglich
PNG Logo BeispielPNG (normal): 7,34 KB
  • 417x228 Pixel
  • Transparenz möglich
GIF Logo BeispielGIF: 5,73 KB
  • 417x228 Pixel
  • Je nach Skalierung treten Artefakte auf
  • Keine guten scharfen Kanten möglich
  • Transparenz möglich
JPG Logo Qualität 70 BeispielJPG (Qual. 70): 14,25 KB
  • 417x228 Pixel
  • Je nach JPG-Qualität treten Artefakte auf
  • Keine Transparenz möglich

Bildformate für Icons: Font, SVG oder PNG

Setzen Sie auf Ihrer Website verschiedene Icons ein, empfiehlt sich hierfür ebenfalls Vektorgrafiken und damit der Einsatz von SVG. Diese sind deutlich kleiner und können in ihrer Größe je nach Einsatz skaliert werden.

Überlegenswert ist aber, alle SVG-Icons in einem Font zusammenzuführen. Ja, das bedeutet, alle SVG-Icons in einer eigenen Schriftart zusammenzufassen. Innerhalb einer Schriftart haben Icons zusätzliche Eigenschaften. Zwar verlieren die Icons ihre originalen Farbwerte damit, aber wie bei normalen Text kann die Farbe für die Icons dann frei gewählt werden. Das gleiche Icon in drei verschiedenen Farben wird dann durch ein Icon als Schriftsatz bereitgestellt. Für die Ladezeiten hat das zusätzlich den Vorteil, dass nich mehrere Dateien nacheinander geladen werden müssen, sondern nur eine Datei, die selbst komprimiert werden kann.

Sind für die Icons keine Vektorgrafiken möglich und sind die Icons selbst PNG-Dateien, sollten sie auch bei PNG bleiben. Diese gewährleisten zumindest scharfe Kanten und Transparenz.

Bildformate für Bilder mit Text: PNG

Wenn es notwendig ist, ein Bild mit Text innerhalb des Bildes abzuspeichern, empfiehlt sich meist der Einsatz von PNGs. Obwohl JPEG-Bilder deutlich kleiner sind, hat JPEG bei harten Kanten wie Text kleine Probleme und löst Artefakte aus. Um den Effekt zu vermeiden, empfiehlt sich dann ein PNG-Bild.

In der Regel sollte aber versucht werden, keinen Text innerhalb eines Bildes unterzubringen. Text kann auch mit HTML und CSS über ein Bild gelegt werden, was deutlich freundlicher für den Nutzer und die Datenlast ist.

Animierte Bilder: WebP oder GIF

Animierte Bilder sollten Sie grundsätzlich nicht mehr einsetzen. Aber wenn Sie es trotzdem wünschen, sollten Sie vorrangig WebP als Format wählen, da das eine Animation und Komprimierung des Bildes zulässt. In der Regel ist es damit kleiner in der Dateigröße als das fossile Bildformat GIF. WebP unterstützt zudem auch 24-Bit RGB-Farben und Transparenz mit 8-Bit Alpha Kanal.

Dem gegenüber steht GIF, ein altes Bildformat, das nur 256 Farben zulässt. Animationen sind damit möglich und auch Transparenz über einen 1-Bit Alpha Kanal. 256 Farben und nur 1-Bit Alpha Kanal sind der Grund, warum GIF-Animationen häufig nicht gut aussehen. Und die Datengröße ist im Vergleich zu anderen Formaten relativ enorm.

Eine Alternative zu animierten Bildern wäre ein animiertes Kurzvideo als WemM- oder MP4-Format, das häufig besser geeignet ist.

Was sollte ich für optimierte Bilder im Web noch beachten?

  • Bilder in korrekten Breiten und Höhen ausgeben
    Stellen Sie sicher, dass die Bilder auf der eingebundenen Seite nicht in Vollbildgröße wie etwa Full-HD-Größe geladen werden, wenn das eingesetzte Bild deutlich kleiner ausgegeben wird. In der Größe wie es für den Nutzer ausgegeben wird, sollte auch das Bild in der Bildgröße sein.
  • Mehrere Bildgrößen mit srcset ausgeben
    Moderne Browser unterstützen dein Einsatz von srcset. srcset ist ein Attribut für Bilder, in dem mehrere Bildergrößen des gleichen Bilds hinterlegt werden können. Der Browser entscheidet auf Basis seiner Bildschirmbreite dann, welches Bild er herunterlädt.
  • Bilder mit Lazy Loading nachladen
    Nicht jedes Bild muss beim Seitenaufruf direkt und sofort mitgeladen werden. "Lazy geladene Bilder" werden erst dann geladen, wenn man kurz vor dem Bild hin scrollt. Gerade für die Pagespeed Optimierung der eigenen Website ist das eine gute Möglichkeit, hohe Datenlast direkt beim Seitenaufbau zu verringern.
  • Bilder-SEO für bessere Rankings in Bilder-Suchergebnissen
    Wenn Sie sich fragen, wie Sie in der Google Bildersuche oder anderen Bilddarstellungen von Suchmaschinen besser gefunden werden wollen, dann wird Ihnen die Seite Bilder-SEO gefallen. Mit diesen Tipps kommen Sie weiter nach vorne.

Hilfe und Beratung zu Pagespeed Optimierung?

Beratung erwünscht?

Patrick Uhlmann

Patrick Uhlmann

Wenn Sie eine neue schnelle Website benötigen die gleich alle Vorzüge für Pagespeed mit sich bringt, können Sie mich gerne kontaktieren.

  • Telefon: +49 (0)781 31055-100
  • Mail: sales@vioma.de

Beratung per Kontaktformular

Up to date bleiben

vioma Newsletter Anmeldung

Produkte & Dienstleistungen der vioma GmbH

vioma Solutions

 Hotel & Tourismus Systeme

  •  Hotel Buchungssystem
  •  Hotel Channel Manager
  •  Hotel Verwaltungssystem CST PRO
  •  Gutscheinverkauf für Hotels
  •  Reputationsmanagement & Bewertungen
  •  Multi Property Engine für Portale

 Websites für Hotels

 Hotel Online Marketing

  •  Consulting & Strategie
  •  Suchmaschinenwerbung SEA
  •  Suchmaschinenoptimierung SEO
  •  Influencer-Marketing
  •  Newsletter-Marketing
  •  Portal-Marketing
  •  Social Media Marketing

Kontakt aufnehmen und mehr erfahren

Want More?

shortcut

  •  Erstkontakt & Vertrieb
  •  support & helpdesk
  •  Karriere bei vioma
  •  Datenschutzhinweise
  •  Datenschutzeinstellungen
  •  AGB
  •  Impressum
  •  AnyDesk

kontakt

vioma GmbH
Industriestraße 27
77656 Offenburg
T +49 781 31055-0
F +49 781 31055-29 
info@vioma.de

  • Facebook
  • Twitter
  • Xing
  • YouTube
  • Instagram
  • Linkedin
Umgebungskarte

Zertifizierungen & Awards

  • Auszeichnung Top hotel Star Award 2018 Verkaufsförderung Silber für vioma Voucher
  • Auszeichnung Top hotel Star Award 2017 Online Gold
  • Auszeichnung Top hotel Star Award 2016 Verkaufsförderung Gold
  • Logo Partner DEHOGA Baden-Württemberg
  • Logo bing ads Accredited Professional
  • Logo Google Partners Premier
  • Auszeichnung IntelliAd Qualified Expert
  • Logo ServiceQualität Deutschland
  • Proven Expert Siegel

Partner

  • Logo Trivago
  • Logo Basenfasten
  • Logo Bio Hotels
  • Logo Wellness Heaven® Hotel Guide
  • Logo RIPE NCC Member
  • Logo Top Gahn Consulting. Coaching. Competence.
  • Logo protel Hotel Software
  • Logo Oracle Validated Integration Oracle Hospitality
  • Logo ASA Hotel Software
  • Logo hotline Mehr als ein Hotelprogramm
  • Logo viato Software for Hospitality & Tourism
  • Logo GASTROdat Hotel. Software & Marketing
  • Logo Hotel Profi Eine Marke der Datareform
  • Logo Elite solutions
  • Logo ReGuest
  • Code2Order Logo
  • SIHOT Hotel Management Software Logo
  • Logo Hoga Data
  • Logo Casablanca
  • Logo DNS
  • Logo RateBoard
  • Logo Happyhotel
  • Logo HN Performance
  • Logo Xenus Hotelsoftware
  • Sitec Front Office Cloud Logo
  • Zimmersoftware.at Logo
  • Guestnet Logo

Lassen Sie Ihre Website von uns kostenlos durchchecken!

Ihr persönlicher vioma Website Check, schnell und einfach.

Kostenlosen Check anfordern

Datenschutzeinstellungen

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern.

Durch erneuten Aufruf des Consent-Dialogs können Sie Ihre Einstellung jederzeit ändern. Weitere Informationen finden Sie in unseren Datenschutzhinweisen.

Hier können Sie verwendete Tags / Tracker / Analyse-Tools individuell aktivieren und deaktivieren.

DatenschutzhinweiseImpressum