Wir können nicht genug betonen, wie wichtig Multimedia wie Bilder, Infografiken und Videos bei der Entwicklung sind. Allerdings wirkt sich die Größe der Bilder auf die Gesamtleistung einer Anwendung und ihre Benutzerfreundlichkeit aus.

HTML (Hypertext Markup Language) ist die am häufigsten verwendete Sprache zur Gestaltung und Erstellung der Struktur von Webseiten. Als Entwickler können Sie Produktbilder, Logos und andere Grafiken in Ihr HTML-Dokument einfügen, um die Benutzerfreundlichkeit und den visuellen Reiz zu verbessern.

Wenn die Anwendung jedoch optimal funktionieren soll, müssen Sie die Größe Ihrer Bilder anpassen und sie optimieren. In diesem Artikel erläutere ich die Bedeutung der Größenanpassung von Bildern, die verschiedenen Ansätze zur Größenanpassung von Bildern in HTML und die besten Verfahren.

Wie wichtig ist die Größenanpassung von Bildern in HTML?

Die Größenanpassung eines Bildes ist die Vergrößerung oder Verkleinerung der Größe eines Bildes. Typische Bilder werden in verschiedenen Formen gespeichert, und Sie können sie von Ihrem Fotografen, von Veranstaltungen oder Designern erhalten oder von Online-Quellen herunterladen.

What-is-the-importance-of-resizing-images-in-HTML

Vielleicht sind Sie versucht, Bilder in ihrem ursprünglichen Format zu verwenden. In den meisten Fällen ist dies jedoch nicht wünschenswert. Hier sind einige der Gründe, warum Sie die Größe von Bildern in Ihrem HTML-Dokument ändern sollten:

  • Ladegeschwindigkeit der Seite: Obwohl Bilder dafür bekannt sind, dass sie die Benutzerfreundlichkeit verbessern, können große Bilder die Ladegeschwindigkeit negativ beeinflussen. Wenn Sie solche Bilder optimieren, werden Ihre Webseiten schnell geladen.
  • Machen Sie Ihre Website responsive: Ein typisches Web bzw. eine typische Anwendung wird von Nutzern mit unterschiedlichen Geräten besucht. Durch die Größenanpassung von Bildern kann eine Webseite auf mobile Geräte, Desktops und Tablets angepasst werden.
  • Bandbreitennutzung: Die meisten Website-Hosts begrenzen die Bandbreite, wenn sie Hosting-Pakete an Website-Besitzer verkaufen. Wenn Sie Bilder optimieren, erhalten Sie mehr Platz für andere Arten von Inhalten auf Ihrer Website.
  • SEO-Zwecke: Die Ladegeschwindigkeit einer Seite ist einer der Ranking-Faktoren, die Suchmaschinen berücksichtigen. Wenn Sie die Größe Ihrer Bilder ändern, verbessert sich die Ladegeschwindigkeit, was letztendlich Ihrer SEO zugute kommt.
  • Maximieren Sie den Speicherplatz: Die Größe des Speicherplatzes ist einer der Faktoren, die Sie bei der Auswahl eines Webhosters berücksichtigen sollten. Das Hochladen großer und hochauflösender Bilder kann viel Speicherplatz auf den Servern verbrauchen.
  • Verbessern Sie die Benutzerfreundlichkeit: Website-Nutzer müssen nicht ewig warten, bis Bilder auf einer Webseite geladen werden. Sie können Ihre Bilder so optimieren, dass sie gleichzeitig mit dem übrigen Inhalt angezeigt werden.

Dies sind die verschiedenen Möglichkeiten, die Größe von Bildern in HTML zu ändern

HTML-Attribute verwenden

Wir können eine einfache Anwendung erstellen, um zu demonstrieren, wie man die Größe von Bildern ändert. Ich werde in meiner Webanwendung Bilder von Pixabay verwenden. Ich werde dieses Bild verwenden. Sie können es herunterladen und zur einfachen Demonstration in Ihr Projekt verschieben.

Dies ist mein HTML-Code:

HTML-Bilder neu skalierenMeine Katze

Wenn ich das Originalbild ohne Größenanpassung rendern lasse, ist es über die ganze Webseite verteilt, und man kann das Bild nicht einmal sehen.

