Merhabalar. Bu yazımda WordPress’de bulunan yüklediğiniz resimlerin ve görsellerin bulanık olması sorunundan ve çözümünden bahsedeceğim. Öncelikle temanıza uygun kalitede ve çözünürlükte görseller koymaya dikkat etmelisiniz. Fakat uygun görseller bile koysanız bazı sebeplerden WordPress yada temanız görsellerinizin kalitesini düşürüyor. Bunların sebeplerini ve kendim deneyip sonuç aldığım, sizin de kendi temanızda/sisteminizde deneyebileceğiniz çözümleri anlatacağım.
WordPress’in Upload Kalitesini Düşürmesi
WordPress resim yüklemelerinde kaliteyi otomatik olarak düşürüyor. %60’a kadar düşürülen bu kalite bazen bulanıklığa yol açabiliyor. Aşağıda gördüğünüz kısa kod dilimini temanızın functions.php dosyasının en altına yerleştirdiğinizde WordPress’in kalite düşürmesini engelleyebiliyoruz. Tabi bu yaptığınız değişiklik temayı güncellediğinizde gideceği için Child Theme kullanmanızı tavsiye ederim.
add_filter('jpeg_quality', function($arg){return 100;});Temanın Görseli Küçültmesi
Benim temamda ilginç bir şekilde görsellere alt yazı yazdığımda bulanıklaşıyorlardı. Alt yazı için eklenen ekstra bir çerçeve yüzünden görsel tema tarafından küçültülüyordu. Bu yüzden CSS kodlarına yaptığım müdahaleler sonrasında bu çerçevenin ekranın tamamına sığdırılmasını ve içerde kalan görselinde genişliğinin küçültülmemesini sağladım. Sorunu gördüğünüz görsellerinizde aşağıdaki kod örneklerinin benzerlerini deneyebilirsiniz. Tabi kendinize uyarlamanız gerekiyor.
.wp-caption {
width: auto !important;
}
.wp-caption img {
width: auto !important;
}Temanıza Uygun Görseller
Bu konu biraz karışık. Her tema birbirinden farklı olduğu için genel bir cevap veremiyorum. Ben kendi temamda kullanılan büyük, orta, küçük görselleri tek tek inceledim. Hangi konumlarda, hangi eklentilerde ve hangi modüllerde nasıl bir çözünürlük oranı kullanıldığını buldum. Ortalama olarak görselin büyük kenarını küçük kenarına böldüğümde 1.603 gibi bir oranla karşılaştım. Ayrıca yazıların içine koyduğum çok büyük görseller bile 720 piksel genişliğe sınırlandırıldığı için en büyük görsel boyutumu 720 piksel genişlikte olacak şekilde hazırlıyorum. Oranında 1.603 olduğunu bildiğimiz için 720 piksel genişlikteki görselimin yüksekliğinin 449 piksel olması gerektiğini de hesaplayarak buldum. 720×449 piksel çözünürlükte 1.603 orandaki görselim sitemde bulunan en büyük görsel oluyor. WordPress’te Ayarlar/Ortam kısmına gittiğimizde burada Resim boyutları kısmını göreceksiniz. Burada ise En Büyük Genişlik kısımlarında değişiklik yapacağız. Büyük boyut kısmına 720, Orta boyut kısmına bunun yarısı olan 360, Küçük resim boyutuna ise mobil cihazlarda kalitesiz durmasın diye 360 pikselin yarısı değilde 218 verdim. Fakat Küçük resim boyutunda 136 yüksekliğini vermiş durumdayım. Bunu vermeliyiz yoksa sorunlar olabiliyor. 136’yı da yine 1.603 oranına göre hesaplamıştım.
Ayrıca benim kullandığım 720×449 piksel çözünürlüğüne tekrar gelirsek Photoshop kullanarak önceden hazırladığım bu çözünürlük şablonuna kullanmak istediğim görüntüyü bırakıp, ayarlayıp kaydediyorum. 1.603 oranlı bu en büyük görselden de daha küçük görseller otomatik olarak oluşturuluyor. Sitenin her yerinde kayıpsız yani sağdan, aşağıdan vb. kesilme sorunu olmayan bir görsel ayarlamış oluyoruz. Sabit çözünürlük kullanmak her türlü faydalı olacaktır. 720 piksel genişliğin üstünü koymamız da zaten siteyi ağırlaştıracağı için gereksiz olacaktır.
Temanıza Uygun Görsellerin Ayarlanması Sonrası
Tüm bu ayarları yaptıktan sonra görsellerimizi bir kereye mahsus baştan üretmeliyiz. Regenerate Thumbnails adındaki eklentiyi kullanarak sitemizde bulunan tüm görselleri WordPress Ayarlar/Ortam kısmında ayarladığımız çözünürlüklerde baştan oluşturuyoruz. Ayrıca görsel boyutlarını da biraz sıkıştırıp küçültmek için Smush Image Compression and Optimization eklentisini kullanabiliriz.
Sonuç
Tüm bu ayarları yaptığımızda hem sitemizdeki görsellerde ki bulanıklık sorununu çözüyoruz, hem sabit ortak çözünürlük oranı kullandığımız için koyduğumuz alanlarda resimde sağdan, aşağıdan vb. gibi kesilmeler olmuyor, hem de 720×449 piksel çözünürlük en büyük boyutumuz olduğu için sitemiz çok yorulmamış oluyor. Photoshop’ta da JPEG oluştururken kaliteyi 8‘e düşürdüğümüzde düşük boyutlu ve kaliteli görseller elde edebiliyoruz. Mesela bu yazının en üstünde kullandığım görsel 72 KB boyutunda. Fakat ben PNG formatını daha kaliteli olması sebebiyle daha çok tercih ediyorum.
