Bilder für die Website verkleinern und richtig benennen
Tipps, wie man Bilder für Website, Shop und KI-Suche richtig optimieren
Grosse Bilder können eine Website unnötig langsam machen. Mit dem kostenlosen Bild Resizer von WUK verkleinern und konvertieren Sie Ihre Bilder direkt online. Die passende Grösse für Webseiten ist bereits voreingestellt. Gleichzeitig können Sie einen sinnvollen Dateinamen vergeben und Ihre Bilder besser organisieren.
Warum grosse Bilder auf einer Website problematisch sind
Moderne Smartphones und Kameras erstellen Bilder in sehr hoher Auflösung. Eine einzelne Datei kann schnell 5, 7 oder mehr Megabyte gross sein.
Für den Druck kann diese Qualität sinnvoll sein. Auf einer Website ist sie meistens unnötig.
Zu grosse Bilder können:
- die Ladezeit der Website verlängern
- Besucherinnen und Besucher ungeduldig machen
- auf mobilen Geräten unnötig viele Daten verbrauchen
- die technische Qualität und Performance der Website beeinträchtigen
Bevor ein Bild auf eine Website hochgeladen wird, sollte es deshalb auf eine passende Grösse reduziert werden.
Bildoptimierung bei grossen Onlineshops
Wie wichtig ein sauberes Vorgehen ist, zeigte sich bei einem unserer Kundenprojekte. Für einen Onlineshop mussten rund 10'000 Produktbilder überprüft und optimiert werden.
Die vorhandenen Dateien unterschieden sich stark. Einige kleine PNG-Dateien umfassten nur wenige Kilobyte, einzelne Bilder waren jedoch bis zu 53 MB gross. Da die Bilder über eine Business-Software verwaltet wurden, konnten sie nicht einfach heruntergeladen, bearbeitet und wieder hochgeladen werden.
Bei solchen Bildmengen braucht es ein technisch sicheres Vorgehen. Deshalb erstellten wir serverseitig zuerst einen Klon der Bilder. So konnten wir mit einer Kopie arbeiten, ohne die Originaldateien oder den laufenden Shop zu gefährden.
Bilder ohne komplizierte Software verkleinern
Stefan hat bereits vor längerer Zeit einen eigenen Bild Resizer programmiert. Das Tool ermöglicht es, Bilder direkt im Browser zu verkleinern und in ein geeignetes Dateiformat umzuwandeln.
Sie müssen keine zusätzliche Software installieren und benötigen auch kein Benutzerkonto.
Die Anwendung ist bewusst einfach aufgebaut:
- Bilder auswählen und hochladen
- gewünschte Einstellungen kontrollieren
- Ausgabenamen eintragen
- Bilder verarbeiten und herunterladen
Die ideale Bildgrösse für Webseiten ist bereits voreingestellt. Sie können deshalb auch eine Datei mit beispielsweise 7 MB hochladen. Der Bild Resizer reduziert sie automatisch auf eine deutlich kleinere und für Webseiten geeignetere Grösse.
Mehrere Bilder gleichzeitig bearbeiten
Sie können mehrere Dateien gleichzeitig hochladen und gemeinsam bearbeiten. Das ist besonders praktisch, wenn Sie beispielsweise neue Bilder für eine Website, einen Blogbeitrag, ein Angebot oder ein Projekt vorbereiten.
Ganze Ordner können aktuell nicht hochgeladen werden. Sie können jedoch mehrere Bilder markieren und in einem Arbeitsschritt verarbeiten.
Dadurch müssen Sie nicht jedes Bild einzeln öffnen, anpassen und abspeichern.
Der Ausgabename ist besonders wichtig
Ein Punkt wird bei der Bildoptimierung häufig vergessen: der Dateiname.
Kamerabilder tragen oft Namen wie:
IMG_4837.jpg
Dieser Name sagt weder Ihnen noch Google, was auf dem Bild zu sehen ist.
Vergeben Sie deshalb beim Feld «Ausgabename» immer einen klaren und beschreibenden Namen. Statt einer zufälligen Zahlenkombination verwenden Sie beispielsweise:
linkedin-workshop-baden.jpg
oder
restaurant-garten-baden.jpg
Ein sinnvoller Dateiname hat mehrere Vorteile:
- Sie finden das Bild später schneller wieder
- Ihre Dateien bleiben übersichtlich organisiert
- Google kann den Inhalt des Bildes besser einordnen
- das Bild kann in der Google Bildersuche besser verstanden werden
Der Dateiname allein ist keine Garantie für eine gute Platzierung bei Google. Er ist jedoch ein sinnvoller Bestandteil einer sauberen Bildoptimierung.
Achten Sie beim Benennen Ihrer Bilder auf einige einfache Regeln:
- alles klein schreiben
- Wörter mit Bindestrichen trennen
- keine Leerzeichen verwenden
- Umlaute und Sonderzeichen vermeiden
- keine kryptischen Kamera- oder Systemnamen übernehmen
- Begriffe verwenden, die den tatsächlichen Bildinhalt beschreiben
Der Dateiname soll verständlich zeigen, was auf dem Bild zu sehen ist. Eine lange Aneinanderreihung möglichst vieler Keywords bringt dagegen keinen zusätzlichen Nutzen.
Bilder für Google verständlicher machen
Google erkennt Bilder nicht nur über deren visuelle Inhalte. Auch der Zusammenhang auf der Website spielt eine wichtige Rolle.
Dazu gehören unter anderem:
- der Dateiname
- der Alt-Text
- die Bildunterschrift
- der Text rund um das Bild
- das Thema der jeweiligen Seite
Der Bild Resizer hilft Ihnen dabei, bereits vor dem Hochladen einen verständlichen und einheitlichen Dateinamen zu vergeben.
Den Alt-Text tragen Sie anschliessend direkt in Ihrer Website oder im verwendeten Content-Management-System ein, beispielsweise in WordPress.
Ein guter Alt-Text beschreibt knapp und verständlich, was auf dem Bild zu sehen ist. Er ist zudem wichtig für die Barrierefreiheit.
Ein Beispiel:
Dateiname:
wuk-linkedin-workshop-fuer-kmu-baden.jpg
Alt-Text:
LinkedIn Workshop für KMU in Baden mit praktischen Übungen zur Profiloptimierung
Inhaltlicher Zusammenhang:
Das Bild wird in einem Abschnitt über LinkedIn Workshops für Unternehmen und Teams eingesetzt.
Dateiname, Alt-Text, Bildinhalt und Seitentext vermitteln dadurch dieselbe Information. Das hilft Menschen, Suchmaschinen und KI-Systemen, den Zusammenhang besser zu verstehen.
Welche Bildgrösse eignet sich für eine Website?
Ein Bild muss nicht 6'000 Pixel breit sein, wenn es auf der Website nur mit 1'200 Pixel angezeigt wird. Die passende Grösse hängt davon ab, wo und wie das Bild verwendet wird.
Als Orientierung können folgende Werte dienen:
- Blog- und Beitragsbilder: ungefähr 1'200 bis 1'600 Pixel Breite
- Vorschaubilder: ungefähr 600 bis 900 Pixel Breite
- Produktbilder: je nach Shopsystem und Zoomfunktion ungefähr 1'000 bis 2'000 Pixel Breite
- Social-Media-Grafiken: passend zum Format der jeweiligen Plattform
Entscheidend ist nicht die grösstmögliche Auflösung, sondern eine Bildgrösse, die zur tatsächlichen Darstellung passt.
JPG, PNG oder WebP?
Je nach Bild und Verwendungszweck eignen sich unterschiedliche Dateiformate.
JPG
JPG eignet sich besonders für Fotografien und Bilder mit vielen Farben. Die Dateien lassen sich stark verkleinern und sind mit praktisch allen Systemen kompatibel.
PNG
PNG eignet sich beispielsweise für Grafiken, Logos oder Bilder mit transparentem Hintergrund. PNG-Dateien können jedoch deutlich grösser sein als vergleichbare JPG- oder WebP-Dateien.
WebP
WebP ist ein modernes Bildformat, das eine gute Bildqualität mit einer vergleichsweise kleinen Dateigrösse verbindet. Für viele Webseiten ist WebP deshalb eine gute Wahl.
Mit dem Bild Resizer können Sie Ihre Bilder in unterschiedliche Formate konvertieren und passend für den jeweiligen Einsatz vorbereiten.
Bilder richtig für die Website vorbereiten
Ein sinnvoller Ablauf sieht so aus:
- Passendes Bild auswählen
- Bild zuschneiden und auf die benötigte Pixelgrösse reduzieren
- Verständlichen Dateinamen vergeben
- Passendes Dateiformat wählen
- Datei bei Bedarf zusätzlich komprimieren
- Bild auf die Website hochladen
- Alt-Text und weitere Bildinformationen im Content-Management-System ergänzen
Damit vermeiden Sie unnötig grosse Dateien und schaffen gleichzeitig eine saubere Grundlage für Website-Performance, Barrierefreiheit und Auffindbarkeit.
Bilder zusätzlich komprimieren
Der WUK Bild Resizer reduziert die Abmessungen eines Bildes und wandelt es in das gewünschte Dateiformat um. In vielen Fällen ist die Datei danach bereits deutlich kleiner.
Falls ein Bild trotzdem noch ungewöhnlich gross ist, können Sie es zusätzlich mit einem Komprimierungsdienst wie TinyPNG bearbeiten. TinyPNG unterstützt unter anderem JPG, PNG, WebP und AVIF und kann die Dateigrösse oft weiter reduzieren, ohne dass die sichtbare Qualität stark leidet.
Für einzelne Bilder oder kleinere Mengen kann TinyPNG kostenlos genutzt werden. Bei sehr vielen Bildern, beispielsweise in einem Onlineshop, braucht es je nach Umfang eine professionelle oder automatisierte Lösung.
Wichtig: Komprimieren Sie Bilder nicht mehrfach unnötig stark. Das Ziel ist eine kleine Datei mit weiterhin guter Bildqualität.
Auch für Newsletter und Social Media geeignet
Der Bild Resizer eignet sich nicht nur für Webseiten.
Sie können das Tool auch verwenden, um Bilder für folgende Anwendungen vorzubereiten:
- Newsletter
- Blogbeiträge
- Social Media
- Präsentationen
- Online-Shops
- digitale Dokumente
Gerade bei Newslettern ist eine vernünftige Dateigrösse wichtig, damit Nachrichten schnell geladen werden und das Postfach der Empfängerinnen und Empfänger nicht unnötig belastet wird.
Häufige Fehler bei Bildern auf Websites
Prüfen Sie bei bestehenden Websites und Onlineshops besonders diese Punkte:
- Bilder werden direkt von der Kamera hochgeladen
- Dateinamen bleiben unverändert
- Fotos werden unnötig als PNG gespeichert
- Bilder sind deutlich grösser als ihre Darstellung auf der Website
- Alt-Texte fehlen oder enthalten unpassende Keywords
- Produktbilder haben unterschiedliche Grössen und Seitenverhältnisse
- veraltete oder doppelte Bilder bleiben im System
- Bilder werden mehrfach und zu stark komprimiert
Bei einzelnen Bildern fallen solche Fehler kaum auf. Bei Hunderten oder Tausenden Produktbildern können sie jedoch zu einem ernsthaften Performance- und Verwaltungsproblem werden.
Kostenlosen Bild Resizer ausprobieren
Mit dem Bild Resizer von WUK können Sie Bilder unkompliziert verkleinern, konvertieren und mit einem sinnvollen Ausgabenamen versehen.
Die passende Grösse für Webseiten ist bereits voreingestellt. Dadurch eignet sich das Tool auch für Personen, die sich nicht regelmässig mit Bildbearbeitung, Pixelgrössen oder Dateiformaten beschäftigen.
Sie können auch mehrere Bilder gleichzeitig hochladen und gemeinsam bearbeiten.
Da die Anwendung technisch ressourcenintensiv ist, behalten wir uns vor, die Nutzung bei einer übermässigen Belastung oder Fremdnutzung einzuschränken. In diesem Fall kann der Zugriff auf Kundinnen und Kunden von WUK begrenzt werden.
Stefan Murawski
Programmierung / Beratung / Konzeption
Sie haben Wünsche an den Bild Resizer?
Der Bild Resizer wurde von Stefan Murawski entwickelt und wird bei WUK laufend weiter optimiert.
Sie vermissen eine Funktion, wünschen eine Anpassung oder möchten ein ähnliches Tool für Ihre Website, Ihren Onlineshop oder einen internen Prozess entwickeln lassen?
Dann melden Sie sich bei uns. Stefan prüft gerne, was technisch sinnvoll und umsetzbar ist.
