Görüntüleri Kaliteden Kaybetmeden Web İçin Optimize Etmeye Yönelik 5 İpucu

"Bir resim bin kelimeyi boyar" ifadesi, bir ürünün başarılı bir şekilde satılmasında bir görüntünün önemini göstermek için pazarlama girişimlerinde sıklıkla kullanılır. Bunun nedeni, müşterilerin yazılı içerikten çok ürün çizimlerine (bir ürünün kalitesini, rengini ve diğer özelliklerini anlamak için) güvenmeleridir. Web sitesi ziyaret oranlarınız, görsellerinin kalitesine bağlı olarak önemli ölçüde artabilir veya düşebilir. Bu nedenle, web sitenizde sağladığınız görsellerin yüksek çözünürlüklü ve net olması gerektiğini söylemeye gerek yok. Ancak, bir yakalama var.

Uygun olmayan şekilde dışa aktarılan düşük kaliteli görüntüler bir web sayfasında sıkıcı görünme eğilimindedir ve son derece yüksek kaliteli görüntüler sitenin yavaş yüklenmesine neden olur ve bu nedenle her iki durumda da kullanıcılarınızın etkileşimini kaybedersiniz. Araştırmalar, sitenin yüklenmesi 3 saniyeden uzun sürerse insanların %53'ünün bir mobil siteden ayrıldığını gösteriyor. Yüklenmesi çok uzun süren web siteleri, aynı zamanda, Google'ın web sitenizden nefret etmesine neden olan yüksek hemen çıkma oranlarından muzdarip olma eğilimindedir. Bu da SEO sıralamalarınızı büyük ölçüde etkiler.

Gördüğünüz gibi, web sitesinin performansı ile birlikte konuşma oranlarınızı artırmak ve SEO sıralamalarınızı korumak için sayfa yüklenme sürenizi azaltmak son derece önemli olacaktır. Görüntüler, bir web sitesinin yükleme süresinin önemli bir bölümünü oluşturduğundan. Web sitelerinin yükleme süresini iyileştirmek ve buna bağlı olarak SEO'yu iyileştirmek için görüntü kalitesi ve görüntü dosyası boyutu arasında mükemmel bir denge bulmak önemli hale gelir.

Resimlerinizi web için optimize etmek için kullanabileceğiniz bazı püf noktaları ve teknikler vardır, böylece bu boşluklar ve yavaş yüklenen yüksek çözünürlüklü fotoğraflar, ziyaretçilerinizi hayal kırıklığı içinde geri çevirmez. Her grafiğin güzel, canlı ve göze hoş geldiğinden emin olmak için resimlerinizi optimize etmenin bu birinci sınıf beş yoluna bir göz atın.

1. Görüntüleri uygun renk uzayında kaydedin

Bilgisayarlar, görüntüleri görüntülemek için iki renk alanı kullanır; RGB ve CMYK. Kırmızı, Yeşil ve Mavi anlamına gelen RGB, kamera ve bilgisayar gibi dijital aygıtlar tarafından kullanılan varsayılan renk alanıdır. Bunun yanı sıra, genellikle yazıcılarda kullanılan bir başka renk profili olan CMYK (camgöbeği, macenta, sarı ve siyah anlamına gelir) ile de karşılaşacaksınız. Bu görselleri web siteniz için kullanmak istiyorsanız görselin canlı ve parlak görünmesi için renkleri RGB'ye çevirmeniz şart olacaktır.

CMYK görüntüsünü RGB'ye dönüştürmek için Illustrator veya Adobe Photoshop gibi yazılımları kullanabilirsiniz. Örneğin, sisteminizde Photoshop yüklüyse, menü çubuğunuzdaki "Görüntü" seçeneğine gidin ve açılır "Mod"u seçin ve RGB rengini seçin. Ardından dosyayı kaydetmek için Dosya bölümünü ziyaret edin. Düzenlemeyi bitirdiğinizde renklerin daha parlak ve canlı göründüğünü anında fark edeceksiniz.

