8 Zu vermeidende Bildfehler auf Ihrer Website
Große Bilder, Galerien und fotoreiche Designs sind ein großer Trend im Webdesign. Um diese Ästhetik optimal zu nutzen, möchten Sie sicherstellen, dass jedes Bild auf Ihrer Website zum Display passt und Ihre Marke gut repräsentiert.
Es gibt viele Fehler, die Designer auf ihrem Weg machen, von technischen Problemen bis zur Bildqualität. Sie müssen jedoch nicht in eine dieser Fallen geraten, wenn Sie mit Website-Bildern arbeiten. Hier werden wir uns mit Bildfehlern befassen und wie man sie korrigiert oder ganz vermeidet. (Als Bonus in diesem Beitrag präsentieren wir eine Sammlung lustiger und großartiger Bilder vom Tod bis zur aktuellen Objektsammlung des Stock Photo.)
Fehler: Hochladen riesiger Dateien
Bilder in voller Größe sind schön (und notwendig), wenn es um Druckaufträge geht, können jedoch Probleme im Web verursachen. Große Bilder werden langsam geladen. Langsame Ladezeiten führen dazu, dass Benutzer Ihre Website verlassen.
Leider ist es eine leichte Falle, in die man geraten kann. Viele Backend-Programme ermöglichen das Hochladen großer Bilder. Wenn Sie nicht darauf achten, wissen Sie möglicherweise nicht einmal, dass Dateien in unglaublichen Größen hochgeladen werden. Unterschiedliche Bilder für unterschiedliche Verwendungszwecke erfordern unterschiedliche Bildspezifikationen. Lesen Sie in Ihrem Marken- oder Website-Handbuch nach, wie groß die allgemeinen Bildbereiche auf Ihrer Website sind.
Wenn Sie an Bilder denken, spielt auch der Dateityp eine Rolle. Bitte verwenden Sie kein Tiff für das Web. Die gebräuchlichsten und verwendbarsten Dateiformate sind PNG (computergenerierte Bilder wie Diagramme oder Logos oder wenn Transparenz erforderlich ist), JPG (Fotos) oder GIF (Animationen).
Lösung: Die einfache Lösung besteht darin, Bilder für die Größe des Rahmens so zu dimensionieren, dass sie mit einer geeigneten Webauflösung angezeigt werden. Aber es steckt noch ein bisschen mehr dahinter. Speichern Sie jedes Bild für die optimale Verwendung auf Ihrer Website und für das Teilen in sozialen Netzwerken. (Die Breite eines Pinterest-Bildes beträgt beispielsweise 600 Pixel. Wenn das Bild gemeinsam genutzt werden soll, sollte es diese Größe haben.)
Fehler: Vergessen zu ernten
Während der Verwendung großer Dateien kann eine Site ins Stocken geraten, ebenso wie die Verwendung von Vollbildbildern, die auf dem Bildschirm ausgeblendet sind. Durch Zuschneiden können Sie die visuellen Elemente anzeigen, die Benutzer sehen sollen, indem ein definierter Schwerpunkt erstellt wird, der bei einem Vollbild möglicherweise nicht vorhanden ist.
Mangelndes Zuschneiden von Bildern kann auch zu einem weniger als dynamischen Stapel von Grafiken führen, die alle die gleichen Formen und Seitenverhältnisse aufweisen. Die Verwendung mehrerer Zuschnitte und interessanter Formen für Bilder kann einer Website eine visuelle Faszination verleihen.
Lösung: Schneiden Sie Bilder vor dem Hochladen auf die entsprechende Größe oder Dimension zu, damit jedes Bild wie gewünscht gerendert wird.
Fehler: Thumbnails vergessen
Es gibt verschiedene Möglichkeiten, die Größe und Größe von Miniaturansichten zu ändern. (Viele davon hängen von Ihren Backend-Funktionen ab, sodass wir nicht über die jeweiligen Vorzüge streiten.) Sie müssen jedoch daran denken, die kleinsten Bilder auf Ihrer Website zu aktualisieren und darauf zu achten.
Zu oft vergessen Designer, dass Miniaturansichten, Bildvorschauen und Favoriten mit Änderungen am Website-Inhalt aktualisiert werden müssen.
Der andere große Fehler? Verwenden eines schlechten Bilds in Miniaturbildgröße, da dieses so groß wie möglich ist. Wenn das Bild schlecht ist, verwenden Sie es einfach nicht. Kein Bild ist besser als ein schlechtes Bild.
Lösung: Stellen Sie sicher, dass Sie alte Miniaturansichten oder Vorschauen entfernen, wenn sich Bilder ändern und Ihr Favicon aktuell ist.
Fehler: Nicht durchsuchbare Namen und Metadaten
Digitalkameras speichern viele Informationen in verschiedenen Metafeldern, die nicht ins Web übersetzt werden. Entfernen Sie diese Informationen aus den Bildern und tauschen Sie sie gegen verwendbare Daten aus. Suchmaschinen können den Inhalt von Bildern nicht lesen. Um sie durchsuchbar zu machen, müssen Bilder beschreibende Wörter im Titel, in den Tags und im umgebenden Inhalt enthalten.
Beispiele für schlechte Bildnamen:
- picture1.jpg
- DSCN00023.jpg
- Brille% und% watch.jpg
Ein viel besserer Bildname enthält einige beschreibende Wörter wie Glasses-and-Watch-and-Plant.jpg. Die Tag-Referenz für das Bild sollte eine ähnliche Beschreibung enthalten, z. B. „Gegenstände auf einer Thekenbrille, einer Uhr und einer Pflanze“. (Und stellen Sie sicher, dass Sie die Wörter richtig buchstabieren.)
Lösung: Verwenden Sie strenge Namenskonventionen für alle Website-Bilder und koppeln Sie Bilder mit Inhalten, die sich auf jedes Bild beziehen. Bildnamen sollten beschreibende Wörter enthalten, die durch Bindestriche getrennt sind.
Fehler: Unsachgemäße Skalierung oder Dehnung
Nichts sieht seltsamer aus als eine Person mit einem gestreckten Gesicht oder einem Bild, das nicht richtig skaliert ist. Das Strecken oder nicht proportionale Skalieren von Bildern (was besonders häufig vorkommt, wenn ein Thema oder ein Back-End geändert wird) ist ein Nein-Nein. Jedes Bild muss vertikal und horizontal mit einem Verhältnis von 1 zu 1 skaliert werden. Alles andere beschädigt die Integrität des Fotos.
Lösung: Beobachten Sie alle Skalierungsproportionen genau und überprüfen Sie Ihre Site regelmäßig.
Fehler: Keine Planung für mehrere Gerätegrößen
Responsive Design-Frameworks haben einige Auswirkungen auf Bilder. Die Änderung der Form oder Größe von Gerät zu Gerät oder nach Ausrichtung macht es wichtig zu bestimmen, wie Bilder geräteübergreifend gerendert werden.
Eine der häufigsten Methoden ist die Verwendung von Medienabfragen, um diese Änderungen nach Gerät zu planen. Das CSS ermöglicht die Anwendung bestimmter Stile auf Bilder basierend auf den Bildschirmabmessungen und hilft dabei, Bilder gut zu rendern, ohne das Design zu „brechen“.
Lösung: Verwenden Sie Medienabfragen für reaktionsschnelle Frameworks und testen Sie das Rendern von Bildern auf einer Reihe von Geräten.
Fehler: Retina-Bildschirme ignorieren
Vor nicht allzu langer Zeit war ein Standardbild mit einer Breite von 600 Pixel und 72 ppi alles, was Sie für eine Website benötigten. Aber die Bildschirme verbessern sich mit einer Geschwindigkeit, bei der dies einfach nicht mehr der Fall ist.
Abhängig von Ihrem Framework kann jedes Bild tatsächlich mehrere Bilder enthalten, die für unterschiedliche Bildschirmgrößen und Auflösungen gespeichert wurden, einschließlich Retina-Displays. (Die Auflösung von Retina-Displays kann je nach Gerät variieren, ist jedoch erheblich höher als bei Standard-Displays.)
Lösung: Fügen Sie Dateien und Medienabfragen hinzu, die speziell für Retina-Displays bestimmt sind. (CSS-Tricks können helfen.)
Fehler: Überbeanspruchte oder generische Kunst
Stock Fotografie kann eine gute schnelle Lösung sein, kann aber zu einigen unbeabsichtigten Konsequenzen führen. Fotos, die auf zu vielen Websites verwendet werden oder nur ein allgemeines Erscheinungsbild haben, erzeugen kein Bild, das eine Verbindung zu den Benutzern herstellt. (Sie möchten nicht, dass Ihre Website wie jede andere da draußen aussieht, oder?)
Wenn Sie Stock-Fotografie verwenden möchten, sollten Sie Bilder in Betracht ziehen, die Sie auf interessante Weise bearbeiten oder bearbeiten können. Vermeiden Sie Bilder, die wie Dinge aussehen, die Sie an anderen Orten gesehen haben (sehen Sie sich die Bilder aller Mitbewerber oder ähnlicher Websites an).
Lösung: Stellen Sie einen Fotografen ein, um eine großartige Bilddatei für Ihre Website zu erstellen. Fügen Sie Grafiken hinzu, die sich auf Ihr Unternehmen oder Ihre Marke beziehen und Ihre Website auf die richtige Weise widerspiegeln.
Fazit
Das Auswählen und Erstellen von Bildern für ein Website-Projekt kann einer der unterhaltsamsten Teile des Designprozesses sein. Achten Sie bei jedem Bild und Pixel darauf, dass Ihre Website gut funktioniert und Bilder enthält, die Benutzer ansprechen.
Haben Sie Tipps oder Tricks zur Verwendung von Bildern für Website-Projekte? Wir würden gerne wissen, was sie sind. Teile sie in den Kommentaren.
