Command Palette

Search for a command to run...

Kostenlose Online-Bildwerkzeuge: Größe ändern, komprimieren, konvertieren und bearbeiten (2026)

Kostenlose Online-Bildwerkzeuge: Größe ändern, komprimieren, konvertieren und bearbeiten (2026)

T
Toolz Team
|Jun 29, 2026|18 min read

Das erste Mal, dass die Homepage eines Kunden ein Audit für das Kern-Web-Vitals-Audit fehlschlug, war der Schuldige ein einziges Heldenbild: Ein 4,2-MB-PNG, den ein Designer direkt aus Figma exportiert und in die WordPress-Medienbibliothek abgelegt hatte. Es wurde bei 1200 px breit und bei 3800 px gespeichert. Die Seite dauerte elf Sekunden, um auf einer gedrosselten mobilen Verbindung zu malen. Ich habe es versendet.

Das war während meiner WP-Administrationstage und es hat mir etwas beigebracht, das jedes Bildwerkzeug, für das ich später gebaut habe, geprägt hat toolz.dev: Die meisten Bildprobleme sind nicht Bearbeitungsprobleme, sie sind Rohrleitungen Probleme. Falsche Abmessungen, falsches Format, kein Kompressionsdurchlauf. Sie benötigen Photoshop nicht, um dies zu beheben. Sie benötigen drei oder vier kleine Werkzeuge, die eines gut machen und schnell laufen.

Dieser Leitfaden durchläuft jeden alltäglichen Bildbetrieb - Größe ändern, komprimieren, formatieren und Hintergrundentfernung - mit den Gründen, die hinter jedem einzelnen liegen, und den Fehlern, die ich gemacht habe, damit Sie sie überspringen können. Jedes Tool auf toolz.dev verarbeitet Bilder vollständig in Ihrem Browser. Ihre Fotos berühren niemals einen Server, was wichtiger ist, als die Leute erkennen, wenn sie die Arbeit von Kunden oder persönlichen Fotos bewältigen.

tl; dr: Für die gemeinsamen Jobs können Sie zu 100% im Browser bleiben: Bildgröße ändern Maße festzulegen, Bildkompresse um die Dateigröße zu schneiden, Formatkonverter zwischen png/jpeg/webp/avif wechseln und Hintergrundentferner Für saubere Produkt- und Profilaufnahmen. Nichts hochladen - Die Datei wird von Ihrer Festplatte in die Browser-Registerkarte verschoben und bleibt dort. Die richtige Optimierungsreihenfolge ist fast immer die Größe zu ändern, dann zu konvertieren und dann zu komprimieren.


Warum Bilder im Browser verarbeiten, anstatt sie hochzuladen?

Die meisten "Kostenlosen Online-Bild-Tools" funktionieren auf die gleiche Weise darunter: Sie laden die Datei hoch, ein Server verarbeitet sie, Sie laden das Ergebnis herunter. Die Webseite ist irgendwo eine dünne Haut über einer gemieteten Maschine. Dieses Modell hat drei Probleme, und die Privatsphäre ist nur das lauteste.

Der Datenschutz ist das offensichtliche Anliegen. Produktaufnahmen unter Embargo, ID-Fotos, Screenshots von internen Dashboards, persönliche Bilder – die Bilder, die die meisten Menschen ändern oder komprimieren müssen, sind genau die, die nicht in einem Temperaturverzeichnis eines Fremden sitzen sollten. "Dateien gelöscht nach einer Stunde" ist ein Versprechen, das Sie nicht auditieren können.

Latenz ist die leiseren Kosten. Das Hochladen von 20 MB-Kamerabildern über Office Wi-Fi dauert länger als die Größe selbst. Ein browserbasiertes Tool überspringt die Rundreise - das "Upload" ist sofort, weil die Datei nur in den Speicher wechselt. Wenn ich einen Ordner mit Produktfotos verarbeite, ist dieser Unterschied der Unterschied zwischen einer Kaffeepause und einem kontinuierlichen Fluss.

