Görüntü optimizasyonunu doğru yapın

Web sitenizi Google PageSpeed Insights veya GTmetrix ile taradığınızda, genellikle görsel boyutlarıyla ilgili uyarılar görürsünüz, eğer görmüyorsanız tebrikler! Bu yazıda, bu uyarılardan kaçınmanın yollarını ve web sitesi tasarımında görsel optimizasyonunu doğru yapmayı anlatıyoruz.

Retina nedir? 

Retina cihazlar ve neden önemli olduklarıyla başlayalım. Modern cihazların çoğu, SD ekranlara kıyasla HD kalitesinde olan retina ekranlar kullanır.

Retina desteği vermek için, görsellerinizin yerleştirileceği alanın iki katı boyutta hazırlanması gerekir. Örneğin 300 x 200 px bir alan için görselinizi 600 x 400 px olarak üretmelisiniz. Bunun doğal sonucu olarak dosya boyutu artabilir, çünkü görsel fiziksel olarak iki kat büyür.

Optimizasyon 

Retina mantığını kavradıktan sonra optimizasyona odaklanabilirsiniz. Bunun için Adobe Photoshop gibi bir araç kullanmanızı öneririz.

Görselinizi Photoshop’a veya tercih ettiğiniz araca aktarın ve öncelikle boyutu tam ihtiyacınıza uygun hale getirin; daha büyük olmasın. Örneğin yukarıda belirtildiği gibi 600 x 400 px.

Ardından web için kaydet özelliğini kullanarak dosya türünü seçin. Eskiden görselde şeffaflık varsa PNG; yoksa her zaman JPG tercih edilirdi. Ancak modern formatlar sayesinde çok daha küçük dosya boyutları ile yüksek çözünürlüklü görseller elde etmek mümkün. Bunun için Adobe Photoshop’ta yerleşik olarak bulunan WEBP veya AVIF formatını kullanabilirsiniz. Artık görseller için PNG kullanmaya gerek yok. Sonrasında kalite ölçeğini ayarlayın. Çoğu durumda 60–80 aralığı yeterlidir; ancak sitenizin karşılama alanı gibi görsel veya dikkat çekmesi gereken bir alanda bu görseli kullanmayı planlıyorsanız kaliteyi 100’e kadar çıkarmak kabul edilebilir.

Photoshop’ta web için görseli kaydetme

Hazır olduğunuzda görseli kaydedin ve anlamlı bir dosya adı verin. Bu, doğrudan optimizasyonla ilgili olmasa da sitenizin SEO performansına katkı sağlar ve iyi bir uygulamadır. SEO

Görseli yükleyin 

Görseli medya kütüphanesine yüklemeden önce, yükleme sırasında optimizasyonu otomatikleştiren bir eklenti kullanmayı düşünebilirsiniz. Önerimiz Modern Görsel Formatları eklentisidir. Eskiden WebP Uploads olarak bilinen bu eklenti, WordPress çekirdek geliştiricileri tarafından açık kaynaklı olarak ücretsiz dağıtılmaktadır. Bu, dosya boyutunu bir miktar daha düşürmeye yardımcı olur. Eğer görsel optimizasyonu için ek bir eklenti arıyorsanız Powered Cache Premium‘u inceleyebilirsiniz.

Görseli yerleştirin 

Görseli yazı veya sayfaya eklerken, küçük resim boyutunu seçebileceğiniz bir alan görebilirsiniz. Burada alanınıza en uygun boyutu seçtiğinizden emin olun; gereğinden büyük veya küçük görsel kullanmaktan kaçının.

Doğru görsel boyutunu seçme

Artık görseliniz sitede iyi görünüyor olmalı ve optimize edildi. Süreci öğrendikten sonra uygulaması zor değil ve sitenizin kullanıcılar için web sunucusu üzerinde çok daha hızlı yüklenmesine katkı sağlar. WordPress sunucusu

Takıldığınız noktalar için bw/a, kısa eğitim görüşmeleri vermekten memnuniyet duyar.

Güvene ve uzmanlığa dayalı özel bir ekip 

bw/a, Samsun, Türkiye’de beş yılı aşkın süredir web siteleri tasarlayıp geliştiriyor; işletmelerin çevrimiçi varlıklarını kurmalarına ve büyütmelerine yardımcı oluyor. Girişimler, yerel işletmeler ve ulusal markalar ile çalışıyor; kişisel yaklaşım, özel çözümler ve sürekli destek sunarak uzun vadeli başarıyı hedefliyoruz.