Zipnify Schnelle Bildtools. Null Uploads.Bilder für eine schnelle Website: Größe, Format und bewährte Praxis
Bilder machen oft mehr als die Hälfte des Gewichts einer Webseite aus. Bereiten Sie sie nicht vor, lädt Ihre Seite langsam, Besucher springen ab und Suchmaschinen bemerken es. Die gute Nachricht: Bilder zu optimieren ist eine der einfachsten Verbesserungen mit der größten Wirkung. Dieser Ratgeber liefert ein praktisches Rezept.
Warum Bilder für die Geschwindigkeit wichtig sind
Eine Seite mit zehn 4-MB-Fotos zwingt den Besucher, 40 MB herunterzuladen – sehr langsam auf einem Handy mit mobilen Daten. Eine lange Ladezeit erhöht die Absprungrate und schadet dem Erlebnis. Suchmaschinen betrachten Geschwindigkeit als Qualitätsfaktor, besonders auf Mobilgeräten.
Das Bildgewicht zu senken erfordert keine technischen Kenntnisse: Es genügt, einige einfache Kriterien konsequent anzuwenden.
Abmessungen: nicht mehr Pixel hochladen, als angezeigt werden
Die häufigste Ursache schwerer Bilder ist, das Foto so hochzuladen, wie es aus der Kamera kommt. Wird das Bild auf Ihrer Seite mit 800 Pixeln Breite angezeigt, verbessert ein Upload mit 4000 nichts Sichtbares und vervielfacht das Gewicht. Ermitteln Sie die maximale Breite auf dem Bildschirm und laden Sie eine Version in dieser Breite hoch, oder die doppelte für Schärfe auf hochauflösenden Displays.
Richtwerte: Hauptbild/Header 1600 bis 1920 Pixel; Artikelbilder 1000 bis 1200; Produktvorschaubilder 400 bis 600; Icons das nötige Minimum.
Zielgewicht je Bildtyp
Als vernünftiges Ziel sollte ein Headerbild unter 200 bis 300 KB bleiben, Inhaltsbilder zwischen 60 und 150 KB und Vorschaubilder unter 40 KB. Das sind keine strikten Grenzen, sondern Ziele, die die Gesamtgröße der Seite handhabbar halten, idealerweise unter 1 bis 2 MB.
Nutzen Sie das Komprimierungswerkzeug oder das Werkzeug für exakte Dateigröße, um diesen Werten nahezukommen, und prüfen Sie, ob die Qualität gut bleibt.
Das passende Format
Wählen Sie WebP oder JPG für Fotografien, PNG oder WebP für Grafiken mit Transparenz und SVG für Logos und Vektor-Icons, die bei jeder Größe scharf bleiben und sehr wenig wiegen. Vermeiden Sie schwere animierte GIFs: Ein kurzes Video in einem modernen Format ist meist viel leichter.
Geben Sie jedem Bild einen beschreibenden Namen in Kleinbuchstaben mit Bindestrichen, zum Beispiel „blaue-laufschuhe.webp“ statt „IMG_2043.jpg“.
Verzögertes Laden und Alternativtext
Bilder außerhalb des ersten Bildschirmbereichs müssen nicht beim Öffnen der Seite geladen werden. Das Lazy-Loading-Attribut des Browsers lässt sie erst herunterladen, wenn der Besucher sich ihnen nähert. Für das Hauptbild, das sofort sichtbar ist, wenden Sie kein verzögertes Laden an.
Fügen Sie immer einen Alternativtext hinzu, der das Bild beschreibt. Er hilft Menschen mit Screenreadern, erscheint, wenn das Bild nicht lädt, und gibt Suchmaschinen Kontext.
Ein Rezept für den Start heute
Erstens: Skalieren Sie Ihre Bilder auf die Breite, die Sie tatsächlich nutzen. Zweitens: Wandeln Sie sie in WebP oder JPG mit Qualität zwischen 75 und 85 um. Drittens: Prüfen Sie, ob jedes das Zielgewicht erreicht. Viertens: Benennen Sie sie klar und fügen Sie Alternativtext hinzu. Fünftens: Testen Sie Ihre Seite auf einem Handy mit normaler Verbindung.
Machen Sie das bei jedem neuen Inhalt, und hat Ihre Seite schon viele schwere Bilder, beginnen Sie mit denen der meistbesuchten Seiten.
Werkzeug ausprobieren: Bild komprimieren
Häufige Fragen
Wie viel sollte ein Webbild wiegen?
Als Ziel: Header unter 200 bis 300 KB, Inhaltsbilder 60 bis 150 KB, Vorschaubilder unter 40 KB.
Soll ich das Bild in Kameragröße hochladen und die Seite verkleinern lassen?
Nein. Der Besucher lädt trotzdem die schwere Datei herunter. Skalieren Sie vor dem Hochladen.
Eignet sich SVG für Fotos?
Nein. SVG ist für Logos, Icons und Vektorzeichnungen. Für Fotos nutzen Sie WebP oder JPG.
Was ist ein Alternativtext?
Eine kurze Beschreibung des Bildes, die Screenreadern und Suchmaschinen hilft und angezeigt wird, wenn das Bild nicht lädt.