Duyarlı görseller

Bu makalede, çok farklı ekran boyutlarına, çözünürlüklere ve bu tür diğer özelliklere sahip cihazlarda iyi çalışan görüntüler olan duyarlı görüntüler kavramını öğreneceğiz. HTML’nin bunları uygulamaya yardımcı olmak için hangi araçları sağladığına bakacağız. Bu şekilde bir kullanım farklı cihazlarda performansın artmasına yardımcı olur. Duyarlı görüntüler aynı zamanda bir CSS konusu olan duyarlı tasarımın parçasıdır.

Neden duyarlı görüntüler?

Aşağıdaki senaryoyu inceleyelim. Tipik bir web sitesi, bir üst alan resmi ve başlık ile beraber bazı içerik resimleri içerebilir. Üst alan resmi büyük olasılıkla tüm genişliği kaplayacaktır. İçerik resmi ise içerik sütununun içinde bir yere sığacaktır. Mesela aşağıdaki gibi:

Bu websayfası bilgisayarlar gibi geniş ekranlı bir cihazda iyi çalışır (örneğe canlı bakın) Bu derste CSS’yi çok fazla tartışmayacağız, şunu söylemek dışında:

• Gövde içeriği maksimum 1200 piksel genişliğe ayarlanmıştır – bu genişliğin üzerindeki görünüm alanlarında gövde 1200 pikselde kalır ve kendisini mevcut alanda ortalar. Bu genişliğin altındaki görünüm alanlarında, gövde, görünen alanının genişliği kadar olacaktır.
• Üst alan resmi, üst alanın genişliği ne olursa olsun, merkezi her zaman üst alanın merkezinde kalacak şekilde ayarlanmıştır. Site daha dar bir ekranda görüntüleniyorsa, görüntünün merkezindeki önemli ayrıntı (insanlar) yine de görülebilir ve fazlalık her iki taraftan da kaybolur. Görsel 200 piksel yüksekliğindedir.
• İçerik görüntüleri, gövde öğesi görüntüden daha küçük hale gelirse, görüntüler küçülmeye başlayacak ve böylece her zaman gövdenin içinde kalacak şekilde ayarlanmıştır.

Ancak siteyi dar ekranlı bir cihazda görüntülemeye başladığınızda sorunlar ortaya çıkar. Aşağıdaki görselde üst alan iyi görünüyor, ancak bir mobil cihaz için çok fazla ekran yüksekliği kaplıyor. Ve bu boyutta, ilk içerik görselindeki kişileri görmek de zor.

Yapacağımız bir değişiklik, site dar bir ekranda görüntülendiğinde görselin önemli ayrıntıları gösterecek şekilde kırpılmış bir sürümünü sunmak olacaktır. Tablet gibi orta genişlikte ekranlı bir cihaz için ikinci bir kırpılmış görüntü görüntülenebilir. Çeşitli düzenler için farklı kırpılmış görüntüleri bu şekilde sunmak sanat yönü sorunu olarak bilinir.

Ayrıca, bu kadar büyük resimlerin mobil ekranlarda sayfaya gömülmesine gerek yoktur. Diğer taraftan da, küçük bir raster görüntüsü orijinal boyutundan daha büyük görüntülendiğinde grenli görünmeye başlar (bir raster görüntü, vektör grafiklerine baktığımızda gördüğümüz gibi, belirli sayıda piksel genişliğinde ve belirli sayıda piksel yüksekliğindedir ). Buna da çözünürlük değiştirme sorunu denir.

Öte taraftan büyük bir görüntüyü amaçlanan boyuttan önemli ölçüde daha küçük bir ekranda görüntülemek de gereksizdir. Bunu yapmak boşa internet bant genişlilği harcar; özellikle mobil kullanıcılar, cihazları için küçük bir görüntü yeterliyken, masaüstü kullanıcıları için tasarlanmış büyük bir görüntüyü indirerek bant genişliğini boşa harcamak istemezler. İdeal olarak, kullanıcının web tarayıcısına birden fazla çözünürlük sunulacaktır. Tarayıcı daha sonra, kullanıcının cihazının ekran boyutuna göre yüklenecek en uygun çözünürlüğü belirleyebilir.

