Web sitenizdeki görselleri SEO ve performans açısından nasıl kullanmalısınız?

Web sitemize eklediğimiz görselleri optimize etmek, web sitemizin performansı ve SEO ^{(Search Engine Optimization)} açısından oldukça önemli metriklerden biridir. Görselleri optimize edilmemiş bir web sitesi, gözle görülür derecede performans kayıpları yaşayabilir. Gelin, görsellerimizi madde madde nasıl optimize edebileceğimizi inceleyelim.

Görsellere Açıklayıcı Bir Alt Etiketi Ekleme

Öncelikle “Alt etiketi nedir?” sorusuyla başlayalım. Alt etiketini, görsellerimizin alternatif açıklaması olarak düşünebiliriz. Bu bağlamda, sitemize eklediğimiz çoğu görsele bir açıklama yazmalıyız. Burada “çoğu” kelimesine dikkat edelim, bunu yazının ilerleyen kısımlarında açıklayacağız. Bu açıklamayı yazarken, görseli başka birine göstermeden betimlediğinizi düşünebiliriz. Örneğin, aşağıdaki gibi bir resmimiz olduğunu düşünün.

Resim 1: Resim çizen robot

Bu görsele uygun bir alt etiketi aşağıdakilerden biri olabilir:

1. Resim çizen robot.
2. Tuvale resim çizen robot.

Tabiki de bunu siz daha da detaylandırabilirsiniz, fakat genel hatlarıyla görsellerimize buna benzer açıklamalar eklemeliyiz.

Her Görsele Açıklama Eklemeli Miyiz?

Bu sorunun kısa cevabı hayır, bazı görsellerin açıklamaları boş olabilir, peki neden?

Görsellerimiz içeriğin birer parçasıdır demiştik, fakat her görsel de içeriğimizin parçası olmayabilir. Bir çiçekçi web siteniz olduğunu düşünün, bu web sitesinde bir çiçekle ilgili bilgi verdiğiniz esnada yazınızın içinde web sitenizin tasarımında konmuş olan, anlattığınız içerikten bağımsız bir gül resmi olabilir. İşte bu resim içeriğimizden bağımsız olduğu için bu resmin açıklamasını boş bırakabiliriz.

Daha genel bir tabirle, buna karar vermek için web sitenizde yazdığınız bir blog yazısını bir ekran okuyucuya okuttuğunuzu düşünün (hatta okutabilirsiniz de, bunun tarayıcı eklentileri vs. mevcut), işte, ekran okuyucu, sizin yazınızı okurken, görsellere yazdığınız açıklamaları da okuyacaktır. Eğer içerikten bağımsız bir görsele açıklama eklerseniz, ekran okucuyu bunu da okuyacağı için, dinleyen kişiye kötü bir deneyim yaratabilir. Bu konuda daha detaylı bilgi için https://www.w3.org/WAI/tutorials/images/decision-tree/  adresini ziyaret edebilirsniz.

Görsellere Alt Etiketi Eklemenin Faydaları

Görsellerimize alternatif açıklamalar girmenin faydaları ise şu şekildedir:

Web sitemizin taranmasını kolaylaştırma, içeriğimizi daha doğru anlatma.

Görsellerimize alternatif açıklamalar girmek, web sitemizin tarayıcı botları tarafından daha kolay taranabilmesini sağlar. Aynı zamanda, görsel aramalarda sizi daha çok öne çıkarabilir.

Ekran okuyucular tarafından okunma.

Alternatif metinlerin en önemli ve en faydalı olduğu noktalardan biri aslında budur. “Her Görsele Açıklama Eklemeli Miyiz?” bölümünde de bahsettiğimiz gibi, ekran okuyucu kullanan kişilerin içeriğinizi daha doğru şekilde anlamasına olanak tanır. Ve daha engelsiz bir web siteniz olmuş olur. 🙂

Görselin yüklenmediği durumlarda kullanıcıya doğru geri bildirim verme.

Bazen görseller bağlantı sorunları vs. nedeniyle yüklenemeyebilir. Tarayıcılar görseli gösteremedikelerinde alternatif metni gösterir. Bu da içeriğimizi okuyan kullanıcıya görsel ile ilgili fikir verebilir.

Alt Etiketi Nasıl Eklenir?

Görsellere ALT etiketi eklemenin çeşitli yolları vardır, gelin bunları inceleyelim.

HTML Düzenleyerek

Sitenizdeki görsellere alt etiketi eklemek için doğrudan html etiketinizi düzenleyebilirsiniz. Örnek aşağıdaki gibidir:

<img src="https://bekci.site/robot.png" alt="Resim çizen robot"/>

Örnekte de görüldüğü gibi, img etiketimize alt=”Resim çizen robot” değerini ekleyerek resmimize açıklama koymuş olduk.

