Resimlerinizi Düzelterek Sitenizi Nasıl Hızlandırırsınız?

Optimize edilmemiş (veya yetersiz optimize edilmiş) resimler, web sitenizin yavaş yükleme hızının en yaygın nedenidir.

Belki web siteniz hızlı yüklenir, resimler yüklenmezse veya yüklenmesi çok uzun sürerse, insanların %39'u HALA onunla etkileşime girmeyi bırakabilir.

Ve resimler toplam sayfa ağırlığının %68'ini oluşturuyor (ki bu çok fazla!).

Bu nedenle, görüntüleri optimize edilmeden tutma riskini alamayız.

Bu nedenle, resimlerinizi optimize etmek ve daha hızlı sayfa yükleme hızı sağlamak için bu hızlı teknikleri izleyin.

Başlamadan önce…

Sitenizin yavaş yükleme hızından resimlerin gerçekten sorumlu olup olmadığını veya başka sorunlar olup olmadığını kontrol edin.
Sitenizin yükleme hızını analiz etmek için Google PageSpeed ​​Insights'ı kullanın.

Ardından, ' Teşhis ' ve ' Fırsatlar 'a gidin.

Burada, yükleme hızınızı etkileyen HER parametreyi ayrıntılı olarak analiz edebilir ve iyileştirme fırsatlarını ortaya çıkarabilirsiniz.

Rapor, görüntüyle ilgili sorunlardan da bahsediyor.

Bu, sitenizin yükleme hızını etkileyen resimle ilgili (ve diğer) sorunları bulmanın ve düzeltmenin en hızlı yoludur.

ANCAK, bir püf noktası var – araç bu tür sorunları ancak siz bir sayfayı canlı yayına aktardıktan birkaç hafta sonra bulabilir. Ve beklemek akıllıca değil çünkü yükleme hızı bir Google sıralama faktörüdür ve sayfanız yavaş yüklenirse SERP sıralamanız düşebilir.

Öyleyse neden yüklemeden önce resimleri optimize etmiyorsunuz? Sonuçta, önleme tedaviden daha iyidir.

Bu teknikler size tam olarak nasıl yapacağınızı söyleyecektir. Hadi başlayalım.

1. Doğru Görüntü Formatını Seçin

Web sitesi sahipleri şu dört resim biçimini kullanmayı tercih ediyor:

• JPEG (veya JPG – Ortak Fotoğraf Uzmanları Grubu)

Biraz azaltılmış kaliteye sahip sıkıştırılmış bir görüntü formatıdır. JPEG'ler, çok fazla ayrıntı ve renk içeren fotoğraflar veya görüntüler için en uygun olanıdır.

Sıkıştırılmış görüntü = daha düşük dosya boyutu = daha hızlı yükleme hızı

• PNG (Taşınabilir Ağ Grafikleri)

Logo gibi şeffaf arka plana ve daha az renge sahip görüntüler için uygun, daha yüksek kalitede sıkıştırılmamış bir görüntü formatıdır.

PNG'ler iki biçimde mevcuttur:

• PNG-8

256 renkten oluşan sınırlı bir palete sahiptir, ancak daha hızlı yüklenmesini sağlayan küçültülmüş bir dosya boyutuna sahiptir.

• PNG-24

Sınırlı bir renk paleti yoktur; bu nedenle, yüklenmesi daha uzun süren daha ağır bir dosyadır.

• GIF (Grafik Değişim Formatı)

GIF'ler, kayıpsız sıkıştırma sağlarken 256 renkten oluşan sınırlı bir palet kullanır. Animasyonlu görüntüler için en uygunudur.

GIF'lerin yüklenmesi zaman alır. GIF'ler yerine PNG-8 resimlerinin kullanılması tavsiye edilir.

• SVG (Ölçeklenebilir Vektör Grafikleri)

JPEG, PNG ve GIF raster grafiklerdir (piksellerden oluşur) ve SVG'ler vektör grafikleridir (yollardan oluşur). Bu nedenle, SVG'lerin bir görüntü dosyası yüklemek için bir HTTP isteğine ihtiyacı yoktur.

Bunlar arasında web siteniz için doğru resim formatı hangisi?

Amacınıza bağlı.

İstatistiksel olarak PNG ve JPEG, web sitelerinin kullandığı en popüler biçimlerdir. Görüntü kalitesi ile yükleme hızı arasındaki denge nedeniyle ideal seçimlerdir.

2. Resimleri Yüklemeden Önce Yeniden Boyutlandırın

Görüntüleri boyutlarını değiştirmeden yüklerseniz, gerekenden daha büyük boyutlara sahip olabilirler.

