HTML'de Duyarlı Görseller için Başlangıç ​​Kılavuzu

Duyarlı görüntü, farklı cihaz özelliklerine uyum sağlayan bir görüntüdür. Doğru yapıldığında, duyarlı görüntüler bir sitenin performansını ve kullanıcı deneyimini iyileştirebilir.

Bu makale, kullanarak HTML'de nasıl duyarlı görüntüler oluşturabileceğinizi araştırıyor. kaynak seti ve resim öğesi.

Neden Duyarlı Görseller Kullanmalısınız?

Yazılım mühendisleri web'i yaratırken, tarayıcıların duyarlı görüntüleri nasıl ele alacağını düşünmediler. Sonuçta, kullanıcılar web'e yalnızca masaüstü veya dizüstü bilgisayarlardan erişiyordu. Tabii ki, bu bugün için doğru değil.

Buna göre istatistikçi, küresel internet nüfusunun yüzde 90'ından fazlası cep telefonlarını kullanarak çevrimiçi oluyor. İnternetteki web sayfalarının çoğu görsel içerir ve bu görseller web performansını ölçmek için kullanılan metriklerden biridir. Performansı artırmak için, resimlerinizi duyarlı hale getirerek optimize etmeniz gerekir.

HTML'de Duyarlı Görüntüler Nasıl Oluşturulur

Duyarlı görüntülere iki açıdan yaklaşabilirsiniz; aynı görüntüyü farklı boyutlarda sunarak veya görüntüleme özelliklerine göre farklı görüntüler sunarak. Kullanabilirsin veya. Bu iki seçenek, duyarlı görüntüleri farklı şekilde ele alır, ancak tümü, belirlenen kurallara bağlı olarak verilen alternatiflerden bir görüntü görüntüler.

İlişkili: Web Sitenizi CSS ve JavaScript ile Duyarlı ve Etkileşimli Hale Getirme

srcset'i kullanma

Standart HTML, yalnızca bir görüntü dosyası belirlemenize izin verir. Cihazın boyutuna bağlı olarak farklı bir görüntü göstermek istiyorsanız, kullanmalısınız. kaynak seti.

Sözdizimi:

kaynak seti ek kaynak dosyaları sağlamanıza izin verir ve tarayıcı, bu resim boyutu için en uygun görünen resmi seçer.

 src="şirin-kedi.jpg"
 alt="Sevimli bir kedi">

kaynak seti üç bölümden oluşur: Kaynak görüntünün yolunu, bir boşluğu ve görüntünün içsel veya gerçek genişliğini belirten görüntü dosya adı.

srcset ile boyutları kullanma

kullanma sorunu kaynak seti tarayıcının hangi resmi görüntülemek için seçeceği üzerinde hiçbir kontrolünüz olmamasıdır. birleştirmek kaynak seti ile birlikte boyutlar bu sorunu çözer. boyutlar görüntüye optimum boyutta ipucu veren bir dizi ortam koşulu tanımlayın.

şimdi yeniden yazabilirsiniz yukarıdaki gibi etiketleyin.

size="(max-width: 600px) 480px,
 800 piksel"
 src="şirin-kedi.jpg"
 alt="Sevimli bir kedi">

boyutlar bir ortam koşulundan oluşur, bu örnekte görünümü temsil eden (maks-genişlik: 600 piksel) genişlik, boşluk ve ortam koşulu uygunsa görüntünün dolduracağı alanı belirten yuva genişliği (480 piksel) doğru.

İlişkili: Duyarlı Web Siteleri Oluşturmak için HTML ve CSS'de Medya Sorguları Nasıl Kullanılır?

Burada tarayıcı önce cihaz genişliğini kontrol edecek ve medya durumuyla karşılaştıracaktır. Koşul doğruysa, yuva genişliğini kontrol edecek ve bir görüntü yükleyecektir. kaynak seti aynı genişlikte veya bir sonraki daha büyük olanla.

Ayrıca dahil ettiğinizi unutmayın kaynak bu, resmin desteklemeyen tarayıcılara geri dönmesini sağlar kaynak seti ve boyutlar.

kaynak seti ayrıca x-tanımlayıcıları kullanarak görüntüleri farklı çözünürlüklerde sunmanıza olanak tanır.

 src="sevimli-kedi-düşük.jpg"
 alt="Sevimli bir kedi">

