Web sitenizin sayfa hızını ve SEO'sunu iyileştirmek için görüntüleri nasıl optimize edebilirsiniz?

SaaS SEO stratejileri için canlı ve şu anda hazırlanmış web sayfalarına bakarken gördüğüm yaygın bir hata, resimlerin genel olarak web sitesi sağlığı ve hızı için yetersiz şekilde optimize edilmiş olmasıdır. Hepimiz "Bir resim bin kelimeye bedeldir" sözünü duymuşuzdur. Klişe olsa da doğrudur ve belki daha da değerlidir.

Görüntüler dikkatimizi çeker ve gördüklerimizle ilişki kurmamıza yardımcı olur. Bir hikaye oluştururlar ve yalnızca büyük bir metin gövdesinden çok daha kalıcı bir izlenim bırakma eğilimindedirler. Birçok insan, Unsplash gibi telif hakkı olmayan stok fotoğraf sitelerinden stok görseller almayı sever.

Google, hızlı sayfalara son derece öncelik verir. Görüntü optimizasyonu için gerekli adımları göz ardı ederek kendinizi zorlu bir savaşa hazırlıyorsunuz. Bir sayfaya eklenen resim sayısı, yükleme hızı süresini doğrudan etkiler. Bir sayfada ne kadar çok resim varsa, yükleme hızı o kadar yavaşlar. Bu kılavuzda, resimleri sayfa hızı ve arama motorları için optimize ederken uyguladığım 5 adımı inceleyeceğiz.

Resminizi kırpma ve yeniden boyutlandırma

Varsayılan olarak, indirdiğimiz fotoğraf çok büyük ve kaliteli. Bu görüntünün ne kadar büyük veya hangi çözünürlükte olacağına karar vermek, görüntünüzün görüntüleneceği en büyük boyuta göre belirlenir. İnsanlar müşterilerini ve hatta kendilerini etkilemek için en kaliteli imaja sahip olduklarını düşünürler ancak bu çok olumsuz etkinin farkına varmazlar. Görüntünün hangi boyutta olması gerektiğine karar verirken, görüntünün görüntüleneceği en büyük boyutu düşünün.

Yalnızca küçük bir profil resmi veya 300 x 300 pikselde görülecek bir vesikalık fotoğraf için kullanılacaksa, resim boyutlarının 6000 x 6000 piksel olması gerekmez. Tecrübelerime göre, sayfadaki en büyük resmin en üstteki kahraman resmi olacağını buldum. Kaliteyi korurken içinde kalmak için güvenli bir boyut, onu 1920 x 1080 piksellik standart yüksek tanımlı boyut yapmak olacaktır.

İpuçları ve püf noktaları: Bir blog veya web sayfası için bir başlık resmi olmasını istediğinizden biraz daha düşük kalitede görünüyorsa, şeffaf bir kaplama uygulamayı düşünün. Bu, tasarımın bir parçası gibi görünmesini sağlayacak ve herhangi bir metnin okunmasını kolaylaştıracaktır.

Aşağıda, resmimi yeniden boyutlandırmak ve kırpmak için Figma kullanıyorum. İşlem çok kolaydır çünkü tek yapmanız gereken sürükleyip bırakmak ve ardından görüntüyü beğeninize göre değiştirmek. Pencerelerde Figma kullanarak resminizi düzgün bir şekilde düzenlemek için ihtiyacınız olan iki kontrol.

• Shift + Sürükle - Aynı oranı korurken tüm görüntüyü yukarı veya aşağı ölçeklendirir.
• Ctrl + Sürükle - Görüntüyü uzatmadan yalnızca yüksekliği veya uzunluğu değiştirir.

Farklı dosya türleri olarak dışa aktarma

Ne tür bir dosya biçimi kullanmak isteyeceğinizi düşünmek önemlidir. Birçok format farklı amaçlara hizmet edebilir. Her biri, kullanıcının görüşüne bağlı olarak kendi artıları ve eksileri ile birlikte gelir. İşte genellikle gördüğüm en yaygın olanlardan sadece birkaçı:

• PNG - Küçük ayrıntılarını görmeniz gereken grafik tasarımlar veya resimler için iyi Bu, daha büyük bir dosya boyutu pahasına gelir.
• JPEG - Kişilerin ve konumların gerçek hayattaki fotoğrafları için. Çok daha fazla sıkıştırılabilir, ancak bunlarda fazla ayrıntıya ihtiyacınız olmadığı için biraz daha fazla bilgi kaybeder.
• SVG - Simgeler ve logolar için harika, çünkü bunlar kaliteden ödün vermeden yukarı ve aşağı ölçeklenebilir. Bu, yalnızca oluşturulan görüntü dosyaları üzerinde çalışabilir.
• WEBP - PNG ve JPEG'in yerini alabilecek daha yeni bir resim sürümü. WEBP, her ikisine de benzer görüntü kalitesine sahiptir ve alandan %25-40 oranında tasarruf sağlar. Tek dezavantajı şu anda Apple'ın Safari tarayıcısının bunu desteklememesidir, bu nedenle yüklemek için yedek JPEG'lere veya PNG'lere ihtiyacınız olacaktır.
• GIF - Bunlar, bir döngüde oynama eğiliminde olan video veya animasyon klipleridir. Bunlar, bir sahneyi yakalamak veya bir ürünün arayüzünün nasıl çalışabileceğini göstermek için iyidir. Bu makale, bunların nasıl kullanılabileceğine dair bazı iyi örnekler vermektedir. Animasyonlu bir görüntü dizisi olduklarından, genellikle tek bir görüntüye kıyasla daha ağır bir dosya boyutu olacaktır.