Resimlerinizin farklı boyutlardaki ekran boyutlarına sığması için tarayıcının resimlerinizi yeniden boyutlandırması gerekir, bu da zaman alır ve sitenizin yükleme hızını etkiler.

Yüklemeden önce yeniden boyutlandırma, resimlerinizin ekranda belirtilen alana sığmasına ve tarayıcılarda daha hızlı yüklenmesine yardımcı olur.

Artık, resimlerin en uygun boyutu web sitesinden web sitesine değişmektedir. Web sitenizin temasına veya tasarımına bağlıdır.

Çoğu tarayıcıda bulunan yerleşik inceleme araçlarını kullanarak sitenizde kullanılan resimlerin tam boyutlarını belirleyebilirsiniz.

Rakibinizin sitesinde kullanılan görsellerin boyutunu kontrol etmek istiyorsanız aynı şekilde yapabilirsiniz.

Sadece bir web sayfasının öğelerini inceleyin, resme tıklayın ve tarayıcı size tam resmin boyutunu gösterecektir.

Görüntü boyutları, başlık, açılır pencere, düğme vb. gibi amaca bağlı olarak değişebilir. Çoğu web sitesinin kullandığı bazı popüler görüntü boyutları (piksel olarak):

Web sitenize yüklediğiniz resimleri yeniden boyutlandırmak için bunları referans olarak tutabilirsiniz.

Blog gönderilerinin veya diğer içerik görsellerinin genişliği ve yüksekliği sırasıyla 1500 pikseli ve 1000 pikseli geçmemelidir.

Resimlerinizi etkili bir şekilde yeniden boyutlandırmanın birkaç yolu vardır:

• Photoshop'u kullanma

Photoshop, özel bir fotoğraf düzenleme yazılımıdır. Yeniden boyutlandırırken görüntülerin ayrıntılarını ve keskinliğini korur.

Görüntü > Görüntü Boyutu öğesini seçin. Bir iletişim kutusu belirecektir. Size mevcut görüntünün boyutunu gösterecektir.

Yeni resim dosyası boyutunu görmek için gerekli boyutları (genişlik ve yükseklik) girin. Tamam'a tıklayın ve yeniden boyutlandırma yapılır.

Dosyayı istediğiniz formatta kaydedip sitenize yükleyebilirsiniz.

• Paint'i Kullanma

Windows Paint, görüntüleri yüklemeden önce yeniden boyutlandırmanın daha basit bir alternatifidir.

Yeniden boyutlandırmak istediğiniz resmi Paint'te açın . Araç çubuğundaki seçeneklerden yeniden boyutlandırmayı seçin .

İhtiyacınıza göre yeni boyutları girin. (Paint, varsayılan olarak en boy oranını korur.) Tamam'ı tıklayın ve resminizi yeniden boyutlandırın.

Dosyanızı uygun bir biçimde kaydedin ve ardından sitenize yükleyin.

• WordPress Eklentisini Kullanma

WordPress kullanıyorsanız, resimlerinizi yeniden boyutlandırmak için Imsanity gibi bir eklenti kullanabilirsiniz.

Eklenti, sizin tarafınızdan belirtilen boyut sınırlarını aşan bir resmi otomatik olarak yeniden boyutlandıracak ve onu yüklenen resimle değiştirecektir.

3. TÜM Görüntüleri Sıkıştırın

Sıkıştırma, resimlerinizin kalitesini düşürmeden dosya boyutunu bayt olarak en aza indirir.

Görüntülerin iletimini hızlandırmaya ve sunuculardaki depolama alanlarını azaltmaya yardımcı olur.

Bu nedenle, sitenize yüklemeden önce her resmi sıkıştırdığınızdan emin olun.

Resminizin dosya boyutunu küçültmenin iki yolu vardır:

• kayıplı

Kayıplı sıkıştırma, dosya boyutunu büyük ölçüde azaltır. Tarih, çözünürlük, boyutlar, renk, cihaz vb. gibi bazı piksel verileri ve görüntü meta verileri kaldırılır.

Görüntü kalitesinde bir azalma var, ancak insan gözü sıkıştırılmamış ve sıkıştırılmış görüntüleri ayırt edemiyor.

• kayıpsız

Kayıpsız sıkıştırma, nispeten daha büyük dosya boyutları sağlar. Piksel verilerini değiştirmez ancak meta verilerdeki ayrıntıları kaldırır. Yani görüntü kalitesinde bir kayıp olmaz.

Ayrıca resimleriniz için sıkıştırma düzeyini de seçebilirsiniz.

Sıkıştırma seviyesi (veya yüzdesi) ne kadar yüksek olursa, kalite o kadar düşük olur…

…ve dosya boyutu küçüldükçe.

