Webseiten sollen die Besucher inhaltlich und optisch überzeugen. Der Text bildet die Grundlage, während Bilder, Grafiken, Animationen und Videos die Aussagekraft erhöhen. Für eine optimale Darstellung und kurze Ladezeiten müssen es jedoch die richtigen Bilder bzw. die richtig zugeschnittenen Bilder sein. Das sogenannte Image Cropping (Bild zuschneiden) ist ein gängiges Verfahren, um Bilder für die Darstellung auf einer Webseite zu optimieren. In diesem Artikel erfahren Sie, was ein Cropped Image ist, wie das Cropping funktioniert und wie Sie Bilder per CSS-Code oder mit kostenlosen Online-Tools zuschneiden können.
Was ist Image Cropping?
Image Cropping ist eine Form der Bildbearbeitung, bei der ein Bild zugeschnitten wird, ohne es zu verzerren. Es ist eines der am häufigsten verwendeten Werkzeuge in der Bildbearbeitung. Das Cropping schneidet einen Bildbereich aus, unter anderem, um unerwünschte Objekte aus Fotos zu entfernen oder die Bildkomposition zu verändern. Auf diese Weise können Sie Bilder optimieren, indem Sie die Ränder beschneiden, äußere Bildbereiche entfernen oder einen bestimmten Bildausschnitt isolieren.
Crop Photos: die Möglichkeiten
Das Cropping bietet verschiedene Optimierungspotenziale. Sie können damit
- das Bildformat und die Bildgröße verändern (Resize),
- die Bildkomposition verbessern,
- überflüssige Bilddetails an den Rändern entfernen und
- die Aufmerksamkeit des Betrachters auf ein gewünschtes Detail richten.
Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten
Wie funktioniert ein Image Crop?
Das nachträgliche Zuschneiden und Ausschneiden von Fotos erfolgt in der Regel online oder offline mithilfe von Bildbearbeitungsprogrammen bzw. Crop Tools. Auf Ihrer Website können Sie Bilder alternativ auch per CSS-Code zuschneiden.
Crop Images per CSS
Für das Zuschneiden von PNG-, BMP- und JPG-Bildern per CSS-Code eignen sich die Eigenschaften object-fit und object-position des img-Tags:
- Mit img { object-fit: contain; } bleibt das Seitenverhältnis (Aspect Ratio) erhalten und die Bildgröße passt sich an den Rahmen an.
- Mit img {object-fit: cover} bleibt der Aspect Ratio ebenfalls erhalten und das Bild füllt die gesamte umgebende Box aus. Stimmen das Seitenverhältnis des Bilds und des Rahmens nicht überein, wird das Bild entsprechend abgeschnitten.
- Mit img { object-fit: fill; } füllt das Bild den Rahmen aus. Wenn die Seitenverhältnisse von Bild und Rahmen nicht übereinstimmen, wird das Bild verzerrt.
- Für die Positionierung im Rahmen ist die Eigenschaft object-position zuständig. Zum Beispiel führt img { object-position: top left; } zur Positionierung am oberen linken Rand.
Image Cropping mit Bildbearbeitungsprogramm
Beim Zuschneiden haben Sie in der Regel die Wahl: Sie können das Bildformat automatisch beibehalten oder das Cropping aller Seiten unabhängig voneinander durchführen.
Für den Zuschnitt markieren Sie dann die Ecken oder Seiten des Bilds mit der Maus und verkleinern das Bild bis zum gewünschten Bereich. Beim Ausschneiden wählen Sie einen bestimmten Bereich aus und isolieren diesen.
Professionelle Bildbearbeitungsprogramme sind zum Beispiel das kostenpflichtige Photoshop und das kostenlose Open-Source-Programm Gimp. Sämtliche Image Formats werden unterstützt, die Image Quality bleibt dabei erhalten.
Crop Image online: die besten kostenlosen Tools
Die professionellen Bildbearbeitungsprogramme bieten so viele Funktionen, dass sich Anfänger meist nicht sofort zurechtfinden. Für das Zuschneiden von Bildern kann es daher schneller und einfacher sein, ein Online-Werkzeug zu verwenden. Sie müssen also nicht erst ein Bildbearbeitungsprogramm herunterladen und installieren, sondern laden die PNG-, JPG-, GIF- oder BMP-Dateien hoch und beschneiden Ihre Fotos stattdessen einfach online. Wir stellen Ihnen eine Auswahl kostenloser Crop Tools vor.
Crop Photo online mit Fotor für Anfänger
Fotor eignet sich gut zum Photo Editing für Anfänger.
Mit dem Image Cropper von Fotor lassen sich Fotos in wenigen Sekunden zuschneiden. Voreinstellungen für Bildformate von Social-Media-Plattformen wie Instagram-, Facebook- und Pinterest-Posts erleichtern die schnelle Bearbeitung. Für das Zuschneiden zahlreicher Fotos mit einem Klick unterstützt das Crop Tool das Batch Image Cropping.
Crop Image online mit Pixlr für professionelle Ergebnisse
Pixlr ist ein beliebtes Bildbearbeitungs- und Designtool.
Das kostenlose Tool Pixlr eignet sich für Anfänger und Fortgeschrittene. Einige Funktionen sind jedoch nur in der kostenpflichtigen Premium-Version verfügbar, in der kostenlosen Version können Werbeanzeigen stören.
GIFs Cropping mit Veed.io
Crop GIF mit dem Free Image Cropper Veed.io
Veed.io ist ein Crop Tool für GIF-Dateien. Sie laden dafür das GIF hoch, klicken auf eine Bildecke und verändern Größe und Form (Resize) wie gewünscht. Alternativ können Sie unter den Einstellungen eine vordefinierte Größe für Social-Media-Plattformen wie Facebook, Instagram, YouTube und Snapchat auswählen.
Tipp: Crop Pictures – die Drittel-Regel
Eine Grundregel der Fotografie besagt, dass das Hauptmotiv nicht in die Mitte gehört. Stattdessen sollte es außerhalb des Bildzentrums positioniert sein. Die Drittel-Regel hilft bei der Umsetzung und der Kreation einer interessanten Bildkomposition. Dafür wird das Bild mit horizontalen und vertikalen Linien in neun gleich große Abschnitte unterteilt – das kennen Sie vielleicht schon von Ihrer Smartphone-Kamera.
Für eine interessante Bildkomposition sollten Sie die relevanten Bestandteile des Fotos dann in der Nähe der Kreuzungspunkte der Gitterlinien platzieren. Auf diese Weise wirkt Ihr Bild harmonischer.
Was ist Image Cropping? – Zusammenfassung
Das Beschneiden von Bildern gehört zu den Standardfunktionen von Bildbearbeitungsprogrammen und bietet verschiedene Verbesserungsmöglichkeiten. Als Webdesigner können Sie Bilder für Ihre Website per CSS-Code beschneiden. Meist lohnt sich jedoch die Verwendung eines Programms bzw. eines Online Image Cropping Tools, das Sie nicht erst auf Ihrem Computer installieren müssen.
Titelmotiv: Photo by John Schnobrich on Unsplash
