Bilder fürs Web optimieren:
Größe, Format, Ladezeit

Ein Bild, das du direkt aus der Kamera nimmst, hat schnell 4000 bis 6000 Pixel Breite und wiegt vier oder fünf Megabyte. Auf deiner Website wird es am Ende vielleicht 800 Pixel breit angezeigt. Der Browser muss trotzdem die volle Datei laden und dann mühsam herunterrechnen. Das ist, als würdest du einen Schrank in der Originalverpackung durch eine Tür tragen, die halb so breit ist. Es funktioniert irgendwie, aber es dauert und kostet Kraft.

Warum große Bilder die Seite ausbremsen

Eine Website lädt nicht auf einen Schlag, sondern Stück für Stück. Jedes Bild ist eine eigene Datei, die über die Leitung muss. Auf schnellem WLAN merkst du den Unterschied kaum. Aber genau deine Kunden sitzen oft nicht am Glasfaser, sondern stehen mit dem Handy am Bodensee, auf dem Markt in Friedrichshafen oder im Zug nach Ravensburg, mit zwei Balken Empfang. Da entscheidet jedes Megabyte darüber, ob jemand wartet oder weiterwischt.

Dazu kommt: Google misst die Ladezeit und bewertet sie. Eine Seite, die spürbar zu lange braucht, bis das große Bild oben erscheint, rutscht in den Suchergebnissen nach unten. Bilder sind fast immer der größte Brocken einer Seite. Wer sie in den Griff bekommt, hat den größten Hebel für eine schnelle Seite schon gezogen.

Die richtige Größe, also Auflösung

Der erste und wichtigste Schritt ist die Auflösung, also wie viele Pixel breit das Bild ist. Hier wird am meisten verschenkt. Die einfache Regel: Ein Bild muss nie breiter sein als der Platz, an dem es später steht. Und für scharfe Displays nimmst du das Doppelte als Sicherheit.

• Großes Titelbild über die ganze Breite: 1600 bis 2000 Pixel Breite reichen. Mehr sieht auf keinem normalen Bildschirm besser aus.
• Bild in einem Textbereich oder einer halben Spalte: 800 bis 1200 Pixel.
• Kleines Vorschaubild, Teammitglied, Logo in einer Liste: 400 bis 600 Pixel.

Ein 6000 Pixel breites Foto auf 1600 Pixel zu verkleinern, halbiert die Dateigröße oft nicht nur, sondern viertelt sie. Und niemand sieht den Unterschied, weil die zusätzlichen Pixel ohnehin nie auf dem Bildschirm landen. Das ist der Schritt mit dem größten Effekt für die geringste Mühe.

Format: WebP statt JPG und PNG

Wenn die Größe stimmt, geht es ums Format. Lange war JPG für Fotos und PNG für Grafiken der Standard. Heute gibt es WebP, und für die meisten Bilder ist es die bessere Wahl. WebP liefert die gleiche sichtbare Qualität wie ein JPG, aber bei oft 25 bis 35 Prozent kleinerer Datei. Alle aktuellen Browser, also Chrome, Safari, Firefox und Edge, zeigen es seit Jahren problemlos an.

Trotzdem hat jedes Format seinen Platz. Hier die einfache Logik, nach der ich entscheide.

Welches Format wofür

Kurz gesagt: Fotos werden WebP. Logos und Symbole mit transparentem Hintergrund bleiben PNG oder, noch besser, SVG. Wenn dein Bildprogramm kein WebP exportiert, ist ein gut komprimiertes JPG völlig in Ordnung, du lässt nur ein bisschen Einsparung liegen.

Komprimieren, ohne dass es auffällt

Komprimieren heißt: Du nimmst bewusst ein klein wenig Bildinformation weg, die das Auge ohnehin kaum wahrnimmt, und sparst dafür viel Dateigröße. Bei Fotos kannst du fast immer auf 70 bis 80 Prozent Qualität gehen, ohne dass irgendjemand den Unterschied sieht. Das ist der Bereich, in dem die Datei deutlich schrumpft, das Bild aber noch makellos aussieht.

Erst wenn du weiter nach unten gehst, wird es sichtbar. Kanten werden weich, und in einheitlichen Flächen wie einem blauen Himmel entstehen kleine Flecken und Schlieren. Mein Vorgehen ist simpel: komprimieren, das Ergebnis in voller Größe anschauen, und wenn etwas matschig wirkt, eine Stufe zurückgehen. Lieber zehn Kilobyte mehr als ein Bild, das billig aussieht.

Wenn du Texte und Bilder ohnehin selbst lieferst, sparst du dir nebenbei einen guten Teil der Projektkosten. Mehr dazu, wie eigene Aufnahmen wirken, steht im Beitrag eigene Fotos statt Stockbilder. Die dort gezeigten Handyfotos lassen sich genauso optimieren wie jedes andere Bild.

Alt-Texte für SEO und Barrierefreiheit

Der Alt-Text ist die Textbeschreibung, die zu jedem Bild gehört. Man sieht ihn normalerweise nicht, aber er erfüllt gleich drei Aufgaben, und keine davon ist Kosmetik.

• Barrierefreiheit. Blinde und sehbehinderte Menschen nutzen einen Screenreader, der die Seite vorliest. Den Alt-Text liest er mit. Ohne ihn hören sie nur das Wort „Bild" oder den Dateinamen.
• Wenn das Bild nicht lädt. Bei schlechtem Empfang oder einem Fehler erscheint der Alt-Text an der Stelle des Bildes. Der Besucher weiß dann wenigstens, was dort sein sollte.
• SEO. Google kann ein Foto nicht mit den Augen sehen. Es liest den Alt-Text, um zu verstehen, was darauf ist. Gute Alt-Texte helfen dir, in der Google Bildersuche aufzutauchen.