Und dann gibt es die Wände, die niemand erwähnt, bis sie eine getroffen haben: Kappen in Dateigröße, tägliche Grenzen, "Upgrade auf Pro, um Bilder über 10 MB" zu verarbeiten, "Wasserzeichen auf der kostenlosen Stufe". Ein clientseitiges Tool hat genau eine Grenze und es ist der RAM Ihrer Maschine.

Die Technologie, dies alles in einem Tab zu tun, ist seit Jahren Standard. der HTML <canvas> Element und sein 2D-Kontext können Raster-Images ohne Server dekodieren, neu sampeln und neu codieren. der Browser besitzt Image Decoder übernimmt JPEG, PNG, WebP und zunehmend AVIF. Es gibt keinen technischen Grund mehr, ein Bild über das Internet zu senden, nur um es 800 px breit zu machen.


Wie ändert man die Größe eines Bildes auf die richtigen Abmessungen?

Die Größe zu ändern ist die Operation, die ich am meisten erreicht, und die richtigen Dimensionen vor dem Stromverhindern die meisten Leistungsprobleme nachgeschaltet. Die Regel, die ich mir früher wünschte: Speichern Sie niemals ein Bild, das viel größer ist als die größte Größe, die es jemals anzeigen wird.

Der Arbeitsablauf auf der Bildgröße ändern Werkzeug:

  1. Ziehen Sie Ihr Bild auf das Werkzeug oder klicken Sie zum Durchsuchen.
  2. Geben Sie die Zielbreite und -höhe in Pixel ein.
  3. Halten Sie das Aspect-Ratio-Sperre eingeschaltet, es sei denn, Sie möchten absichtlich dehnen - damit die Breite ändert, passt die Höhe automatisch an, sodass nichts verzerrt wird.
  4. Wählen Sie die Resampling-Methode (Bicubic ist die sichere Standardeinstellung für Fotos; der nächste Nachbar für Pixel Art, den Sie scharf halten möchten).
  5. verarbeiten und herunterladen.

Die einzige Zahl, die es sich zu merken lohnt, ist der Retina-Multiplikator. Ein Slot, der bei 800 px angezeigt wird, sollte ein Bild mit ungefähr 1600 px halten, damit es auf 2 × Bildschirmen scharf bleibt - nicht das 3800-PX-Monster, das ich das erste Mal versendet habe. Verdoppeln Sie die Anzeigegröße, nicht fünfmal.

Hier ist ein Anwendungsfall-Spickzettel, den ich feststecke, denn "Welche Breite sollte das sein" ist die Frage, die bei jedem Projekt auftaucht:

Anwendungsfall Zielbreite Seitenverhältnis Format
Website-Held 1920 px 16: 9 WebP
Blog / Inhaltsbild 1200 px 3: 2 oder 16: 9 WebP
Miniatur 320–400 px 1: 1 oder 4: 3 WebP
Instagram-Beitrag 1080 px 1: 1 JPEG
X / Twitter-Einzug 1200 px 16: 9 JPEG
E-Mail-Header 600 px 3: 1 JPEG
E-Commerce-Produkt 1000–1500 px 1: 1 webp oder png

Same image resized for different use cases including web hero, social media, thumbnail, and mobile

Ein Fehler, den ich bei der Code-Überprüfung immer noch sehe: Upscaling. Ein Bild machen größer Als die Quelle nicht Details erfinden kann, die nie erfasst wurden - das Tool interpoliert nur neue Pixel und über 200% erhalten Sie ein weiches, matschiges Ergebnis. Wenn ein Kunde ein 500-Px-Logo sendet und es bei 2000 px benötigt, lautet die ehrliche Antwort "Neu exportieren Sie es aus der Vektorquelle", "nicht "upscalen" und hoffen Sie. "


