Ana SayfaSEOSEO için resim optimizasyonu nasıl yapılır?

SEO için resim optimizasyonu nasıl yapılır?

-

Bir önceki yazımda “SEO için doğru resim formatını nasıl seçeriz?” konusunu yazmıştım. Bu yazıda artık resim formatımızı seçtik ve iş optimizasyona geldi. Resim olayı gerçekten önemli bu nedenle bu konuda 1 yazı daha yazacağım ve 3 yazı ile resim konusunu tamamlamış olacağız.

Bu konuda en sık kullandığımız internet sitesi www.tinyjpg.com isminde jpg geçse bile png ve WebP optimizasyonu sağlıyor. Bu sitenin aynı zamanda wordpress eklentisi mevcut, aylık 100 adet ücretsiz olarak otomatik çeviriyor. Eklenti : https://wordpress.org/plugins/tiny-compress-images/

Konuyla alakalı oldukça fazla alternatif var, temelde bu tarz işler için genellikle her seferinde arama yaparak farklı alternatifler keşfetmeye çalışıyorum.

Google araması için kullanabileceğiniz arama terimleri: Compress JPG, Optimize JPG, JPG compression, JPG optimization

Sayfamızdaki büyük resimleri tespit edebilmek için ben tek bir sayfayı incelerken GtMetrix adresini kullanıyorum. Gtmetrix sitesine girdikten sonra Waterfall sekmesine, ardından Images sekmesine tıklayıp, Size’a tıklıyorum. Böylece resimler büyükten küçüğe sıralanmış oluyor.

GtMetrix ile büyük boyutlu resim tespiti

Bir başka yöntem ise Chrome’da optimize etmek istediğim sayfada sağ tuşa basıp İncele’ye tıklayarak DevTools’u açmak. Orada Network’ü tıkladıktan sonra sayfaya yenilersek sayfada tüm dosyaları görebiliriz. Img kısmına tıklayıp, ardından Size’a tıklayarak büyük resimleri tespit edebiliriz.

Chrome ile büyük boyutlu resim tespiti

Bunlar hangi sayfayı optimize edeceğimizi biliyorsak yapabileceğimiz yöntemler. Tüm siteyi araştırabilmek için ise genellikle Screaming Frog kullanıyorum. Bu uygulama tüm siteyi taradığı için büyük resimleri tespit edebilmek mümkün oluyor. Muadillerine göre fiyatları uygun ve ücretsiz seçeneği yeterli. Ücretsiz seçenekte 500 sayfaya kadar tarayabiliyoruz. https://bit.ly/sflink buradan indirebilirsiniz. Sayfamızı tarattıktan sonra Images içerisinde Over 100KB bölümünden büyük dosyaları tespit edebiliyoruz.

Screaming Frog ile büyük boyutlu resim tespiti

Resim optimizasyonunda yapılan en temel hatalardan birisi 300×150 gözüken bir alanda 1200×600 gibi bir boyutta resim yüklenmesi. Aslında resim doğru boyutlandırıldığı takdirde zaten KB olarak çok daha düşük olacaktır. Bununla ilgili analizleri ise https://webspeedtest.cloudinary.com/ adresinden yapabilirsiniz. Oldukça temiz bir arayüz sunuyor. Sizin için en uygun resim formatı hangisi onu gösteriyor.

Cloudinary ile doğru resim formatı tespiti

Chrome’da burada hata olup olmadığını tespit edebilirsiniz. Sağ tuşa basıp İncele dediğiniz zaman ilgili yere (1) tıkladığınızda, resimin üzerinde ekranda gözüktüğü boy (2) çıkar, sağ tarafta (3) resimin üzerine gelince veya yeni sekmede açınca orijinal boyutunu görebilirsiniz.

Chrome ile resim boyutu tespiti

Bir önceki yazımda bahsettiğim <picture> etiketi burada yine imdadımıza yetişiyor. Farklı çözünürlükler için farklı boyutlarda resimler hazırlayıp gösterebiliyoruz. Örnek:

Örnek:
<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img src="logo-320.png" alt="logo">
</picture>