İşleri daha karmaşık hale getirmek için, bazı cihazlarda, güzel bir şekilde görüntülemeyi umduğunuzdan daha büyük görüntülere ihtiyaç duyan yüksek çözünürlüklü ekranlar bulunur. Bu aslında aynı problemdir, ancak biraz farklı bir bağlamda sorun çıkarır.

Vektör görüntülerinin bu sorunları çözeceğini düşünebilirsiniz ve bir dereceye kadar da çözerler – dosya boyutu küçüktür ve iyi ölçeklenirler ve mümkün olan her yerde bunları kullanırsınız. Ancak, tüm görsel türleri için uygun değildirler. Vektör görüntüleri basit grafikler, desenler, arayüz öğeleri vb. için harikadır, ancak bir fotoğrafta bulacağınız türden ayrıntılara sahip vektör tabanlı bir görüntü oluşturmak çok karmaşık bir iştir. JPEG’ler gibi raster görüntü biçimleri, yukarıdaki örnekte gördüğümüz görsel türlerine daha uygundur.

Bu tür bir sorun Web ilk kez var olduğunda (90’ların başlarından ortalarına kadar) yoktu. O zamanlar Web’e göz atmak için mevcut olan tek cihaz masaüstü ve dizüstü bilgisayarlardı, bu nedenle tarayıcı mühendisleri ve özellik yazarları bu şekilde bir uygulamayı düşünmediler bile. Duyarlı görsel teknolojileri, yukarıda belirtilen sorunları çözmek için yakın zamanda geliştirildi. Bu şekilde tarayıcılar, hepsi aynı şeyi gösteren ancak farklı sayıda piksel içeren (çözünürlük değiştirme) veya farklı alan tahsislerine uygun farklı görüntüler (sanat yönetimi) sunan birkaç görsel dosyası sunmanıza izin verir hale geldi. 

Not: Bu makalede tartışılan yeni özelliklerin — srcset, sizes, <picture> — tümü modern masaüstü ve mobil tarayıcılarda (Internet Explorer olmasa da Microsoft’un Edge tarayıcısı dahil) desteklenir. 

Çözünürlük değiştirme: Farklı boyutlar

Peki, çözünürlük değiştirme ile çözmek istediğimiz problem nedir? Cihaza bağlı olarak daha büyük veya daha küçük olacak şekilde aynı resim içeriğini görüntülemek istiyoruz. Örneğimizdeki ikinci içerik resminde bu durum söz konusuydu. Standart <img> öğesi ile yalnızca tarayıcıyı tek bir kaynak dosyası gönderebiliriz:

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Bununla birlikte, tarayıcının doğru olanı seçmesine yardımcı olabiliriz. Birkaç ek kaynak resim sağlamak için iki yeni öznitelik srcset ve sizes kullanabiliriz. 

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

srcset ve sizes nitelikleri karmaşık görünse de zor olmadığını biraz inceleyince farkedersiniz. Özellikle yukarıda gösterildiği gibi her satırda öznitelik değerinin farklı bir türü yer alacak şekilde yazarsak işimiz kolaylaşır. Her değer virgülle ayrılmış bir listede bulunur ve bu listelerin her bölümü üç alt bölümden oluşur. Şimdi her birinin içeriğini inceleyelim:

srcset: tarayıcının aralarından seçim yapmasına izin vereceğimiz görüntü kümesini ve her görüntünün boyutunu tanımlar. Her görüntü bilgisi kümesi, bir öncekinden virgülle ayrılır. Her biri için şunu yazıyoruz:

1. Görüntü dosyası adı ( elva-fairy-480w.jpg)
2. Bir boşluk
3. Görüntünün piksel cinsinden gerçek genişliği ( 480w) — bunun px değil de w birimi kullandığını unutmayın. Bu, bilgisayarınızda görüntü dosyasını inceleyerek bulabileceğiniz görüntünün gerçek boyutudur (örneğin, Mac’te görüntüyü Finder’da seçebilir ve bilgi ekranını açmak için Cmd+Ituşuna basabilirsiniz ).