Wie komprimiert man ein Bild, ohne es zu zerstören?

Komprimierung ist der Ort, an dem die tatsächlichen Seitengewichtseinsparungen leben. Bilder sind in der Regel das schwerste auf einer Webseite, daher ist das Verkleinern der höchsten Leistungsleistung, die die meisten Websites leisten können.

Es gibt zwei Arten, und die Unterscheidung entscheidet über alles:

verlustbehaftete Kompression Wirft Daten weg, die das menschliche Auge wahrscheinlich nicht übersehen wird - subtile Farbvariationen, hochfrequente Textur. Ein JPEG mit 80% Qualität ist bei maximaler Qualität oft 60–70% kleiner als das gleiche Bild, ohne sichtbaren Unterschied bei normaler Betrachtungsgröße. Das wollen Sie für Fotos.

Verlustfreie Komprimierung ordnet die Daten effizienter um, ohne sie zu verwerfen, das dekomprimierte Bild ist Pixel-für-Pixel identisch. PNG funktioniert so. Verwenden Sie es, wenn jedes Pixel wichtig ist - Logos, Screenshots, Diagramme, alles mit scharfem Text oder harten Kanten.

der Bildkompresse Mit dem Tool können Sie ein Qualitätsniveau festlegen, das Ergebnis in der Vorschau anzeigen und die Dateigrößen nebeneinander vergleichen, bevor Sie sich festlegen. Meine ehrliche Standardeinstellung für Webfotos ist 80% Qualität - ich habe auf vielen Seiten niedriger und höher getestet, und 80 ist der Punkt, an dem ich nicht mehr in der Lage bin, die komprimierte Version vom Original bei realer Anzeigegröße zu unterscheiden. Wenn Sie die volle Argumentation wollen, Bildkomprimierungshandbuch Geht tief darüber, warum diese Zahl hält.

Comparison showing original image vs compressed image with file sizes displayed

Der Fehler, den ich für peinlich lange gemacht habe: Komprimieren vor Größe ändern. Wenn Sie ein Bild mit 3800 Pixel komprimieren und dann auf 1200 Pixel verkleinern, haben Sie all diese Komprimierungsaufwand für Pixel aufgewendet, die Sie wegwerfen möchten, und die endgültige Datei ist größer und schlimmer, als wenn Sie dies andersherum getan hätten. Ändern Sie zuerst die Größe und komprimieren Sie dann das kleinere Bild. immer.


Welches Bildformat sollten Sie eigentlich verwenden?

Die Formatlandschaft hat mehr gute Optionen als früher, was ein schönes Problem ist. So entscheide ich mich, ohne den Marketing-Glanz.

JPEG ist das universelle verlustbehaftete Format - überall unterstützt, ideal für Fotos, keine Transparenz. Es ist der sichere Fallback und immer noch der richtige Anruf für E-Mails, bei dem die Kundenunterstützung für neuere Formate ein Münzwurf ist.

PNG ist verlustfrei mit voller Transparenz. Es ist die richtige Wahl für Screenshots, Logos und alles mit Text oder scharfen Kanten. Es ist das Ungerechtigkeit Auswahl für Fotos – Ein als PNG gespeichertes Foto kann um ein Vielfaches größer sein als das gleiche Foto wie JPEG ohne sichtbare Vorteile.

WebP ist meine Standardeinstellung für das Web im Jahr 2026. Es ist sowohl verlustbehaftet als auch verlustfrei, unterstützt die Transparenz und ist bei vergleichbarer Qualität etwa 25–35% kleiner als JPEG. Die Browser-Unterstützung ist an dieser Stelle praktisch universell. Wenn ich ein Format für die Bilder einer neuen Website auswählen müsste, dann ist dies der Fall.