Şimdi, hangi sıkıştırma türünü ne zaman kullanacağınızı merak ediyor olmalısınız.

Kaliteden ödün vermediğinizde kayıpsız sıkıştırmayı tercih edin. İhtiyacınıza göre uygun sıkıştırma seviyesini seçebilirsiniz. Fotoğraflar ve web sitesi görüntüleri için en iyi sonucu verir.

Ancak kalite daha az önemliyse, kayıplı sıkıştırmaya gidin. Her zaman ekran görüntüleri veya benzer görüntüler için kullanabilirsiniz.

Etkili görüntü sıkıştırması sunan bazı web araçları şunlardır:

• MinikPNG
• Kraken.io
• JPEGmini
• kırpma

WordPress kullanıyorsanız, işte bazı popüler resim sıkıştırma eklentileri:

• ezmek
• Optimol
• EWWW Görüntü İyileştirici
• MinikPNG
• Kraken.io

4. Görüntüler (ve diğer içerikler) için CDN'leri kullanın

CDN, web üzerinde daha hızlı içerik teslimini sağlayan coğrafi olarak dağıtılmış bir sunucu ağıdır. Web sitelerinin performansını ve hızını artırarak harika bir kullanıcı deneyimi sağlar.

Resimleriniz (ve diğer içerikleriniz) için bir CDN kullanmak sitenizi iki şekilde hızlandırır.

İlk olarak, resimleriniz (varsayılan olarak) depolama sunucularında daha az yer kaplayacak şekilde optimize edilir.

İkincisi , resimleriniz farklı coğrafi konumlarda bulunan birden çok sunucuda depolanır.

Böylece, kullanıcılar sitenizi her ziyaret ettiğinde, kaynak sunucunuzdan görüntü dosyaları yüklemek zorunda kalmazlar. Bunun yerine CDN'nizin en yakın sunucusundan indirebilirler.

Bilim hala veri aktarım hızını sınırladığı için CDN kullanmak sayfa yükleme hızınızı artırmanıza yardımcı olur. Kaynak sunucunuz ile kullanıcının konumu arasındaki mesafe, veri aktarım hızını etkiler.

Bir kullanıcı, kaynak sunucunuzdan uzaktaysa, görüntüleri (ve diğer içeriği) indirmek için çok zaman harcar. Yüklenmesi fazladan birkaç saniye sürse bile, kullanıcılar sitenizden geri döner.

Ancak, bir CDN ile kullanıcılar görüntüleri en yakın ağ sunucusundan indirebilecekler. Ağ sunucusu ile kullanıcının konumu arasındaki mesafe önemli ölçüde azaldığından daha hızlı olacaktır.

Bu nedenle, görüntüler için bir CDN kullanmalısınız.

İnternette ücretsiz olarak sunulan birkaç kaliteli CDN vardır. Bunlardan herhangi birini kullanabilir ve daha hızlı görüntü yükleme elde edebilirsiniz.

İşte yardımınız için bazı popüler ve etkili CDN'ler:

• bulut parlaması CDN'si
• Amazon CloudFront
• Google Bulut CDN'si
• Imperva CDN'si
• CDN77.com
• Gulet
• Hızla
• CacheFly
• Vernik Yazılımı
• tavşan.net
• 5 sentscdn

5. Tarayıcı Önbelleğe Almayı Etkinleştir

Kullanıcılar sitenizi her ziyaret ettiğinde, resimler, HTML ve CSS dosyaları, JavaScript dosyaları, medya dosyaları, PDF'ler vb. gibi tüm web sitesi kaynaklarını sunucudan indirmeleri gerekir.

Tarayıcı önbelleğe almayı etkinleştirirseniz, web tarayıcılarına sitenizin kaynaklarını geçici yerel depolama alanına indirmelerini ve kaydetmelerini söylersiniz.

Web tarayıcılarını aşağıdakiler hakkında da bilgilendirebilirsiniz:

• Önbelleğe almaları ve önbelleğe almamaları gereken kaynaklar.
• Belirli bir önbelleğe alınmış kaynağı tutmaları gereken süre.

Böylece, kullanıcılar sitenizi tekrar ziyaret ettiğinde, kaynakları sunucu yerine yerel depolamadan indirebilirler.

Böylece, tekrar eden ziyaretçiler için web sayfalarınızın daha hızlı yüklenmesine yardımcı olacaktır.

Kolayca elde edilebilen sayfa yükleme hızı iyileştirmesine bakın

tarayıcı önbelleğe alma ile:

100 kattan daha hızlıdır.

Sayfa hızı test araçlarının çoğu, aynı nedenle 'tarayıcı önbelleğinden yararlanmayı' önerir.

