Web Sitesi Görsel Optimizasyonu, üstün kaliteli görselleri uygun formatta ve çözünürlükte sunarken, en az boyutta tutma işlemidir. Görsel optimizasyonu doğru yapılırsa, yalnızca bir web sitesinin performansını değil, aynı zamanda aşağıdakiler gibi bazı diğer ölçümleri de geliştirir:

• Sayfa yükleme hızı,
• SEO sıralaması,
• Dönüşüm oranı,
• Kullanıcı etkileşimi,
• Kullanıcı deneyimi,
• Kaynak indirme süresi.

Bununla birlikte, bazı modern ipuçları izlenirse daha iyi verimlilik için görsel optimizasyon süreci hızlandırılabilir. ImageEngine, görsel optimizasyonu endüstrisindeki uzun yıllara dayanan tecrübesiyle, 2021 yılı ve sonrasında işletmelere yardımcı olabilecek bazı ipuçlarını özenle seçti.

Hız ihtiyacı, bugünlerde her web sitesinin yapılacaklar listesinde önemli bir öğedir. Artan hız, ziyaretçi trafiği için ödeme yapan hosting müşterilerine maliyet tasarrufu olarak doğrudan etki eder.

Herhangi bir sektördeki herkes, gelişmiş bir kullanıcı deneyimi sağlayarak web sitelerinin yükleme hızını artırmak ister. Ayrıca, artan site hızlarının aynı zamanda web sitesinin sıralamasını arama motoru sonuç sayfalarında daha rekabetçi noktalara yükselttiğini ve temel web hayati değerlerini iyileştirdiğini unutmayın.

Peki, bu hız ihtiyacı nasıl karşılanabilir? Cevap görsel optimizasyonudur.

2021’de Mükemmel Görsel Optimizasyonu İçin İpuçları

Bu makalede, görselleri optimize etmek için en iyi beş ipucu özetlenmiştir. Dahil edilen tüm ipuçları, kapsamlı araştırma ve görsel optimizasyonu endüstrisindeki yılların deneyimi ile desteklenmektedir.

DOĞRU FORMAT ÖNEMLİDİR

Doğru görsel formatının seçilmesi optimizasyon sürecinde çok önemlidir; çünkü, her format belirli bir gereksinime hizmet eder.

• JPEG: Hareketsiz görseller, gerçek dünya görselleri ve karmaşık renklendirme için en iyisi,
• PNG: Logolar ve düz görseller gibi web görselleri için en iyisi,
• GIF: Düşük çözünürlüklü görseller, hareketli grafikler, küçük simgeler ve basit görseller için en iyisi ancak GIF biçimini kullanmanız önerilmez, bunun yerine mp4 veya webp kullanmanız önerilir,
• WebP: Mükemmel kaliteyi korurken üstün sıkıştırma sunan modern bir görsel formatı.

Doğru formatı seçmek, daha iyi bir web sayfası yükleme hızı için bant genişliği tüketimini azaltır.

Ancak, kulübe yeni bir format katıldı: AVIF, yukarıdaki tüm görsel formatlarının iyi niteliklerini kapsar ve mükemmel bir sıkıştırma oranını korurken WebP’yi bile geride bırakır. AVIF, JPEG formatına kıyasla boyutta neredeyse %50 tasarruf sağlar. WebP ve AVIF gibi yeni nesil formatlarda görsel sunmak, bu günlerde trend olan bir uygulamadır.

GÖRSEL SIKIŞTIRMA YÖNTEMLERİ

Doğru format seçildikten sonra, görsellerin boyutunu bir sıkıştırma yöntemiyle küçültmek önemli hale gelir. Görselleri sıkıştırmanın iki yöntemi vardır:

1. Kayıpsız sıkıştırma: Bu sıkıştırma yönteminde, görsellerle bağlantılı tüm gereksiz meta veriler, kaliteyi düşürmeden kaldırılır. Görseller bir web sitesinde veya uygulamada sergilenirken meta veriler güvenle silinebilir.

1. Kayıplı sıkıştırma: Bu sıkıştırma yönteminde, daha küçük bir boyut elde etmek için görselin kalitesi biraz düşürülür. Kayıplı dönüştürmede elde edilen dosya boyutu kayıpsız sıkıştırmadan daha düşüktür, ancak çıplak insan gözü orijinal görsel ile kayıplı sıkıştırılmış görsel arasındaki farkı ayırt edemez.

CDN’YE YÖNELİN

Web sitesi resimlerinin yalnızca optimize edilmesi değil, aynı zamanda hızlı ve kolay bir şekilde sunulması da gerekir. Optimize edilmiş bir görsel, hızlı bir şekilde taşınamıyorsa hiçbir işe yaramaz. Bir görsel CDN’si (İçerik Dağıtım Ağı) bu ihtiyacı karşılar. Çevrimiçi ziyaretçiler ve sunucular arasındaki mesafeyi azaltarak optimize edilmiş görsellerin hızlı bir şekilde sunulmasını mümkün kılar.

 

 

Küresel imaj CDN’si ayrıca aşağıdakiler gibi bir dizi başka avantajlar da sunar: 