WordPress Üzerinden

Siteniz WordPress üzerine kuruluysa, görseli yüklerken, aşağıda da görüldüğü üzere “Alternatif Metin” kısmını doldurarak görselinize alt etiketini ekleyebilirsiniz.

Resim 2: WordPress üzerinden alt etiketi eklemeyi gösteren görsel.

Görsellerimizin Çözünürlüklerini Optimize Etme

Yüksek çözünürlüklü görsel, yüksek dosya boyutu demektir. Yüksek dosya boyutu demek ise, sitenizin daha geç yüklenmesine, dolayısıyla performansınızın düşeceği anlamına gelir. Bu bağlamda, sitemizde göstereceğimiz görsellerin çözünürlüklerini, sitemizde kullanım amacına göre ayarlamalıyız.

Resim 4: Instagram uygulamasındaki hikayeler bölümü.

Örneğin, Instagram uygulamasını düşünelim. Bu uygulamaya her girdiğimizde yukarıda hikayeler bölümünde insanların profil resmini görüyoruz. Bu alan tasarımda 56×56 olarak belirlenmiş, böyle bir alana biz 1024×1024 resimler koyarsak, gereksiz yere web sitemizin performansını dramatik bir şekilde düşürmüş oluruz. Bu bağlamda, sitemize eklediğimiz ve gösterdiğimiz her görselin, boyutunu doğru ayarladığımızdan emin olmalıyız.

Peki her ekran çözünürlüğüne nasıl uyum sağlayacağız? Örneğin masaüstüne göre çözünürlüğünü ayarladığımız görsel, mobilde haliyle büyük kalacaktır. Gelin bir sonraki bölümde bunu konuşalım.

Farklı Ekran Çözünürlüklerinde Uygun Görsel Sunma (Srcset)

Çözünürlüğün önemini bir üst başlıkta anlattık, fakat görseli tek bir çözünürlükte yükleyerek, tüm cihazlara (masaüstü, tablet, mobil) uyumlu bir çözünürlük yakalayamayız. Özellikle mobil versiyonda ekran çok dar olduğu için, yüklediğimiz çoğu görsel mobile fazla gelecektir.

Bu problemi çözmek için srcset özelliğimiz ortaya çıkıyor. Bu özellik sayesinde, tarayıcıya görselimizin farklı boyutlardaki versiyonlarını verip, seçimi ekran boyutuna göre yapması için tarayıcıya bırakıyoruz. Tarayıcımız da genelde mevcut ekran çözünürlüğüne en yakın çözünürlüğe sahip olan görseli seçip onu gösteriyor. Böylece, gereksiz yere yüksek çözünürlüklü görseller yüklememiş oluyoruz.

Srcset Özelliği Nasıl Kullanılır?

Örnek srcset kodu aşağıdaki gibidir, burada gördüğünüz gibi ben 3 adet farklı görsel yükledim (1920px, 768px ve 300px genişliğinde) ve bunların genişliklerini tarayıcıya söylemiş oldum. Artık sayfa yüklenirken tarayıcımız, ekran boyutuna göre en uygun görseli seçip onu yükleyecektir. Fakat dikkat ederseniz src alanına da bir görsel koydum, bunun da sebebi, eğer tarayıcımız srcset özelliğini desteklemiyorsa, gösterilecek varsayılan görseli belirtmektir. Fakat günümüzde tüm modern tarayıcılar bu özelliği desteklemektedir.

<img srcset="https://bekci.site/robot.png-1920.jpg 1920w,
https://bekci.site/robot.png-768.jpg 768w,
https://bekci.site/robot.png-300.jpg 300w"
src="https://bekci.site/robot.png-1920.jpg">

Görsel Dosya Boyutlarımızı Optimize Etme

Görsellerimizin dosya boyutunu düşürmek için çözünürlüklerini düşürdük, fakat dosya boyutumuz hala optimize olmamış olabilir. Çoğu görsel, yeterince sıkıştırılmadığı için veya eski nesil görüntü formatı kullandığı için olması gerektiğinden daha büyük boyutlu olabilir. Gelin bunu optimize etmenin yollarına bakalım.

Görselleri Sıkıştırma