2. Dosya boyutlarını sıkıştırın

Görüntü kalitesi büyük ölçüde son dosya boyutu ve sıkıştırma ayarları gibi faktörlere bağlıdır. Ayrıca, görüntülerin keskin olduğundan ve pikselli olmadığından emin olmanız gerekir. Görüntüyü web'den kaydederken, yüksek sayfa yükleme hızlarını korumak için dosya boyutunun 2 MB'den (2048 kilobayt) az olduğundan emin olun.

Doğru sıkıştırma ayarlarıyla, optimum dosya boyutuyla birlikte iyi görüntü kalitesi elde edebileceksiniz. Genellikle, pikselleşmeyi önlemek için, dosyayı %70-80'lik bir görüntü sıkıştırma düzeyiyle veya tek tek renk noktalarıyla kaydetmeyi deneyebilirsiniz. Ancak, sıkıştırma miktarının orijinal görüntünün biçimini ve dosya boyutunu içeren bir dizi faktöre göre değişeceğini unutmamalısınız. Dosya boyutunu daha da sıkıştırmak istiyorsanız Imagify gibi ücretsiz araçları kullanabilirsiniz.

3. Doğru dosya biçimini kullanın

Görüntüleri ve grafikleri web'den kaydetmek için kullanabileceğiniz başlıca dört ana dosya türü vardır: PNG, GIF, JPG ve SVG. Bu biçimlerin her birinin dezavantajları, yararları ve kullanım amacı vardır ve bu resimleri biçimlendirmeye başlamadan önce belirli görüntü türünü bilmeniz gerekir.

Öncelikle dosyanızın raster mi yoksa vektör görüntü mü olduğunu kontrol etmeli ve dosyayı buna göre kaydetmelisiniz. Raster görüntüler genellikle bir kamera veya piksel tabanlı programlarla oluşturulmuş tarayıcılar ile yakalanır. Bu tür görüntülerin sınırlı sayıda pikseli vardır ve daha büyük bir biçime ölçeklemeye çalıştığınızda kalitelerini hızla kaybeder. Raster görüntüler için en uygun PNG, JPEG ve JPG biçimleri.

Öte yandan, Vektör grafikleri vektör yazılımı ile oluşturulur ve sonsuz boyutta olabilir (bu da kaliteyi kaybetmeden). SVG ve GIF dosya biçimleri, vektör görüntüleri için en uygun olanıdır, ayrıca JPG veya PNG olarak da kaydedilebilir. Ancak ikinci durumda, grafiğinizi sonsuza kadar ölçekleme yeteneğinizi kaybedebilirsiniz.

4. Birden çok görüntü boyutunu dışa aktarın

Mobil cihazlar tipik masaüstü bilgisayarlara göre daha yüksek çözünürlüklü ekranlara sahip olduğundan, kullanıcılar dijital içeriği görüntülemek için çoğunlukla mobil cihazları kullanmayı tercih ediyor. HiDPI, Retina teknolojisine sahip bu yüksek yoğunluklu ekranlar, çoğu masaüstü bilgisayar için standart 72 PPI olduğunda, inç başına 200 pikselden (PPI) fazladır. Bir kişi 72 PPI'lık bir görüntüyü bilgisayarda görüntülemek yerine mobil cihazında görüntülerse, daha fazla pikselle kaydedilmiş bir görüntüye kıyasla net görünmeyecektir.

İşte resim kalitenizin hem mobil hem de masaüstü tarayıcılar için uygun olmasını sağlamanın etkili bir yolu:

Resminizi @2x ve @3x ölçeklerinde dışa aktarın, yani resminizin revize edilmiş versiyonu 2x (%200) veya 3x (%300) olacaktır.