sizes: bir dizi ortam koşulunu (örn. ekran genişlikleri) tanımlar ve belirli ortam koşulları doğru olduğunda hangi görüntü boyutunun seçilmesinin en iyi olacağını belirtir – bunlar daha önce bahsettiğimiz ek özelliklerdir. Bu durumda, her virgülden önce şunu yazarız:

1. Bir medya koşulu ( (max-width:600px)) — CSS konusunda bunlar hakkında daha fazla bilgi edineceksiniz, ancak şimdilik bir medya koşulunun ekranın içindeki olası bir durumu tanımladığını söyleyelim. Bu durumda, “görünüm alanı ne zaman 600 piksel genişliğinde veya daha azdır” diyoruz.
2. Bir boşluk
3. Yuva genişliği ortam koşul doğru olduğunda görsel ile doldurulur (480px)

Not : Yuva genişliği için mutlak bir uzunluk (px, em) veya görünüm alanına (vw) göre bir uzunluk sağlayabilirsiniz, ancak yüzde yazamazsınız. Son yuva genişliğinin ortam koşulu olmadığını fark etmiş olabilirsiniz (bu, ortam koşullarından hiçbiri doğru olmadığında seçilen varsayılan değerdir). Tarayıcı, ilk eşleştirme koşulundan sonra her şeyi yok sayar, bu nedenle ortam koşullarını nasıl sıraladığınıza dikkat edin.

Bu nedenle, bu nitelikler yerinde olduğunda tarayıcı:

1. Cihaz genişliğine bakar.
2. sizes listedeki hangi ortam koşulunun ilk doğru olduğunu bulur.
3. Bu ortam sorgusuna verilen yuva boyutuna bakar.
4. srcset listede başvurulan yuvayla aynı boyutta olan görüntüyü, veya bu yoksa seçilen yuva boyutundan daha büyük olan ilk görüntüyü yükler.

Bu kadar! Bu noktada, 480 piksellik görüntü alanı genişliğine sahip bir tarayıcı sayfayı yüklerse, (max-width: 600px) ortam koşulu doğru olur ve bu nedenle tarayıcı 480px yuvayı seçer.  elva-fairy-480w.jpg dosyası seçilir. 800 piksellik resim diskte 128 KB iken 480 piksellik sürüm sadece 63 KB’dir – 65 KB tasarruf sağlar. Şimdi, bunun üzerinde birçok resim olan bir sayfa olduğunu hayal edin. Bu tekniği kullanmak, mobil kullanıcılara çok fazla bant genişliği tasarrufu sağlayabilir.

Not: Bunu bir masaüstü tarayıcıyla test ederken, pencereyi en dar genişliğe ayarladığınızda tarayıcı daha dar görüntüleri yükleyemezse, görünümün ne olduğuna bakın – tarayıcının JavaScript konsoluna document.querySelector('html').clientWidth yazarak yaklaşık bir tahminde bulunabilirsiniz. Farklı tarayıcıların, pencere genişliğini azaltmanıza izin verecekleri minimum boyutları vardır ve düşündüğünüzden daha geniş olabilirler. Bir mobil tarayıcı ile test ederken geliştirici araçlarını kullanarak mobilde yüklenen sayfayı incelemek isteyebilirsiniz. Bunun için Firefox’un about:debugging sayfası gibi araçları kullanabilirsiniz.

Hangi görüntülerin yüklendiğini görmek için Firefox DevTools’un Ağ İzleyici sekmesini kullanabilirsiniz.

Bu özellikleri desteklemeyen eski tarayıcılar onları görmezden gelir. Bunun yerine, bu tarayıcılar src özniteliğinde bildirilen resmi normal olarak yükleyecektir.

Çözünürlük değiştirme: Aynı boyut, farklı çözünürlükler

Birden fazla görsel çözünürlüğünü destekliyorsanız, ancak herkes görselinizi ekranda aynı boyutta görüyorsa, tarayıcının srcset niteliğini kullanarak ve sizes niteliğini söz diziminden çıkartarak uygun çözünürlüklü bir görüntü seçmesine izin verebilirsiniz. 

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy">