Sitemize yüklediğimiz görselleri yüklemeden önce sıkıştırma algoritmalarından geçirerek, görselin kalitesini kaybetmeden boyutunu yüksek derecelerde düşürebiliriz. Bunun için farklı araçlar olsa da (wordpress gibi cms’ler görseli yüklerken bunu kendisi de yapıyor), bir görseli online olarak sıkıştırmak için TinyJPG (https://tinyjpg.com/) aracını kullanabilirsiniz. Örneğin ben bu araçtan bir resmi sıkıştırdığımda, aşağıdaki gibi %54 bir boyut tasarrufu sağladım. Bu sayede web sitenizin daha hızlı ve daha performanslı olmasını sağlayabilirsiniz.

Resim 5: Görsel sıkıştırma örneği.

Yeni Nesil Formatlar (WEBP) Kullanımı

Görsellerin boyutunu düşürmenin bir yolu da, Google’a ait olan .webp  formatını kullanmaktır. Google, aynı zamanda bunu PageSpeed testinde de önerir. Görsellerinizi bu formata çevirerek, boyut tasarrufu sağlayabilir ve PageSpeed skorunuzu da yükseltebilirsiniz.

Görselleri WEBP Formatına Çevirmek

Görselleri .webp formatına çevirmek için ise, aşağıdaki araçları kullanabilirsiniz:

1. CloudConvert Webp Converter (Online Dönüştürme) (https://cloudconvert.com/webp-converter)
2. Convertio Webp Converter (Online Dönüştürme) (https://convertio.co/jpg-webp/)
3. Photopea (Online Dönüştürme) (https://www.photopea.com/)
4. Adobe Photoshop (https://www.adobe.com/tr/products/photoshop.html)

Görsellerin Kaplayacağı Alanı Önceden Belirleme

Bir başka optimizasyon yöntemi ise görsellerin kaplayacağı alanı önceden belirlemektir. Bu optimizasyon, hem kullanıcı deneyimimizi iyileştirir, hem de bir PageSpeed metriği olan Cumulative Layout Shift (CLS) skorumuzu iyileştirir.

Örneğin, web sitenize 500px yükselikte bir görsel koyduğunuzu düşünün. Tarayıcımız, bu görselin yüklenmeden önce ne kadar yer kaplayacağını bilmediği için, görselin boyutları yüklenmeden önce sıfır kabul edilir. Bu durumda, sitemiz açılırken görsel yüklenmeden önce 0px yer kaplarken,  yüklendikten sonra 500px yer kaplar. Bu da ekranda istenmeyen kaymalara neden olur. Fakat bunu yapmak yerine, bu görselin kaplayacağı alanı tarayıcıya önceden belirtmiş olsaydık, sitemiz açılırken de o 500px’lik alan görsele ayrılmış olacaktı.

Görselin kaplayacağı alanı tarayıcıya önceden belirtmek için, görsel etiketimize “width” ve “height” değerlerini eklemeliyiz. Bu değerler yaklaşık değerler olabilir. Aşağıda örnekte inceleyelim.

<img width="700" height="300" src="https://bekci.site/robot.png" alt="Resim çizen robot"/>

Yukarıdaki örnekte de görüldüğü gibi görselimizin kaplayacağı alanı tarayıcıya bu şekilde bildirdik. Daha sonra görselimize CSS ile ekstra boyut kuralları verebiliriz.

Görünür Alan Dışındaki Görsellerin Yüklenmesini Erteleme (Lazy-Loading)

Optimizasyondaki son maddemiz ise görünür alan dışındaki görselleri ertelemek, yani lazy loading. Lazy loading, sitemiz açılırken tüm görsellerin yüklenmesini beklemek yerine, sadece görünecek görselleri yüklememizi sağlar. Bu sayede, daha az görsel yüklediğimiz için sitemizin açılış süresi iyileşir ve performansı artar.

Eğer sitemizdeki görselin sadece kullanıcıya gözükeceği zaman yüklenmesini istiyorsak, görsel etiketimize aşağıdaki örnekteki gibi loading=”lazy” ayarını eklememiz gerekiyor.

<img width=”700″ height=”300″ src=”https://bekci.site/robot.png” alt=”Resim çizen robot” loading=”lazy” />

Hangi Görselleri Erteleyeceğimize Karar Verme

Hangi görselleri erteleyeceğimize karar vermek, aslında önemli bir başlıktır. Görselleri ertelemeden yüklemek performansı düşürse de, tüm görselleri erteleyerek yüklemek de performansımızı ve performans skorlarımızı düşürür.

Basitçe anlatmak gerekirse, sitemiz açılırken görünecek görsellerin (örneğin site logosu) yüklenmesini ertelememeliyiz. Çünkü bu görseller ertelenmeden kullanıcıya sunulmalıdır. Görünür alanda olmayan görsellerimizi ise erteleyebiliriz.

Sitenizin Performansını Ölçmek İçin Bekçi

Optimizasyon maddelerimizin sonuna geldik. Eğer siz de sitenizin performansını sürekli izleyen ve size bu konularda geri bildirim veren bir Bekçi’niz olsun isterseniz, Bekçi’yi hemen ücretsiz kullanmaya başlayabilirsiniz.