Duyarlı Görseller için Başlangıç ​​Kılavuzu: Nasıl Doğru Şekilde Alınır

Bu duyarlı görseller öğreticisi, CSS tekniklerini, HTML özelliklerini ve göz önünde bulundurmak isteyeceğiniz bazı araçları gözden geçirecektir. Tüm bunlar, bugün projelerinizde duyarlı görüntülere başlama konusunda size iyi bir genel bakış sunmalıdır.

İçindekiler:

• Düz CSS ile duyarlı görüntüler
• srcset ve sizes özelliklerine sahip duyarlı görüntüler
• Bir piksel yoğunluğu tanımlayıcısı ile srcset kullanma
• <picture> öğesini kullanma
• Duyarlı görüntülere yardımcı olacak araçlar ve hizmetler

Düz CSS ile duyarlı görüntüler

Bir web sayfasındaki herhangi bir resmi duyarlı hale getirmenin en basit yolu, medya sorguları veya fazladan HTML gerektirmez. Birkaç satır HTML ve CSS ile pencerenin boyutuna bağlı olarak herhangi bir resmi büyütebilir ve küçültebilirsiniz.

İlk olarak, HTML'm width ve height niteliklerini içerecek:

HTML'ye width ve height değerlerinin dahil edilmesi en iyi uygulamadır. Bu, tarayıcının resim için gerekli alanı ayırmasını ve resim yüklenirken sonraki sayfa akışının olmamasını sağlar.

Bununla birlikte, aşağıdaki CSS'yi kullanacağım:

 img { max-width : 100% ; height : auto; }
 Kod dili: CSS ( css )

Bu değerler benim HTML'mi geçersiz kılacaktır. max-width özelliği, maksimum 1000 piksele (HTML'den alınan değer) kadar gerekli olan alanı doldurmasını sağlamak için 100% ayarlanmıştır. auto öğesinin height değeri, görüntünün yüksekliğinin, görüntü boyutlarını doğal genişliği ve yüksekliğiyle orantılı tutmasını sağlar. height: auto satırını kaldırırsam, resim, genişlikten bağımsız olarak HTML'de tanımlanan yükseklikte kalır - bu genellikle istediğim şey değildir.

Aşağıdaki CodePen'i kullanarak bu basit örneği deneyebilirsiniz. Duyarlılığı test etmek istiyorsanız, demoyu yeni bir pencerede açmak en iyisidir.

Ve benim örneğimde, görüntünün doğal boyutlarının 2000px x 1333px olduğunu, ancak onu maksimum 1000px olarak görüntülemeyi tercih ettiğimi unutmayın.

Teorik olarak, sayfamdaki her resim için yukarıdakileri yapabilirim ve bu, duyarlı resimleri projelerime dahil etmenin ilkel ve kabul edilebilir bir yolu olurdu. Ancak ideal olarak, performansı artırmak ve sonraki bölümlerde tartışacağım SEO'ya yardımcı olmak için bunu bir sonraki seviyeye taşımak ve görüntünün çözünürlüğü ve diğer faktörler üzerinde kontrol sahibi olmak istiyorum.

srcset ve sizes özelliklerine sahip duyarlı görüntüler

Yukarıdaki basit CSS örneğinde, boyutu küçültmek için kayıpsız sıkıştırma kullandıktan sonra bile yaklaşık 1.44 MB boyutunda bir görüntü yüklüyorum. Bu, masaüstünde görüntülendiğinde kendi başına korkunç değil, ancak kesinlikle akıllı telefon gibi küçük bir cihaza yüklenmesini istediğim boyutta değil. Burası, srcset ve sizes özniteliklerinin kullanışlı olduğu yerdir.

srcset özelliği, tek bir değerde birden çok görüntü boyutu belirlemenize olanak tanır. Bunlar, tarayıcının veya cihazın belirli koşullar altında erişebileceği görüntüler olacaktır. sizes özelliği, tarayıcıya hangi resimleri seçeceğini söylemek için srcset ile birlikte çalışır.

Önceki örnekteki leopard.png görüntüsünün birden çok sürümünü kullanan bir örnek:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Kod dili: HTML, XML ( xml )

srcset ve sizes özelliklerini daha önce hiç görmediyseniz, bu ilk bakışta kafa karıştırıcı görünebilir. Her şeyi parçalayacağım, böylece kavraması nispeten kolay.

srcset niteliğini yıkmak

srcset özelliği, bir veya daha fazla dizeden oluşan virgülle ayrılmış bir listeyi kabul eder. Her dize şunları içerir:

• Bir resme işaret eden bir URL
• Aşağıdaki isteğe bağlı tanımlayıcılardan biri (bir boşlukla ayrılmış):
  • Genişlik tanımlayıcısı
  • Bir piksel yoğunluğu tanımlayıcısı

Örneğime, en sık göreceğiniz bir genişlik tanımlayıcısı ekledim. Resmin üç farklı sürümünü ekledim: 800 piksel genişliğinde ve 480 piksel genişliğinde bir taneyle birlikte büyük, yüksek çözünürlüklü sürüm.

