Bir web sitesini dağıtırken, geliştiriciler genellikle tüm ekran boyutları için aynı görüntüyü kullanır; bu, yeniden boyutlandırma konusunda tarayıcıya güvenilemeyeceği için iyi bir uygulama değildir. Böyle bir durumda duyarlı görseller devreye girerek görselin ilgili cihaza uygun boyutta ve kalitede indirilmesini sağlar, böylece sayfa yükleme hızı artar.
Duyarlı Görseller Kullanılarak Sayfa Yükleme Hızı Nasıl Artırılır?
Duyarlı görseller aracılığıyla sayfa yükleme hızını artırmak için aşağıdaki yöntemleri göz önünde bulundurun:
Örnek 1: “srcset” Özelliğini Kullanarak Duyarlı Görüntüler Aracılığıyla Sayfa Yükleme Hızını Artırın
Duyarlı görselleri uygulamaya yönelik en uygun yaklaşım ' kaynak seti ' özelliği ' içinde toplandı ' etiket. Bu özellik, programcının çeşitli görüntü boyutlarını belirlemesine olanak tanır ve tarayıcı, kullanıcının ekran boyutuna göre en uygun görüntüyü otomatik olarak seçer. Gösteri aşağıdadır:
DOCTYPE HTML'si >
< HTML >
< KAFA >
< meta karakter seti = 'utf-8' >
< meta isim = 'görüntü alanı' içerik = 'genişlik=aygıt genişliği, başlangıç ölçeği=1' >
< başlık > başlık >
KAFA >
< vücut >
< img kaynak = 'F:\İŞ TEKNİK MAKALELER\imgre.png' her şey = 'Duyarlı Görüntü'
kaynak seti = 'F:\İŞ TEKNİK ARTICLES\imgre.png 400w, F:\İŞ TEKNİK ARTICLES\imgre.png 800w, F:\İŞ TEKNİK ARTICLES\imgre.png 1200w'
/>
vücut >
HTML >
Bu kodda:
- “ kaynak seti Her seferinde görüntünün yolunu ve farklı genişliklerini içeren ” özelliği eklenmiştir.
- Öyle bir görüntü ki' F:\İŞ TEKNİK MAKALELER\imgre.png 400w ”, “ genişliğine sahip bir görüntü yolunu temsil eder 400 ” piksel.
- Bu bilgiye dayanarak tarayıcı, kullanıcının ekran boyutuna göre indirilecek en uygun görseli analiz eder, böylece daha küçük ekranlarda daha küçük görseller görüntülenir ve böylece bant genişliğinden tasarruf edilir.
Çıktı
Örnek 2: Farklı Piksel Yoğunluklarını Belirleyerek Duyarlı Görüntüler Aracılığıyla Sayfa Yükleme Hızını Artırın
Bu örnekte, yüksek çözünürlüklü ekranlar için görüntü yolu farklı piksel yoğunluklarıyla birlikte belirtilecektir. Bu şu şekilde başarılabilir: ' kaynak seti ” özelliği aşağıda gösterilmiştir:
DOCTYPE HTML'si >< HTML >
< KAFA >
< meta karakter seti = 'utf-8' >
< meta isim = 'görüntü alanı' içerik = 'genişlik=aygıt genişliği, başlangıç ölçeği=1' >
< başlık > başlık >
KAFA >
< vücut >
< img kaynak = 'F:\İŞ TEKNİK MAKALELER\imgre.png' her şey = 'Duyarlı Görüntü' kaynak seti = 'F:\İŞ TEKNİK MAKALELER\imgre.png 1x, F:\İŞ TEKNİK MAKALELER\imgre.png 1.5x, F:\İŞ TEKNİK MAKALELER\imgre.png 2x'
/>
vücut >
HTML >
Bu kod parçacığında, görüntü yolunu değişen piksel yoğunluklarıyla üç kez belirtin. Öyle ki tarayıcı, çeşitli ekranlarda en yüksek kaliteyi sağlamak için en uygun/en uygun görseli seçiyor.
Not: “ 1x ” piksel varsayılan değerdir, dolayısıyla kullanıcının görüntünün yoluyla ilişkilendirip ilişkilendirmemesi bir seçimdir.
Çıktı
Örnek 3: 'Boyutlar' Özelliğini Kullanarak Duyarlı Resimler Aracılığıyla Sayfa Yükleme Hızını Artırın
Bazı durumlarda ekrandaki gerçek görüntü boyutunun ekran genişliğinden farklı olduğu bir sınırlama olabilir. Bu sorunu çözmek için “ boyutlar ” özelliği, medya sorgularına göre görsel boyutunu veya sabit bir boyutu dahil etmek için kullanılabilir. Aşağıda kod gösterimi verilmiştir:
DOCTYPE HTML'si >< HTML >
< KAFA >
< meta karakter seti = 'utf-8' >
< meta isim = 'görüntü alanı' içerik = 'genişlik=aygıt genişliği, başlangıç ölçeği=1' >
< başlık > başlık >
KAFA >
< vücut >
< img kaynak = 'F:\İŞ TEKNİK MAKALELER\imgre.png' her şey = 'Duyarlı Görüntü' kaynak seti = 'F:\İŞ TEKNİK ARTICLES\imgre.png 50w, F:\İŞ TEKNİK ARTICLES\imgre.png 800w, F:\İŞ TEKNİK ARTICLES\imgre.png 1200w'
boyutlar = '(maksimum genişlik: 800 piksel) 100vw, 800 piksel'
/>
vücut >
HTML >
Bu kod bloğunda “ boyutlar ” özelliği medya sorgularını ve boyutlarını bütünleştirir. Öyle ki tarayıcıyı kullanıcının ekran genişliğine göre resim boyutunu seçmesi konusunda yönlendiriyor. Bu, görsellerin hedef maksimum genişliği aşmamasını sağlar.
Çıktı
'Boyutlar' Özelliğini Kullanırken Dikkat Edilmesi Gereken Önemli Hususlar
' kullanımında bazı sınırlamalar vardır. boyutlar ” özelliği de aşağıda listelenmiştir:
- Birden fazla medya sorgusu kullanırken “ boyutlar ” özelliği, ilk gerçek medya sorgusunun seçildiğinden emin olun. Ayrıca medya sorgularının en spesifikten en az spesifik olana doğru sıralandığından emin olun.
- Tarayıcı, ana öğenin genişliğini öğrenene kadar yüzde cinsinden belirtilen bir şeyin ne kadar geniş olacağının farkında olmadığından 'sizes' özelliği yüzde boyutlarını desteklemez.
Örnek 4: “
“
< HTML >
< KAFA >
< meta karakter kümesi = 'utf-8' >
< meta isim = 'görüntü alanı' içerik = 'genişlik=aygıt genişliği, başlangıç ölçeği=1' >
< başlık > başlık >
KAFA >
< vücut >
< resim >
< kaynak medya = '(maks. genişlik: 100 piksel)' kaynak seti = 'F:\İŞ TEKNİK MAKALELER\imgbanner.png' />
< img kaynak = 'F:\İŞ TEKNİK MAKALELER\imgre.png' her şey = 'Duyarlı Görüntü' />
resim >
vücut >
HTML >
Bu kod satırlarına göre:
- “ belirtin
” öğesini toplayan “ ” öğelerini farklı görüntüler için kullanın ve tarayıcının, kullanıcının ekran boyutuna göre uygun olanı seçmesine izin verin. - Ayrıca, eğer hiçbiri “
” elemanları ekran boyutuna uygun, “de belirtilen görüntü ” etiketi bir geri dönüş görevi görür.
- Bu, sonuç olarak öngörülemeyen bir durumda alternatif bir resim ekler ve böylece gelişmiş sayfa yükleme hızını korur.
Çıktı
Çözüm
Sayfa yükleme hızı, ' kaynak seti ” özelliği, farklı piksel yoğunluklarını belirterek, “ boyutlar ” özelliği veya “ aracılığıyla