İnternet

Optimize Images Çözümü

İnternet sitelerinin sadece yazıdan oluştuğunu varsayalım, acaba web siteleri bu kadar çekici olabilecek miydi? Tabi ki renkli, canlı görsellerle desteklenmiş içerikler her zaman göze çarpıyor. Ayrıca anlatmak istediklerimizi görselle desteklemek öğrenme süreçleri açısından da avantaj sağlıyor.

İnternet sitelerine yüklenen görseller ziyaretçimiz için oldukça iyi ancak sadece görseller yüzünden yavaş yüklenen bir web sitesinde kimse zaman harcamak istemez. Görseller sitenin açılma hızını etkileyen en önemli faktörlerden biridir. Bu sebeple internet sitesine yüklenecek görsellerin optimizasyonu da oldukça önemli hale geliyor.

İletişim çağındayız herşey o kadar hızlandı ki, insanlar eskisine göre herşeye daha çabuk ve kolay ulaşmaya başladı ve buna alıştı. İnternet hızı belirli bölgelerde çok yükseldi ancak tüm dünyada aynı hıza erişmek mümkün değil. Ayrıca Google’un belirttiğine göre mevcut internet trafiğininin yaklaşık %96 ‘sını JPG, GIF ve PNG formatındaki dosyalar oluşturuyor.

Bu sebeple Google ve diğer arama motorları web sitelerini indekslerken sadece içerik veya sayfa düzeninize değil sitenin yüklenme hızını da dikkate almaya başladı. SEO açısından büyük önem arz eden ve görsel kalitede kayıp yaşamadan Optimize Images çözümü nasıl yapılır hep birlikte öğrenelim.

Kullanılan Görsel (Image) Formatları

JPG

En bilindik görsel formatlarındandır. Ayıca görüntü kalitesi bozulmadan en fazla sıkıştırma imkanı veren formattır. JPEG (Joint Photographic Experts Group) olarak da bilinir. Bir depolama alanında daha fazla görsel saklayabilme imkanı tanıdığından fotoğraf makinelerinde en çok kullanılan formattır. JPG çok sayıda bilgiyi küçük bir dosya boyutu içinde depolama işlevi sağlayan bir görüntü formatıdır. JPG formatındaki görselleri kayıplı sıkıştırma yaparak oldukça küçük boyutlara getirme imkanınız vardır. Bu sebeple internet sitelerinde daha sık tercih edilir. Sıkıştırılınca oluşan bozulmalardan dolayı, Logo veya grafikler için pek fazla tercih edilmezler.

PNG

PNG (Portable Network Graphics) yani taşınabilir ağ grafikleri olarak adlandırılan görüntü formatıdır. Logo veya grafik dizayn aşamalarında çok tercih edilir. Çünkü PNG formatında bir görseli oluşturan bileşenler haricindeki alanlar görsel düzenleme uygulamaları ile açıldığında şeffaf olarak gösterilir. Bu sayede ilave kesme işlemleri ile uğraşmanıza gerek kalmaz.

PNG , GIF’e alternatif olarak oluşturulmuş bir görsel türüdür. Web görüntülerinde sıklıkla tercih edilir. Görselin sahip olduğu renk yelpazesiyle sıkıştırma olanağı sağlar. Ancak sıkıştırma performansı JPG kadar iyi değildir.

GIF

Hareketli görüntüler oluşturmak için kullanıldığı düşünülen GIF formatı aslında tek görselden oluşan bir görsel formatı olarak da kullanılır. GIF (Grafik Interchange Format) formatındaki görseller sıkıştırılırken sıkıştırma işlemi kayıpsız bir şekilde gerçekleşir. Bu nedenle de görselin sıkıştırılmış hali JPG kadar küçülmez. Bu format kısıtlı bir renk aralığına sahiptir bu nedenle fotoğrafçılık işlerinde pek tercih edilmezler. Günümüzde genel olarak animasyon oluşturmak için tercih ediliyor.

WEBP

Google tarafından geliştirilmiş bir görsel formatıdır. Hem kayıplı hem de kayıpsız sıkıştırma olanağı sağlar. Diğer formatlara göre daha fazla sıkıştırma olanağı sağlar.

