Resimlerinizi Optimize Edin ve Daha Fazla Zaman Kaybetmeyin

HTTPArchive'a göre, ortalama web sitesi boyutu 2014'te 1MB'den 2019'da 2MB'ye, 5 yılda neredeyse iki katına çıktı. Elbette, İnternet erişimi her zamankinden daha hızlı ama yine de, web siteleri nasıl şimdi bu kadar büyük? Cevap, kısmen genel olarak multimedya varlıklarında ve özel olarak resimlerde yatmaktadır.

Web siteleri artık basit metin sayfaları olmadığı için uzun zaman geçti. Artık dinamikler, resimler, videolar ve GIF'lerle dolular… ve tüm bu varlıkların büyük çözünürlüklere sahip ekranlarda güzel ve canlı görünmesini istiyoruz.

Web siteniz çok yavaş yükleniyorsa ve resimlerinizi hiç optimize etmediyseniz size iyi haberlerim var: Bugün WordPress'inizi hızlandırmak için neler yapabileceğinizi öğreneceksiniz. Web sitenizin performansını artırmak ve resimlerin kullanıcılarınızın deneyimini engellemesini önlemek için kullanabileceğiniz araçları görelim.

Görüntü Optimizasyonu Neden Önemlidir?

Resim varlıklarını optimize etmek ve web sitenizi hızlandırmak için kullanılabilecek farklı yöntemleri açıklamadan önce, sizi bunun önemine ikna etmek için birkaç dakika harcamak istiyorum.

Görsellerin Bir Web Sayfasının Genel Boyutunda Büyük Bir Etkisi Vardır

Başta söylediğim gibi, bir web sitesindeki resimlerin ağırlığı, toplamın önemli bir yüzdesini temsil ediyor. Örneğin, şu blog gönderisini düşünün: Geliştirme İpuçları – WordPress'in URL'leri Tahmin Etmesini Nasıl Durdurursunuz. Bu, net bir soruna hızlı bir çözüm sunan, 400'den az kelimeden oluşan oldukça kısa bir yazıdır.

GTMetrix'e göre, bu gönderiyi yüklemek 850KB veri kullanıyor. Ama neden bu kadar kısa bir gönderi bu kadar çok veri kullanıyor? Bu sorundan kısmen görseller sorumludur: Gönderinin öne çıkan görseli tek başına toplamın %25'ini temsil eden 200 KB'den daha ağırdır.

Mobil Trafik

Statcounter'da bulunan verilere göre, web trafiğinin %52'si mobil cihazlardan, %45'i masaüstünden geliyor. Bu nedenle, günümüzde küçük ekranlarda iyi çalışan duyarlı tasarımların kullanılmasına çok fazla önem verilmektedir.

Sizin de deneyimlediğiniz gibi, mobil cihazlarda İnternet bağlantısı her zaman harika değildir (özellikle işe gidip geliyorsanız veya yeraltındaysanız). Statistia'ya göre 2019'da ortalama hız 14 Mbps civarında. Bu nedenle, web sitelerimizi mobil cihazlarda hızlandırmak istiyorsak, resimleri de dahil olmak üzere ağırlıklarını mümkün olduğunca azaltmalıyız.

Depolama ve Veri Aktarım Maliyetleri

Görselleri uygun boyutlarda kullanma konusunda endişelenmenizin bir başka nedeni de paradır. Barındırma sağlayıcılarının planlarını sunduğu kriterler, web sitenizin kullandığı disk alanı miktarını ve sunucularından ziyaretçilerinize gönderdiğiniz veri miktarını içerir. Ne kadar çok disk alanı kullanılır ve ne kadar çok veri gönderilirse, o kadar fazla ödersiniz.

Resimlerinizin boyutunu küçülterek, her iki faktörü de azaltacak ve her ay biraz para mı kazanacaksınız?

Görüntü Optimizasyon Eylemleri

Artık resimlerinizi optimize etme konusunda neden endişelenmeniz gerektiğini bildiğinize göre, WordPress sitenizi hızlandırmak için neler yapabileceğinizi görelim.

#1 Düzgün Ölçeklendirilmiş Görüntüler Yükleyin

Doğrudan yeni DSLR fotoğraf makinelerinden çıkarılan fotoğrafları yükleyen insan sayısı şaşırtıcı. Sorun şu ki, bir DSLR fotoğraf makinesiyle çekilen herhangi bir fotoğraf bir web sitesi için muhtemelen çok büyük ve ağır.

Yapmanız gereken ilk şey, resimleri web sitenize yüklemeden önce makul bir boyuta küçültmektir. Örneğin, web sitemizde genellikle yüklediğimiz en büyük görseller, gönderilerimizin öne çıkan görselleridir. Bu görüntüleri yalnızca 1200x800 piksel ile sınırlamaya karar verdik. Bu diğer gönderide, görüntüleri yüklemeden önce hızlı bir şekilde ölçeklendirme ve sıkıştırma yöntemini açıkladım.

#2 Uygun küçük resimler oluşturmak için temanızı değiştirin

