Maetzzen: Frage zu Bildgröße / Websitegröße

Hallo zusammen,

ich versuche mich zurzeit an etwas Neuem. Und zwar möchte ich Eine Seite mit Anchors erstellen die etwa so funktioniert. Das habe ich auch ganz einfach hingebracht, indem ich mit meiner Navigation auf die einzelnen articles verweise.

<ul class="topnav" id="myTopnav">
    <li><a href="#top">🔝 TOP</a></li>
    <li><a href="#top">ÜBER MICH</a></li>
    <li><a href="#hobbys">Hobbys</a></li>
    <li><a href="#studium">Studium</a></li>
    <li><a href="#gaestebuch">Gästebuch</a></li>
    <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()"></a></li>
 </ul>
<article id="hobbys">
        <h1> Hobbys </h1>
        <p>Hier steht Text.</p>
</article>        

Zwischen den einzelnen articles habe ich Hintergrundbilder, die über die ganze Breite gehen und fixed sind mit Hilfe von einer solchen div:

<div class="spalte3"></div>
.spalte1, .spalte2, .spalte3{
    height: 30em;
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    box-shadow: inset 0 0 10px 2px #000; 
}
.spalte 3{
    background: url(bilder/landscape3.jpg);
}

Nun zu meiner eigentlichen Frage:

Meine Seite besteht nun aus einer css Datei, einer index.php, ein paar kleinere JS Dateien, damit die Navigation schön angezeigt wird (je nachdem wie Weit gescrollt wurde) und zu guter Letzt einigen Bildern.

Da die Bilder ja über die ganze Breite gehen und somit relativ groß sind, ich aber dennoch eine gute Qualität möchte, weiß ich (noch) nicht, wie sich das auf die Ladezeit auswirkt. Dass es langsam wird ist klar - aber wie langsam.

Es befinden sich ja alle Inhalte auf einer Seite (es gibt ja keine Verweise auf andere Seiten, es wird lediglich weiter runter gescrollt).

Wie groß sollte eine solche Seite denn maximal sein? Die Bilder habe ich schon sehr stark komprimiert auf je rund 300-400 KB - was in Vergleich zu meinen bisher eingesetzten Bildern riesig ist, aber da sie so breit sind weiß ich nicht wie klein ich sie machen soll, damit sie noch in angemessener Qualität vorliegen.

Es befinden sich 4 Bilder ~400 KB und ansonsten kaum Daten. Insgesamt werden wohl so 2MB geladen.

Außerdem würde mich interessieren:

  • ob es richtig ist, mehrere articles zu benutzen
  • ob man solche Hintergrundbilder mit Hilfe einer Div einfügen kann (oder ob es bessere Lösungen gibt)
  • ob meine Vorgehensweise mit den "Anchors" stimmt