Avif Komprimiert noch härter - üblicherweise etwa 50% kleiner als JPEG - mit hervorragender Handhabung von Farbverläufen und feiner Textur. Die Kompromisse sind langsamere Codierung und Unterstützung, die sehr gut ist, aber nicht überall. Ich benutze es als erste Wahl in einem <picture> Element mit webp darunter.

SVG Es ist kein Rasterformat - es ist ein Vektor, also skaliert es auf jede Größe ohne ein einziges verschwommenes Pixel. Verwenden Sie es für Logos, Symbole und Illustrationen. Versuchen Sie nicht, ein Foto darauf zu konvertieren.

Konvertierung zwischen diesen ist ein Zwei-Klick-Job auf der Formatkonverter: Lassen Sie das Bild fallen, wählen Sie das Zielformat, passen Sie die Qualität an, wenn es verlustbehaftet ist, herunterladen. Das Muster, das ich auf realen Websites versende, verwendet die eigene Formatverhandlung des Browsers:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Description" width="1200" height="675" loading="lazy">
</picture>

Der Browser wählt das erste Format aus, das er versteht, sodass ein modernes Telefon AVIF erhält, ein älteres WebP und alles, was antiken ist, immer noch ein funktionierendes JPEG. Beachten Sie die explizite width und height - Diese sind nicht dekorativ, reservieren den Layoutraum und verhindern, dass die Seite beim Laden der Bilder springen wird. Dies ist ein kumulativer Layout-Shift-Gewinn.


Wie entfernt man einen Bildhintergrund im Browser?

Die Entfernung des Hintergrunds bedeutete entweder ein Abonnement-Tool oder zwanzig Minuten mit dem Stift-Tool in Photoshop. Jetzt verarbeitet ein maschinelles Lernmodell, das klein genug ist, um in einer Browser-Registerkarte ausgeführt zu werden, die allgemeinen Fälle in wenigen Sekunden.

der Hintergrundentferner Analysiert das Bild, baut eine Pixelmaske aus, die das Motiv vom Hintergrund trennt, und gibt ein PNG mit einem transparenten Alphakanal aus. Upload, Moment warten, Kanten überprüfen, herunterladen. Das Ganze bleibt lokal - das Modell läuft auf Ihrer Maschine, so dass selbst sensible Produktaufnahmen es niemals verlassen.

Es funktioniert am besten, wenn Sie eine Chance zum Kampf haben: sogar Beleuchtung, ein anständiger Kontrast zwischen dem Thema und dem, was dahinter steckt, und eine einigermaßen hochauflösende Quelle. Haare, Fell und wispy Kanten sind immer noch dort, wo diese Modelle kämpfen - wenn das Ergebnis einen Heiligenschein um den Kopf eines anderen hat, ist dies der zu erwartende Fehlermodus, kein Fehler, den Sie weg konfigurieren können. Clean-edged-Themen wie verpackte Produkte sind nahezu perfekt.

Before and after comparison of background removal from cluttered to clean transparent background


Was ist die richtige Reihenfolge, um Bilder für das Web zu optimieren?

Jedes Mal, wenn ich diese Bestellung übersprungen oder nicht in der Reihenfolge erledigt habe, habe ich sie bezahlt. Tun Sie es in dieser Reihenfolge und die Ausgabe ist sowohl kleiner als auch besser aussehend:

Schritt 1 – Größe ändern, um die Abmessungen anzuzeigen. Finden Sie die größte Größe heraus, mit der das Bild gerendert wird, verdoppeln Sie es für die Netzhaut und Größe ändern dazu. Dieser einzelne Schritt leistet normalerweise mehr für die Dateigröße als für alles andere, da Sie Pixel löschen, die niemals gesehen werden.

Schritt 2 - Konvertieren Sie in das richtige Format. umwandeln Fotos zu webp (oder avif mit einem Fallback). Behalten Sie Logos und Screenshots als PNG. Behalten Sie echte Vektorgrafiken als SVG.