• Bulut hızlandırma yoluyla hızlı küresel erişimi etkinleştirme,
• Kitle segmentasyonu (cihaz görünümüne dayalı olarak) kolaylaşır,
• Dünyanın farklı yerlerinde ayrı sunucu sağlayıcılarına yatırım yapma ihtiyacını ortadan kaldırarak birçok maliyet tasarrufu sağlar,
• Düşük teslimat maliyeti elde etmek için sunucu üzerindeki yükü aşağı çeker,
• Güvenli depolama kapasitesi.

TARAYICI ÖNBELLEĞE ALMA

Yerinde önbelleğe alma kuralı olmadığında veya sona erme süresi çok düşük ayarlandığında Google PageSpeed ​​Insights aracında “Tarayıcıyı Önbelleğe Almadan Kaldır” uyarısı görüntülenir. Basit bir ifadeyle bu uyarı, web sitesi hızını artırmaya yönelik bir öneridir.

Tarayıcı önbelleğe alma, ziyaretçinin tarayıcısına bazı belirli dosyaları tekrar tekrar indirmek yerine, ziyaretçinin yerel sistemine kaydetmesi talimatını verir. Örneğin, bir ziyaretçinin ilk ziyaretinde bir web sitesinin logo görselini indirmesi gerekir. Ancak, sonraki her ziyaretten sonra, bu tür bir ziyaretçi, tarayıcı önbelleğe almanın etkinleştirilmiş olması koşuluyla, logo dosyasını web sitesinin yerel önbelleğinden yükler. Sonuç? Daha hızlı yükleme, çünkü ziyaretçinin artık her şeyi doğrudan web sitesinin sunucusundan alması gerekmemektedir. Tarayıcı önbelleğe alma, görseller ve istatistiksel kaynaklar ve nesne verileri gibi diğer birçok dosya türü için kullanılabilir.

Tarayıcı önbelleğinden yararlanmanın birçok yolu vardır, ancak aşağıdaki kod satırlarını .htaccess dosyasına eklemek en etkili olanıdır:

 

 

Tarayıcı önbelleğe alma, kolay ve hızlı erişilebilirlik için görselleri belirli bir zaman aralığında saklar. Bu amaçla özel bir zaman çizelgesi veya endüstri standartları izlenebilir. Yukarıda paylaşılan kod parçasındaki zaman çizelgesi bir yıldır.

BAĞLANTIYI DEVRE DIŞI BIRAK

Hotlink, bir kişinin veya işletmenin, başka bir web sitesine ait bir görselin URL’sini kopyalayıp web sitesine yerleştirmesi anlamına gelir. Bu, görselin sahip olunan bir içerikmiş gibi görüntülenmesine neden olur. Hotlinking, telif hakkı ihlalinin kapı komşusudur, ancak bu gerçeğe rağmen, uygulama yaygındır. Çoğu durumda, hotlink istenmeden yapılır, ancak görselin orijinal sahibine biraz paraya mal olabilir. Sunucu kaynaklarının tükenmesi durumunda web sitesinin performansını bile etkileyebilir.

KESİNTİLİ VE DÜŞÜK HIZLI İNTERNET BAĞLANTILARI İÇİN OPTİMİZE EDİN

Bir web sitesinin sunabileceği çok sayıda içerik ve zengin görsel varsa, ancak web sitesini ziyaret eden kullanıcıların bir kısmının güvenilir bir internet bağlantısı yoksa, ziyaretçilerin bu kısmı dönüşüm sağlamayacaktır. Bu durum, kaybedilen herhangi bir iş fırsatından farklı değildir. Tüm web sitesi ziyaretçilerinin hızlı ve güvenilir internet olanaklarına erişimi yoktur; bu nedenle, görsel içeriğinin kesintili bağlantılar için optimize edilmesi önerilir.

Görselleri düşük hızlı internet bağlantıları için optimize etmenin güvenilir bir yolu, görselleri gerçek zamanlı olarak uygun şekilde sıkıştırmaktır. Ancak, görselleri sıkıştırmadan önce bile, sayfayı ziyaret eden kullanıcıların ağ hızlarını belirlemek ve ardından bunları 4G, 3G, 2G veya yavaş 2G gibi bağlantı türlerine göre gruplara ayırmak önemlidir.

DUYARLI GÖRSELLERİ İŞLEME

Mobil cihazlardan çok fazla trafik geliyor ve bu nedenle, duyarlı görseller için mükemmel stratejiye sahip olmak önemlidir.

• Vektör tabanlı görseller kullanılıyorsa, SVG görselleri çözünürlükten bağımsız olduğundan, boyutlar hakkında endişelenmeden bunları herhangi bir görsel alanı için optimize etmenin harika bir yolu SVG formatı kullanmaktır.
• Arka plan resimleri veya CSS ile üretilmiş resimler için medya sorgularını kullanmak, daha küçük resimleri mobil cihazlarda göstermenin en iyi yoludur.
• Satır içi görseller için srcset niteliği veya resim öğesi gibi teknikler kullanılabilir.