Bu örnekte, 320 piksel genişliğe sahip olacak şekilde görsele aşağıdaki CSS uygulanır:

img {
  width: 320px;
}

Bu durumda sizes gerekli değildir – tarayıcı ekranın hangi çözünürlükte gösterildiğini hesaplar ve srcsette tanımlanan en uygun görseli sunar. Bu nedenle, sayfaya erişen cihaz standart/düşük çözünürlüklü bir ekrana sahipse, elva-fairy-320w.jpg resim yüklenecektir (1x varsayılır, dolayısıyla bunu eklemeniz gerekmez.) CSS pikseli başına iki cihaz pikseli veya daha yüksek çözünürlükte elva-fairy-640w.jpg görseli yüklenir. 640px resim 93KB iken, 320px resim sadece 39KB’dir.

Sanat Yönetimi

Özetlemek gerekirse, sanat yönü sorunu, gösterilecek görseli farklı ekran boyutlarına uyacak şekilde değiştirmeyi içerir. Örneğin, bir web sayfası, bir masaüstü tarayıcısında görüntülendiğinde ortada bir kişi ile çekilmiş büyük bir manzara içerir. Bir mobil tarayıcıda görüntülendiğinde, aynı görüntü küçülür ve görüntüdeki kişiyi çok küçük ve görülmesi zor hale getirir. Mobilde kişiyi yakınlaştıran daha küçük bir portre resmi göstermek muhtemelen daha iyi olurdu. <picture> öğesi bize bu çözümü uygulamaya olanak verir.

Orijinal örneğimize geri dönüyoruz. Sanat yönetmenliğine fena halde ihtiyaç duyan bir imajımız var:

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">

<picture> ile bunu düzeltelim  <video> ve <audio>‘da olduğu gibi <picture> öğesi de birkaç <source> öğesi içerebilir.

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

• <source> niteliği media niteliği içerir – ilk srcset örneğindeki gibi, bu koşullar gösterilecek olan görsele karar verilmesini sağlar – ilk doğru dönen koşul gösterilir. Bu durumda, görüntü alanı genişliği 799 piksel veya daha az ise ilk <source> elementinin görüntüsü görüntülenecektir. Görüntü alanı genişliği 800 piksel veya daha fazlaysa, ikincisi.
• srcset nitelikleri resmin yolunu içermelidir. Tıpkı <img> öğesinde gördüğümüz gibi <source> birden çok görsele sahip srcset özniteliğin yanı sıra sizes özniteliği de alabilir. Böylece, bir <picture> öğesi aracılığıyla birden çok görüntü ile beraber her birinin birden çok çözünürlüğünü de sunabilirsiniz. Gerçekçi olmak gerekirse bu tür şeyleri çok sık yapmak istemeyeceksiniz.
• Her durumda,</picture>‘dan önce src ve alt niteliklerine sahip bir <img> öğesi sağlamalısınız. Aksi takdirde hiçbir görüntü görünmez. Bu, ortam koşullarından hiçbiri doğru olmadığında uygulanacak varsayılan bir durumu niteler ve öğeyi desteklemeyen tarayıcılar için yedek içerik sağlar.

Bu kod, aşağıda gösterildiği gibi hem geniş ekranda hem de dar ekranlarda uygun bir görüntüyü göstermemizi sağlar:

Not: media niteliğini yalnızca sanat yönetmenliği senaryolarında kullanmalısınız; media kullandığınızda sizes özniteliği içinde ortam koşullarını sunmayın.

Bunu neden CSS veya JavaScript kullanarak yapamıyoruz?

Tarayıcı bir sayfayı yüklemeye başladığında, ana ayrıştırıcı sayfanın CSS ve JavaScript’ini yüklemeye ve yorumlamaya başlamadan önce tüm görüntüleri indirmeye (ön yüklemeye) başlar. Bu mekanizma genel olarak sayfa yükleme sürelerini azaltmak için kullanışlıdır, ancak duyarlı görüntüler için yararlı değildir – bu nedenle srcset gibi çözümler üretilmiştir. Örneğin, <img> ile öğeyi yüklerken, JavaScript ile görüntü alanı genişliğini algılayamaz ve ardından istenirse kaynak görüntüyü dinamik olarak daha küçük bir görüntüyle değiştiremezsiniz. O zamana kadar, orijinal görüntü zaten yüklenmiş olur ve buna ilaveten bir de küçük görüntüyü yüklersiniz, bu da duyarlı görüntü açısından daha da kötüdür.

