So optimieren Sie Ihre Webbilder

Ich wünschte, Ihre Kunden würden aufhören zu fragen "Warum ist meine Seitengeschwindigkeit so schlecht?". Diese einfachen Schritte stellen sicher, dass Sie qualitativ hochwertige Bilder erstellen, die nicht überdimensioniert sind.

Das Problem

Sie haben also gerade Ihre neue Site erstellt und alles Mögliche optimiert, einschließlich Ihrer benutzerdefinierten Bildgrößen, und übergeben sie dann dem Benutzer. Zwei Wochen später erhalten Sie die Meldung "Warum ist meine Seitengeschwindigkeit so schlecht?" oder "Warum dauert das Laden der Seite so lange?" Fragen. Sie besuchen die Website und finden heraus, dass die Bilder riesig sind! Ich bin sicher, jeder Entwickler war schon einmal in dieser Position. Es ist eine schwierige Sache, im aktuellen Klima von hochauflösenden Bildern, die von DSLRs, Telefonen und Retina-Displays stammen, umzugehen, aber hoffentlich wird dieser Beitrag ein paar sehr einfache Dinge behandeln, die Sie ergreifen können, um einige dieser Probleme zu vermeiden. Letztendlich kann bereits ein einziges übergroßes Bild Ihre Seitengeschwindigkeitsbewertungen ernsthaft senken.

Die perfekte Weltlage

Sprechen Sie vor dem Erstellen der Website mit Ihrem Designer, um sicherzustellen, dass alle Bilder im Design einem Standard-Bildseitenverhältnis entsprechen. Das Zuschneiden von Bildern sollte dann kein Problem darstellen, wenn Sie Ihre benutzerdefinierten Bildgrößen entsprechend festlegen. Versuchen Sie, 3:2, 4:3 oder 16:9 zu verwenden, da dies die Standard-Seitenverhältnisse der Kamera sind. Wenn dies nicht möglich ist und Sie Bilder von einer aktuellen Live-Site für den Neuaufbau verwenden, überprüfen Sie die Seitenverhältnisse und entwerfen Sie sie entsprechend, um diese zu integrieren, oder Sie werden in nicht allzu ferner Zukunft mit einigen Problemen konfrontiert sein Zukunft.

Datei-Upload-Größe beschränken

Es gibt viele Plugins, mit denen Sie dies steuern können; so viele, dass ich sie nicht aufzähle, aber eine einfache Suche zeigt Ihnen, wie viele es sind. Diese Plugins gibt es in vielen Formen, aber ich würde mich für die einfachste Variante entscheiden. Normalerweise fügen sie deinen Einstellungen/Medienoptionen in WordPress eine zusätzliche Option hinzu, die du einstellen kannst, wenn du als Admin angemeldet bist und die wie in der Abbildung unten aussehen würde.

Wenn Sie kein weiteres Aufblähen des Plugins wünschen, können Sie dies auch tun, indem Sie sich in den 'wp_handle_upload_prefilter' einklinken. Ein gutes Beispiel dafür, wie Sie dies nutzen können, finden Sie in diesem Blogbeitrag am Ende der Seite.

Für Bilder, die mit erweiterten benutzerdefinierten Feldern aufgerufen werden, können Sie max-min-Bildabmessungen/Dateigröße hinzufügen und auf bestimmte Dateitypen innerhalb der Benutzeroberfläche beschränken. Ich rate Ihnen dringend, dies zu tun.

Sie würden denken, dass es ausreichen würde, eine maximale Upload-Größe zu erzwingen, oder? Nun, leider ist es das nicht, dies wird den Client nicht davon abhalten, ein 500kb-Bild hochzuladen, das nur 100px x 100px groß ist, und es werden auch die EXIF-(Meta-)Daten aus der Datei nicht entfernt. Wir müssen also eine weitere Überprüfungsebene implementieren.

Bilder optimieren

Der beste Weg, dies zu tun, besteht darin, die Photoshop-Option für das Web speichern zu verwenden, aber Sie können nicht garantieren, dass der Benutzer diese Software hat, daher stehen uns jetzt zwei Optionen zur Verfügung:

Plugins

Es gibt einige gute Plugins, von denen Smush eines der besseren ist, da es sich hervorragend für die Batch-Optimierung eignet und auch eine Option für die maximale Datei-Upload-Größe ermöglicht. Es gibt ein zusätzliches Kontrollkästchen zum Entfernen von EXIF-Daten in den Einstellungen.

Online-Bildoptimierung

Auch hier gibt es viele, aber TinyPNG ist eine der einfachsten verfügbaren Optionen: Laden Sie Ihre Datei hoch und laden Sie die komprimierte Version herunter. TinyPNG entfernt alle EXIF-Daten.

Immer noch nicht genug?

