Web’in daha görsel hale geldiğini ve iş web sitenizdeki harika görüntülerin önemli olduğunu duydunuz.
Ancak bu görüntüler web sitenize gelen ziyaretçilerin belası olabilir. Görüntüler ortalama web sayfasının içerdiği 1,7 MB’den 1 MB’dır.
Bu, yüksek hızlı Internet bağlantısı kullanan masaüstü bilgisayarlardaki ziyaretçileriniz için çok fazla bir sorun olmayabilir. Ancak, mobil ziyaretçilerden gelen trafiği artırdığını görmek veya görmek istiyorsanız, bu görüntüler bir sorun olabilir. Görüntü ağırlıklı Web sayfalarının indirilmesi uzun zaman alabilir. Ziyaretçiler sinirlenir ve sitenizi terk eder.
$config[code] not foundTüm mobil sorunlarını çözmeyi düşünerek, duyarlı bir Web tasarımı uygulamış olabilirsiniz. Yanıt veren bir Web tasarımının bazı sorunları çözdüğü de doğru. Site öğelerinizi daha küçük ve daha dar mobil ekranlarda görüntülenecek şekilde otomatik olarak düzenler ve görüntüler.
Ancak, duyarlı Web tasarımı her şeyin cevabı değil. Resim indirme sorununu çözmesi gerekmez. Duyarlı tasarımda bile, çoğu zaman bu ağır resimler yine de indirilir. Web performans uzmanı Yoav Weiss’ın Opera web sitesinde ısrarla belirttiği gibi:
“Duyarlı Web Tasarımı RWD yeni tarayıcı yeteneklerini ve CSS tekniklerini birleştirerek cihaza uyarlayan web siteleri oluşturmak ve her yerde ideal görünmek için bir araya geldi. Bu, geliştiricilerin güvenilmez cihaz algılaması konusunda endişelenmelerini durdurmalarına ve web sitelerini görünüm alanı boyutları açısından düşünmelerine olanak sağlamıştır.
Ancak, RWD siteleri her cihazda farklı görünse de, altındaki cihazların çoğu, aynı kaynakları tüm cihazlar için indirmeye devam etti. ”
Yeni
HTML kodu hakkında hiçbir şey bilmiyorsanız, teknik olmayan bir tanım şudur: bu özel bir dildir. Web sitesi kodunuzdaki perde arkasında kullanıldığında, bu dil, tarayıcının metni ve resimleri nasıl göstermesi gerektiği konusunda talimatlar verir. Yeni Resim öğesi bir tür HTML işaretleme dilidir. (Responsive Images Community Group'a göre) şöyle yazılmıştır: Resim öğesi duyarlı Görüntüler, duyarlı değil dizayn. Teknik olmayan iş adamları için, bu ayrım küçük görünebilir. Ancak, sitenizin mobil cihazlarda gösterdiği performans söz konusu olduğunda, önemli olabilir. Bir ArsTechnica raporuna göre, yeni işaretleme unsuru, tam boyutlu bir monitörde görülmesi gereken görüntülerin neden olduğu problemleri - mobil cihazlara iyi çevirmeyen görüntüler.
“Tarayıcı bir Picture öğesiyle karşılaştığında, önce Web geliştiricisinin belirleyebileceği kuralları değerlendirir. *** Ardından, çeşitli kuralları değerlendirdikten sonra, tarayıcı en iyi görüntüyü kendi ölçütlerine göre seçer. Bu, tarayıcının ölçütleri ayarlarınızı içerebileceği için hoş bir özellik. Örneğin, gelecekteki tarayıcılar, sayfadaki herhangi bir Picture öğesinin ne diyebileceğinden bağımsız olarak yüksek çözünürlüklü görüntülerin 3G üzerinden yüklenmesini engelleme seçeneği sunabilir. Tarayıcı hangi görüntünün en iyi seçenek olduğunu öğrendiğinde, bu görüntüyü eski ve iyi bir görüntü öğesinde yükler ve görüntüler. … Ne olur Resim bir img etiketini sarar. Tarayıcı ne yapılacağını bilmek için çok eskiyse Tüm geliştiriciler ilk önce yeni Resim öğesini kabul etmedi. Ars Technica’nın hikayesi, Web geliştirme topluluğundaki liderlerin hangi noktalara ulaşmak için yaşadıkları süreci özetliyor. $config[code] not found Ancak şimdi sorun çözüldü ve yeni resim HTML öğesi kabul edildi.
İş adamları olarak, bilmek önemli bir şey Resimler için Picture HTML öğesini uygulamak, Web geliştiricinizle tartışacağınız bir şeydir. Teknik olarak düşünen ve kendi işini yapanlar, Picture öğesini nasıl kullanacaklarını öğrenmek için buraya gidebilirler. Scott Gilbertson tarafından yazılmış mükemmel bir yazı. Uygulamaktan çekinmeyin
Resimler: Shutterstock; RICG Resim HTML Öğesi Nedir?
İle İlgili Önemli Noktalar