srcset özniteliği : Bu öznitelik, tarayıcının genişlik gibi cihaz özelliklerine göre en iyi seçeneği seçebilmesi ve görselleri farklı boyutlarda tanımlamak için img öğesinde uygulanabilir.

resim öğesi : Bu, cihazın ekran boyutuna bağlı olarak farklı resimlerin gösterilmesi gerekiyorsa kullanılması en iyi seçenektir.

Yukarıda bahsedilen tüm seçenekler, web sitesini nasıl görüntülediklerine bağlı olarak, optimize edilmiş görselleri ziyaretçilere göstermenin farklı yollarını sunar.

DUYARLI GÖRSELLER

Her ekran boyutu için en uygun görüntüyü sunmak için görsellerin duyarlı olması gerekir. Kullanıcı deneyimini geliştirir ve yükleme süresini azaltır. Görsellerin, görüntülendiği tarayıcıya veya cihaza göre, tam boyutlu, küçük resim veya öne çıkan görseller gibi farklı boyutlardaki alternatif sürümleri görüntülenir. Duyarlı bir görsel oluşturmak için görüntünün farklı sürümlerine sahip olmanız gerekir.

Web sitesi Görsel Optimizasyonu Nedir? Ayrıntılarla harika görünen yüksek çözünürlüklü bir görseli mobil cihazlarda görsellerken optimize etmektir; ayrıntılar gözden kaçabilir, bu nedenle görsel ayrıntılarını küçültmek yerine, mobil cihazlar için görüntüyü kırpmayı veya küçültmeyi düşünün.

Duyarlı görsellerin avantajları:

1. Sayfa yükleme hızını iyileştirir,
2. Akıllı telefona duyarlı tasarımla erişiminizi artırır,
3. Tutarlı kullanıcı deneyimi ile ziyaretçi dönüşüm / satış oranını artırır,
4. Sunucu ve sunucu belleği üzerindeki yükü azaltır.

İSTEMCİ (CLIENT) İPUÇLARI

İstemci ipuçlarının temeli basittir istemci bir cihaz aracılığıyla sunucuya gereksinimle ilgili bazı ipuçları gönderir. Sorumlu sunucu, ipucuna göre doğru kaynakla onlara hizmet eder.

Örneğin; ipuçlarıyla tarayıcılar sunucudan cihaz düzeni için 600 piksel görsel ister ve istenen parametreye göre sunulacak görsel oluşturulur. İstemci veri tasarrufu modunun etkinleştirildiğini bildirse bile, sunucu daha hafif bir sürümün aynı görsellerini sunar. Tarayıcı ve sunucu, İstemci İpuçları aracılığıyla etkileşime girer, iş okunabilir hale gelir, aynı işlevsellik ile zaman kısalır.

GÖRSELLERİ RETİNA EKRANLAR İÇİN OPTİMİZE EDİN

Apple, uygun bir görüş mesafesinden mükemmel görüş sağlamak için net ve yoğun şekilde paketlenmiş pikselleri görüntüleyen “retina ekranlar” terimini kullandı. Artık çoğu akıllı telefon ve masaüstü bilgisayar, kullanıcılara yüksek düzeyde uygun bir görüntüleme deneyimi sunuyor. Retina’lı Apple, inç başına 326 piksel (PPI) yoğunluğu oluşturmak için piksellerin dört katını aynı alana sıkıştırarak ekranları pürüzsüz hale getirdi.

Görselleri Neden Retina İçin Optimize Etmeliyiz?

Ortalama ekran piksel yoğunluğu oldukça düşüktür, bu nedenle web tabanlı standart görsellerin belirli bir yükseklik ve genişliği kapsaması için 72 PPI içermesi gerekir. Uygun piksel yoğunluğunu korumamız gerekiyor. Aksi takdirde, görsel sıkışacak veya uzayacaktır. Sonuç olarak, izleyiciyi markanızdan uzaklaştıran pürüzlü kenarlara sahip bulanık bir görsel oluşturulur. Sorunu çözmek için Retina sınıfı ekranlar devreye girdi. Görsel çözünürlüğünü artırdılar, küçük alanda yüksek piksel yoğunluğunu optimize ettiler ve hatta görselleri büyük ekranlarda düzgün bir şekilde görüntülediler.

İnsanlar bugünlerde farklı bir cihazdan göz atıyor; çoğu kullanıcı görsellere masaüstü yerine akıllı telefonlardan erişiyor. Bu yüzden görseli Retina ekranlar için optimize etmeniz gerekiyor.

ÖZETLE TOPARLAYALIM!

Web sitesi Görsel Optimizasyonu Nedir? Görselleri optimize etmek için birçok ipucu ve püf noktası vardır, ancak tüm bu ipuçlarından CDN kullanmanın dünyanın her yerindeki birçok işletme için en etkili ve uzun vadeli çözüm olduğu kanıtlanmıştır. Görsel CDN’leri, bir işletmenin temel faaliyetlerine doğru şekilde odaklanması için optimizasyon sürecini otomatikleştirir. İşin iyi yanı, görsel CDN’sini entegre etmenin çok pahalı olmamasıdır. Başlamak kolaydır ve sonuçları kısa sürede üretir.