Wir haben ein paar Überprüfungen eingerichtet, die hoffentlich die Bildprobleme beheben werden, aber ich bin sicher, Sie haben bereits einige Probleme gesehen, die noch auftreten können:

• Die maximale Dateigröße ist für einige kleine Bilder immer noch zu groß
• Die tatsächliche Pixelgröße kann größer sein als tatsächlich benötigt wird
• Es gibt keine visuelle Kontrolle oder einen Vergleich der optimierten Bilder, es sei denn, der Benutzer verfügt über eine gute Bildbearbeitungssoftware
• Das Bild hat den falschen Dateityp

Daran führt leider kein Weg vorbei und wir haben uns so weit wie möglich auf die Probleme vorbereitet. Die einzige Möglichkeit, das Problem wirklich zu beheben, besteht darin, den Benutzer über Dateitypen zu informieren und sicherzustellen, dass er eine Art Bildbearbeitungssoftware verwendet.

Informieren Sie Ihre Benutzer

Mögliche Lösungen für den Benutzer

Dies ist keineswegs der perfekte Weg, um Dinge zu tun, aber es sollte allen Beteiligten helfen und die Dateigröße von Bildern verringern:

Kennen Sie Ihre Dateitypen

Es gibt zu viel für diesen Beitrag, aber wenn Sie mehr über Dateitypen lesen möchten, dann ist dieser Beitrag eine gute Ressource, um sich eingehend mit dem Thema zu befassen. Für den Zweck dieses Beitrags werde ich es jedoch so einfach wie möglich aufschlüsseln:

• Ein Foto mit Personen, Landschaften usw. = JPG
• Ein Ausschnitt einer Person oder eines Produkts, der etwas anderes überlagert, das nicht im Bildhintergrund liegt = PNG
• Eine Infografik oder ein Symbol = GIF oder PNG

Wenn Sie daran denken, etwas anderes wie TIF, PSD oder AI als Bilddatei für Ihre Website hochzuladen, dann STOPPEN Sie jetzt.

Das übliche Fallszenario

Software

• Windows-Betriebssystem mit Microsoft Paint

Das Bild

• Maximieren Sie den Browser, damit Sie die größte Ansichtsfenstergröße sehen, in der das Bild verwendet wird. Verwenden Sie das Windows-Snipping-Tool, um die tatsächliche Pixelgröße des Bildes zu ermitteln
• Erstellen Sie eine neue Leinwand/ein neues Dokument in MS Paint basierend auf den Abmessungen des Snipping-Tools
• Passen Sie Ihr neues Bild in die neue Leinwand ein
• Benötigt das Bild einen transparenten Hintergrund?
• Ja ? Als GIF oder PNG speichern
• Nein ? Als JPG speichern
• Verwenden Sie TinyPNG, um Ihr Bild zu komprimieren
• Laden Sie das komprimierte Bild hoch

Das beste Szenario

Software

• Jedes Betriebssystem mit Photoshop

Das Bild

• Maximieren Sie den Browser, damit Sie die größte Ansichtsfenstergröße sehen, in der das Bild verwendet wird. Verwenden Sie das Bildschirmaufnahme-Tool (Mac-Tool), um die tatsächliche Pixelgröße des Bildes zu berechnen
• Erstellen Sie eine neue Leinwand/ein neues Dokument in Photoshop basierend auf den Abmessungen des Snipping-Tools
• Passen Sie Ihr neues Bild in die neue Leinwand ein
• Für Web speichern auswählen
• Stellen Sie sicher, dass Sie das Bild mit 100 % anzeigen
• Benötigt das Bild einen transparenten Hintergrund?
• Ja ? Wählen Sie GIF, PNG8 oder PNG24 aus der Dropdown-Liste (Sie sehen, dass sich die Bildqualität und die Dateigröße ändern, wenn Sie dies tun)
• Nein ? Wählen Sie JPG aus der Dropdown-Liste aus
• Ändern Sie die verschiedenen bildformatabhängigen Einstellungen, bis Sie einen guten Kompromiss zwischen Bildqualität und Größe haben
• Wählen Sie das Metadaten-Dropdown-Menü und wählen Sie keine
• Speichern und dann auf Ihre Website hochladen

Fazit

Hoffentlich sollte dies dem Benutzer helfen, ein besseres Verständnis dafür zu bekommen, wie man seiner Site neue Bilder hinzufügt und viel Dateigröße spart. Ich weiß, dass dieser Beitrag nicht die Verwendung von Hintergrundbildern, Retina, SVG und vielen anderen anderen Bildfabriken behandelt, aber wenn die behandelten Optionen angewendet werden, sollte dies der Mehrheit der Benutzer immer noch helfen.

Wenn Sie mehr Hilfe beim Webdesign benötigen, wenden Sie sich noch heute an unsere Experten.

Wenn Sie Hilfe bei Ihrer Webentwicklung benötigen, zögern Sie nicht, uns zu kontaktieren.