Modern görüntü formatlarını cesurca kullanın

WebP ve AVIF gibi yeni görüntü biçimleri, aynı anda hem düşük dosya boyutunu hem de yüksek kaliteyi koruyabilir. Bu formatlar artık nispeten geniş tarayıcı desteğine sahip olsalar da “tarihsel derinliklerinin” az olduğunu söylemek gerekir.

<picture> bu durumda eski tarayıcılara hizmet vermeye devam etmemize izin verir. type niteliği ile tarayıcının desteklenmeyen dosya türlerini hemen reddedebilmesi için MIME türlerini sağlayabilirsiniz:

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

• sanat yönetimi gerekmedikçe media niteliğini kullanmayın.
• Bir <source> öğesinde, yalnızca type içinde bildirilen türdeki resimlere başvurabilirsiniz. 
• srcset ve sizes kullanırken liste içeriklerini virgülle ayırın.

Aktif öğrenme: Kendi duyarlı görsellerinizi uygulama

Bu aktif öğrenme için cesur olmanızı ve yalnız başınıza hareket etmenizi bekliyoruz. <picture> kullanarak sanat yönetimini ve srcset kullanan bir çözünürlük değiştirme örneği uygulamanızı istiyoruz 

1. Kodunuzu içerecek basit bir HTML yazın.
2. Bir tür ayrıntı içeren güzel bir geniş ekran görseli bulun. Bir grafik düzenleyici kullanarak web boyutunda bir görsel versiyonu oluşturun, ardından ayrıntıyı yakınlaştıran daha küçük bir parça göstermek için bu görseli kırpın ve ikinci bir görüntü oluşturun (yaklaşık 480 piksel genişlik bunun için iyidir).
3. sanat yönetimini uygulamak için <picture> öğesini kullanın.
4. Her biri aynı resmi gösteren farklı boyutlarda birden fazla görüntü dosyası oluşturun.
5. Farklı çözünürlüklerde aynı boyuttaki görüntüyü veya farklı ekran genişliklerinde farklı görüntü boyutlarını sunmak için bir çözünürlük değiştirici örneği oluşturun. Bunun için srcset/size kullanın.

Becerilerinizi test edin!

Bu makalenin sonuna geldiniz, ancak en önemli bilgiyi hatırlayabiliyor musunuz? 

Özet

Bu kısımda duyarlı görseller konumuzu toparlayalım – umarız bu yeni tekniklerle oynamaktan keyif almışsınızdır. Özet olarak, burada tartıştığımız iki farklı sorun var:

• Sanat yönü: Farklı düzenler için kırpılmış görüntüleri sunmak istediğiniz sorun – örneğin, bir masaüstü düzeni için tam sahneyi gösteren bir manzara resmi ve bir mobil düzen için ana objeyi yakınlaştırılan bir portre resmi. Bu sorunu <picture> öğesini kullanarak çözebilirsiniz.
• Çözünürlük değiştirme: Masaüstü ekranlara göre büyük görsellere ihtiyaç duymadıkları için dar ekranlı cihazlarda daha küçük görüntü dosyaları sunmak. Ya da yüksek yoğunluklu/düşük yoğunluklu ekranlara farklı çözünürlüklü görüntüler sunmak istediğiniz durum. Bu sorunu vektör grafikleri (SVG görüntüleri) ve srcset ile sizes özniteliklerini kullanarak çözebilirsiniz.

Bu aynı zamanda tüm multimedya ve gömme kılavuzunu da sonlandırıyor! Devam etmeden önce yapılacak tek şey multimedya değerlendirmemizi denemek ve nasıl ilerlediğinizi görmek. İyi eğlenceler!