Schritt 3 - Komprimieren Sie auf die Zielqualität. komprimieren Bei verlustbehafteten Webbildern bei rund 80%, dann das Ergebnis bei der tatsächlichen Größe.

Schritt 4 - Verantwortungsbewusst in HTML dienen. einsetzen srcset Also laden Browser eine dem Gerät passende Größe herunter und fügen Sie hinzu loading="lazy" zu etwas unter der Falte, damit die anfängliche Farbe nicht blockiert wird.

Ein lockeres Leistungsbudget, das es wert ist, gehalten zu werden: Heldenbilder unter 200 KB (sie fahren die größte inhaltliche Farbe, daher sind sie am wichtigsten), regelmäßige Inhaltsbilder unter 100 KB, Miniaturansichten unter 30 KB und Logos unter 10 KB - Verwenden Sie SVG und Sie werden dies normalerweise ohne einen Versuch geschlagen. Dies sind keine Gesetze, sie sind ein Geruchstest. Wenn ein einzelnes Bild an seinem Eimer vorbeifliegt, ist es einen zweiten Blick wert.


Häufig gestellte Fragen

Was ist das beste kostenlose Online-Bild-Tool?

Dies hängt vom Job ab, weshalb toolz.dev sie in fokussierte Tools anstelle eines aufgeblähten Editors aufteilt. Für Maße verwenden Bildgröße änderndrohen Verwenden Sie für die Dateigröße Bildkompressedrohen Verwenden Sie zum Ändern von Formaten die Formatkonverterdrohen Verwenden Sie für die Isolierung von Themen die Hintergrundentfernerdrohen Alle vier sind kostenlos, benötigen keine Anmeldung und verarbeiten Bilder vollständig in Ihrem Browser.

Wie kann ich die Größe eines Bildes ändern, ohne an Qualität zu verlieren?

Downscaling - ein Bild kleiner zu machen - kostet kaum Qualität, da die Quelle mehr Details hat als die kleineren Anforderungen. Verwenden Sie bicubic Resampling für das glatteste Ergebnis. Upscaling ist die riskante Richtung: Das Werkzeug muss Pixel erfinden, so dass die Qualität sinkt und um etwa 200% der ursprünglichen Größe die Weichheit deutlich wird. Wenn Sie eine viel größere Version benötigen, kehren Sie zur ursprünglichen Quelldatei zurück, anstatt eine kleine Kopie zu vergrößern.

Welches Bildformat soll ich für meine Website verwenden?

Verwenden Sie webp für Fotos und die meisten Inhaltsbilder - es ist ungefähr 25–35% kleiner als JPEG mit nahezu universeller Unterstützung im Jahr 2026. Verwenden Sie SVG für Logos und Symbole, damit sie in jeder Größe scharf bleiben. Verwenden Sie PNG nur, wenn Sie verlustfreie Qualität mit Transparenz benötigen. Greifen Sie nach AVIF, wenn Sie maximale Komprimierung wünschen und es mit einem WebP-Fallback in a koppeln kann <picture> Element

Sollte ich die Größe vor oder nach dem Komprimieren ändern?

Zuerst die Größe ändern, dann komprimieren. Das Komprimieren eines großen Bildes und das Verkleinern des es wird auf Pixeln verschwendert, die während der Größenänderung verworfen werden, und die endgültige Datei wird immer größer und von geringerer Qualität, als wenn Sie dies in der richtigen Reihenfolge getan hätten. Die Größe des Kompressors bedeutet zuerst, dass der Kompressor auf dem kleineren Bild arbeitet und das kleinste, sauberste Ergebnis erzeugt.

Ist es sicher, Online-Bild-Tools mit persönlichen oder Kundenfotos zu verwenden?