Vielen Dank im Voraus für die Antworten. Ich hoffe dass meine Problembeschreibung passt.

  1. Was mir gerade noch selber eingefallen ist:

    Ich könnte für Mobilgeräte kleinere Bilder verwenden.

    @media all and (max-width: 35em){
    .spalte3{    
        background: url(bilder/landscape1_klein.jpg);
    }
    }
    

    Das würde dann wenigstens die Ladezeit für Handys etc. verringern, da ich dann die Bilder nicht mit einer Breite von ~2000px verwende sondern nur ~720px o.Ä.

    Gruß Maetzzen

    1. @@Maetzzen

      Ich könnte für Mobilgeräte kleinere Bilder verwenden.

      Ja.

      Beachte aber auch unterschiedliche Auflösungen (Retina und wie immer das bei anderen Herstellern heißt) – auch dafür gibt es media queries. Dolores. ;-)

      Vielleich ist aber auch Retina Revolution was für dich.

      Wenn es keine Hintergrundbilder wären, ließen sich srcset-Attribut / picture-Element verwenden (responsive images).

      LLAP 🖖

      --
      „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
  2. @@Maetzzen

    Es befinden sich 4 Bilder ~400 KB und ansonsten kaum Daten. Insgesamt werden wohl so 2MB geladen.

    Muss ja nicht auf einmal sein. Erstmal der Inhalt, CSS, JavaScript und das erste große Bild. Die anderen lässt du dann nach dem Rendern der Seite per JavaScript nachladen und schreibst die entsprechenden Regeln erst dann ins Stylesheet.

    Außerdem würde mich interessieren:

    • ob es richtig ist, mehrere articles zu benutzen

    Siehst für mich eher danach aus als wäre section der passende Elementtyp.

    • ob man solche Hintergrundbilder mit Hilfe einer Div einfügen kann (oder ob es bessere Lösungen gibt)

    Du sagst, die Bilder stünden zwischen den Abschnitten? Oder gehören sie doch zum vorigen oder nächsten dazu? Dann wären statt zusätzlicher divs im Markup eher Pseudoelemente section::before bzw. section::after angebracht.

    • ob meine Vorgehensweise mit den "Anchors" stimmt

    Ja, so dürfte gewährleiste sein, dass das Scrollen per JavaScript ein progressive enhancement ist. Ohne JavaScript springt man die Abschnitte an.

    Hier zeigt sich, was bei internetandmore.eu vergessen wurde: Beim Anspringen eines Abschnittes den Seiten-URI zu ändern und dies in der History festzuhalten, damit man Abschnitte bookmarken kann und damit der Back-Button funktioniert.

    LLAP 🖖

    --
    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
    1. Hallo Gunnar,

      Muss ja nicht auf einmal sein. Erstmal der Inhalt, CSS, JavaScript und das erste große Bild. Die anderen lässt du dann nach dem Rendern der Seite per JavaScript nachladen und schreibst die entsprechenden Regeln erst dann ins Stylesheet.

      Das hört sich gut an, schließlich hab ich mit CSS ja die höhe der Bilder angegeben - wenn der "Rahmen" steht verschiebt sich ja nichts mehr.

      Wie genau das funktioniert mit dem Nachladen muss ich erst noch nachschlagen, aber danke für den Tipp!

      Siehst für mich eher danach aus als wäre section der passende Elementtyp.

      Habe ich mir schon gedacht, aber was eignet sich da als Faustformel. Man könnte zum einen Sagen, dass es ein neuer Artikel ist über ein anderes Thema, oder auch nur ein "Abschnitt" der Seite..

      • ob man solche Hintergrundbilder mit Hilfe einer Div einfügen kann (oder ob es bessere Lösungen gibt)

      Du sagst, die Bilder stünden zwischen den Abschnitten? Oder gehören sie doch zum vorigen oder nächsten dazu?

      Also die Bilder bilden eine Art Grenze zwischen den einzelnen Teilbereichen der Seite. Meine (bisher) Articles haben eine gewisse Breite und Shadow (sieht in etwa so aus, als würde ein Din A4 Blatt am Bildschirm kleben) und nach jedem Blatt kommt über die gesamte Bildschirmbreite eine Abgrenzung durch ein schickes Hintergrundbild. Deshalb habe ich auch Articles für jeden Abschnitt genommen - um es mit css recht einfach umzusetzen.

      article{
          width: 60%;
          margin: 0 auto 0 auto;
          box-shadow: 0 5px 10px 10px rgba(0,0,0,0.5);
      }
      

      Zwischen diesen Articles dann eine neue Spalte über die gesamte Bildschirmbreite, wie ich oben ja schon ein Codebeispiel geschickt habe.

      Hier zeigt sich, was bei internetandmore.eu vergessen wurde: Beim Anspringen eines Abschnittes den Seiten-URI zu ändern und dies in der History festzuhalten, damit man Abschnitte bookmarken kann und damit der Back-Button funktioniert.

      Das hört sich interessant an. Ich wusste gar nicht, dass das geht. Ich habe natürlich nicht alles oben erwähnt was ich an JS benutze. Zum einen eine fixierte Navigation, ein Active Script, das den aktuellen Bereich hervorhebt, ein ToTop Button der unten rechts erscheint (nur bei großen VPorts), also habe ich das Problem mit dem Zurückbutton mit vielen kleineren JS gelöst.

      Vielen Dank für den Tipp mit dem Nachladen. Das mit den Bookmarks muss ich auch ausprobieren.

      Gruß Maetzzen

      1. @@Maetzzen

        Siehst für mich eher danach aus als wäre section der passende Elementtyp. Habe ich mir schon gedacht, aber was eignet sich da als Faustformel.

        Handelt es sich um einen selbstständigen, vom Hauptinhalt abgesetzten Block? Bspw. ein Nutzerkommentar zum Hauptinhalt? Dann article.

        Scheint mir hier nicht gegeben zu sein, wo doch die Abschnitte zusammen erst den Hauptinhalt ergeben. Folglich section, IMHO.

        Du sagst, die Bilder stünden zwischen den Abschnitten? Oder gehören sie doch zum vorigen oder nächsten dazu? Also die Bilder bilden eine Art Grenze zwischen den einzelnen Teilbereichen der Seite.

        Ja, das ist ihre visuelle Funktion. Aber sind haben die Bilder einen inhaltlichen Bezug zum vorigen/nächsten Abschnitt? Oder sind es einfach irgendwelche Bilder ohne Bezug zum Inhalt?

        Im letzteren Fall wäre hr als Elementtyp geeignet.

        LLAP 🖖

        --
        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
        1. Handelt es sich um einen selbstständigen, vom Hauptinhalt abgesetzten Block? Bspw. ein Nutzerkommentar zum Hauptinhalt? Dann article.

          Meine Articles befassen sich jeweils immer zu einem Thema. Es ist also nicht so, dass sich mehrere Articles auf ein Gebiet beziehen.

          Bsp: Meine Navigation besitzt die Punkte Über Mich, Hobbys, Studium. Es gibt jeweils genau einen Article dazu.

          Also die Bilder bilden eine Art Grenze zwischen den einzelnen Teilbereichen der Seite.

          Ja, das ist ihre visuelle Funktion. Aber sind haben die Bilder einen inhaltlichen Bezug zum vorigen/nächsten Abschnitt? Oder sind es einfach irgendwelche Bilder ohne Bezug zum Inhalt?

          Die Bilder haben keinen konkreten Bezug zum Inhalt. Sie dienen lediglich als visuelles Gestaltungsmittel - also werde ich dann hr verwenden.

          Gruß Maetzzen