Original-HTML-image

Ich kann meinem Katzenbild eine Höhe von 175 und eine Breite von 300 geben.

Ich werde meinen Code im <img>-Tag wie folgt ändern:

Sie sehen nun, dass das Bild sichtbar und optimiert ist.

HTML-attributes

CSS-Stile verwenden

Anstelle des Inline-Stylings, das wir im obigen Schritt angewendet haben, können wir ein separates Stylesheet erstellen. Ich werde eine Stilvorlage erstellen und sie styles.css nennen. Wir fügen einen <link>-Tag in den -Abschnitt unseres HTML-Dokuments ein, um das Stylesheet mit dem HTML-Dokument zu verknüpfen. 

HTML-Bilder neu skalierenMeine Katze

Wir können unserem Bild über die Datei styles.css ein Styling hinzufügen. Dies ist unser Code:

img {
    width:300px;
    höhe:200px
}

Das gerenderte Bild wird wie folgt aussehen:

CSS-styles

Wir haben den Selektor <img> verwendet, um unser Bild im HTML-Dokument zu platzieren. Wir haben unserem Bild eine Breite von 300px und eine Höhe von 200px gegeben.

Prozentsatz verwenden

Im vorherigen Beispiel haben wir die Größe unseres Bildes in Pixeln (px) angegeben. Wir können auch Prozentwerte verwenden, um unser Bild zu optimieren. Wir können zum Beispiel die Breite und Höhe unseres Bildes auf 65% festlegen.

Wir werden unseren vorherigen HTML-Code verwenden. Löschen Sie jedoch den Inhalt der Datei styles.css und fügen Sie diesen Code hinzu:

img {
    breite:65%;
    höhe:65%
}

Wenn Sie das Bild rendern, erhalten Sie das folgende Bild:

Percentage

Größenanpassung von Bildern für Responsive Design

Ein gutes Bild sollte auf verschiedene Bildschirmgrößen reagieren können. Sie können Ihr Bild auch so optimieren, dass es auf verschiedene Bildschirmgrößen reagiert. Mit demselben HTML-Code können wir dies zu unserer Datei styles.css hinzufügen:

img {
    max-width: 100%;
    höhe: auto;
}

Die Eigenschaft max-width: 100% sorgt dafür, dass das Bild niemals die Breite seines Containers überschreitet. So wird das Bild auf kleineren Bildschirmen immer proportional verkleinert.

Die Eigenschaft height: auto sorgt dafür, dass das Bild sein Seitenverhältnis beibehält, wenn es nach oben oder unten skaliert wird.

Beibehaltung des Seitenverhältnisses

Beim Web-/App-Design ist das Seitenverhältnis das proportionale Verhältnis zwischen Höhe und Breite. Die Beibehaltung des Seitenverhältnisses bei der Größenänderung oder Optimierung Ihrer Bilder stellt sicher, dass die visuelle Konsistenz erhalten bleibt; die Bilder werden nicht verzerrt und reagieren auf unterschiedliche Bildschirmgrößen.

Wir werden denselben HTML-Code verwenden, um zu demonstrieren, wie wir das Seitenverhältnis bei der Größenänderung unserer Bilder beibehalten.

Fügen Sie diesen Code in Ihre styles.css-Datei ein:

img {
    breite: 300px; 
    höhe: auto; 
}
Aspect-ratio-1

Ich habe den Selektor ‘img’ verwendet, um unser Bild im HTML-Dokument zu lokalisieren. Wir haben die Breite auf 300px festgelegt. Die Eigenschaft height: auto ermöglicht es verschiedenen Browsern, die Höhe des Bildes unter Beibehaltung des Seitenverhältnisses automatisch zu berechnen. Dadurch wird sichergestellt, dass die Bilder bei der Darstellung auf verschiedenen Bildschirmgrößen nicht gestreckt werden.

Größenänderung von Hintergrundbildern

Sie können Bilder in Elemente einfügen, die als Hintergrundbilder dienen. Wenn Sie die Größe eines Hintergrundbildes ändern, wird sichergestellt, dass es in seinen Container passt. Dies ist ein Beispiel für ein HTML-Dokument mit einem Absatz und etwas Text:

HTML-Bilder neu skalieren

    Das ist unser Katzenbild

Jetzt können wir über die Datei styles.css ein Hintergrundbild hinzufügen. 

.container {
    position: relativ;
    text-align: center;
    farbe: #ffffff;
    padding: 100px;
    background-image: url('images/cat-2536662_1280.jpg'); 
    background-position: center;
    breite: 75%;
}
.text {
    position: absolut;
    top: 50%;
    links: 50%;
    transform: translate(-50%, -50%);
    schriftgröße: 24px;
    farbe: orangerot;
}
Background-image

Ein Hintergrundbild kann nur mit CSS hinzugefügt werden. Ich habe einen Container mit zentriertem Text und einem Hintergrundbild einer Katze erstellt.

Tools zur Größenänderung von Bildern verwenden

Sie können verschiedene Tools zur Größenänderung und Optimierung Ihrer Bilder verwenden. Einige dieser Tools bieten Ihnen nur eine Funktion zur Größenänderung. Einige ermöglichen es Ihnen jedoch auch, Bilder zu speichern und über eine URL in Ihre HTML-Datei einzubinden.

Cloudinary

Cloudinary ist ein gutes Beispiel für ein Tool, das die Größe des Bildes auf dem Server anpasst, bevor es an die Benutzer ausgeliefert wird. Dieses Tool wurde entwickelt, um die Größe von Bildern automatisch anzupassen, ohne die Leistung der Website zu beeinträchtigen.

Bewährte Praktiken für die Größenänderung von Bildern in HTML

Obwohl wir verschiedene Ansätze für die Größenanpassung von Bildern in HTML besprochen haben, sollten Sie sich für optimale Ergebnisse immer an diese Best Practices halten:

  • Vermeiden Sie Inline-Styling: Sie könnten versucht sein, Bilder in Ihren HTML-Dokumenten schnell zu stylen und zum nächsten Teil überzugehen. Diese Vorgehensweise kann sich jedoch negativ auf die Ladegeschwindigkeit der Webseite auswirken. Verwenden Sie ein separates CSS-Stylingblatt und sorgen Sie dafür, dass Ihr Code einfach zu lesen und zu pflegen ist.
  • Verwenden Sie die Attribute ‘Breite’ und ‘Höhe’: Stellen Sie sicher, dass Sie die Breite und Höhe Ihrer Bilder angeben. Auf diese Weise wird der Browser angewiesen, den Platz für das Bild automatisch zuzuweisen, während der restliche Inhalt geladen wird.
  • Verwenden Sie die richtigen Bildformate: Bilder gibt es in verschiedenen Formaten, z.B. JPEG, PNG und SVG. PNG ist beispielsweise das perfekte Format für ein transparentes Bild, während SVG für Logos geeignet ist.
  • Machen Sie Ihre Bilder responsive: Sie können nie wissen, mit welchen Geräten die Besucher Ihrer Website auf Ihre Inhalte zugreifen. Optimieren Sie die Bilder immer für verschiedene Bildschirmgrößen und sorgen Sie für eine einheitliche Darstellung.
  • Optimieren Sie die Dateigrößen: Hochwertige Bilder können in großen Dateien vorliegen. Solche Bilder können jedoch viel Platz auf Ihrem Server beanspruchen und die Ladezeiten der Seite beeinträchtigen. Sie können die Größe solcher Bilder mit verschiedenen Tools reduzieren, ohne die Qualität zu beeinträchtigen.

Fazit

Die Größenanpassung Ihrer Bilder in HTML verbessert die Benutzerfreundlichkeit, macht Ihre Webseite reaktionsschnell und spart Speicherplatz auf dem Server. Wir haben Ihnen mehrere Methoden zur Größenanpassung von Bildern in HTML vorgestellt.

Obwohl sie alle effektiv sind, verwende ich gerne CSS-Eigenschaften in einer separaten CSS-Datei, um die Größe der Bilder anzupassen. Allerdings können Sie manchmal auch Inline-CSS hinzufügen, wenn Ihre Anwendung klein ist und Sie nur wenige Bilder haben.

Sie können auch unseren Artikel über CSS-Ressourcen lesen, um ein tieferes Verständnis dieser Styling-Sprache zu erhalten.