WordPress'e bir resim yüklediğinizde, WordPress birkaç küçük resim oluşturur. Bu küçük resimler temanız tarafından tanımlanır, çünkü bir görüntünün daha büyük veya daha küçük bir versiyonuna ne zaman ihtiyaç duyduğunu bilen sizin temanızdır.

Örneğin, öne çıkan görsellerimiz 1200x800 pikseldir. Bu boyutlar, gönderiyi görüntülerken harika çalışır:

ki bu açıkça böyle bir şey için çok fazla:

Bu nedenle, bu özel durumda, temamız yalnızca 480x320px olan ve gönderiler listesi ekranında kullanılan yeni bir küçük resim boyutu kaydeder.

Temanızın uygun küçük resimler oluşturmadığını düşünüyorsanız, bir küçük resmin boyutunu set_post_thumbnail_size ile nasıl tanımlayacağınızı ve hatta add_image_size ile ek küçük resimleri nasıl tanımlayacağınızı öğrenmek için WordPress belgelerini okumanızı tavsiye ederim.

Ve her zaman olduğu gibi, bu konuda yardıma ihtiyacınız olursa, aşağıdaki yorumlar bölümünde bana bildirin, size yardımcı olmaktan (hatta bu konuda bir yazı bile yazabilir miyim?)

#3 Görüntü Boyutlarını Akıllıca Kullanın

WordPress, medya kitaplığınızdaki görüntülerin birden çok küçük resmini oluşturur, böylece temanız olası her senaryoda en iyi görüntüyü kullanabilir. Ancak ilginç kısım burada: Sayfalarınıza ve gönderilerinize resim eklerken küçük resimleri de kullanabilirsiniz.

Gönderiye resim eklerken kenar çubuğuna bakın ve ihtiyaçlarınıza en uygun boyutu seçin:

Örneğin, bunun gibi dar ve küçük bir resim koyacaksanız, küçük bir resim (300x200px) mükemmel olabilir:

ancak aynı küçük resmi daha büyük bir görüntü için kullanmak korkunç sonuçlar verir:

Daha fazla çözünürlüğe sahip bir sürüm kullanmak daha iyidir:

#4 Uygun Görüntü Formatını Kullanın

Görüntüleri sıkıştırmak için her birinin güçlü ve zayıf yönleri olan farklı görüntü biçimleri vardır. En çok kullanılan biçimler şunlardır:

• PNG WordPress düzenleyicisinin bir ekran görüntüsü gibi, üzerinde herhangi bir resim bulunmayan ekran görüntülerini paylaşmak için harika bir görüntü formatı.
• JPG. Dünyadaki en yaygın formatlardan biri. Neredeyse her tür fotoğrafçılıkta çok iyi çalışır ve çok yüksek sıkıştırma oranlarına izin verir. Ancak, mükemmel değil: fotoğrafın kenarları çok keskinse (örneğin, metin veya çizimler varsa), daha düşük sıkıştırma oranları kullanmanız veya görüntüde çirkin artifaktlar olması riskini almanız gerekir.
• GIF. İnternetin (ve sosyal medya platformlarının) kralı. Animasyonlara izin veren bir format türüdür. Dürüst olmak gerekirse, şu anda kullandığımız tüm “GIF'lerin” aslında daha iyi sıkıştırma oranları ve daha yüksek kalite sunan (kısa) videolar olduğunu düşünüyorum…

#5 Kullanılmayan Resimleri Sil

Zaman geçtikçe, WordPress sitenizde kimsenin kullanmadığı birçok eski resmi tutmak kolaydır. Bunları hızlı bir şekilde silmek istiyorsanız, bu yazıda Toni nasıl yapılacağını açıklıyor.

#6 Tembel Yüklemeyi Etkinleştir

Yani görseller web sitelerinizi yavaşlatır, değil mi? Neden web sitelerine kesinlikle gerekli olmadıkça resim yüklememelerini söylemiyoruz? Bu işleri hızlandırırdı, değil mi? Tembel Yükleme'ye girin.

Tembel Yükleme oldukça basit bir fikirdir: Bir resim, ziyaretçinin tarayıcısında görünmesi gerekene kadar yüklenmeyecektir. Örneğin, web sitemizin altbilgisinde belirli bir resim varsa, kullanıcı web sitemizin sonuna ulaşmadan neden onu yüklemekle uğraşmamız gerekiyor? Oraya varana kadar bekleyin ve bir kez geldiklerinde görüntüyü yükleyin (ve yapmazlarsa, bir görüntü yükü kaydedin!)

WordPress için birçok Lazy Loading eklentisi vardır. SiteGround olayı gibi bazı barındırma sağlayıcıları bu seçeneği kurulumlarına dahil eder. Panonuzdaki seçeneği arayın ve etkinleştirin.

Bugünün gönderisinin web yükleme hızınızı biraz artırmanıza yardımcı olacağını umuyorum. Düzeltmesi bu kadar kolay olan ve bu kadar iyi sonuçlar veren çok az şey vardır. Şerefe ve şans!

Unsplash'ta Icons8 ekibinin öne çıkan resmi.