Websitesi Görüntü Optimizasyonu Nedir?
Websitesi Görüntü Optimizasyonu Nedir? Üstün kaliteli görüntüleri uygun formatta ve çözünürlükte sunarken, en az boyutta tutma işlemidir. Görüntü optimizasyonu doğru yapılırsa, yalnızca bir websitesinin 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örüntü optimizasyon süreci hızlandırılabilir. ImageEngine, görüntü 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örüntü Optimizasyonu”dur.
2021'de Mükemmel Görüntü Optimizasyonu İçin İpuçları
Bu makalede, görüntüleri optimize etmek için en iyi beş ipucu özetlenmiştir. Dahil edilen tüm ipuçları, kapsamlı araştırma ve görüntü optimizasyonu endüstrisindeki yılların deneyimi ile desteklenmektedir.
DOĞRU FORMAT ÖNEMLİDİR
Doğru görüntü formatının seçilmesi optimizasyon sürecinde çok önemlidir; çünkü, her format belirli bir gereksinime hizmet eder.
- JPEG: Hareketsiz görüntüler, gerçek dünya görüntüleri ve karmaşık renklendirme için en iyisi,
- PNG: Logolar ve düz görüntüler gibi web görüntüleri için en iyisi,
- GIF: Düşük çözünürlüklü görüntüler, hareketli grafikler, küçük simgeler ve basit görüntüler 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örüntü 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örüntü 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örüntü sunmak, bu günlerde trend olan bir uygulamadır.
GÖRÜNTÜ SIKIŞTIRMA YÖNTEMLERİ
Doğru format seçildikten sonra, görüntülerin boyutunu bir sıkıştırma yöntemiyle küçültmek önemli hale gelir. Görüntüleri sıkıştırmanın iki yöntemi vardır:
- Kayıpsız sıkıştırma: Bu sıkıştırma yönteminde, görüntülerle bağlantılı tüm gereksiz meta veriler, kaliteyi düşürmeden kaldırılır. Görüntüler bir web sitesinde veya uygulamada sergilenirken meta veriler güvenle silinebilir.
- Kayıplı sıkıştırma: Bu sıkıştırma yönteminde, daha küçük bir boyut elde etmek için görüntünün 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örüntü ile kayıplı sıkıştırılmış görüntü 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örüntü, hızlı bir şekilde taşınamıyorsa hiçbir işe yaramaz. Bir görüntü CDN'si (İçerik Dağıtım Ağı) bu ihtiyacı karşılar. Çevrimiçi ziyaretçiler ve sunucular arasındaki mesafeyi azaltarak optimize edilmiş görüntülerin 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örüntüsünü 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örüntüler 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örüntüleri 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örüntünün 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örüntünün 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örüntü içeriğinin kesintili bağlantılar için optimize edilmesi önerilir.
Görüntüleri düşük hızlı internet bağlantıları için optimize etmenin güvenilir bir yolu, görüntüleri gerçek zamanlı olarak uygun şekilde sıkıştırmaktır. Ancak, görüntüleri 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ÖRÜNTÜLERİ İŞLEME
Mobil cihazlardan çok fazla trafik geliyor ve bu nedenle, duyarlı görüntüler için mükemmel stratejiye sahip olmak önemlidir.
• Vektör tabanlı görüntüler kullanılıyorsa, SVG görüntüleri çözünürlükten bağımsız olduğundan, boyutlar hakkında endişelenmeden bunları herhangi bir görüntü 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örüntüler için srcset niteliğiveya 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örüntüleri 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örüntüleri ziyaretçilere göstermenin farklı yollarını sunar.
DUYARLI GÖRÜNTÜLER
Her ekran boyutu için en uygun görüntüyü sunmak için görüntülerin duyarlı olması gerekir. Kullanıcı deneyimini geliştirir ve yükleme süresini azaltır. Görüntülerin, görüntülendiği tarayıcıya veya cihaza göre, tam boyutlu, küçük resim veya öne çıkan görüntüler gibi farklı boyutlardaki alternatif sürümleri görüntülenir. Duyarlı bir görüntü oluşturmak için görüntünün farklı sürümlerine sahip olmanız gerekir.
Websitesi Görüntü Optimizasyonu Nedir? Ayrıntılarla harika görünen yüksek çözünürlüklü bir görüntüyü mobil cihazlarda görüntülerken optimize etmektir; ayrıntılar gözden kaçabilir, bu nedenle görüntü 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örüntülerin 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örüntü ister - istenen parametreye göre sunulacak görüntü oluşturulur. İstemci veri tasarrufu modunun etkinleştirildiğini bildirse bile, sunucu daha hafif bir sürümün aynı görüntülerini 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ÖRÜNTÜLERİ 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örüntüleri Neden Retina İçin Optimize Etmeliyiz?
Ortalama ekran piksel yoğunluğu oldukça düşüktür, bu nedenle web tabanlı standart görüntülerin 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örüntü sıkışacak veya uzayacaktır. Sonuç olarak, izleyiciyi markanızdan uzaklaştıran pürüzlü kenarlara sahip bulanık bir görüntü oluşturulur. Sorunu çözmek için Retina sınıfı ekranlar devreye girdi. Görüntü çözünürlüğünü artırdılar, küçük alanda yüksek piksel yoğunluğunu optimize ettiler ve hatta görüntüleri 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örüntülere masaüstü yerine akıllı telefonlardan erişiyor. Bu yüzden görüntüyü Retina ekranlar için optimize etmeniz gerekiyor.
ÖZETLE TOPARLAYALIM!
Websitesi Görüntü Optimizasyonu Nedir? Görüntüleri 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örüntü CDN'leri, bir işletmenin temel faaliyetlerine doğru şekilde odaklanması için optimizasyon sürecini otomatikleştirir. İşin iyi yanı, görüntü CDN'sini entegre etmenin çok pahalı olmamasıdır. Başlamak kolaydır ve sonuçları kısa sürede üretir.