Die meisten Online-Bild-Tools laden Ihre Fotos auf ihre Server hoch, um sie zu verarbeiten, was ein echtes Problem für alles private oder unter NDA ist. Die Bildwerkzeuge auf toolz.dev verarbeiten alles clientseitig in Ihrem Browser mit der Canvas-API und zur Hintergrundentfernung ein ML-Modell im Browser. Ihre Bilder verlassen Ihr Gerät nie, so dass sie für persönliche Bilder, Kundenarbeit und vertrauliche Produktaufnahmen sicher sind.

Was ist der Unterschied zwischen WebP und AVIF?

Sowohl JPEG als auch PNG bei Komprimierung schlagen. WebP ist mit einer effektiven universellen Browserunterstützung um 25–35% kleiner als JPEG, was es zur praktischen Standardeinstellung macht. AVIF treibt die Komprimierung weiter - üblicherweise etwa 50% kleiner als JPEG - und behandelt Verläufe und Texturen besser, aber es kodiert langsamer und der Support ist noch nicht überall. Der gängige Ansatz besteht darin, AVIF zuerst mit WebP als Fallback zu versorgen, damit jeder Browser das beste Format erhält, das er dekodieren kann.

Wie entferne ich den Hintergrund kostenlos von einem Bild?

Öffne das Hintergrundentferner, fügen Sie Ihr Bild ein, und ein In-Browser-Modell erkennt das Motiv und ersetzt den Hintergrund durch Transparenz, sodass Sie ein PNG mit einem Alpha-Kanal erhalten. Es funktioniert am besten mit gleichmäßiger Beleuchtung und klarem Kontrast zwischen Motiv und Hintergrund. Feine Details wie FlyAway-Haare sind immer noch der harte Fall für jedes automatische Werkzeug. Überprüfen Sie die Kanten, bevor Sie sich auf das Ergebnis verlassen.

Warum verlangsamen meine Website-Bilder die Seite?

Fast immer ist es eines von drei Dingen: Das Bild wird viel größer als es angezeigt, es ist in einem alten Format wie ein unkomprimiertes PNG-Foto oder wurde nie durch einen Komprimierungsdurchgang ausgeführt. Fixieren Sie sie in der Reihenfolge: Ändern Sie die Größe, um die Abmessungen anzuzeigen, in WebP zu konvertieren, und komprimieren Sie sie dann auf etwa 80% der Qualität. Sie werden normalerweise das Gesamtbildgewicht um mehr als die Hälfte reduzieren, was direkt in Ihrem größten inhaltsreichen Farbwert angezeigt wird.

Wie bekomme ich ein Bild unter 100 KB?

Arbeiten Sie in dieser Reihenfolge und stoppen Sie, sobald Sie unter der Grenze sind: Ändern Sie die Größe auf die Abmessungen, die das Bild tatsächlich anzeigt, konvertieren Sie in WebP und komprimieren Sie es dann bei 80% Qualität. Für ein typisches 1600px-breites Foto landet diese Kombination zwischen 60 und 120 KB. Wenn Sie noch immer vorbei sind, lassen Sie die Qualität auf 70% senken, bevor Sie die Abmessungen weiter schrumpfen - Qualitätsverlust bei 70% ist weitaus weniger auffällig als ein sichtbar kleineres Bild.

Kann ich HEIC-Fotos von meinem iPhone in JPG konvertieren?

Ja. Legen Sie die .heic-Datei in die Formatkonverter Und exportieren Sie es als JPG, PNG oder WebP. HEIC ist das Format, das iPhones standardmäßig gespeichert haben, und während es gut komprimiert wird, verweigern die meisten Windows-Apps, älteren Browser und Content-Management-Systeme das Öffnen. Daher ist die Konvertierung in JPG oder WEBP vor dem Hochladen in der Regel sicher.

Frequently Asked Questions

It depends on the job, which is why toolz.dev splits them into focused tools rather than one bloated editor. For dimensions, use Image Resize. For file size, use Image Compress. For changing formats, use the Format Converter. For isolating subjects, use the Background Remover. All four are free, need no signup, and process images entirely in your browser.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!