Bilder für das Web auf Windows optimieren

Optimieren Sie Bilder für das Web unter Windows mit einem Resize-first-Workflow, Formatvergleichen, responsiven Varianten, visuellen Checks und gemessener Produktionsauslieferung.

Beginnen Sie mit der Netzwerkabfrage, nicht mit dem Design-Export. Ein 3000-Pixel-Produktfoto mag in einer 640-Pixel-Karte korrekt aussehen, weil CSS es herunterskaliert, aber der Browser überträgt dennoch die große Quelldatei. Der unten beschriebene Windows-Workflow findet diese Diskrepanz, erstellt sinnvolle Varianten und prüft die Seite nach dem Deployment.

Finden Sie die teuersten Bilder

Öffnen Sie die Seite in Microsoft Edge, drücken Sie F12, wählen Sie Netzwerk, laden Sie neu und filtern Sie nach Img. Sortieren Sie nach übertragener Größe. Notieren Sie für jede teure Abfrage drei Fakten:

Die Pixeldimensionen der Datei.
Ihre gerenderte Breite im Panel Elemente.
Ob sie sich oberhalb oder unterhalb der Faltkante befindet bzw. später geladen wird.

Ein Hero-Bild, das bei 1200 Pixeln gerendert wird, benötigt möglicherweise eine 1920- oder 2400-Pixel-Quelle für dichte Displays. Selten braucht es den originalen 6000-Pixel-Kamera-Export. Eine Karte, die bei 360 Pixeln gerendert wird, sollte nicht dieselbe Datei wie das Hero-Bild anfordern.

Ein Bild in Paint skalieren

Paint reicht aus, um eine einzelne überdimensionierte Quelle zu korrigieren:

Öffnen Sie das Bild und wählen Sie Größe ändern und verzerren.
Aktivieren Sie Seitenverhältnis beibehalten.
Geben Sie die erforderliche Pixebreite ein, keinen prozentualen Wert, der aus der Dateigröße geschätzt wurde.
Nutzen Sie Speichern unter, damit das Master-Original unberührt bleibt.

Erstellen Sie für eine 640-Pixel-Karte einen 800-Pixel-Standardkandidaten und einen 1280-Pixel-Kandidaten für dichte Displays. Prüfen Sie kleinen Text und dünne Produktkanten nach der Skalierung. Enthält die Quelle Transparenz, speichern Sie sie nicht als JPEG.

Batch-Skalierung mit PowerToys

Microsoft PowerToys enthält Image Resizer , das Skalierungsbefehle in den Datei-Explorer integriert. Definieren Sie Breiten, die den echten Breakpoints der Website entsprechen, wie 480, 960 und 1600 Pixel, und erstellen Sie Kopien, anstatt Originale zu ersetzen.

PowerToys ist nützlich für Dimensionen, bildet jedoch keine vollständige Delivery-Pipeline ab. Dateibenennung, Formatkonvertierung, responsives Markup und visuelle Prüfung sind weiterhin wichtig. Legen Sie generierte Kandidaten in einem separaten Ordner ab, damit sie nicht mit dem Quell-Artwork verwechselt werden.

JPEG, PNG, WebP oder AVIF wählen

Asset	Sinnvolles Lieferformat	Genau prüfen
Produkt- oder Redaktionsfoto	WebP, AVIF oder JPEG	Textur, Farbverläufe, Hauttöne
Screenshot mit kleinem Text	PNG oder hochwertiges WebP	Glyphenränder und dünne Linien
Logo oder Icon	SVG, wenn die Quelle vektorbasiert ist	Korrekter Viewbox und zugängliches Label
Transparenz mit weichen Schatten	WebP oder PNG	Halos auf hellen und dunklen Hintergründen

Konvertieren Sie nicht jedes PNG in JPEG. Das kann Transparenz entfernen und Ringe um Text erzeugen. Konvertieren Sie auch kein JPEG-Foto in PNG; das macht die Datei meist größer, ohne verlorene Details wiederherzustellen. Siehe verlustbehaftete und verlustfreie Komprimierung für den zugrundeliegenden Tradeoff.

Responsive Bilder korrekt ausliefern

Komprimierung allein macht ein Bild nicht responsiv. Stellen Sie Breitenkandidaten bereit und lassen Sie den Browser einen auswählen:

<img
  src="product-960.webp"
  srcset="product-480.webp 480w, product-960.webp 960w, product-1600.webp 1600w"
  sizes="(max-width: 720px) 100vw, 50vw"
  width="960"
  height="640"
  alt="Black travel bag open to show the interior compartments"
>

Google empfiehlt Standard-Bildelemente, nützliche Alt-Texte, responsive Kandidaten und ein Fallback src in seiner Bild-SEO-Anleitung . Breite und Höhe reservieren den Layout-Platz. Der Alt-Text sollte den Zweck des Bildes beschreiben, nicht eine Liste von Keywords wiederholen.

Das Ergebnis in Edge prüfen

Laden Sie mit deaktiviertem Cache bei Desktop- und mobilen Breiten neu. Bestätigen Sie, dass der Browser den erwarteten srcset-Kandidaten auswählt, das Hero-Bild das Layout nicht verschiebt und der Text lesbar bleibt. Nutzen Sie dann PageSpeed Insights oder Felddaten, um zu bestimmen, ob die Bildänderungen die tatsächliche Seite verbessert haben. Google betrachtet Core Web Vitals als einen Teil der Page Experience, nicht als Ersatz für nützliche Inhalte.

Für noch nicht veröffentlichte Produktbilder halten Sie die Konvertierung lokal, bis zur Veröffentlichung. Siehe Datenschutzrisiken von Online-Kompressoren auf Windows , bevor Sie embargoed Assets an einen Drittanbieter-Dienst senden.

Wann GetCompress zur Web-Asset-Vorbereitung passt

Paint und PowerToys reichen für gelegentliche Skalierungen aus. GetCompress ist die bessere Wahl, wenn ein Windows-Team wiederholt gemischte PNG-, JPEG-, HEIC-, TIFF- und andere Quellen erhält, die konsistente Dimensionen, Formatvarianten und visuelle Prüfung benötigen. Gespeicherte Voreinstellungen und Stapelwarteschlangen bereiten lokale Delivery-Kopien vor, bevor sie in das Repository oder CMS eingehen.

Es ersetzt nicht das responsive Markup, die CDN-Konfiguration, das Caching oder die Leistungsmessung. Testen Sie die bereitgestellte Seite und halten Sie die Quell-Master getrennt von den generierten Web-Assets.