Bildergrösse und -Typ in Stripe Responsive

  • Liebe ForumsHelfer :)

    Bin daran, meine neue WebSite mit Stripe Responsive zu erstellen und stosse dabei auf folgendes Problem betreffend Bilder:

    1) Die Bilder, die ich verwende sind gross - wahrscheinlich unnötig gross. Welche Grösse für den Header empfehlt Ihr mir bei der Einbindung im Header?
    2) Welche BildeFormate sollte man generell bevorzugen, PNG oder JPG?
    3) Welche Auflösung ist empfehlenswert - welche genügt - und ist das Thema Dateigrösse noch ein grosses Thema bei den heutigen Download-Speeds, die wir in Europa haben?
    4) Sollte man Bilder immer etwa auf den Verwendungszweck hin trimmen/verkleinern (z.B. 300x300 für ein kleines Bild in einem Artikel, so dass es gerade einen tick zu gross ist, aber z.B. 1980x1050 oder grösser für einen Header um möglichst alle Bildschrirme zu berücksichtigen?)?

    Sollte ich sonst noch Wichtiges bei der Einbindung von Bildern beachten?

    Ich danke Euch und beste Grüsse, abel.

    ZETA-Producer 16.8 - Business Version - Windows 10

  • Hallo @abel,

    1. bei einigen Layouts, so auch bei "stripe responsive" findest Du Abmessungen für Bilder beispielsweise für die Kopfgrafik im Layout-Designer. Standardmäßig sollten diese bei 960 x 410 px liegen.
    2. ist an sich egal, beide haben ungefähr gleiche Dateigröße, persönlich bevorzuge ich jpg.
    3. 1920 x 1080 px, also Full HD oder 960 x 540 px sind passende Formate. Für den Webauftritt reichen im Normalfall die 960 x 540 aus, größere Fotos solltest Du eigentlich nur anbieten, wenn diese tatsächlich auch im Vollbild angezeigt werden.
    4. Mit 960 x 540 und 300 dpi bist Du bei ca. 75 Kb, dass sollte also beim Laden nicht auffallen. Bilder in Artikeln sollten die Option "bei Klick vergrößern" bekommen. also die normale Auflösung wählen und im Test runterskalieren.
    Sofern im Layout eine Größe für den Header vorgegeben ist, immer die Größe des Headers verwenden.
    5. Wenn Du "Carousel", "Slider" oder im Bilderalbum "Slideshow" verwendest, achte darauf, nur Bilder im gleichen Format (hoch oder quer) und im gleichen Seitenverhältnis (16:9 / 16:10 / 4:3 / 3:2) verwenden.
    6. Auch Sehbehinderte besuchen deine Seite. Sie nutzen Screenreader, die den Inhalt der Seite vorlesen. Ein Bild kann aber nicht vorgelesen werden. Der Screenreader stockt dann und sagt "ein Bild". Mit dem "Alt-Text", welchen Du für jedes Bild in der Bildverwaltung hinterlegen kannst, liest der Screenreader vor "Bild zeigt ... Inhalt des Alt-Textes". auch aus SEO-Gründen ist der Alt-Text hilfreich, da dadurch auch Bilder bestimmten Suchbegriffen zugeordnet werden können.
    7. Beachte eventuelle (c)-Rechte. Nutze für die Homepage vorrangig eigene Bilder. Bei Fremdbildern prüfe vor einer Verwendung, ob eine entsprechende creative commons licence vorliegt. Gerade bei PD-Bildern (frei verwendbar) ist es eine gute Geste, den Urheber anzugeben.

  • Hallo Thomas

    Ich danke dir für Deine sehr hilfreichen und umfassenden Ausführungen zu meiner Frage, die Du erfreulicherweise bestens verstanden hast. Deine darüber hinaus gehenden Tips finde ich sehr umsichtig von Dir. Das ist nicht selbstverständlich. Danke :) und beste grüsse, abel.

    ZETA-Producer 16.8 - Business Version - Windows 10

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!