Große Bilder, Galerien und fotorealistische 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 dem Weg machen, von technischen Problemen bis hin zur Bildqualität. Bei der Arbeit mit Website-Bildern müssen Sie jedoch nicht in eine dieser Fallen geraten. Hier werfen wir einen Blick auf Bildfehler und deren Korrektur oder Vermeidung. (Als Bonus in diesem Beitrag zeigen wir eine Sammlung von Spaß und großartigen Bildern vom Tod bis hin zur letzten Objekt-Sammlung von Stock Photo.)
Fehler: Hochladen großer Dateien
Bilder in voller Größe sind schön (und notwendig), wenn es um Druckaufträge geht, aber es kann Probleme geben, wenn es um das Web geht. Große Bilder werden langsam geladen. Langsame Ladezeiten bewirken, dass Benutzer Ihre Site verlassen.
Leider ist dies eine einfache Falle. Viele Backend-Programme ermöglichen das Hochladen großer Bilder. Wenn Sie nicht aufpassen, wissen Sie vielleicht gar nicht, dass Dateien in unglaublicher Größe hochgeladen werden. Unterschiedliche Bilder zu unterschiedlichen Zwecken erfordern unterschiedliche Bildspezifikationen. Schlagen Sie in Ihrem Marken- oder Website-Führer nach, um zu erfahren, wie groß die Bildbereiche Ihrer Website sind.
Wenn Sie an Bilder denken, ist auch der Dateityp von Bedeutung. Bitte verwende keinen Tiff fürs 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, die Größe der Bilder an die Größe des Rahmens anzupassen, wo er mit der richtigen Webauflösung angezeigt wird. Aber da ist noch etwas mehr. Speichern Sie jedes Bild, um es auf Ihrer Website optimal zu nutzen und um es gemeinsam zu nutzen. (Die Breite eines Pinterest-Bildes beträgt beispielsweise 600 Pixel. Wenn das Bild gemeinsam genutzt werden soll, sollte es diese Größe haben.)
Fehler: Ernte vergessen
Bei der Verwendung riesiger Dateien kann eine Site ausfallen, also können Vollbildbilder verwendet werden, die auf dem Bildschirm ausgeblendet sind. Beim Zuschneiden werden die visuellen Elemente dargestellt, die die Benutzer sehen sollen, indem ein definierter Fokus erstellt wird, der möglicherweise nicht mit einem Vollbild versehen ist.
Das Fehlen von Bildausschnitten kann auch zu einem weniger dynamischen Stapel von Visuals führen, die alle die gleichen Formen und Seitenverhältnisse haben. Die Verwendung mehrerer Bildausschnitte und interessanter Formen für Bilder kann eine Website visuell faszinieren.
Lösung: Beschneiden Sie Bilder vor dem Hochladen auf die entsprechende Größe oder Abmessung, sodass jedes Bild wie gewünscht dargestellt wird.
Fehler: Über Thumbnails vergessen
Es gibt verschiedene Möglichkeiten, um die Größenänderung und die Größenänderung von Miniaturansichten zu behandeln. (Viele davon hängen von Ihren Backend-Funktionen ab, sodass wir nicht über die Vorzüge der jeweiligen Art diskutieren.) 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 Inhalt der Website aktualisiert werden müssen.
Der andere große Fehler? Verwenden Sie ein schlechtes Bild in der Miniaturansicht, da dieses so groß ist, wie es sein kann. 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 Thumbnails oder Vorschauen entfernen, wenn sich Bilder ändern und Ihr Favicon aktuell ist.
Fehler: Nicht durchsuchbare Namen und Metadaten
Digitalkameras speichern viele Informationen in verschiedenen Meta-Bereichen, die nicht in das Web übertragen werden. Entfernen Sie diese Informationen aus Bildern und tauschen Sie sie gegen verwendbare Daten aus. Suchmaschinen können den Inhalt von Bildern nicht lesen. Um durchsuchbare Bilder zu machen, müssen beschreibende Wörter in den Titel, die Alt-Tags und den umgebenden Inhalt eingefügt werden.
Beispiele für schlechte Bildnamen:
- picture1.jpg
- DSCN00023.jpg
- gläser% und% watch.jpg
Ein viel besserer Bildname enthält einige beschreibende Wörter wie "glasses-and-watch-and-plant.jpg". Die alt-Tag-Referenz für das Bild sollte eine ähnliche Beschreibung enthalten, wie z. B. Gegenstände auf einer Gegenbrille, Uhr und eine Pflanze. (Und stellen Sie sicher, Wörter richtig zu buchstabieren.)
Lösung: Verwenden Sie strenge Namenskonventionen für alle Website-Bilder und verknüpfen Sie Bilder mit Inhalten, die sich auf jedes Bild beziehen. Bildnamen sollten beschreibende Wörter enthalten, die durch Bindestriche getrennt sind.
Fehler: Falsche Skalierung oder Dehnung
Nichts sieht merkwürdiger aus als eine Person mit einem gestreckten Gesicht oder einem Bild, das nicht richtig skaliert wurde. Das Dehnen oder nichtproportionale Skalieren von Bildern (was besonders häufig vorkommt, wenn ein Thema oder ein Backend-Wechsel auftritt) ist ein Nein. Jedes Bild muss vertikal und horizontal im Verhältnis 1 zu 1 skaliert werden. Alles andere beeinträchtigt die Integrität des Fotos.
Lösung: Beobachten Sie alle Skalierungsproportionen genau und prüfen Sie Ihre Site regelmäßig.
Fehler: Planung für mehrere Gerätegrößen nicht
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 das Anwenden bestimmter Stile auf Bilder basierend auf den Bildschirmmaßen und hilft dabei, Bilder gut zu rendern, ohne zu brechen. das Design.
Lösung: Verwenden Sie Medienabfragen für responsive Frameworks und testen Sie das Rendering von Bildern auf einer Reihe von Geräten.
Fehler: Retina-Bildschirme ignorieren
Vor nicht allzu langer Zeit war für eine Website ein Standardbild von 600 Pixeln Breite bei 72 ppi ausreichend. Aber die Bildschirme verbessern sich in einem Maße, in dem dies nicht mehr der Fall ist.
Abhängig von Ihrem Rahmen kann jedes Bild tatsächlich mehrere Bilder enthalten, die für unterschiedliche Bildschirmgrößen und Auflösungen gespeichert werden, einschließlich Retina-Displays. (Die Auflösung von Retina-Displays kann je nach Gerät variieren, ist jedoch deutlich höher als bei Standard-Displays.)
Lösung: Schließen Sie Dateien und Medienabfragen ein, die speziell für Retina-Displays gedacht sind. (CSS-Tricks können helfen.)
Fehler: Überlastete oder generische Kunst
Stock-Fotografie kann eine schnelle Lösung sein, kann jedoch zu unbeabsichtigten Folgen führen. Fotos, die auf zu vielen Websites verwendet werden oder die nur ein generisches Aussehen haben, erzeugen keine visuellen Elemente, die eine Verbindung zu den Benutzern herstellen. (Sie möchten nicht, dass Ihre Website wie jede andere aussieht, oder?)
Wenn Sie Stock-Fotografie verwenden möchten, sollten Sie Bilder in Betracht ziehen, die Sie bearbeiten oder auf interessante Weise bearbeiten können. Vermeiden Sie Bilder, die wie Dinge aussehen, die Sie an anderen Orten gesehen haben (überprüfen Sie die Bilder für alle Konkurrenten oder ähnliche Websites).
Lösung: Erwägen Sie die Einstellung eines Fotografen, um eine für Ihre Website spezifische Bilddatei zu erstellen. Fügen Sie Visuals ein, die sich auf Ihr Unternehmen oder Ihre Marke beziehen und Ihre Website richtig darstellen.
Fazit
Das Auswählen und Erstellen von Bildern für ein Website-Projekt kann einer der interessantesten Teile des Designprozesses sein. Achten Sie auf jedes Bild und jeden Pixel, um sicherzustellen, dass Ihre Website einwandfrei funktioniert und Bilder enthält, die die Benutzer ansprechen.
Haben Sie Tipps oder Tricks zur Verwendung von Bildern für Website-Projekte? Wir würden gerne wissen, was sie sind. Teilen Sie sie in den Kommentaren mit.