Elinizde resminiz hazır ama format doğru seçilmemişse, bunları çeviren çeşitli araçlar var. Bunları tespit etmek için “JPG to PNG” gibi aramalar yapabilirsiniz. Tek bir araç ismi vermiyorum çünkü her çevirme işleminde iyi sonuç aldığınız yer farklı olabilir.

Türkçe ve özel karakter kullanımı

Pek bahsedilmeyen ama Türkiye’de sık karşılaşılan bir sorun Türkçe karakterli resim isimleri genellikle tarayıcılar tarafından daha geç okunabiliyor veya okunamayabiliyor. Onun için ÖÇŞİĞÜöçşığü gibi harfleri, özel karakterleri kullanmamaya özen göstermeniz faydalı olacaktır.

Doğru resim seçmek

Doğru resmi seçmekten optimizasyonun en temel parçalarından birisi. Şayet kullanacığınız resim için farklı alternatifler kullanmak mümkünse mutlaka alternatifleri araştırmakta fayda var. Resim indirmek için genelde freepik.com kullanıyorum, fiyat performans başarılı.

Küçük resimler için SVG mantıklı bir alternatif olabiliyor, özellikle sosyal medya ikonları gibi her sayfada olan içerikler için. iconfinder.com ve flaticon.com bu konuda kurtarıcı 2 site, svg olarak indirebilmek harika.

Bonus:

Eğer yapabiliyorsanız resim kullanmayın 🙂 Örneğin indir.com sitesindeki logo ve sosyal ikonlar, işletim sistemi ikonu gibi her yerde kullandığımız ikonlar font şeklinde hazırlandı. Böylece farklı renklerde ve boyutlarda rahatlıkla kullanabiliyoruz.

Adobe blogunda nasıl yapılabileceği ile ilgili detaylı bir yazı hazırlamış, bu konuyla ilgileniyorsanız ilginizi çekebilir.

Yazıda mümkün olduğunca ücretsiz araçlar ile anlatmaya veya en uygun araçları anlatmaya çalıştım. Bunlar için ücretli seçenekler her zaman için mevcut. Yazıyı beğendiyseniz yorum yapmayı ve arkadaşlarınızla paylaşmayı unutmayın.

SEO için resim Serisi

Konuyla alakalı daha önce AramaMotoru.com ‘da yazılmış yazılar:

Kaynakça :

Hasan Yaşar
Hasan Yaşar
İmza İnternet Teknolojileri, yönetici ortağı. 1999 yılından bu yana çeşitli internet projeleri geliştirdi. SEO ve internet konusunda danışmanlık veriyor. 1980 Konya doğumluyum. Konya Karatay Anadolu Lisesi’nden sonra İstanbul Kültür Üniversitesi Bilgisayar Mühendisliği Bölümü’nü bitirdim. Bloğumda girişimcilik konularında yazılar paylaşarak tecrübelerimi aktarmaya çalışıyorum. 1999 yılından bu yana internet projeleri geliştiriyorum, halen İmza İnternet Teknolojileri firmasının kurucu ortağı olarak indir.com ve arama motoru projelerini yönetiyorum. Şirket olarak hem kendi projelerimizi yapıyoruz, hem de firmalara başta SEO olmak üzere danışmanlık hizmetleri veriyoruz. 2015 yılında Marmara Üniversitesi’nde misafir öğretim görevlisi olarak Yaratıcılık ve Yenilikçilik Yönetimi “Creativity and Innovation Management” dersleri, 2017 yılında Aydın Üniversitesi’nde misafir öğretim görevlisi olarak İnternet girişimciliği dersleri vermeye başladım. Bunun dışında İstanbul Kültür Üniversitesi’nde ve bağımsız olarak SEO Eğitimi vermeye başladım. Aynı zamanda Aydın Üniversitesi VR Lab.’da Danışma Kurulu’ndayım.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

Öne Çıkanlar

Domain Seçerken Dikkat Edilmesi Gerekenler

Domain Seçerken Dikkat Edilmesi Gerekenler

0
Domain sorgulama, internet üzerindeki dijital varlığınızı oluşturmak için atmanız gereken ilk adımdır. Peki, domain nedir? Basit bir ifadeyle, bir web sitesinin adıdır. İnternet kullanıcıları,...