Resimlerin bir siteye yüklenmesi en uzun süreyi aldığından, resimlerin önbelleğe alınması sitenizin yüklenme hızını büyük ölçüde artırır.

Sitenizin resimleri için tarayıcı önbelleğinden iki şekilde yararlanabilirsiniz:

• .htaccess'i kullanma

Tarayıcı önbelleğe almayı uygulamak için en yaygın kullanılan yöntemdir. Etkinleştirmek için .htaccess dosyanıza birkaç satır tarayıcı önbelleğe alma kodu ekleyebilirsiniz.

Kodda, önbelleğe alınması gereken kaynağın türünü ve yerel bellekte kalması gereken süreyi tanımlayın. (İhtiyaçlarınıza göre)

Bu, resimlerinizin (ve diğer kaynakların) kullanıcılar için daha hızlı yüklenmesi için ayarlanmıştır.

• Eklentileri Kullanma (WordPress siteleri için)

Eklentiler, .htaccess dosyasının içine tarayıcı önbelleğe alma kodunu ekleyerek işlemi otomatikleştirir. Ancak, onlarla çok fazla kişiselleştirme seçeneği bulamayabilirsiniz.

Tarayıcı önbelleğe almayı etkinleştirerek WordPress sitenizi hızlandıracak bazı eklentiler:

• W3 Toplam Önbellek
• WP En Hızlı Önbellek
• WP Cloudflare Süper Sayfa Önbelleği
• WP Süper Önbellek
• Hiper Önbellek
• kuyruklu yıldız önbelleği

Bununla, resimlerinizin yüklenme süresini önemli ölçüde azaltabilirsiniz.

Bonus: Resimlerinize Alternatif Metin Ekleyin

Alternatif Metin, görüntünün ne gösterdiğini açıkça belirten bir görüntünün kısa açıklamasıdır.

Üç nedenden dolayı önemlidir:

• Kullanıcılar düşük hızlı bir internet bağlantısı kullanıyorsa ve resimlerin yüklenmesi zaman alıyorsa, tarayıcılar resimlerin yerine alternatif metni görüntüler.
• Ekran okuyucular, görme engelli kullanıcıların görüntünün ne hakkında olduğunu anlamalarını sağlamak için alternatif metni yüksek sesle okur.
• Arama motorları, bir sayfanın içeriğini daha iyi anlamak ve uygun şekilde sıralamak için alternatif metni kullanır.

Şimdi, resimler için alternatif metin yazmak belki de çok kolaydır. Çocuğunuza bir resmi nasıl tanımlayacağınızı düşünmelisiniz ve elinizde harika bir alternatif açıklama var.
Örneğin, aşağıda verilen resim için doğru alternatif metin şöyle olacaktır: havaya zıplayan bir kedi.

Görüntüyü net bir şekilde anlatıyor. Kullanıcılar, görmeseler bile görüntünün ne hakkında olduğu hakkında bir fikir edinebilirler.

Bu nedenle sitenize yüklediğiniz tüm görsellere alternatif metin eklemelisiniz.

Ancak zaten resim yüklediyseniz, ücretsiz Web Sitesi Analiz Aracını kullanarak alternatif metin içermeyenleri kolayca bulabilirsiniz.

Sitenizdeki tüm görselleri analiz eder ve alt özelliği eksik olan toplam görsel sayısını gösterir.
Daha Fazla Görüntüle'yi tıkladığınızda, düzeltmeniz gereken resimlerin URL'lerini gösterir.

Bu resimlerin alternatif metnini optimize edebilir ve sitenizin kullanıcı deneyimini geliştirebilirsiniz.

Ayrıca, resimlerinizin Google Görseller arama sonuçlarında daha iyi performans gösterdiğini fark edeceksiniz. Bunun nedeni, alternatif metnin, resimler için en önemli SEO sıralama faktörlerinden biri olmasıdır.

Yani, bu sizin için bir kazan-kazan durumu!

Görselleri Optimize Ederek Site Hızınızı Artırın

Mobil internet kullanımı artmaya devam ettikçe, daha da hızlı ve sorunsuz sitelere bakacağız.

Bununla birlikte, resimlerinizi optimize edilmeden bırakmak asla yapmamanız gereken bir gaftır. Hızınız yavaşsa, resimlerinizi optimize etmek için yukarıdaki teknikleri kullanın.

Sitenizi Google PageSpeed ​​bilgileriyle tekrar test ettiğinizde, hızında büyük bir gelişme fark edeceksiniz!

Bahsettiğim tekniklerden herhangi birini işe koydun mu? Sizce hangisi en etkilisi? Fikirlerinizi öğrenebilir miyim.