Yapımı benim arka plan resimleri onlar 1080p yüklenmeleri biraz zaman alır çünkü

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

Yapımı benim arka plan resimleri onlar 1080p yüklenmeleri biraz zaman alır çünkü

http://www.leona-anderson.com

ben her site bir farklı bir arka plan görüntüleri sahip hızlı yüklenir.

Minutese temasıyla wordpress 4.0.5 kullanıyorum.

Bir önyükleme javascript işlevi kullanmamı öğrendim, ancak benim durumumda diğer sitelerin arka plan görüntüsü hakkında hiçbir bilgim yok, böylece birisinin bana başka bir çözüm sunabileceğini umuyorum.

Resimlerim yuvarlak yaklaşık 1mb boyutunda .pngs, belki de biraz daha sıkıştırmaya çalışabilirim? peşin

kaynak

2014-10-19 Jakob Abfalter

Böyle bir görüntü için .png kullanmamalısınız. Genel bir kural olarak, fotoğraflar .jpg ve grafikler (örn. Logolar) olmalıdır.

Dosya boyutunu 1.3MB'dan ~% 89'a kadar 139KB'ye düşürdüm ve görsel fark neredeyse hiç fark edilmeyecek. senin burada Optimized

Ve: Original

kaynak

2014-10-19 16:16:25

Aşağı sıkıştırmak için hangi yöntemi kullandınız? –

Photoshop'u jpg olarak,% 100 kalitesinde vermek için kullandım.Hemen hemen her kitaplık, API veya çevrimiçi hizmet aynı sonucu elde etmelidir. –

Sen yerine büyük background-görüntülerin CSS3 background-geçişlerini kullanırsanız sitenizin büyük bir farkla yüklenirken gereken süreyi kısaltır içinde

teşekkürler. Örneğin ana sayfanız arka plan görüntü bahsedersek, böyle = gradyan bir arka plan oluşturmak ve sağa arka plan görüntü ve pozisyon onu olarak bayanın resmi kullanabilirsiniz:

#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); 
 
}

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

kaynak

2014-10-19 16:13:00

Gitmenin yolunun JPEG dosyalarına sıkıştırıldığını düşünüyorum. Çoğu yazılımda sıkıştırma derecesini seçebilirsiniz (GIMP kullanıyorum). 1 Mb, pratik olarak arka plan görüntüsü için çok büyük bir yoldur.

kaynak

2014-10-19 16:13:43 Memophysic

Kullanıcıların arka planını önbelleğe almayı düşündüğünüzden, kullanıcıların tekrar daha hızlı yükleme süreleri link mu?

kaynak

2014-10-19 16:15:56 Oliver

yalnızca gradyan ve kadını kullandığınız için, css3 ile Renkli gradyan gerçekleştirmek ve sadece bir görüntü olarak kadını yükleyebilir İşte

iyi görüntü var:

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/

Veya görüntü olması gerekiyorsa, daha küçük png dosyaları almak için https://tinypng.com/ kullanmayı deneyin.

Diğer bir, oldukça kötü bir yöntem, ilk sayfada genişlik 0 olan TÜM görüntülerin yüklenmesi olacaktır. Görünmezler, ancak tarayıcı bunları önbelleğe kaydeder (eğer ziyaretçi tarayıcısının önbelleğini kullanıyorsa). Bu yöntemi önermiyorum, sadece tamlık için.

kaynak

2014-10-19 16:24:44

Yapımı benim arka plan resimleri onlar 1080p yüklenmeleri biraz zaman alır çünkü

cevap

İlgili konular