Arkadaşlar sizlere HTML5'in yeni sayılabilecek bir özelliğinden bahsetmek istiyorum. Yeni sayılabilecek diyorum çünkü aslında yeni değil fakat henüz tam anlamıyla kullanılmaya başlanmadı. Fakat önümüzdeki zaman içerisinde kullanımı oldukça artacağını tahmin ediyorum, hatta mecbur kalınacağını düşünüyorum kullanımın. Neden derseniz etiketini anlatmaya başladığımda anlayacaksınız.
html5 etiketi sayfayı görüntüleyen cihazın ekran çözünürlüğüne göre farklı bir resim dosyası görüntülenmesini sağlayabiliyoruz. Şimdi "Ne alaka arkadaş css ile zaten yapıyoruz biz bunu" dediğinizi duyar gibiyim. Fakat durum öyle değil. CSS ile resimleri basit bir şekilde boyutlandırıyoruz evet ama bu bazı görüntülerin bozuk veya hoş olmayacak şekilde görünmesine yol açabiliyor. Ayrıca daha da önemli bir nokta var, bu nokta tabi ki de KB'lar siz şimdi CSS ile resimleri hangi boyuta getirirseniz getirin resim 500KB boyutunda ise telefonda da, tablette de, bilgisayarda da 500KB olarak kalacaktır. Oysa bu sistemi kullanarak örneğin; telefonlara aynı resmin kücültülmüş ve 100KB boyutunda olanını verebilirsiniz böylece telefondan giren ziyaretöileriniz gereksiz yere 400KB fazladan indirmiyorlar. İşte bu gibi durumlarda bu nedenle sizlere HTML5 yine ince düşünülmüş bir özelliği olan elementini kullanmanızı öneriyorum.
Örnek kullanım;
srcset="landscape_small.jpg">
srcset="landscape_medium.jpg">
srcset="landscape_large.jpg">
alt="Nymphenburg Castle in Munich during sunset">
Sıkıntı örneğin her seferinde öne çıkarılmış görsel için bu nasıl oluşturulacak birde css de % kullandığımızda tasarım daha esnek oluyor burada sadece bootstrap gibi yapılarda kullanılabilir gibi duruyor. Sayfada bu koddan dolayı sorgu sayısı artıyor mu? Tabi iyi yanları var ama negatif yanları da sorgulanmalı.
ogzhnbaygul şuan için wordpress'de kullanılması biraz zor çünkü bu sistemi wordpress'e uyarlamak için tema üzerinde baya bir kod yazmak gerekir. Ancak konu içerisinde ki resimlerinize makalenizi yazarken manuel olarak ekleyebilirsiniz. Hem şuan hala geliştirme aşamasında olan bir özellikmiş.
Manuel kullanımda sorgu sayısını artırmıyor, yani ziyaretçi ekranı hangi boyut sınırları içerisinde ise sadece o resim çalıştırılıyor diğerleri yok gibi davranılıyor yüklenmiyor.
Ayrıca orada kullanılan px öçülmlemesi resimlerle alakalı değil. Ziyaretçinin ekran çözünürlüğü ne ise o değerler arasındaki resim dosyasının yüklenmesi için verilen bir değer. Bu nedenle mecburen sabit değerler vermek gerek.
cihaneken wp smush eklentisi zaten resimleri sıkıştırırken ayrıca küçük orta ve büyük olamak üzere boyutlara ayırıyor belki bu şekilde eklenti ile etkili bir şekilde kullanılabilir. Sorgu sayısında yükleme şeklinde değilde ekran çözünürlüğünü sorguluyor birde telefonda landspace görünüme geçince yani ekranı döndürünce kodlar php olduğu için yeniden resim yüklenmeyecek bundan dolayı yine çözünürlük problemi olabilir.
ogzhnbaygul evet smush ile birlikte çalışacak bir şekilde tasarlana bilir güzel bir fikir. Ekran çözünürlüğü sorguluyor derken, siz bu durumu php ile karıştırmayın, yani html de sorgu çok muş azmış öyle bir durum yok önemli olan sorgular sonucu çekilen veridir. Yoksa php de veritabanında yaptığımız sorgular ile karıştırmayın bu durumu. Yani ekran çözünürlüğünü sorguluyor falan gibi bir durum yok.
Ayrıca kodlar php olmayacak, yani bu sistemi php + veritabanı ile uyarlasanız dahi zaten tüm bilgiler sayfa içerisinde olacak ve dinamik olarak kullanıcının ekranına uyarlanacak.
Aşağıdaki demoyu incelerken tarayıcı sayfanızın boyutlarını değiştirdiğinizde dinamik olarak farklı resim dosyalarının yüklendiğini farkedersiniz. Yani sizin ekranınız hangi çözünürlüğe girerse resimlerde otomatik olarak ekrana en uygun çözünürlüğe göre şeçilerek ayarlanıyor. http://responsiveimages.org/demos/basic-implementation/index.html
cihaneken olayı tam olarak anladım, responsive tasarımda kullanılıyor fakat resimler ekran çözünürlüklerine uygun olduğu için veri konusunda tasarruf sağlıyor.
alt="Nymphenburg Castle in Munich during sunset">
alt="Nymphenburg Castle in Munich during sunset">
