Tarayıcı performansını artırmak için görüntü boyutlarını belirleme

Kısa süre önce Google Geliştirici Araçları'nı kullanarak web sitemde bir denetim gerçekleştirdim. Resimlerim aynı boyutta (500 yatay x 300 dikey piksel), bu yüzden görüntü boyutu niteliklerini dışarıda bıraksam daha iyi olacağını düşündüm, çünkü doğru boyut olduğunda bir görüntü boyutunu hesaplamaya gerek yoktur.

Ağ Kullanımı altında, Görüntü Boyutlarını Belirtin aşağıdakileri görüyorum

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

Şimdi kafam karıştı. Zaten doğru boyutta olmalarına rağmen resimlerime gerçekten genişlik ve yükseklik özellikleri eklemeli miyim? Gereksiz görünüyor.

Tarayıcılar verileri paralel olarak indirir ve sayfayı mümkün olan en kısa sürede oluşturmaya başlar.

Boyutu belirtmezseniz, tarayıcının görüntü indirme işlemi tamamlanıncaya kadar görüntünün ne kadar büyük olacağı hakkında hiçbir fikri yoktur.

Bu gecikme, tarayıcıyı düzeni yeniden boyamaya veya yeniden düzenlemeye zorlar - sayfa yükleme süresini geciktirir.

Bu sorunla ilgili daha fazla resim - sayfa daha yavaş yüklenir.

Görüntü boyutlarını HTML veya CSS olarak belirtirseniz, tarayıcı içeriğin yeniden boyanmasını ve yeniden akışını önleyebilir.

Bu nedenle her zaman resim boyutlarını belirtmelisiniz. Google'ın bununla ilgili bazı ipuçları var.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Tarayıcı oluşturma işlemi hakkında daha fazla bilgi için bkz. Http://taligarsiel.com/Projects/howbrowserswork1.htm

Bunun nasıl güncel olduğundan emin değil, ancak tarayıcıların nasıl çalıştığı ve stil sayfalarını geçersiz kılmak için neden satır içi CSS kullanmama gibi şeyler yapmak isteyebileceğiniz hakkında bilgi verir.

Duyarlı Tasarım normalde herhangi bir genişlik veya yükseklik özelliği kullanmaz

Google Geliştirme Araçları bir kılavuzdur ve sitelerinde okuduğunuz her şeyi zorlamanız gerekmez, aslında bazı şeyler güncel değildir. Duyarlı web sitelerinin çoğu kullanmaz widthveya heightgörüntülerin ekran boyutuna uyum sağlamasını istediği için ve <img>kullanıcı deneyimini azaltacak sabit genişlik ve yükseklik kullanarak ve Google bunu en önemli faktörlerden biri olarak ilan etmiştir.

CSS Geçici Çözümü

Genişliği ve yüksekliği olan bir blok seviyesi öğesini kullanmayı tercih edebilirsiniz, kişisel olarak bir tane kullanmam, ancak Google'ın blok seviyesi hakkında söylediği şey.

Görüntü öğesi veya blok düzeyi üst öğe üzerinde boyutları belirttiğinizden emin olun. Öğenin veya blok düzeyi üst öğe için boyutları ayarladığınızdan emin olun. Üst öğe blok düzeyinde değilse, boyutlar yok sayılır. Ebeveyn olmayan bir ata üzerinde boyutlar ayarlamayın.

Bunun şöyle bir şey olacağını hayal ediyorum:

Statik Tasarım .ic {width:500px;height:500px;}

Duyarlı tasarım:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

Ardından, bakış açısını algılamak ve görüntünün 4 farklı sürümünü sunmak için JavaScript veya başka bir çözüm kullanmanız gerekir; bu da yine pratikten daha azdır. Duyarlı tasarım kullanıyorsanız, o zaman güvenli bir şekilde devam edeceğim ve hangi ekranın görüntülediğine bakılmaksızın web sitenizin akışkan olması için genişlik ve yükseklik eklemeden rahatsız etmem.

Sadece cevap benzer bir soru Wordpress Stack Exchange'de. Burada yeniden yayınlama (yöneticiler / moderatörler: buna izin verilmiyorsa, bana yardım etmenin uygun yolunu bildirin).

aslında html'de genişlik ve yükseklik belirtmeniz gerektiği anlamına gelmez. Bunun anlamı, uygun alan ayırmanız ve resim yüklendiğinde tarayıcının sayfayı yeniden düzenlemesi ve yeniden boyaması gerekmez.

Ayrıca, boyutları sabit kodluyorsanız, duyarlı davranışı yener. Düzeniniz duyarlı değilse sorun değil, ancak yanıt vermeye devam etmek istiyorsanız, sonuçları elde etmek için yalnızca CSS kullanabilirsiniz.

Çoğu zaman, her iki genişliği kullanarak ve max-width:100işi yapacak, ancak Smashing Magazine'den bu gönderinin ilginç bir tekniği var: maksimum genişlik kullanmak yerine:% 100, The Padding-Bottom Hack'i kullanabilirsiniz :

"Teknikle, yüksekliği genişliğe göre bir ölçü olarak tanımlıyoruz. Dolgu ve kenar boşlukları bu tür özelliklere sahiptir ve bunları, içinde içerik bulunmayan elemanlar için en boy oranları oluşturmak için kullanabiliriz. Çünkü dolgu bu özelliğe sahiptir , dolgu altını bir öğenin genişliğine göre ayarlayabiliriz.Yüksekliği 0 olarak da ayarlarsak istediğimizi alırız. [...]

Bir sonraki adım, kabın içine bir görüntü yerleştirmek ve kabı doldurduğundan emin olmaktır. Bunu yapmak için görüntüyü kesinlikle kabın içine yerleştirmeliyiz, şöyle: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Süreç böyle bir şeye gider:

1. .html dosyasını oku
2. .html dosya başlığından .css, .js dosyalarını okuyun (.js .css SONRASI olmalıdır ...)
3. sayfadan img ve komut dosyasını okuyun

Böylece resim etiketleri "geç" olarak okunur. Bununla birlikte, sayfanızın biçimlendirmesini hesaplamak için, görüntünün boyutuna sahip olmak iyi bir şeydir (aksi takdirde tarayıcılar 1x1, 25x25, ... gibi "rastgele" bir boyut kullanırlar.

Bu nedenle, görüntüler okunana kadar kırık görünen bir sayfanın olmasını önlemek için, genişlik ve yükseklik özelliklerini koymak, tarayıcının hemen uygun sayfa düzenini hesaplamasına olanak tanır. Bu nedenle, aynı boyutlarda olsalar bile, onları orada bulundurmak iyi bir fikirdir.