Bu yazımda sizlere web sitenizde kullandığınız fotoğrafları responsive hale getirmek için bir kaç önemli detay sunacağım.
İlk olarak dikkat etmemiz gereken detay; Resimlerin boyutlandırılması yapılırken, px cinsinden ölçü vermek yerine % değer üzerinden boyutlandırma yapacağız.
Aşağıda paylaştığım kodlarda dikkat edersiniz, fotoğrafın width ve height değerleri 100% üzerinden verilerek resim tam ekranda responsive olarak yerleştirilmiş.
|
1 2 3 4 5 |
<img src="sosyal-medya.jpg" width="100%" height="100%" /> |
Örnek için tıkla. -Ekranı küçülterek test edin.
İpucu: Width ve height değerleri 100% olarak verilmiş bir fotoğrafı veya öğeleri, 500*500 px değerinde bir divin içine alırsanız, divin tamamını kapsar ve onun boyutlarına uyum sağlar.
Bir diğer göreceğimiz örnek ise, fotoğraf istediğimiz boyutta olacak ama ekrana göre de uyum sağlayacak. Burada ihtiyacımız olan css özellikleri, max-width ve max-height olacaktır. Adındanda anlaşılacağı üzere uzunluk ölçülerine maximum değer ekleyeceğiz ve verdiğimiz 100% ölçülere bir kısıtlama getireceğiz.
Aşağıdaki örnekte, max-height:600px; max-width:500px; vererek fotoğrafımıza maximum ölçü kısıtlaması getirdik ama kendi ölçü birimi 100% üzerinden verildiği için, ekran genişliği 500px’in altına düştüğü zaman, 100% değer devreye girerek ekrana uyumlu bir boyutlandırmaya sağlanacak.
|
1 2 3 4 5 6 7 8 9 10 |
<style type="text/css"> .responsive-img { max-height:600px; max-width:500px; } </style> |
|
1 2 3 4 5 |
<img class="responsive-img" src="sosyal-medya.jpg" width="100%" height="100%" /> |
Örnek için tıkla -Ekranı küçülterek test edin.
Yanlış kullanımı;
Benim vermiş olduğum örneklerde fark ettiyseniz fotoğrafın width ve height değerlerini, img etiketinin içine yazdım ve maximum ölçülerini css ile hallettim. Bunun sebebine gelirsek, img etiketlerinde uzunluk birimlerinin yer alması seo açısından önemli bir konudur. Tarayıcı css kodlarını okuyup ona göre davranırken, arama motorlarının botları img etiketlerindeki boyutlandırma ölçülerini göremiyor ve web sitemiz açısından ufak da olsa puan kaybı ile sonuçlanıyor. Wmaracı gibi sitelerde seo puanı ölçümü yaptığınızda ” web sitenizde uzunluk değeri belirtilmemiş fotoğraflar var” uyarısı aldığınızı çok net göreceksiniz.
Alttaki örnekte seo açısından yanlış kullanımı görüyorsunuz..
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style type="text/css"> .responsive-img { width:100%; height:100%; max-height:600px; max-width:500px; } </style> |
|
1 2 3 4 5 |
<img class="responsive-img" src="sosyal-medya.jpg" /> |
Son olarak şöyle bir örnekle konumuzu bitirelim 🙂
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<style type="text/css"> .container { width:100%; max-width:1024px; height:auto; min-height:50px; margin:auto; margin-top:100px; } .d1, .d2, .d3 { width:31%; height:200px; float:left; margin-left:1%; margin-top:1%; border:1px solid #666; } .responsive-img { max-height:200px; max-width:500px; } </style> |
|
1 2 3 4 5 |
Örnek için tıkla -Ekranı küçülterek test edin.
Seo açısından önemli olan ” image optimizasyonu” konusunu da okudunuz mu?
Bir başka blog yazımda görüşmek üzere 🙂
Web Bulutu.
Bir önceki yazımız olan Css3 animasyon yapımı / Animation Css başlıklı makalemizde animasyon css3, animation css ve animations css3 hakkında bilgiler verilmektedir.
Çok Basit Fakat BEnim Çok İşime Yaradı Allah Razı Olsun Kardeşim.
proje ne alemde hacım
Çok sağol, çok işime yaradı gerçekten teşekkür ederim
Çok Basit bişeymiş ama aşırı işime yaradı Allah Razı Olsun Sizden Hocam
merhaba mobil uyumlu wordpress sitemde 468×60 banner yarım görünüyor telefondan girdiğimde bu sorunu nasıl hallederim
Teşekkür ederim çok işime yaradı
Süper bir makale olmuş. Çoğu webmaster responsive tasarım yapmak için bootstrap gibi hazır kütüphaneleri kullanıyor olabilir ama bazı durumlarda manuel yöntemler çok etkilidir. En azından işin mantığını anlamak isteyenler için ilaç niteliğinde bir makale olmuş. Örnekli uygulamalarda daha da öğretici bir hal vermiş.
şimdi hocam img etiketine yazılan boyutları botlar göremiyor. ve bu seo açısından kötü yazmışsınız.
sizin yaptığınız gibi width ve height değerlerini img etiketleriniin içine yazmamız daha mı iyi?
Merhaba @recep, konuda bahsettiğim gibi google botları için bu değerleri ilgili alanda kullanmamız gerekmektedir. Hatta görselin gerçek boyutları ile etikete girilen width/height değerlerinin de aynı olması SEO açısından daha sağlıklı olacaktır.