Yukarıdaki örnekte genişlik tanımlayıcısını kullandığımda dikkat edin, sözdizimi genişlik değeridir ve hemen ardından bir “w” gelir (“px” birim değeri kullanmayın!). Görüntüleri temsil eden genişlik tanımlayıcılarının her biri için görüntünün piksel cinsinden gerçek genişliğini kullanıyorum. Dosya sisteminizdeki, bir fotoğraf düzenleyicideki ve hatta tarayıcınızın veya tarayıcınızın geliştirici araçlarındaki özelliklerine başvurarak, herhangi bir görüntünün gerçek boyutunu birkaç farklı yoldan alabilirsiniz.

sizes özniteliğini parçalamak

srcset sizes ile birlikte çalışır. srcset tek başına kullanabilirsiniz (bir sonraki bölüme bakın), ancak srcset kullanmanın en yaygın yolu size ile birlikte sizes .

sizes özelliği, bir veya daha fazla dizeden oluşan virgülle ayrılmış bir listeyi kabul eder. Her dize şunları içerir:

• Bir medya koşulu (CSS'de kullanılan medya sorgularına benzer)
• Resmin kaplayacağı "yuvanın" boyutunu tanımlayan bir değer

Yuva değeri, em veya px gibi mutlak bir uzunluk veya bir görünüm alanı göreli birimi (örn. vw ) olabilir. Örneğimde, size özniteliğindeki yuva değerlerinin üç sizes tanımlayıcısıyla tam olarak eşleşmediğine dikkat edin. İşte kod tekrar:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Kod dili: HTML, XML ( xml )

Yuva değerlerinin genişlik tanımlayıcılarıyla tam olarak eşleşmemesi iyidir. Benim durumumda, sizes değerini şu şekilde ayırabilirim:

• 600 piksel genişliğinde bir görüntü alanı, 480 piksel genişliğindeki bir yuvanın içindeki srcset değerinden 480w görüntüyü yükler.
• 1000 piksel genişliğinde bir görüntü alanı, 800w görüntüyü 800 piksellik bir yuvaya yükler.
• Varsayılan tam boyutlu görüntü (2000w), önceki ortam koşulları karşılanmazsa 1000 piksellik bir yuvayı doldurur.

Son dize, ortam koşulu olmadan tek başına bir yuva değeridir. Belirtildiği gibi, bu, varsayılan olarak çalışarak, ortam koşullarından hiçbiri karşılanmazsa tarayıcının görüntülenecek bir şeye sahip olmasını sağlar.

Aşağıdaki CodePen demosunu kullanarak örnek kodu çalışırken görüntüleyebilirsiniz. Bu durumda, farklı cihazları taklit eden bir şey (Chrome'daki DevTools gibi) üzerinde test etmeniz gerekeceğini unutmayın. Gerçek bir test yapmak için sayfayı çeşitli gerçek cihazlar kullanarak da açabilirsiniz. Kolaylık sağlamak için, sayfayı görüntülediğinizde hangi yüklerin yüklendiğini görebilmeniz için resimlerin her birine bir metin yerleşimi ekledim.

Orijinal görüntü yüklendikten sonra, görüntü alanının boyutunu değiştirdiğinizde görüntünün boyutunun değişmediğine dikkat edin. srcset sizes , görüntüleri ilk yüklemede ortam koşullarına göre yüklemek için kullanışlıdır, ancak görüntüleri ekran yeniden boyutlandırmaya göre değiştirmeye yardımcı olmaz. Daha sonra size bu sorunu çözecek farklı bir duyarlı görüntü özelliği göstereceğim.

Bir piksel yoğunluğu tanımlayıcısı ile srcset kullanma

Daha önce, srcset özniteliğinin bir piksel yoğunluğu tanımlayıcısı ile kullanılabileceğinden bahsetmiştim. Bu tanımlayıcı, tarayıcının, cihazın çözünürlük özelliklerine göre hangi görüntünün kullanılacağına karar vermesini sağlar. İşte böyle görünüyor:

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 Kod dili: HTML, XML ( xml )

Burada birkaç şeye dikkat edin. İlk olarak, normal src özniteliği için, mobil öncelikli bir yaklaşım sağlayarak en küçük resmi kullanıyorum. Daha sonra, srcset özniteliği, 1.5x ve 2x tanımlayıcıları tarafından belirtilen çözünürlükle, görüntünün birkaç başka sürümünü içerir. 480 görüntüsü, 1x ima edildiğinden bir tanımlayıcı içermiyor. Son olarak, bu durumda ihtiyacım olmayan hiçbir sizes özelliğinin bulunmadığına dikkat edin. MDN, tarayıcının görüntüyü nasıl seçtiğini açıklar:

Tanımlayıcıların nasıl çalıştığını anlamak için bir cihaz pikselinin her bir CSS pikselini temsil ettiğini unutmayın. Yani 1x 1:1 oran, 1.5x 1.5:1 oran olur ve bu böyle devam eder. Aşağıdaki CodePen'de deneyebilirsiniz, ancak farkı görmek için farklı cihazlar (veya onları taklit eden bir araç) kullanmanız gerekir.

<picture> öğesini kullanma

Şimdiye kadar, duyarlı görüntüleri birleştirmek için tartıştığım özellikler, her zaman aynı görüntüyü ancak farklı boyut ve çözünürlüklerde görüntülediğimi varsayıyor. Kullanıcı tarayıcıyı yeniden boyutlandırdığında resimlerin genişliğini değiştirmek için tüm örneklerde CSS kullanmama rağmen, sayfa yüklendikten sonra resmin kendisi asla değişmez.

<picture> öğesi, belirli medya özelliklerinin varlığına dayalı olarak bir görüntünün alternatif sürümlerini sunmanıza olanak tanıyan bir HTML özelliğidir. Bu, aynı zamanda, kullanıcı görüntüleme alanını yeniden boyutlandırdığında görüntülerin kapatılmasına ve esasen, aynı sahnenin çeşitlerini göstererek, ancak cihaz boyutuna bağlı olarak farklı kırpılmış veya yakınlaştırılmış olarak görüntülerinizle sanat yönetmenliği yapmanıza olanak tanır.

Örneğin, ortada küçük bir nesne olan geniş bir çekim, masaüstü veya tablette daha büyük bir cihaz için uygun olabilir, ancak akıllı telefon gibi daha küçük bir cihaz, aynı görüntüyü kırpılmış veya yakınlaştırılmış olarak yükleyebilir.

Resmim üzerinde biraz sanat yönetmenliği yapmama izin verecek bazı örnek kodlar:

Kod hakkında aşağıdakilere dikkat edin:

• <picture> öğesi, birden çok iç içe <picture> > öğesini alt öğe olarak kabul eder
• <picture> içindeki <source> öğelerinin her biri, o kaynak görüntünün kullanımını tetikleyen ortam koşulunu tanımlamak için media özniteliğini kullanıyor.
• <picture> öğesi, normal &lt;img&gt; <picture> desteklemiyorsa tarayıcının yedek olarak tanıdığı bir alt öğe olarak öğe
• <picture> öğesinde doğrudan öznitelik yoktur ( <picture> yalnızca HTML'nin genel özniteliklerini kabul eder ve kendi özniteliğine sahip değildir)

Aşağıdaki CodePen bunu göstermektedir:

Demoyu yeni bir pencerede açarsanız, görüntünün değiştiğini görmek için pencereyi yeniden boyutlandırabilirsiniz. Tarayıcı penceresi küçüldükçe görüntünün konusunun nasıl daha fazla yakınlaştığına dikkat edin. Bu, hangi cihaz kullanılıyorsa kullanılsın uygun görünen duyarlı sanat yönelimli görüntüler oluşturmanın kolay bir yoludur. Tabii ki, bu biraz daha fazla iş gerektirir, ancak kullanılan herhangi bir cihazda görüntülerinizin anlamlı olmasını istiyorsanız buna değer.

Duyarlı görüntülere yardımcı olacak araçlar ve hizmetler

Duyarlı görüntülerin uygulanmasına yardımcı olacak hem ücretsiz hem de ticari sayısız araç mevcuttur. Ve bunlardan bazıları, bahsettiğim kodun çoğunu yazmaktan bile kaçınmanıza yardımcı olacak. İşte yararlı bulabileceğiniz birkaç tanesi:

Önemli ve uygun bir şekilde, bir dizi farklı hizmet, farklı görüntü boyutları, anında görüntü üretimi için bir API ve daha fazlası gibi özellikler sunarak duyarlı görüntüleri otomatik olarak yapabilir.

WordPress bile, duyarlı görüntüler için yerleşik destekle birlikte gelir (sürüm 4.4'ten itibaren).

Bakmaya değer başka bir araç/hizmet Optimole'dir. Themeisle'ın arkasındaki ekip tarafından oluşturulmuş gelişmiş bir görüntü optimizasyonu ve dağıtım aracıdır. Bu, yalnızca görsel kalite sıkıntısı çekmeden görsellerinizin disk boyutunu küçültmekle kalmayacak, aynı zamanda görselleri bir CDN aracılığıyla web sitenizin ziyaretçilerine ulaştırmaya da özen gösterecektir. Bu görüntü sağlama özelliğinin yönlerinden biri, görüntülerinizin farklı cihazlarda görüntülenmek üzere optimize edilmesidir.

Optimole'nin ücretsiz bir sürümü mevcut. Aylık 5.000'e kadar web sitesi ziyaretine izin verir ve size tüm otomatik ölçeklendirme özelliklerini, CDN'yi ve daha fazlasını sunar.

Web sitelerinde duyarlı resimlerle ilgili deneyiminiz nedir? Aşağıdaki yorumlarda bize bildirin.

Düzen ve sunum Chris Fitzgerald ve Karol K.