Web görsel bir araçtır. Görsel manzaranın büyük çoğunluğu görüntü dosyaları sayesinde. CSS ve satır içi SVG ile bol miktarda elde edilebilirken, çoğu site hala görüntü dosyalarına ihtiyaç duyar.
Ortalama olarak, resimler yarıdan fazla Geçen sene sayfa boyutunun ve yıldaki görüntü boyutlarının artması; bir vardı % 21 büyüme Sadece 2014 yılında görüntü boyutunda.
Aynı zamanda, web'e erişen cihazların sayısı ve çeşitliliği de artmaya devam ediyor. Çözünürlükler şimdi değişiyor 72ppi (azalan ortak) ve 600ppi arasında herhangi bir yerde.
Herhangi bir cihaz için yeterli kalitede olacak ekran için bir görüntü oluşturmak basit: 1000ppi kaydedin ve bir gün olarak adlandırın. Ortaya çıkan görüntü, en yüksek çözünürlüklü cihazlar için bile net olacaktır. Ancak kaliteniz yüksek olacak, aynı zamanda dosyalarınız da olacak. Sayfa yükleme süresi ile bir UX'deki anahtar faktör Sitelerin derhal kullanıcılarımıza ulaştırıldığından emin olmak bizim üzerimize düşmektedir. Görüntüler böyle yüksek kalitedeyse, geniş bant bağlantılarını indirmek için bir düzine saniye sürdüğü zaman, mobil bağlantılara izin verilir, daha sonra etkin olarak kullanılamazlar.
Ardından yanıt veren görüntülerin amacı, görüntüleyebilen ekranlara daha yüksek kalitede bir görüntü vermemek (ki bunu kolayca yapabiliriz), amaç desteklenen en yüksek kaliteli görüntüyü sunmaktır .
Bu kılavuz, neyin işe yarayıp yaramadığını, sorunların ve tuzakların hala nerede olduğunu ve bugünün web sitelerinde nasıl yanıt veren görüntüleri kullanabileceğinizi öğretmek için tasarlanmıştır.
İhtiyacı hissediyorum, hız ihtiyacı
Hız neden önemlidir? Şüphesiz 3G bağlantısında kimse yok mu? Hiç kimse çevirmeli kullanmadı. Müşterinizin hedef demografisi kent Manhattan'ında yaşıyorsa, neden kırsal Lesotho'yu önemsemelisiniz? Gerçek şu ki, hepimiz süper hızlı geniş bantta olduğumuz bir efsane, giderek artan hızlara yönelik arzulardan yararlanan şirketler tarafından satıldı.
Çoğu insan, her geçen gün en az iki saatini daha düşük bir bağlantıyla geçirir. Çoğu zaman, kendimi en çok zaman zaman, bir 3G bağlantısının bile uzaktaki bir rüyaya benzediği zaman, işe giderken göz atmak için buluyorum.
Nisan içinde Google duyurdu Mobil uyumluluğun, “mobil” olduğu düşünülen cihazlarda yapılan aramalar için bir sıralama faktörü olarak kullanılacağı. Ondan önce bile, hız bir faktör oldu sayfa sıralamasında - hem Google'ın hesaplarının bir parçası olarak hem de hemen çıkma oranınıza katkıda bulunan bir faktör olarak.
Aynı yere yerleştirilmiş iki sitede, fazladan bir 1Kb sizi Google’da 3., 4. veya 5. sırada bırakabilir. Hatta 10'dan 11'e, yani sayfa 1'den sayfa 2'ye, hatta müşterinizin gelirindeki tüm ilişkili etkiyle sizi düşürebilir.
Bu görüntüye gerçekten ihtiyacın var mı?
En yüksek düzeyde optimize edilmiş görüntü var, hiç görüntü yok. Sitenizde beş resminiz varsa ve bir tanesini düşürdüğünüzde, kendinizi% 20 kaydettiniz, belki daha da önemlisi kendinize bir http isteği kaydettiniz. Tüm görselleri sitemizden düşürürsek, kendimizi% 100 ve beş http isteğimizi de kurtarırdık. Öyleyse neden yapmıyorsun?
Kısa vadede metinlerden daha etkili bir şekilde iletişim kurdukları için sitemizdeki resimleri düşürmüyoruz. Kullanıcıları içeriğe çeken duygusal bir bağlantı oluşturuyorlar.
Biz biliyoruz ki kullanıcılar web sayfalarını okumaz . Çok az sayıda kişi çevrimiçi içeriği ayrıntılı olarak okuyor. Görüntüler, metnin yönetebileceği zamanın bir bölümünde bir markayla bağlantı kurmamıza, iletişim kurmamıza ve güçlendirmemize olanak tanır.
Görüntüler büyük olabilir ve indirilmesi güç olabilir, ancak tarayıcıda bir kez oluşturulduğunda, kullanıcı etkileşimi oluşturmak ve marka mesajını güçlendirmek için metinden çok daha verimli olurlar.
Duyarlı görüntüler, duygusal bağlantı görüntülerinin, sabırsız kullanıcının arka tuşa bastığında kaybolmamasını sağlamaya yardımcı olur.
SVG'ye ne dersin?
SVG (Ölçeklenebilir Vektör Grafikleri), Web'in gerçek öncü teknolojilerinden biridir. Çoğu tasarımcının hala gerçek potansiyelini fark etmediği eğrinin çok ötesindedir.
SVG - adından da anlaşılacağı gibi - vektör tabanlı. Bu, SVG grafiklerinin noktalardan, açılardan ve mesafelerden oluşturulduğu anlamına gelir. SVG, isminden de anlaşılacağı gibi, ölçeklenebilir, yani 5k iMac veya bir Android akıllı telefon üzerinde eşit derecede iyi görüntüleniyor, dosya kalitesinde hiçbir değişiklik ve kalite kaybı olmadan.
Düz bir çiziminiz varsa, bir simge, logo, hemen SVG olarak gösterilebilecek herhangi bir şey varsa, o zaman SVG gitmek için bir yoldur.
Web'deki çoğu görüntü bit eşlemlerdir. Genel olarak bir bitmapin işleyiş biçimi, her bir pikselin bir kerede tanımlanması, rengi (RGB - kırmızı, yeşil ve mavi değerler) ve bazı durumlarda saydamlığıdır. 100px by 100px boyutunda bir resminiz varsa, 10.000 pikselli bir resminiz olur; Her pikselin onu tanımlamak için 4 değeri varsa, görüntü onunla ilişkili 40.000 bit veriye sahiptir. Çok benziyor değil mi? Bazen, bu bir vektör grafiğinden daha azdır.
1px by 1px görüntü düşünün; Bu, bitmap olarak kaydedilecek 4 bit veri (kırmızı, yeşil, mavi ve alfa değerleri) gerektirir. Şimdi bir vektör olarak kaydedilen aynı kare pikseli düşünün; RGBA değerlerine ek olarak, dikdörtgenin x, y, width ve yüksekliğini gerektirir.
Bunlar kaba örnekler, ama onlar doğru. Çoğu zaman, bir görüntünün vektör sürümü - bize uygun bir tane bile olsa - eşdeğer bitmap'in dosya boyutunu aşıyor ve sonra bitmap tek mantıklı seçimdir.
(Mis) JavaScript'i kullanarak
Hayattaki çoğu problem gibi (hayatınız online ise) duyarlı görüntüler JavaScript ile çözülebilir. Aslında birkaç yıl için JavaScript sorunu çözmek için tek yoldu. JavaScript, bir kullanıcı aracısının yeteneklerini test edebilir, ne tür bir tarayıcı olduğunu belirler ve uygun görüntüyü içeren standart bir HTML resim etiketi yazar.
JavaScript'i kullanmaya itiraz eden web tasarımcıları genellikle bunu yaparlar bazı insanlar kapatır . Ancak, bu durum artık özellikle mobil web'de geçerli değil, ancak bazı kalıcı sorunlar var: JavaScript içeren bir resim yazmak, görüntünün arama motoru botları tarafından ayrıştırılmayacağı ve yalnızca komut dizisinden sonra oluşturulacağı anlamına geliyor. Örneğin, koşarken.
JavaScript'i kullanmanın en büyük sorunu, JavaScript'in temel amacının kötüye kullanılmasıdır. HTML verileri tutar, CSS sunumu, JavaScript işleme işlevselliğini işler. Yapılandırılmış rollerden koptuğumuzda, bunları düzeltmek için hack gerektiren problemlerle karşılaşmaya başlarız. Görüntüler veridir ve bu nedenle HTML ile ele alınmalıdır.
Tarayıcılarla ilgili sorun
RWD ilk düşünülmüş olduğundan, görüntüler en büyük engel oldu. Ama şimdi, çeşitli problemleri çözmenin yollarını bulmaya başlıyoruz. Savaş-sağlamlaştırılmış ve en iyi uygulama olarak kabul edilebilecek kadar başarılı olan teknikler. Adanmış geliştiriciler, WC3'ü resmi çözümler için lobi yapmak için zaman ayırdılar ve şimdi, ilk kez, duyarlı görüntüler pratik.
Duyarlı görüntülerin anahtarı, Web'in başarısızlıklarıyla ilgili tam bir farkındalık ile tasarlandıklarıdır. Duyarlı görüntü çözümlerinin varolan tarayıcıları kırmadığından emin olmak için özen gösterilmiştir; böylece, duyarlı görüntüleri desteklemeyen tarayıcılarda bile, kod sessiz ve yanıtsız olarak başarısız olur, varsayılan görüntüler görüntülenir.
Bu yazıda iki resmi yanıt veren resim HTML öğesine bakacağız : srcset ve resim.
Şu anda Edge, Safari ve iOS Safari, yalnızca srcset belirtiminin bir alt kümesini desteklemektedir. Firefox, Chrome, Opera, Android Browser ve Safari ve iOS Safari'nin gelecek sürümleri tamamen destekliyor. (Aşağıdaki farklılıkları tartışacağız.)
Şu anda resim elemanı tamamen Firefox, Chrome, Opera ve Android Browser tarafından desteklenmektedir. Edge, Safari ve iOS Safari bunu desteklemiyor ve bunu hayata geçirme takvimini açıklamıyorlar.
Yeni kodu destekleyen tarayıcılar arasında bile, farklı tarayıcı üreticileri W3C özelliklerini farklı şekillerde yorumladıkları için tutarsızlıklar vardır. Örneğin, görüntü boyutuna göre küçükten büyüğe bir resim değişikliği belirlenirken, bazı tarayıcılar, küçük görüntü tercih edilen boyutundan 1 piksel daha büyükse, bazı kullanıcılar büyük görüntüye geçecek, diğerleri ise yalnızca büyük görüntüye yalnızca büyük görüntüye geçiş yapacaktır. Büyük görüntü tarafından tercih edilen tamamen eşleşti.
Özetle, tarayıcılar iki kampa ayrılır: mümkün olan yerlerde daha yüksek kalitede görüntüler ve mümkün olan yerlerde daha küçük indirmelerden yana olanlar. Tarayıcı üreticileri hala bunu duking ediyorlar, nihayetinde birinin uygulaması en popüler olanı ispatlayacaktır - kişisel olarak umarım ki bu ikincisidir, çünkü yukarıda belirtildiği gibi performans kullanıcı deneyiminde çok önemlidir.
Şimdilik, web tasarımcıları için en iyi seçenek, spesifikasyona bağlı kalmak ve tarayıcıyı ikinci kez tahmin etmeye çalışmaktır. Sonuçta, tarayıcıdaki varsayılan deneyim (daha yüksek kalite veya daha hızlı yüklemeler), kullanıcının bir varsayılan tarayıcıyı seçtiği bölümün bir parçasıdır, bu nedenle kullanıcı farklı yaklaşımların farkındaysa, tarayıcı tercihi muhtemelen kullanıcının tercihi olabilir. .
Duyarlı görüntü en iyi uygulama (2015)
Web'in tarihi boyunca, bir imgeyi, img öğesini belirtmek için bir eleman kullandık. HTML5'te, img öğesi, rollerinde, duyarlı görüntüleri etkinleştirmek üzere tasarlanmış bir ince kayma geçirmiştir: img öğesi artık bir görüntüyü temsil etmemektedir, artık bir görüntü için bir yer tutucudur.
Bu ayrım önemlidir, çünkü daha önce bir img elemanı tek bir görüntü verisi kümesine sahipken - bu bitmap veya vektör - şimdi bir görüntü birden fazla veri kümesini tutabilir.
İmg elemanı (kodlayıcı olmayanlar için tekrarlamak için) şöyle görünür:
İmg öğesinin duyarlı görüntü sürümü şu şekildedir :
Ancak hiç bir değişiklik yok. Bu koda baktığınızda, önemli bir şey fark edersiniz: kod geriye dönük olarak uyumludur. Eğer srcset özniteliğini anlayamayan bir tarayıcı ortaya çıkarsa , bunu görmezden gelir ve orijinal 1993 belirtimine göre görüntüyü oluşturur.
Bunun anlamı şudur: Artık, özellik tespiti gerekmeden, biçimlendirmemizde duyarlı görüntüleri kullanabiliriz.
Yeni yanıt veren img öğesinde, src esas olarak varsayılan bir görüntü olarak ve srcset'i tanımayan tarayıcılar için kullanılırken, srcset bu yer tutucu için kullanılabilir yüksek çözünürlüklü tüm görüntüleri içerir.
İmg öğesini oluştururken tarayıcı, hangi görüntü dosyasının en uygun olduğunu kendisi belirler.
Srcset kullanma
Artık, srcset'in desteklemeyen tarayıcılarda sessizce başarısız olacağını biliyoruz. Ekstra resim eklemekte özgürüz:
Bu durumda, srcset'i destekleyen herhangi bir tarayıcı image-b.jpgdosyasını görüntüleyecektir ve srcset'i desteklemeyen herhangi bir tarayıcı image-a.jpg dosyasını gösterecektir.
Tarayıcının sadece görüntülemek istediğine karar verdiği resmi indireceğini, iki görüntüyü indirmediğini ve ardından bir tane seçmeyeceğini unutmayın.
Ne yazık ki, bu bizi çok fazla etkilemiyor , çünkü srcset desteğini göstermiyorsak, yalnızca srcset desteğine dayalı görüntüleri değiştirmek için pratik bir uygulama yok.
Çözüm, hangi görüntüyü seçmesi gerektiği hakkında tarayıcıya ek bilgi sağlamaktır. Bunu yapmak için, kullanılabilir alan veya piksel yoğunluğu hakkında bilgi vermemiz gerekiyor.
X-tanımlayıcıyı kullanma
X-tanımlayıcısı bir tarayıcıya bir görüntüdeki piksellerin ne kadar yoğun olduğunu söyler.
Örneğin, standart bir görüntü olarak piksel sayısının iki katı olan retina dereceli bir görüntü sağlamak istediğinizde, srcset'deki retina görüntüsünü , ardından bir boşluk ve ardından “2x” anahtar sözcüğünü belirtmiş olursunuz .
Resmimiz var:
Tarayıcı için bir retina seçeneği eklemek için, aşağıdaki srcset'i ekliyoruz:
Bu durumda, üç olası sonuç vardır:
tarayıcı srcset'i desteklemiyorsa, src özniteliğinde belirtilen görüntü dosyasını kullanır;
tarayıcı srcset'i destekliyorsa ve çift çözünürlükte bir ekrana sahipse, srcset özniteliğinde belirtilen resmi kullanır;
tarayıcı srcset'i destekliyorsa ancak yüksek çözünürlüklü bir ekran yoksa, src özniteliğinde belirtilen görüntüyü kullanacaktır ( srcset özniteliğinde "1x" resmi belirtilmemişse, src özniteliğinin bu görüntü olduğu varsayılır. seçenek).
Tarayıcı desteği iyidir ve hızla gelişmektedir. Tek bir öznitelikle, duyarlı görüntülerin sonucunu çözdük, yaylım!
X-tanımlayıcısını not etmek için son bir şey: hangi resmin yükleneceği piksel yoğunluğuna göre seçilir, bu yüzden bir kullanıcı tarayıcısını% 200'e yakınlaştırırsa (görüntü boyutunu etkin bir şekilde yarı yarıya azaltarak piksel yoğunluğunu iki katına çıkarırsa) 2x görüntü yüklenecek. Bu, erişilebilirlik üzerinde zararlı bir etkiye sahip olabilir - kesinlikle tarayıcılarını yakınlaştırmayı tercih ettikleri için görme engelliler için daha yavaş yükleme yapan siteleri görmek istemiyoruz.
Tanımlayıcıyı kullanma
W-tanımlayıcısıx-tanımlayıcısından biraz daha ileri düzeydedir .Tanımlayıcı , tarayıcıya belirli bir görüntü seçeneğinin x ekseninde (genişlik) kaç tane gerçek piksel bulunduğunu söyleyerek çalışır.
Edge, Safari ve iOS Safari, yazma sırasında w-tanımlayıcısını desteklemez, bu yüzden kullanışlılığı biraz azalır.
Orijinal resmimize dönelim:
Bu resim doğal olarak 1600 piksel genişliğindeyse ve yukarıdaki x tanımlayıcısında yaptığımız gibi bir retina görüntüsü eklemek istiyorsak, 3200 piksel genişliğinde olan srcset özelliğinde bir resim belirtebiliriz:
W-tanımlayıcısında büyük bir tane var :x-tanımlayıcısını kullanarak görüntüleri belirlerken src özniteliği varsayılan olarak kabul edilmesine rağmen, w-tanımlayıcısını kullanırsanız srcset'i destekleyen tarayıcılar tarafından tamamen yok sayılır .W-tanımlayıcısını kullanırken, kendi w-tanımlayıcısına sahip bir ikinci srcset görüntü seçeneği ekleyerek ve bunları virgülle ayırarak varsayılanı açıkça belirtmeliyiz:
Bu bizi düzgünce götürüyor…
Birden çok görüntü kullanma
HTML kodumuzda tarayıcı için yüksek çözünürlüklü bir resim seçeneği belirtmek kesinlikle kararlıdır, ancak muhtemelen tahmin ettiğiniz gibi, birden fazla resim belirttiğimizde daha da serin olur.
Duyarlı görüntülerin hedefi, erişim cihazının kullanabileceği en kaliteli görüntüyü sunmaktır, ama daha fazlası değil. Dolayısıyla, sadece bir retina görüntüsü sağlamanın yeterli olmadığı, örneğin 1x, 1.5x, 2x, 2.5x ve 3x boyutlarında görüntüler sağlaması gerekir.
Bir kez daha, orijinal görüntü işaretlememiz:
Burada tarayıcı için bir seçenek olarak sağlanan retina notu görüntüsü ile:
Burada, bu sefer virgülle ayrılan srcset'te ekstra seçenekler var:
Anahtar kelimeler, farklı insanlara farklı şeyler ifade ettiğinden, resimlerimin hem kişisel bellek yardımı hem de farklı boyutların diğer ekip üyelerine açık olmasını sağlamak için ait oldukları x-tanımlayıcısına göre adlandırmalarını tavsiye ederim:
Unutmayın, tarayıcıya hangi görüntünün gösterileceğini söylemiyoruz, ona sunulan seçenekleri bildiğimizi ve kendisinin seçmesine izin veriyoruz. Tarayıcı sadece bu görüntülerden birini indirecektir.
Birden çok görüntüye sahip bir tane: bir eşleme x-tanımlayıcısı ve w-tanımlayıcısı ile srcset özniteliğinde iki görüntü belirtme , örneğin:
Ebatlar özniteliği, görüntüyü değil, görünümüne göre değerlerini aldığı için, nitelikler özellikle ilgi çekici bir özelliktir.
Vw (viewport width) değerini kullanarak, görüntü alanını tarayıcı genişliğine göre belirtiriz - unutmayın, img öğesi artık sadece bir yer tutucudur, bu yüzden resmin gerçek boyutunu belirtmiyoruz, Resmi içerecek yer tutucu büyüklüğü.
Bu, medya sorguları ile birleştirene kadar özellikle yararlı değil.
Medya sorgularını kullanma
Medya sorgularıyla birleştirdiğimizde boyutlar özelliği çok daha güçlü hale geliyor. Birden çok görüntüleme aralığını virgül kullanarak ayırabilir ve bir CSS stili medya sorgusu kullanarak hangi tarayıcıyı kullanacağını söyleyebiliriz.
Örneğin, bir görüntünün, cihazlarımızın çoğunda görüntü alanımızın genişliğinin% 80'ini oluşturduğunu, ancak 380 piksel veya daha geniş bir genişliğe sahip küçük cihazlarda (telefonlar gibi) istediğimizi düşünelim. genişliğin% 100'ünü oluşturarak kullanılabilir alan, bunu şöyle yazabiliriz:
Bu mantığı takiben, 380px veya daha düşük bir görüntü alanına sahip olan herhangi bir tarayıcı, görüntünün genişliğini görünümün% 100'üne ayarlayacaktır. Başka herhangi bir tarayıcı, medya sorgusunun yanlış döndürülmesine neden olur ve tarayıcı, boyut özniteliğinin bir sonraki değerine hareket eder ve bu durumda 80vw olur.
Genel bir kural olarak, HTML’de medya sorgularını kullanmaktan rahatsız oluyorum. Duyarlı görüntü verileri HTML’de (JavaScript’te değil) olduğu gibi, medya sorguları da CSS’ye (HTML’ye değil) aittir. Ancak, ihtiyacınız varsa, seçenek sizin için var.
Duyarlı görüntü en iyi uygulama (2016?)
Seni bilmiyorum ama srcset'in olanakları beni çok heyecanlandırıyor . Bu zor bir soruna basit bir çözümdür ve ihtiyacımız olan her şeyi sunmak gibi görünüyor.
Ancak, otobüsler gibi, tepki veren görüntülere yönelik resmi bir çözüm için 20 yıl beklersiniz ve ardından iki kez aynı anda dönersiniz. İmg öğesinin srcset niteliğinin yanı sıra, resim elemanına da sahibiz.
Resim elemanı, daha geleneksel olsa da başka bir yer tutucudur. HTML5'teki video ve ses öğelerini taklit edecek şekilde tasarlanmıştır, bu nedenle sözdizimi en çok tanıdık olacaktır. Resim elemanı, srcset'in sağlayabileceğinden daha fazla kontrole ihtiyacınız olduğunda kullanılmak üzere tasarlanmıştır.
Ne yazık ki, resim öğesinin srcset'den çok daha az tarayıcı desteği var ve her zaman sessizce başarısız olmaz.
Resim elemanını kullanma
İşte orijinal görüntü elementimiz:
İşte bir resim elemanının içine yerleştirilmiş imajımız:
Resim öğesinin içinde bir img öğesi için de bir srcset belirtebiliriz:
Kaynak elemanın kullanılması
Kaynak elemanını ekleyene kadar resim öğesi hayata geçmez:
Kullanılacak dosyayı seçerken, tarayıcı ilk kaynak öğeyle başlayacak ve medya özniteliği true değerine doğru olanı bulana kadar öğeler arasında hareket edecek, daha sonra bu kaynak öğesinin srcset'ini kullanacaktır.
Örneğin, portre ve manzara biçimleri için farklı resimler belirtebiliriz:
X-tanımlayıcı ve w-tanımlayıcı kullanarak birden fazla resim de belirtebiliriz :
Boyutların özniteliğinde medya sorgularının kullanılmasında olduğu gibi, bir stil sayfasının yerine biçimlendirmede, biçime göre resim sürümlerini kontrol etme bilgeliğini sorgularım. Ancak, medya özniteliğini kullanma seçeneği, ihtiyacınız varsa orada bulunur.
Türü kullanma
Resim elemanı, farklı görüntü türlerini değiştirmek için kullanıldığında gerçekten kendi başına geliyor.
Standart bir PNG dosyanız olduğunu düşünelim, ancak WebP dosyası genellikle% 26 daha küçüktür - Duyarlı görüntüler en küçük resim boyutunda en iyi resim kalitesini sunmakla ilgilidir. Ancak şu anda yalnızca Chrome, Opera ve Android tarayıcı tarafından desteklenir. WebP'nin desteklenip desteklenmediğini belirlemek için type niteliğini kullanmamız gerekecek:
Bu durumda tarayıcı, WebP görüntü formatının desteklenip desteklenmediğini kontrol eder. Eğer öyleyse, ekranın image.webp görüntüsünü göstermeyecekse retina-image.webp görüntüsünü görüntülemek için yeterli piksel yoğunluğuna sahip olup olmadığını belirleyecektir . WebP desteklenmiyorsa, tarayıcı doğrudan img öğesine atlar ve önceden bildiğimiz şekilde srcset ve src seçenekleriyle çalışır.
Type özniteliği, daha küçük bir dosya boyutu sağlayarak desteklenen daha küçük resim formatları sağlayabileceğimiz anlamına gelir.
Bilinen Sorunlar
IE9 bilinen bir sorunu var Bu, resim öğesinin sessizce başarısız olmasını engeller. IE9'u işlemek için IE9'u kaynak öğelerin bir video öğesinin parçası olduğunu düşünerek kandırmanız gerekir:
< !—[if IE 9]>< ![endif]—>
Bu çirkin bir çözüm, ama hiç bir çözümden daha iyi değil. Sadece Windows 10'un piyasaya sürülmesinin IE9'un çöküşünü hızlandıracağını umuyoruz, çünkü Edge henüz resim öğesini desteklemese de, bunu doğru şekilde desteklemiyor (bunu göz ardı ederek).
Var polyfills Bu, IE'deki resim öğesini desteklemenize yardımcı olabilir, ancak kendi tercihim onları engellemektir. Sorunları JavaScript ile güvensiz hissediyorum, performansı etkiler ve daha az sürdürülebilir kodlara yol açar.
Bu nedenle, resim elemanından şimdilik kaçınmanızı öneriyorum. Büyük ölçekli bir e-ticaret sitesi yayınlamadığınız sürece, WebP biçiminin sunduğu indirme süresindeki ekstra tasarruf, işaretlemenizi komut dosyasıyla düzeltme konusundaki rahatsızlıktan ağır basmayacaktır.
IE9 bir sonraki yılda bir noktada gerçekleşmesi gereken% 1'in altına düştüğünde, resim öğesi geçerli olacaktır. Bunu 2016 yılında okuyorsanız, muhtemelen gitmek için iyi bir konum.
Duyarlı görüntüler oluşturma
SVG'den farklı olarak, bitmap görüntüleri ölçeklenmez. İster srcset ister resim elemanı kullanıyor olsak da, bunları ele alma stratejimiz, tarayıcının yeteneklerine göre farklı bir görüntü sağlamaktır. Bunu başarabilmek için çeşitli farklı görüntü boyutları sağlamamız gerekiyor.
Çoğu görüntü düzenleme uygulaması, tek bir görüntünün birden çok sürümünü dışa aktarma işlemini otomatik hale getirmiştir. El ile yeniden boyutlandırmak ve kaydetmek zorunda kalmadan, birden çok görüntü boyutuyla sonuçlanırsanız, hangi uygulamayı kullandığınız önemli değildir.
Adobe Photoshop de facto bitmap editörüdür. Tasarım çalışması için mükemmel bir seçim değildir, ancak görüntü işleme iş akışı düzgün ve güvenilirdir. Photoshop'ta çoklu görüntü çözünürlükleri oluşturmak nispeten kolaydır:
Birden çok sürüm oluşturmak istediğiniz resmi açın ve kendi katmanına yerleştirin.
Katmanı, oluşturmak istediğiniz dosyanın adı olarak (uzantı dahil) yeniden adlandırın.
Dosya> Oluştur> Görüntü Varlıkları'nı ve yeni görüntünüzle birlikte bir klasörün PSD'nizin yanında kaydedileceğini seçin.
Önceden oluşturulacak ölçeği ile oluşturulmasını istediğiniz her görüntüyü belirterek katmanı yeniden adlandırın. 3. adımı tekrarlamanız gerekmez, katmanı yeniden adlandırdıktan sonra görüntüler otomatik olarak oluşturulur.
Görüntü için kredi geçerPhilip Collier.
Photoshop'ta görüntü oluşturma hakkında daha fazla bilgi için, buraya bakın
Bu görüntülere dayanarak, tarayıcıya beş farklı seçenek sunabiliriz:
Sonuç
İmg unsuru 20 yıl içinde uzun bir yol kat etti. Ya da, daha doğru olması için, img unsuru 18 yıldır yetersiz kalıyordu, sonra son iki yıldaki çizgiye basılmıştı, şimdi nispeten daha karmaşık hale gelmişti.
Önemli olan çözüm (ler) e ulaşmamızdır.
Mevcut iki seçenek arasında, srcset ve resim, birincisi en çok desteklenen. Sitelerin% 95'ini oluşturuyorsanız, srcset özniteliğinin üstün desteği ve daha basit uygulaması en iyi seçeneğinizdir.
Büyük bir e-ticaret sitesi yayınlıyorsanız, binlerce ürün resmiyle WebP biçimine hizmet edecek ekstra çalışma, özellikle resim öğesinin desteği birkaç yıl içinde arttıkça faydalı olabilir.
Mevcut seçeneklerdeki en büyük zayıflık, tarayıcıların şu anda bağlantı hızlarına bağlı olarak bir görüntü seçmenin bir yolu olmadığıdır. Daha yetenekli cihazların da üstün bağlantılarda olduğuna güvenmek zorundayız.
Nihayetinde, en küçük boyutta pratik olarak mümkün olan en yüksek kalitede görüntüleri sunabiliriz. Bu, daha kısa sürede, daha iyi bir deneyim anlamına gelir, ki bu sadece kucaklamak için bir şey olabilir.
Öne çıkan görsellerdağ görüntüsüvecihaz resmiShutterstock üzerinden.