En az veri gerektirdiğinden, mümkün olduğunca JPEG kullanmaktan zevk alıyorum ama burada ekran görüntülerinde biraz daha netlik sağlamak için PNG'leri kullanıyorum. WEBP'de olduğu gibi, daha da yeni biçimler olabilir, bu nedenle, web sayfanız için en hızlı ve en iyi yanıtı bulmak için Google'ın mevcut her birini nasıl görüntülediğini ve sıraladığını sürekli olarak araştırmak en iyi uygulamadır. İşte en popüler görüntü türleri hakkında daha ayrıntılı bir kılavuza bağlantı.

Bir görüntü sıkıştırıcı kullanın

Bir sonraki adım, dosya boyutunu sıkıştırıp küçülterek elinizdeki dosyayı mümkün olduğunca küçültmeye çalışmak olacaktır. Bir görüntü sıkıştırıcıya giderek ve görüntüyü işleyerek, bazen görüntümüzün dosya boyutunda %90'a kadar daha küçük olmasını sağlayabiliriz. Kullanmayı sevdiğim gerçekten kullanışlı bir araca Kompresör denir. Bu aracı kullanarak, ücretsiz planında günde 50'ye kadar görüntüyü sıkıştırabilirsiniz.

Burada dışa aktardığım resmi çekiyorum ve onu doğrudan resim bırakma bölümüne sürüklüyorum. Birkaç saniye sonra, yeni görüntü indirilmeye hazırdır ve orijinal boyutunun yaklaşık onda birinden daha azdır. Ayrıca, alttaki seçenekle gösterildiği gibi birden fazla görüntüyü içe aktarabilir ve hepsini bir kerede indirebilirsiniz.

Resimlerinizi yükleme "Tembel" ve "Hevesli"

Artık resminizi doğru biçimde ve doğru boyutta sıkıştırdığınıza göre, hazır olduğunuzu düşünebilirsiniz, ancak yine de emin olmanız gereken birkaç şey daha var. Birçok şablonda ve web sitesinde, resim yükleme hızı, tarayıcının varsayılanı tarafından yüklenecek şekilde ayarlanmıştır; bu, sayfadaki tüm resimlerinizin aynı anda yüklenmesine neden olabilir. Bunun çözümü, görüntüyü tembel olarak yüklemektir.

"Tembel" yükleme, öğeyi sayfada görünene kadar yüklemeyi erteler. Birkaç görselden fazlasına sahip olduğunuzda bu, site performansını iyileştirebilir. Bunun tersi, elemanı hemen yükleyen "İstekli" yüklemedir. Hangi görüntünün ilk veya son olarak yükleneceğine ilişkin bir tercih ayarlanmadığından, bu genellikle varsayılan web ayarıyla uyumludur.

İşte HubSpot blog düzenleyicisinde bir örnek. Eklenen resim için gelişmiş seçeneğe gittikten sonra, yükleme ayarını yapabileceğimizi görebiliriz. “Tembel”i seçin ve uygula düğmesine basın. Görüntü artık, kullanıcı ona çok yaklaştığında ve bu değerli yükleme sürelerini kısalttığında beliriyor.

Alternatif metin eklemeyi unutmayın

Ziyaret edilecek son şey, resimlerinize Alt metin eklemektir. Bu, sayfa yükleme hızınızı etkilemeyebilir, ancak dikkate alınması ve eklenmesi her zaman önemlidir. Bu bölümü boş bıraktığınızda, SERP sıralamalarınızı yükseltmek için birçok fırsatı kaçırıyorsunuz.

Unutulmaması gereken önemli bir nokta, Alt metnin, görselin içerikle ilgili "nedenini" açıklamasıdır. Google tarafından indekslenir ve görme engelliler için metinden konuşmaya sesli olarak okunur. Görüntüye, neler olduğunu açıklamayan tek bir anahtar kelimeyi dolduruyorsanız, bu en iyi yaklaşım olmayabilir.

Burada alt metni görsele ekledim. Bunu, SEO sayfa hızı sağlığı ibaresine dayandırıyorum. Yalnızca anahtar kelimeyi eklemek yerine, eylemin nasıl veya ne olduğunu görselde de açıklayın. “Grafikler kullanarak SEO sayfa hızı sağlığını kontrol etme” ifadesini kullanarak detaylandırmaya karar verdim.

Bu, görselin Google indekslemesi için ne hakkında olabileceği konusunda çok daha bilgilendiricidir ve görme engelliler için daha fazla erişilebilirlik sağlar.

Görüntü oluşturma/optimize etme adımlarını gözden geçirelim:

1. Kırpmak ve yeniden boyutlandırmak için resmi Figma gibi bir resim düzenleyiciye sürükleyin.
2. Uygun görüntü türü olarak dışa aktarın (PNG, JPEG, SVG, WEBP, vb.)
3. Compressor veya Image Resizer Online gibi bir görüntü sıkıştırma sitesine götürün
4. Sıkıştırılmış görüntüyü içeriğinize tembel yükleme olarak ekleyin.
5. Sayfanızdaki resimleri açıklayan alternatif metin ekleyin.
6. Artık siteniz için mükemmel bir görüntüye sahipsiniz!
7. Performans artışlarınızı kontrol etmek için Google Arama Konsoluna göz atın.

Bu adımları izleyin ve resimlerinizi SEO için bakım ve optimize etme ve sayfa hızınızı hızlandırma ve harika bir kullanıcı deneyimi yaratma yolunda doğru yolda olacaksınız!