Duyarlı görüntüler, kendisini görüntüleyen cihazın farklı özelliklerine uyum sağlayan bir görüntüdür. Doğru kullanıldığında duyarlı görseller web sitesi performansını artırabilir ve kullanıcı deneyimini farklılaştırabilir.
Bu makale, HTML'de duyarlı görselleri nasıl oluşturabileceğinizi araştırıyor srcset ve eleman Resim. Doğrulamak Hareket halindeyken kod yazabilirsiniz: Android için en iyi HTML düzenleme uygulamaları.
Hızlı Linkler
Neden duyarlı görseller kullanmalısınız?
Bir yazılım mühendisi web sayfaları oluştururken tarayıcıların duyarlı görselleri nasıl işlediğini düşünmedi. Sonuçta kullanıcılar genellikle web'e yalnızca masaüstü veya dizüstü bilgisayarlardan erişiyordu. Elbette bu bugün doğru değil.
وفقًا لل (Statista) Dünyadaki İnternet kullanıcılarının yüzde 90'ından fazlası cep telefonlarını kullanarak internette geziniyor. Çoğu web sayfası görseller içerir ve bu görseller web performansını ölçmek için kullanılan ölçümlerden biridir. Performansı artırmak için görsellerinizi duyarlı hale getirerek optimize etmeniz gerekir. Doğrulamak Her profesyonelin kullandığı en popüler web geliştirme araçları.
Duyarlı HTML görselleri nasıl oluşturulur?
Responsive web tasarımı, yalnızca kullanılan cihazın özelliklerine göre düzenlerin değil, içeriğin de değişebileceği anlamına gelir. Örneğin yüksek çözünürlüklü (2x) ekranlarda keskinlik düzeyinin sağlanması için yüksek çözünürlüklü grafiklere de ihtiyaç duyulur. Genişlik değeri %50 olan bir görsel ancak tarayıcı 800 piksel genişliğinde olduğunda iyi çalışabilir ancak dar bir telefonda çok büyük etki yaratacaktır ve boyut küçültüldüğünde de yüksek veri aktarım hızı tüketme sorunu yine devam edecektir. küçük ekranlara sığacak şekilde.
Öğe karakterize edilir img Büyük önemiyle; İçeriğin indirilmesine, kodunun çözülmesine ve görüntülenmesine yardımcı olduğundan modern tarayıcılar farklı sayıda görüntü formatıyla uyumludur. Cihazlar arası görselleri gömmek, masaüstü bilgisayarlardan farklı değildir ve iyi bir izlenim bırakmak için yalnızca birkaç küçük değişiklik yeterlidir.
Duyarlı görüntülere iki açıdan yaklaşabilirsiniz; aynı görüntüyü farklı boyutlarda sunarak veya ekran özelliklerine bağlı olarak farklı görüntüler sunarak. kullanabilirsiniz veya . Bu iki seçenek duyarlı görselleri farklı şekilde ele alır, ancak kural kümesine bağlı olarak hepsi belirli alternatiflerden bir görsel görüntüler.
Srcset'i kullan
Özellik size izin verir Yalnızca bir resim dosyası belirterek standart HTML. Cihaz boyutuna bağlı olarak farklı bir görüntü görüntülemek istiyorsanız şunu kullanmalısınız: srcset.
sözdizimi:
Özellik size izin verir srcset Tarayıcı, ek kaynak dosyaları sağlayarak, kullanılan ekran boyutuna en uygun görünen görüntüyü seçecektir.
Yapılan srcset Üç bölümden oluşur: kaynak görüntünün yolunu belirten görüntü dosyası adı, boşluk ve görüntünün asıl veya gerçek genişliği.
Boyutlarla srcset kullanın
Kullanımda sorun var srcset Yani tarayıcının görüntülemeyi seçtiği resmi kontrol edemezsiniz. Srcset ve birimleri birleştirmek bu sorunu çözer. Boyutlar, bir görüntünün en uygun boyutta olduğunu gösteren bir dizi ortam koşulunu tanımlar.
Artık etiketi yeniden yazabilirsiniz Yukarıda aşağıdaki gibi.
Boyutlar bir medya durumundan (maksimum genişlik: 600 piksel) oluşur; bu, görüntü alanının genişliği, alan ve medya durumu doğruysa görüntünün dolduracağı alanı belirten açıklık genişliğinden (480 piksel) oluşur.
Burada tarayıcı öncelikle cihazın genişliğini kontrol edecek ve bunu medya durumuyla karşılaştıracaktır. Koşul doğruysa yuva genişliğini kontrol edecek ve bir resim yükleyecektir. srcset Aynı genişlikte veya sonraki daha büyük resim.
Ayrıca şunu da dahil ettiğinizi unutmayın: src Bu, görüntüyü srcset ve boyutları desteklemeyen tarayıcılara referans olarak sağlar.
İzinlisin srcset Ayrıca tanımlayıcıları kullanarak farklı çözünürlüklerdeki görüntüleri sunar. x.
Bu örnekte, cihazın CSS başına 1 piksel veya daha fazla çözünürlüğü varsa, tarayıcı sevimli-kedi-yüksekXNUMX.jpg resmini yükleyecektir.
srcset niteliği img öğesinin davranışını iyileştirerek farklı donanım özellikleri için birden fazla görüntü dosyası sağlamayı kolaylaştırır. CSS'nin yerel işlevselliği olan image-set'te olduğu gibi, srcset Tarayıcının cihaz özelliklerine göre en iyi görüntüyü seçmesi için; örneğin 2x ekranda 2x resim kullanılması ve belki gelecekte bant genişliği sınırlı bir ağ kullanıldığında 1x cihazda 2x resim kullanılması.
Donanım ve yazılım pikselleri
Bu çözümün sorunu, görüntülerin yalnızca cihazın piksel yoğunluğuna göre yanıt vermesidir. Bu, donanım piksellerinin yazılım veya CSS piksellerine oranıdır. Donanım pikseli ekrandaki gerçek ışık noktasıdır, yazılım pikseli veya CSS pikseli ise bir ölçüm birimidir. Piksel yoğunluğu cihazın çözünürlüğünü belirler.
Duyarlı görseller sunarken yalnızca çözünürlüğü aklınızda bulundurmayın; Ekran boyutu da önemlidir. Aksi takdirde, gereksiz derecede büyük resimler veya yüksek derecede pikselli resimler yüklemeniz gerekebilir.
Kullanmak
Tema Birden fazla öğeyi saran bir HTML öğesidir Farklı kaynak dosyalar ve bir öğe içeren . Yaparken Görüntüler, aynı görüntünün farklı boyutlarını sunarak yanıt verir, böylece... Aslında görüntülenen görüntüyü değiştirin.
sözdizimi:
Büyük bir manzara resminizin olduğu bir durumu düşünün. Resim masaüstünde görüntülenir ve orantılı görünür, ancak mobilde o kadar küçülür ki resimdeki öğeler küçülür. Yanıt vermeyen bir resim, kötü bir kullanıcı deneyimine katkıda bulunur. Özelliğin kullanılması , tarayıcınıza cep telefonu kullanırken yakın çekime geçmesini söyleyebilirsiniz.
İlk yöntemde olduğu gibi, nitelik şunları içerir: Medya durumunu sağlamak için kullanabileceğiniz bir medya özelliği. Örneğin, görünüm 480 piksel veya daha azsa tarayıcı "cute-cat-639w.jpg" dosyasını görüntüler. Özelliğini koruyor srcset Görüntülemek istediğiniz resim dosyasının yolunu belirtin src Varsayılan resim.
WebP görüntü formatına geri dönün
Uğraştığınız diğer şey bir özelliktir WebP gibi modern görüntü formatlarına yedekleme sağlamak için iyidir. WebP görüntüleri yüksek performanslıdır, genellikle küçüktür ve hızlı bir web deneyimi sağlar. Böylece bunları web sitelerinizde kullanmaya karar verebilirsiniz. Karşılaşabileceğiniz zorluk, tüm tarayıcıların WebP görüntülerini desteklememesidir. Bir tema ile Tarayıcınız WebP'yi desteklemiyorsa alternatif bir görsel yükleyebileceğinden bu sorunu yaşamazsınız.
Neden CSS'de değil de HTML'de karşılıklı görseller oluşturmalısınız?
CSS, duyarlı görsellerle çalışmak için güçlü seçenekler sunar. O zaman neden kullanmıyorsun? Web tarayıcısı, CSS'yi ayrıştırmadan önce görüntüleri önceden yükler. Bu nedenle, sitenizin JavaScript'i görsellerde uygun değişiklikleri yapmak üzere görünüm penceresini algılamadan önce, orijinal görseller önceden yüklenecektir. Bu nedenle duyarlı görseller en iyi şekilde HTML kullanılarak işlenir.
Mümkün olan en iyi görüntü kalitesini hedefleyin
Bir tema kullanarak HTML'de nasıl duyarlı görseller oluşturabileceğinizi gördünüz و Bu makalede. Duyarlı görüntüler sunmak, genellikle ekran boyutuyla ilişkili olarak görüntü boyutunun ve çözünürlüğünün dikkate alınmasını içerir. Yanlış yapılırsa görüntü kalitesi etkilenebilir. En az kaynaktan en iyi şekilde yararlanan bir görsel seçtiğinizden emin olun. Doğrulamak Android'de HEIC görüntüleri nasıl açılır ve dönüştürülür?.