Ein guter Alt-Text beschreibt in einem kurzen, ehrlichen Satz, was zu sehen ist. Statt „Bild, Foto, Friseur, Bodensee, Termin, günstig" schreibst du „Friseurin föhnt einer Kundin in einem hellen Salon die Haare". Reihst du nur Suchbegriffe aneinander, merkt Google das und es bringt nichts. Rein dekorative Bilder, die keine Information tragen, bekommen einen leeren Alt-Text, damit der Screenreader sie überspringt.

Tools, die ich wirklich nutze

Du brauchst kein Photoshop und kein Abo. Für die meisten Selbstständigen reichen kostenlose Werkzeuge im Browser völlig aus.

• Squoosh (squoosh.app) von Google. Bild reinziehen, rechts auf WebP stellen, Qualitätsregler auf etwa 75, du siehst sofort die neue Dateigröße. Das beste kostenlose Tool, wenn du verstehen willst, was passiert.
• TinyPNG für schnelles Komprimieren von PNG und JPG ohne Einstellungen. Reinwerfen, kleiner rausholen, fertig.
• Die Fotos-App auf dem Handy oder Mac kann beim Exportieren schon verkleinern. Wähle eine kleinere Größe statt „Original", das nimmt dir die Hälfte der Arbeit ab.
• Reduzieren auf dem Smartphone: Viele Geräte erlauben beim Teilen oder Versenden „kleinere Größe". Schon das hilft, wenn du Bilder an deinen Webdesigner schickst.

Wenn ich eine Seite baue, läuft das automatisch im Hintergrund. Bilder werden beim Veröffentlichen passend verkleinert, in WebP umgewandelt und so eingebunden, dass der Browser nur die Größe lädt, die er gerade braucht. Was dabei zu meinen Leistungen gehört und was du selbst übernehmen kannst, klären wir vorher, damit niemand doppelte Arbeit macht.

Die richtige Bildgröße ist der einzige Performance-Trick, den du ohne technisches Wissen selbst umsetzen kannst, und er bringt mehr als die meisten teuren.

Die Kurzanleitung in fünf Schritten

Wenn du das nächste Mal ein Bild auf deine Seite lädst, geh diese Liste durch. Mehr braucht es in den allermeisten Fällen nicht.

• Verkleinern. Auf die Breite bringen, in der es angezeigt wird, höchstens das Doppelte. Selten über 2000 Pixel.
• Format wählen. Foto wird WebP, sonst JPG. Logo oder Symbol mit Transparenz bleibt PNG oder SVG.
• Komprimieren. Auf etwa 75 Prozent Qualität, Ergebnis prüfen, eine Stufe zurück, falls es leidet.
• Dateigröße checken. Normales Bild unter 200 Kilobyte, großes Titelbild unter 400.
• Alt-Text schreiben. Ein ehrlicher Satz, was zu sehen ist. Dekoration bekommt einen leeren Alt-Text.

Zum Schluss

Bilder sind fast immer der Grund, warum eine Seite langsam ist, und gleichzeitig das, was du am leichtesten selbst verbesserst. Richtige Größe, WebP statt JPG, vernünftig komprimieren, einen sauberen Alt-Text dazu, fertig. Das kostet pro Bild keine zwei Minuten und macht deine Seite spürbar schneller, gerade auf dem Handy, wo die meisten deiner Kunden landen.

Wenn du gerade eine Seite hast, die zäh lädt, und nicht weißt, ob es an den Bildern liegt oder an etwas anderem: ruf kurz an. In 15 Minuten sage ich dir, wo der Bremsklotz sitzt, und das kostet dich nichts außer der Zeit.

Häufige Fragen

Was kostet eine Website am Bodensee 2026?

Visitenkarte 500 bis 1000 €, Landingpage 800 bis 2200 €, Multi Page mit fünf bis acht Unterseiten 2000 bis 3500 €. Individuelle Projekte mit Buchung oder Hotelfunktionen starten ab 3500 €.

Was kostet eine Website für Handwerker am Bodensee?

Für die meisten Handwerker reicht eine Multi Page Seite zwischen 2000 und 3000 €. Wer nur eine schlanke Visitenkarte mit Kontaktformular braucht, ist mit 800 bis 1200 € gut bedient.

Wie lange dauert es, bis meine Website online ist?

Visitenkarte zwei bis drei Tage. Landingpage ein bis zwei Wochen. Multi Page drei bis fünf Wochen. Individuelle Projekte sechs bis zwölf Wochen.

Was kostet Hosting und Wartung einer Website?

Hosting bei 5 bis 10 € im Monat, also 60 bis 120 € im Jahr. Bei ALL INKL.COM ist die Domain inklusive Email Postfach und SSL meist enthalten. Pflegepaket 30 bis 60 € im Monat. Ohne Pflegepaket zahlst du im Jahr nur den Hoster.

Übernimmst du auch bestehende Websites?

Ja. Bevor wir starten, schaue ich mir die bestehende Seite an und sage ehrlich, ob Auffrischung reicht oder Neuaufbau langfristig günstiger ist. Mehr im Beitrag Website Relaunch oder nur auffrischen.