WebP biçimindeki görseller;

Kaliteden ödün vermeden kayıpsız sıkıştırma olanağı sağlar.
Görüntüye ait meta bilgilerini (EXIF, XMP) de ekleyebilirsiniz.
Görselde PNG benzeri şeffaf alanlar oluşturmak mümkündür.
GIF formatı gibi animasyon oluşturmak mümkündür.

Görsellerin SEO Açısından Önemi

Görsellerin gördüğümüz kısmı haricinde arka planda sakladıkları bilgiler vardır. Bu detaylar görselin boyutunu da etkileyen faktörlerdendir. Görselin boyutunun masaüstü veya mobil formatta düzgün görüntülenmesi ziyaretçilerinizin hepsine standart bir deneyim sağlaması gerekir. SEO (Search Engine Optimization) açısından görselleri boyut, format ve isimlendirme tekniklerine dikkat ederek düzenlemek sitenizin performansına doğrudan katkı sağlar.

Görselleri kullandığımız alanlara bakarsak, görsel yönetiminin ne kadar özenle ve dikkatli yapılması gerektiğini daha iyi anlayabiliriz. Görselleri sıkça kullandığımız alanlar;

Ürün Sayfaları
Kategori Sayfaları
Ana Sayfa
Sosyal Medya Hesapları
Alışveriş Sepetine eklenen ürün görselleri
Bloglar
Facebook Reklamları

Kendimizi o kadar çok alanda görselle ifade ediyoruz ki. Bu yüzden görseller üzerinde uzun uzun düşünmek ve bazı ayarlamalar yapmamız gerekmektedir.

Görsel Boyutunun Önemi

Görsel boyutu, ölçeklendirme ve kapladığı alan olarak iki farklı açıdan değerlendirilmelidir. Kapladığı alan küçük olsa da bazı dosyalar oldukça yüksek pixel boyutlarıyla ayarlanmış olabilir. Genelde web siteleri yüklenen görselleri farklı ölçeklerde kopyalarını oluşturarak saklar ve yükleme yaparken bu formatların arasından uygun olanı seçerek gösterimini yapar.

Ancak bu işlemlerle zaman kaybetmesini önlemek için ölçeklendirmeye dikkat etmelisiniz.

Görsel Formatının Önemi

Görsel formatlarının özelliklerinden bahsederken kendinize uygun olan formatın hangisi olması gerektiğine karar verdiğinizi düşünüyoruz. Genel olarak format detayına pek dikkat etmeden görsel yüklüyoruz ancak ne kadar büyük bir fark yaratacağını söylemeye gerek yok. Web sitenize PNG formatında görsel yüklemeniz daha yoğun depolama alanı kullanımı ve site yüklenme hızında sorun yaşamanıza neden olacaktır. Ancak Logo ve diğer bazı grafikler için PNG en iyi alternatif gibi duruyor. Bu yüzden kullanacağınız görseli amacına göre sınıflamalısınız.

Görsel İsimlendirmenin Önemi

Görsellerle ilgili dikkat edilmesi gereken bir diğer konu görsele ait dosyaya verilen isimdir. Malum Google ‘ın bir görsel arama sistemi de var. Google bir konu ile ilgili kelime gruplarını kullanarak arama yaptığınızda o kelime gruplarını içeren görseller de listelenir.Görsele karışık, anlamsız kelime ve rakamlar kullanarak isim verdiğinizde Google aranan konu ile görseliniz arasındaki ilişkilendirmeyi gerçekleştiremez.

Bir konuyla ilgili görsel yüklerken konuyla alakalı isimlendirme yaparsanız görselin kendisi de arama etiketi işlevi görecek ve içeriğinizin indekslenmesinde daha iyi sonuç almanızı sağlayacaktır. Yükleyeceğimiz görseli isimlendirirken, konumuzdan örnek verirsek, “optimize-images-cozumu.jpg” biçimini kullanmalıyız. Her kelime arasına, kelimeleri birbirinden ayırmak için tire (-) koymalı ve kelimeler içinde Türkçe karakter kullanmamalıyız.

Optimize Images Çözümü Nedir?

