Meine hintergrund Bilder laden schneller

http://www.leona-anderson.com

body {
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed;
background-size:100% auto;
}

Habe ich eine andere Hintergrund-Bilder auf jeder einzelnen Website ein, da Sie 1080p nehmen Sie ein bisschen, um zu laden.

Ich benutze wordpress Version 4.0.5 mit minamaze Thema.

Habe ich herausgefunden, dass meine Verwendung einer javascript-Funktion preload, aber in meinem Fall auf der frontpage ich habe keine Informationen über den hintergrund Bild von der anderen Seiten, so bin ich der Hoffnung, jemand könnte mich mit einer anderen Lösung.

Meine Bilder sind .pngs mit rund 1 MB Größe, ich vielleicht auch versuchen könnte, diese zu komprimieren einige mehr?

Vielen Dank im Voraus

InformationsquelleAutor Jakob Abfalter | 2014-10-19
  1. 13

    Sollten Sie nicht verwenden .png für ein solches Bild. Als Allgemeine Regel gilt, sollte man Fotos .jpg und Grafiken (zB. logos) indiziert werden sollen .png

    Reduzierte ich die Dateigröße von ~89% auf 139KB von 1,3 MB und der optische Unterschied ist kaum spürbar.

    Hier ist das optimierte Bild: Optimiert

    Und hier ist deins: Original

    • Welche Methode hast du benutzt zum komprimieren es nach unten?
    • Ich benutzte Photoshop-export als jpg, Qualität bei 100%. So ziemlich jede Bibliothek, API-oder online-Dienst sollte das gleiche Ergebnis erzielen.
    • Ich habe eine ähnliche question. Ich Frage mich, wenn Sie können einen Blick haben.
    InformationsquelleAutor George Kormaris
  2. 8

    Können Sie reduzieren die Zeit, die Ihre website dauert beim laden durch eine riesige Marge wenn Sie mit CSS3 hintergrund-Verläufen statt der großen hintergrund-Bilder. Sprechen Sie über Ihre homepage-hintergrund-Bild können Sie beispielsweise ein Hintergrundbild erstellen=Steigung wie diese, und verwenden Sie das Bild der Frau als hintergrund-Bild und positionieren Sie es auf der rechten Seite:

    CSS:

    #content {
  display: block;
  height: 1500px;
}
body {
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -webkit-linear-gradient(left, #ba53a0, #fff);
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -o-linear-gradient(right, #ba53a0, #fff);
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -moz-linear-gradient(right, #ba53a0, #fff);
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, linear-gradient(to right, #ba53a0, #fff);
}

    HTML:

    <body>
  <div id="content"></div>
</body>

    • Ich habe eine ähnliche question. Ich Frage mich, wenn Sie können einen Blick haben.
    InformationsquelleAutor Fahad Hasan
  3. 2

    Ich denke, den Weg zu gehen, ist zu komprimieren, um JPEG-Dateien. Sie können wählen, den Grad der Kompression in den meisten software (ich benutze GIMP). 1 Mb ist auf alle praktischen Mittel, Weg zu groß für ein hintergrund Bild.

    InformationsquelleAutor Memophysic
  4. 1

    Da Sie nur ein Farbverlauf und die Frau, die Sie umsetzen können, dass der Farbverlauf mit css3 und nur laden Sie die Frau als Bild:

    CSS:

    body {
  background: -webkit-linear-gradient(left, #B200FF , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #B200FF, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #B200FF, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #B200FF , white); /* Standard syntax */
}

    Fiddle: http://jsfiddle.net/n4anrzk8/1/

    Oder Sie versuchen, https://tinypng.com/ kleiner png-Dateien, wenn es ein Bild.

    Anderen, ziemlich schlechte Methode, wäre das laden ALLER Bilder mit Breite 0 auf der ersten Seite. Sie sind nicht sichtbar, aber der browser speichert diese in den Zwischenspeicher (wenn der Besucher über den Cache von seinem browser). Ich weiß nicht empfehlen diese Methode, es ist nur der Vollständigkeit halber.

    InformationsquelleAutor Matthias Seifert
  5. 0

    Haben Sie sich überlegt, das Zwischenspeichern der hintergrund zu dem Benutzer-Gerät, so wiederholen Sie die Benutzer haben eine schnellere Ladezeit link?

    InformationsquelleAutor Oliver
  6. 0

    Komprimieren Sie Ihr Bild mit https://tinyjpg.com oder https://tinypng.com.
    Immer stellen Sie sicher, Ihr Bild wird als verlustfrei komprimiert wie möglich, es wird einen großen Unterschied in der Ladezeit.

    InformationsquelleAutor PraBhu
Schreibe einen Kommentar