wordpress resimleri kaliteli yükleme

WordPress Resimlerdeki Bulanıklık Problemi Nasıl Çözülür?

WordPress Resimlerdeki Bulanıklık Problemi Nasıl Çözülür?

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.

[php] add_filter(‘jpeg_quality’, function($arg){return 100;});
[/php]

Temanın Görseli Küçültmesi


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.

[css]

.wp-caption {
width: auto !important;
}
.wp-caption img {
width: auto !important;
}

[/css]

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 2.22 gibi bir oranla karşılaştım. Ayrıca yazıların içine koyduğum çok büyük görseller bile 1132 piksel genişliğe sınırlandırıldığı için en büyük görsel boyutumu 1132 piksel genişlikte olacak şekilde hazırlıyorum.

Oranında 2.22 olduğunu bildiğimiz için 1132 piksel genişlikteki görselimin yüksekliğinin 509 piksel olması gerektiğini de hesaplayarak buldum. 1132×509 piksel çözünürlükte 2.22 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 1132, Orta boyut kısmına bunun yarısı olan 566Küçük resim boyutuna ise mobil cihazlarda kalitesiz durmasın diye 566 pikselin yarısı değilde 400 verdim. Fakat Küçük resim boyutunda 236 yüksekliğini vermiş durumdayım. Bunu vermeliyiz yoksa sorunlar olabiliyor. 236’yı da yine 2.22 oranına göre hesaplamıştım.

Ayrıca benim kullandığım 1132×509 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. 2.22 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. 1132 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 kullanabilir ve pro sürümüne ücretsiz ulaşmak için yazıya tıklayabilirsiniz.

Bilgi


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 1132×509 piksel çözünürlük en büyük boyutumuz olduğu için sitemiz çok yorulmamış oluyor. Photoshop’da da JPEG oluştururken kaliteyi 8‘e düşürdüğümüzde düşük boyutlu ve kaliteli görseller elde edebiliyoruz.

Kontrol Ediliyor

Potasyum Amil Ksantat Hangi Sektörlerde Kullanılır?

Potasyum amil ksantat kimyasal maddesi seçici olmayan bir maddedir. Seçici olmayan toplayıcı maddeler listesinde yer …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir