New Dimensions
--
File Size
--
Scale
--
Bilder auf exakte Abmessungen mit gesperrtem Seitenverhältnis und gängigen Voreinstellungen skalieren. Die gesamte Verarbeitung erfolgt in Ihrem Browser – es wird nichts auf einen Server hochgeladen.
Richtig dimensionierte Bilder sind entscheidend für die Seitengeschwindigkeit und Core Web Vitals. OneStepToRank überwacht Ihre Rankings, verfolgt Wettbewerber und optimiert Ihre lokale SEO-Strategie automatisch.
Jetzt startenJede Plattform hat spezifische Anforderungen an Bildabmessungen. Die falsche Größe führt dazu, dass Ihre sorgfältig gestalteten Grafiken beschnitten, gestreckt oder heruntergeregelt werden und damit Ihre Marke schwächen. Facebook empfiehlt 1200x630 für Link-Vorschauen und 1080x1080 für Feed-Beiträge. Instagram verwendet 1080x1080 für quadratische Beiträge, 1080x1350 für Hochformat und 1080x608 für Querformat. Twitter/X‑Bilder sehen bei 1200x675 Pixel am besten aus. Diese Abmessungen korrekt zu wählen ist keine Option – es ist der Unterschied zwischen einem professionellen Auftritt und einem amateurhaften.
Für Websites gilt das Grundprinzip, Bilder exakt in der Größe auszuliefern, in der sie angezeigt werden. Ein Bild, das in CSS mit 600 px Breite dargestellt wird, sollte nicht aus einer 3000 px breiten Originaldatei stammen – der Browser lädt die komplette Datei herunter, bevor er sie verkleinert, was Bandbreite verschwendet und das Laden der Seite verlangsamt. Eine Ausnahme bilden Retina‑Displays, bei denen Sie Bilder mit dem 2‑fachen der CSS‑Anzeigegröße ausliefern sollten (also 1200 px für einen 600 px‑Slot), um Schärfe auf hochdichten Bildschirmen zu erhalten.
Moderne Webentwicklung erfordert das Ausliefern verschiedener Bildgrößen für unterschiedliche Geräte. Ein Desktop‑Nutzer mit einem 1920 px breiten Monitor benötigt ein anderes Bild als ein mobiler Nutzer mit einem 375 px Bildschirm. Das HTML‑Attribut srcset und das Attribut sizes ermöglichen es, mehrere Bildversionen zu definieren, aus denen der Browser basierend auf der Viewport‑Breite und dem Geräte‑Pixel‑Verhältnis wählt. Das bedeutet, mehrere Versionen jedes Bildes zu erstellen – typischerweise mit Breiten von 400 px, 800 px, 1200 px und 1600 px.
Retina‑Displays (2‑x und 3‑x Pixeldichte) packen zwei- bis dreimal so viele physische Pixel in denselben Bildschirmbereich. Ohne retina‑bereite Bilder wirken Fotos auf iPhones, iPads, MacBooks und den meisten modernen Android‑Geräten weich und unscharf. Die Lösung ist einfach: Skalieren Sie Ihre Bilder auf das 2‑fache der Anzeigegröße und lassen Sie CSS sie einschränken. Ein Bildslot von 600 x 400 benötigt ein Quellbild von 1200 x 800. Nutzen Sie dieses Tool, um jede Größenvariante zu erstellen und komprimieren Sie sie anschließend mit unserem Image Compressor, um die Dateigrößen handhabbar zu halten.
Das schnellste Bild ist das kleinste Bild, das noch gut aussieht. Für Hero‑Bereiche sollten komprimierte Bilder unter 200 KB liegen. Für Inline‑Inhaltsbilder unter 100 KB und Thumbnails unter 30 KB. Diese Vorgaben gehen von modernen Formaten wie WebP aus – bei JPEG sind die Größen für gleiche Qualität 25‑35 % größer. Skalieren Sie Bilder immer auf die Anzeigegröße, bevor Sie sie komprimieren. Ein 4000 x 3000 Foto, das auf 150 KB komprimiert wird, sieht schlechter aus als eine korrekt skalierte 1200 x 900‑Version, die auf dieselbe Größe komprimiert wird, weil die Kompression viel mehr Pixel in das gleiche Dateigrößenbudget einpassen muss.
Das Verkleinern bewahrt die Qualität gut, da Pixel zusammengeführt werden. Das Vergrößern (Upscaling) reduziert die Qualität, weil der Browser neue, im Original nicht vorhandene Pixel interpolieren muss, was zu Unschärfe führt. Für optimale Ergebnisse starten Sie immer mit der höchstmöglichen Auflösung und verkleinern das Bild. Vergrößern Sie ein kleines Bild niemals und erwarten Sie scharfe Ergebnisse.
Das Seitenverhältnis ist das proportionale Verhältnis zwischen Breite und Höhe. Gängige Verhältnisse sind 16:9 (Widescreen), 4:3 (Standard) und 1:1 (Quadrat). Das Sperren des Seitenverhältnisses stellt sicher, dass beim Ändern einer Dimension die andere automatisch angepasst wird, um die Proportionen beizubehalten und ein Dehnen oder Stauchen zu verhindern. Entsperren Sie es nur, wenn Sie bewusst eine nicht proportionale Skalierung wünschen.
Facebook‑Beiträge: 1200 x 630. Instagram‑Feed: 1080 x 1080 (quadratisch) oder 1080 x 1350 (Hochformat). Twitter/X: 1200 x 675. LinkedIn: 1200 x 627. Pinterest: 1000 x 1500. Profilbilder auf allen Plattformen sind in der Regel 400 x 400 oder größer. Die Verwendung der korrekten Abmessungen sorgt dafür, dass Ihre Bilder ohne unerwartetes Zuschneiden oder Qualitätsverlust angezeigt werden.
Retina‑ und HiDPI‑Displays haben eine 2‑ bis 3‑fache Pixeldichte im Vergleich zu Standard‑Bildschirmen. Ein Bild, das mit 300 x 200 CSS‑Pixel auf einem 2‑x Retina‑Display angezeigt wird, nutzt tatsächlich 600 x 400 physische Pixel. Wenn Ihr Bild nur 300 x 200 groß ist, erscheint es auf diesen Bildschirmen unscharf. Die Lösung besteht darin, Bilder in der 2‑fachen der vorgesehenen Anzeigegröße bereitzustellen und CSS‑Breite/Höhe zu verwenden, um sie zu begrenzen.