Blogger Resimlerde Yaşanan Netlik Sorunu

Blogger kullanıcıları tarafından bir çok mail alıyorum. Bunlar arasında özellikle yığılma olan bir konu olduğu için resim netliği konusunu, elimden geldiğince size Blogger dersleri kategorisinde açıklamaya çalışacağım. Blogger yayınlarına eklediğiniz resimlerde netlik sorunu yaşanabiliyor. Resim içeriklerinde sorun çıkmasa da ayrıntılı resimlerde kayma ve netlik kaybından şikayetçi olunabiliyor. Bunun nedeni Blogger resimlerinin boyutlara göre linklendirmesidir. Blogger'ın sunduğu sayfanın kalitesini artırmaya yönelik bir eklentidir. Fakat kimi durumlarda bu güzel eklenti ayrıntılı resimlerde sıkıntı yaşatabilir.

Aşağıda sizin için iki adet resim sundum. İlk resim kodunun linkleri benim tarafımdan düzenlendi. İkinci resim ise Blogger özelliği ile boyutlandırıldı. İki resim arasında ki netlik farkını az da olsa fark edebilirsiniz. Ayrıntılı resimlerde fark iyice belirgin olur.

İki resmin genişliği de 400x157 şeklinde. Aradaki farkın sebebi ikinci resmin otomatik olarak boyutlandırıldığın da özel link ile sunulması. Şimdi size iki resminde kodlarını göstereyim.

Birinci Resim Kodu :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDVlzL3wme3Qn64Q6vCCMIGiy81lVU3dHRQcoJzd_cXT-g0eBJlOJPMrnaMcNhaoZnJCR2ZB7iII_Zfb_5o1WYRzY8oDK_wXPF3zX-kdItsL2Ptw2NvWZuM_vhQ5Q2LI3jHXnUw01Pk0g/s1600/w3c-kontrolu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDVlzL3wme3Qn64Q6vCCMIGiy81lVU3dHRQcoJzd_cXT-g0eBJlOJPMrnaMcNhaoZnJCR2ZB7iII_Zfb_5o1WYRzY8oDK_wXPF3zX-kdItsL2Ptw2NvWZuM_vhQ5Q2LI3jHXnUw01Pk0g/s1600/w3c-kontrolu.png" width="400" /></a></div>

İkinci Resim Kodu :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDVlzL3wme3Qn64Q6vCCMIGiy81lVU3dHRQcoJzd_cXT-g0eBJlOJPMrnaMcNhaoZnJCR2ZB7iII_Zfb_5o1WYRzY8oDK_wXPF3zX-kdItsL2Ptw2NvWZuM_vhQ5Q2LI3jHXnUw01Pk0g/s1600/w3c-kontrolu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDVlzL3wme3Qn64Q6vCCMIGiy81lVU3dHRQcoJzd_cXT-g0eBJlOJPMrnaMcNhaoZnJCR2ZB7iII_Zfb_5o1WYRzY8oDK_wXPF3zX-kdItsL2Ptw2NvWZuM_vhQ5Q2LI3jHXnUw01Pk0g/s400/w3c-kontrolu.png" width="400" /></a></div>

Kırmızı olarak gösterilen resmin gösterim linkidir. Pembe olanla ise resme tıklanıldığında ulaşılacak olan adres. Eğer bloglarınızın resim boyutlandırma özelliğini kullanırsanız ( Küçük , Orta , Geniş seçenekleri ) Kod otomatik olarak resim linkini boyutlandırır.

Örnek :

İkinci kodda bunu görebilirsiniz. İkinci kodda kırmızı olarak yazılmış linkte s400 kısmı resim boyutunu linkle belirler.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDVlzL3wme3Qn64Q6vCCMIGiy81lVU3dHRQcoJzd_cXT-g0eBJlOJPMrnaMcNhaoZnJCR2ZB7iII_Zfb_5o1WYRzY8oDK_wXPF3zX-kdItsL2Ptw2NvWZuM_vhQ5Q2LI3jHXnUw01Pk0g/s400/w3c-kontrolu.png

Linkte boyutlandırmalar resimdeki netliği bozabilir. Eğer resimleriniz de bu sıkıntıyı yaşıyorsanız Kırmızı olarak SRC resim linkini, a href resim linki ile değiştirmeniz sorununuzu çözecektir.

Kodlar arasında örneklendirelim. Pembe olan resim linkini alıp, kırmızı olanla değiştiriyoruz.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDVlzL3wme3Qn64Q6vCCMIGiy81lVU3dHRQcoJzd_cXT-g0eBJlOJPMrnaMcNhaoZnJCR2ZB7iII_Zfb_5o1WYRzY8oDK_wXPF3zX-kdItsL2Ptw2NvWZuM_vhQ5Q2LI3jHXnUw01Pk0g/s1600/w3c-kontrolu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDVlzL3wme3Qn64Q6vCCMIGiy81lVU3dHRQcoJzd_cXT-g0eBJlOJPMrnaMcNhaoZnJCR2ZB7iII_Zfb_5o1WYRzY8oDK_wXPF3zX-kdItsL2Ptw2NvWZuM_vhQ5Q2LI3jHXnUw01Pk0g/s400/w3c-kontrolu.png" width="400" /></a></div>

ve kodu aşağıdaki hale getiriyoruz.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDVlzL3wme3Qn64Q6vCCMIGiy81lVU3dHRQcoJzd_cXT-g0eBJlOJPMrnaMcNhaoZnJCR2ZB7iII_Zfb_5o1WYRzY8oDK_wXPF3zX-kdItsL2Ptw2NvWZuM_vhQ5Q2LI3jHXnUw01Pk0g/s1600/w3c-kontrolu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDVlzL3wme3Qn64Q6vCCMIGiy81lVU3dHRQcoJzd_cXT-g0eBJlOJPMrnaMcNhaoZnJCR2ZB7iII_Zfb_5o1WYRzY8oDK_wXPF3zX-kdItsL2Ptw2NvWZuM_vhQ5Q2LI3jHXnUw01Pk0g/s1600/w3c-kontrolu.png" width="400" /></a></div>

Bu sayede link boyutlandırmasını ortadan kaldırarak, netlik sorununu bir nebze olsun ortadan kaldırabilirsiniz.