Bu örnekte, cihazın CSS başına iki cihaz pikseli veya daha fazla çözünürlüğü varsa, tarayıcı cute-cat-high1.jpg görüntüsünü yükler.

Donanım ve Yazılım Pikselleri

Bu çözümdeki sorun, görüntülerin yalnızca cihazın piksel yoğunluğu açısından duyarlı olmasıdır. Bu, donanım piksellerinin yazılım veya CSS piksellerine oranıdır. Yazılım pikseli veya CSS pikseli bir ölçüm birimi iken, donanım pikseli ekrandaki gerçek ışık noktasıdır. Piksel yoğunluğu, cihazın çözünürlüğünü belirler.

Duyarlı görüntüler oluştururken yalnızca çözünürlüğü dikkate almayın; ekran boyutu da önemlidir. Aksi takdirde, gereksiz yere büyük resimler veya çok pikselli resimler yükleyebilirsiniz.

 src="sevimli-kedi-düşük.jpg"
 alt="Sevimli bir kedi">

kullanma

birkaçını saran bir HTML öğesidir farklı kaynak dosyaları ve bir öğe. Süre aynı görüntünün farklı boyutlarını sunarak görüntüleri duyarlı hale getirir, görüntülenen resmi gerçekten değiştirmenize olanak sağlar.

Sözdizimi:

Büyük bir manzara resminizin olduğu bir durumu düşünün. Görüntü, masaüstünde görüntülenir ve orantılı görünür, ancak mobilde önemli ölçüde küçülür, böylece görüntüdeki öğeler küçülür. Yanıt vermeyen görüntü, kötü bir kullanıcı deneyimine katkıda bulunur. İle birlikte mobildeyken tarayıcınıza yakın plan portre görüntüsüne geçmesini söyleyebilirsiniz.

İlk yaklaşımda olduğu gibi, ortam koşulunu sağlamak için kullanabileceğiniz bir ortam özniteliği içerir. Örneğin, görüntü alanı genişliği 639 piksel veya daha azsa tarayıcı "cute-cat-480w.jpg" dosyasını görüntüler. bu kaynak seti görüntülemek istediğiniz görüntü dosyası yolunu tutar ve kaynak varsayılan resmi belirtir.

İlişkili: Duyarlı Bir Web Sitesi Oluşturmak için 7 Yeni CSS Özelliği

WebP Görüntü Formatı için Geri Dönüş

Başka bir şey iyi idare ediyor, WebP gibi modern görüntü formatları için bir geri dönüş sağlıyor. WebP görüntüleri yüksek performansa sahiptir, küçüktür ve hızlı bir web deneyimi sunar. Bu nedenle, bunları sitelerinizde kullanmaya karar verebilirsiniz. Karşılaşabileceğiniz bir zorluk, tüm tarayıcıların WebP görüntülerini desteklememesidir. İle birlikte, tarayıcınız WebP'yi desteklemiyorsa alternatif bir resim yükleyebileceğinden bu sorunu yaşamazsınız.

Neden CSS'de Değil, HTML'de Duyarlı Görüntüler Oluşturun?

CSS, duyarlı görüntüleri işlemek için sağlam seçenekler sunar. Öyleyse neden kullanmıyorsun? Tarayıcı, CSS'yi ayrıştırmadan önce görüntüleri önceden yükler. Bu nedenle, sitenizin JavaScript'i resimlerde uygun değişiklikleri yapmak için görünüm alanı genişliğini algılamadan önce, orijinal resimler zaten önceden yüklenmiştir. Bu nedenle, duyarlı görüntüleri HTML kullanarak işlemek daha iyidir.

Mümkün olan En İyi Görüntü Kalitesini Hedefleyin

Kullanarak HTML'de nasıl duyarlı görüntüler oluşturabileceğinizi gördünüz. > ve Bu makalede. Duyarlı görüntüler sunmak, genellikle görüntü boyutu ve görüntü çözünürlüğünün görüntü boyutuyla ilişkili olarak dikkate alınmasını içerir. Yanlış yapılırsa, görüntü kalitesi düşebilir. En az kaynak kullanarak optimum kullanılabilirlik sağlayan bir resim seçtiğinizden emin olun.

Duyarlı Web Tasarım İlkeleri

Web tasarımcıları yıllardır duyarlı tasarımı savunuyorlar, ancak bu nedir ve nasıl üstün web sayfaları üretebilir?

Sonrakini Oku

Yazar hakkında