Bildgröße im Bildwidget, die geladen wird

  • Hallo zusammen,

    in den Planungen meiner Homepage spielen auf einigen Seiten Bilder eine große Rolle.

    Dafür würde ich vorzugsweise das Bildwidget nutzen.

    Nun kann ich ja die Größe des Bildes, welche beim Laden der Website gezeigt wird, recht einfach durch die Aufteilung des Inhalts und zuchneiden beeinflussen. Bei einem Klick auf das Bild zeigt es sich dann ja auch größer.

    Folgende Fragen habe ich dazu.

    1. Wenn ich das Bild ziemlich klein einbette, wird doch auch nur das kleine Bild geladen und erst wenn ich es anklicke, "das Original Bild", oder?

    2. Bei den erweiterte Einstellungen finde ich die max. Importbreite mit 2048 Pixel. Bedeutet das, dass Bilder mit max. 2048x2048 angezeigt werden?

    3. Was mich stört, ist die Tatsache, das ein zugeschnittenes Bild beim Anklicken zwar größer, aber auch zugeschnitten angezeigt wird. Kann man das umgehen?

    Hintergrund meiner Fragen ist folgender: Ich möchte beim Aufruf der Website unnötige Ladezeiten vermeiden und da wäre es nicht gut, wenn die Bilder im Hintergrund schon in "voller Größe" geladen werden.

    Auf der anderen Seite möchte ich aber die Möglichkeit bieten, dass mit einem Klick auf das Vorschaubild, dieses in genau der originalen Größe und ohne den "Zuschnitt" angezeigt wird (natürlich in Abhängigkeit mit dem Monitor des Betrachters, es soll schon im Widget verbleiben und keine extra Seite geöffnet werden).

    Beispiel: Ich lade ein Bild mit der Größe 1920x1080 Pixel hoch. Der Bildauschnitt zeigt nur 500x500 Pixel. Wenn nun jemand auf das Bild klickt, soll es bei einem "riesigen Monitor" die vollen 1920x1080 Pixel anzeigen und bei einem sehr kleinen Monitor eine skalierte Version.

    Möchte der Betrachter das Bild speichern, soll er es in dr vollen Größe bekommen.

    Ist das mit dem Widget möglich?

    Falls es wichtig ist...

    Das alles plane ich mit der Response Vorlage "Logo" ;)

    Danke im Voraus.

    Sascha

    Viele Grüße

    Sascha

    _____________________________________________

    Version 15.4.1 Business

    Vorlage "Flat Responsive"

    http://www.angel-tipps.de

  • Hallo Sascha,

    zu Deinen Fragen:

    1. Vom eingefügten Bild werden zwei Varianten gespeichert und veröffentlicht. zum einen die Bild.jpg in den Abmessungen, wie Du sie auf der Seite platziert hast, zum zweiten eine bild-large.jpg in den Abmessungen es importierten Bildes. Beim Aufruf der Seite wird die bild.jpg geladen, erst bei Klick auf das Bild wird die bild-large.jpg aufgerufen.

    2. Die maximale Importbreite legt fest, auf welche Abmessung ein importiertes Bild heruntergerechnet werden soll, wenn es größer als beispielsweise 2048 px ist. Da 4K-Monitore noch nicht Standard sind, ist dies eine sinnvolle Größenbegrenzung, die aber auch nach eigenem Gefühl abgeändert werden kann.

    3. Wenn Du ein Bild zuschneidest, wird dieser Zuschnitt als bild.jpg gespeichert und davon eine bild-large.jpg erzeugt.

    Grundsätzlich liegt der Schwerpunkt von Zetas ja in der Webseitenerstellung und nicht in der Bildbearbeitung. Du solltest daher die Bilder, die Du auf der Homepage verwenden willst, schon vorher mit einem gängigen Bildbearbeitungsprogramm finalisieren, so das in Zeta keine Nachbearbeitung erforderlich ist.

    Anstatt einen Ausschnitt zu markieren, weil das Bild im Original zu groß ist, kannst es auch dadurch verkleinern, indem Du im GRID-Sysstem den rechten Rand des Bildes anfasst und nach links verschiebt. Ein Beispiel hierzu findest Du unter http://www.hanabi-pirna.de/test.php (Upload läuft gerade noch)

  • Hallo Sascha,

    wenn Du lange Ladezeiten vermeiden möchtest, empfehle ich die Bilder die Du vorab wie von Thomas empfohlen über Software bearbeitet hast, zu komprimieren. Das geht z. B. mit dem "Irfanview" oder über das Onlinetool "Tinypng". Das Toll arbeitet sehr gut und kann jpg oder png auf Internetformat, bzw. Größe herunterkomprimieren und liefert dazu eine gute Bildqualität. Einziger Haken... Dein Bild sollte max. 5MB haben für den Upload. D. h. falls Du ein großes Bild in hoher Auflösung hast, musst Du es erst so verkleinern das die 5MB nicht überschritten werden.

    Freundliche Grüße
    Ray

  • Hallo und danke für die hilfreichen Antworten :)

    Die vorherige Bildbearbeitung mache ich natürlich, Tinypng werde ich mal austesten.

    Ich hatte mich halt darauf eingeschossen, einen quadratischen Ausschnitt zu verwenden, da ich so alle Bilder auf der Website einfach genau in einer Größe und optisch ansprechend anzeigen konnte.

    Der Tipp mit dem GRID System ist genial :)

    Mit den Infos aus diesen Antworten werde ich meine gewünschte Lösung sicher schnell umsetzen können.

    Nochmals danke!

    Grüße

    Sascha

    Viele Grüße

    Sascha

    _____________________________________________

    Version 15.4.1 Business

    Vorlage "Flat Responsive"

    http://www.angel-tipps.de

Jetzt mitmachen!

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