orijinal boyut. Bu, kullanıcının mobil web tarayıcısının görüntüyü aynı alanda orijinal boyutunun 2 katı veya 3 katı olarak otomatik olarak görüntülemesine olanak tanır.

5. Görüntü kaynağını açıklamak için alternatif metni kullanın

Alternatif metinler veya alt nitelikler olarak da bilinen alternatif metinler, görüntünün kaynağı hakkında bilgi veren HTML kodlarında yazılmış kısa ifadelerdir. Google, alt metin resimlerini nispeten yüksek bir değere yerleştirir, çünkü bu resimler yalnızca hedef kitlenizi memnun etmenin temel amacına hizmet etmekle kalmaz, aynı zamanda web sitelerinizin SEO optimizasyonlarında hayati bir rol oynar. Bunun nedeni, Google'da üst sıralarda yer almak için SEO anahtar kelimelerine metin ve kelime öbekleri ekleme fırsatına sahip olmanızdır. Örneğin, alternatif metni olmayan bir HTML kodu, https://pexels.com/photo/dog şeklinde görünür.
alt metin dahil edildiğinde, şu şekilde görünür:

<img src=http://pexels.com/photo/dog.jpg alt=“köpek-oyun-in-the-stairway”>

Bu alternatif metinler, görme engelli web sitesi okuyucuları için de yararlıdır. Ekran okuyucu, bu alternatif metinleri yüksek sesle okur ve sayfadaki görüntünün işlevinin yanı sıra görüntünün ne hakkında olduğunu açıklar. Ayrıca yavaş internet bağlantısı olan kullanıcıların fotoğrafın içeriğini anlamalarına yardımcı olur ve bu süreçte hemen çıkma oranlarınızı azaltır.

Ayrıca, resim kalitesinden çok fazla ödün vermeden web sitenizin resimlerini optimize etmek için kullanabileceğiniz kompresPNG.com, Smush.it, webresizer.com vb. gibi çeşitli çevrimiçi platformlar da vardır.

Çok uğraştıracak gibi görünüyor, neden rahatsız ediyorsun?

Pekala, daha önce tartışıldığı gibi, büyük resimlerin web sitelerinin yüklenme süresi üzerindeki etkisi, büyümenize zarar verecektir. Ve bunun yanı sıra, aşağıdaki yansımaları da hesaba katmalısınız,

 Google, veriye aç, yavaş web sitelerini cezalandıracak ve onlara SERP sonuçlarında daha düşük bir öncelik verecektir.

 Büyük resimler, önemli miktarda sunucu alanı kaplar ve bu da sonunda size daha fazla paraya mal olur.

 Web sayfanız ne kadar büyükse, kullanıcılarınızın görüntülemek ve hemen çıkma oranlarınıza eklemek için o kadar fazla veriye ihtiyacı olacaktır (çünkü kısıtlı mobil veri iznine sahip kullanıcı sitenizde çok uzun süre kalma konusunda şüpheci olacaktır)

Algıladığım şekilde, görüntü optimizasyonu esas olarak web sitenizin kullanıcılarına saygı duymakla ilgilidir. Kitleniz, kaygan ve hızlı bir deneyimi takdir etmek zorundadır ve sayfanıza tekrar tekrar dönme olasılığı daha yüksektir. Ve tabii ki, hızlı yüklenen, mobil uyumlu siteler arama motorları tarafından oldukça beğenildiği için Google tarafından takdir edilecektir.

Söylemeye gerek yok, sıkıştırma seviyeniz, resimlerinizin karmaşıklığına göre değişmeye devam edecektir. Bu blog, gerekli optimizasyonları minimum sürede gerçekleştirebilmeniz için size temel stratejileri sağlamayı amaçlamaktadır. Bununla birlikte, internette bir sürü bilgi mevcut ve bilginizi geliştirmek istiyorsanız, arama motorunuza “kaliteden ödün vermeden web için görüntü optimizasyonu” yazın ve hemen dalın.