WordPress Eklentileri ile Resimleri Optimize Etme

Bu işlemleri yapmanın birden fazla yolu ve yöntemi vardır. WordPress tabanlı bir web sitesine sahipseniz eklentiler yardımıyla da bu iş kısmen çözümlenebilir. WordPress üzerinde bu işe yarayan eklentilere örnek verirsek;

TinyPNG
Imagify
ShortPixel Image Optimizer
EWWW Image Optimizer
Smush

Web sitenizin kontrol panelinden yükleyeceğiniz bu eklentiler (Plugin) yoluyla otomatik olarak görsellerinizi optimize edebilirsiniz. Ancak görselin byte cinsinden küçültülmesinde çok fazla bileşen işlev görür. Ancak çoğunlukla bu eklentiler sadece sıkıştırma işlemi yapmaya odaklanır. Bu sebeple sadece eklentilere güvenmek yerine yapmamız gereken diğer işlemlere bakalım.

Görsel Yüklerken Dikkat Edilmesi Gerekenler

Görsel Optimizasyonu yaparken dikkat edilmesi gerekenler;

Görselleri web sitenizde kullanılacakları ölçeğe göre oluşturun, öyle değilse kırpma işlemiyle şekillendirin. Sizin yüklediğiniz görsellerin hazır olması durumunda büyük görsel indirip tarayıcı ile küçültme işlemi yapma gerekliliği ortadan kalkacaktır.
Görüntüleri en uygun görsel formatıyla yüklemeye çalışın. JPG formatı en sık kullanılan format gibi dursa da bazı durumlarda PNG yüklemek zorunluluğu da olabilir. Seçtiğiniz görselin işlevine göre formatını belirlemek akıllıca olacaktır. Özel bir durum yoksa JPG seçin. WebP formatı en iyi görsel formatı gibi dursa da eski ve güncel olmayan tarayıcılarda halen desteklenmediği için sorun yaratabilir.
Görselin sıkıştırıldığı zaman bozulmayacak boyutta olmasına dikkat edin. Eğer sıkıştırma işlemi sonucunda görselde bozulmalar oluyorsa bu sefer farklı bir sorunla uğraşmanız gerekecektir.
Bir diğer dikkat edilmesi gereken şey görsele ait son kullanıcının ihtiyacı olmayan meta verilerin kaldırılmasıdır. Kameralar, görsel düzenleme programları görsele bazı meta veriler iliştirirler. Bu bilgiler de görselin boyutunu gereksiz şekilde büyütür. Bu verilerden kurtulmak, diğer bir optimizasyon işlemidir. Bu işlem genelde sunucu tarafında çalışan frameworkler yardımıyla gerçekleştirilebilir.

Bahsi geçen konuların büyük bir kısmına bakıldığında işlemlerin daha görsel yüklenmeden yapılmasıdır. Yüzlerce görsel içeren bir internet sitesindeki optimizasyon profesyonel bilgi ve otomasyon gerektirir.

PHP Tabanlı Frameworkler

Görsel optimizasyonunda kullanılan diğer bir yöntem sunucu tarafında çalışacak PHP tabanlı Frameworklerdir. Bu Frameworkleri kullanabilmek için PHP dilini bilmeniz ve internet sitenize ait PHP kodlarına erişiminiz olması gerekiyor.

Yöntemi kullanırken dikkat etmeniz gereken şey genelde API şeklinde sunulan bu frameworkleri seçerken Image Optimization işlemini yaptıktan sonra optimize edilen görselin

Cache olarak saklanması gerekliliği. Bazı frameworkler bu desteği sağlamıyor.

Böyle bir durumda ise istemci tarafından internet sitesi her görüntüleme yapılmak istendiğinde görsellerin tekrar işlemden geçirilmesi, sisteme ait CPU ve RAM kaynaklarını gereksiz yere kullanmak zorunda bırakıyor. Bu olayın da farklı sorunlara yol açacağı kesin.

Bu Frameworkler genelde ücretli bir şekilde çalışıyor. Birden farklı paket seçeneği ile optimize edilecek toplam görsel boyutu üzerinden ödeme yapmanız isteniyor.