Görüntüleri sevmiyor musun?

Siz okurken bir metin parçasını ilgi çekici bir deneyime dönüştürebilirler. Görseller bir blog gönderisini geliştirir, daha paylaşılabilir hale getirir ve tüm sitenizin tonunu ve markasını belirler.

İşte bu yüzden içeriğinize görselleri dahil etmek, blogunuzu pazarlarken kullanabileceğiniz güçlü bir araçtır.

Ancak, dikkatli olmazsanız, resimler web sayfanızın toplam boyutunun yarısından fazlasını (veya daha fazlasını) oluşturabilir. Sadece birkaç yıl önce, bir web sayfasının ortalama boyutu 600-700K idi. Şimdi, ortalama 2MB ve her yıl artıyor.

Bu çok büyük bir şey!

Bunun ana nedeni, web sayfalarında birden fazla görüntünün daha sık kullanılması ve bu görüntülerin uygun şekilde boyutlandırılmaması ve optimize edilmemesidir. Bu, web dostu bir şekilde kaydedilmedikleri veya derlenmedikleri ve bunun yerine sayfalarınızı şişirdikleri anlamına gelir.

Ancak çoğumuz görselleri optimize etmeyi sonraya bırakır ve destansı bir gönderi hazırlamak ya da alanınızdaki diğer blog yazarlarıyla ağ kurmak gibi eğlenceli işlerle uğraşmayı tercih ederiz.

Ancak, sayfa şişkinliğine sahip olmak, sayfa yükleme hızınızın etkilenmesi anlamına gelir. Yüksek hızlı bir bağlantıya sahipseniz bunun büyük bir sorun olduğunu düşünmeyebilirsiniz, ancak ziyaretçilerinizin çoğu değil. Ayrıca, Google yavaş yüklenen sayfaları sevmez ve SEO'nuzu olumsuz yönde etkileyebilir.

Neden görselleri optimize etmeniz gerekiyor?

Mükemmel içerik oluşturmak için çok çalışıyorsunuz ve blogunuzu tanıtmak ve diğer blog yazarlarıyla ağ kurmak için sayısız saat harcıyorsunuz, bu nedenle isteyeceğiniz son şey potansiyel ziyaretçilerin web sitenizi daha yüklenmeden terk etmesidir!

Araştırmalar, bir sitenin yüklenmesinin üç saniyeden uzun sürmesi durumunda ziyaretçilerin %40'ının geri düğmesine tıkladığını göstermektedir.

Biliyorum, üç saniye aslında o kadar da uzun bir süre değil, ancak mobil bağlantıdayken ve bir sitenin yüklenmesini beklerken, bir saniye sonsuz gibi görünebilir.

Ziyaretçilerinizin çoğu daha yavaş mobil bağlantılara sahip olabileceğinden, sayfa boyutunuzu küçültmeniz gerektiği açıktır. Ve sayfa boyutunun şişmesine neden olan en büyük suçlunun ne olduğunu zaten biliyoruz - resimleriniz.

Gereksiz büyüklükteki görseller de hosting hesabınızda yer kaplar. Bazılarınız "sınırsız" depolama alanına sahip hostinglere sahip olabilirken, birçok premium hosting sağlayıcısı alt seviye planlarda sizi yaklaşık 10 GB depolama alanıyla sınırlandırır. Özellikle aynı hesapta birden fazla görsel ağırlıklı site barındırıyorsanız, bu alan hızla dolabilir.

Peki, görsellerinizin sitenizi yavaşlatıp yavaşlatmadığını nasıl anlayabilirsiniz? Google PageSpeed Insights ile sitenizin hızını test edin.

Google optimize edilmemiş görselleri bir sorun olarak bildiriyorsa, bunu düzeltmek için bilmeniz gerekenler burada.

Görüntü optimizasyonunun temelleri

Blogunuzdaki görselleri optimize etmek söz konusu olduğunda, dikkat etmeniz gereken birkaç farklı husus vardır: dosya türü, görsel boyutu ve boyutları, görsellerinizi nasıl sunduğunuz ve görsel sıkıştırma.

Şimdi bu alanların her birine daha yakından bakalım.

Dosya türü

Web'deki görüntüler genellikle PNG veya JPEG dosya formatında kaydedilir - veya animasyon için GIF. Web'de dolaşan o komik animasyonlu GIF'leri kim sevmez ki!

Şimdi teknik olarak Tamam. Resimlerinizi her iki formatta da kaydederseniz, ziyaretçinizin tarayıcısı web sayfanızı görüntülemekte sorun yaşamayacaktır - ancak en iyi kalite ve optimizasyon için aşağıdaki kurallara uyun:

• JPEG - insanların, yerlerin veya nesnelerin öne çıktığı fotoğraflar ve tasarımlar için kullanın
• PNG - grafikler, logolar, metin ağırlıklı tasarımlar, ekran görüntüleri ve şeffaf arka plana sahip görüntülere ihtiyaç duyduğunuzda en iyisidir
• GIF - animasyon gerekiyorsa, aksi takdirde PNG kullanın

Peki, neden farklı formatlar var?

PNG geleneksel olarak logoları ve grafikleri kaydetmek için kullanılır çünkü orijinal görüntü kalitesini korur - kimse bulanık metin ve pikselli şekiller istemez. Ancak, bir fotoğrafı PNG olarak kaydetmeyi denerseniz, harika görünecektir, ancak ortaya çıkan dosya boyutu şaşırtıcı olmaktan uzak olacaktır.

JPEG geleneksel olarak fotoğrafları kaydetmek için kullanılır. Büyük ölçüde daha küçük bir dosya boyutu oluşturmak için görüntü verilerinin bir kısmı atılır, ancak fotoğraflar çok çeşitli renkler ve doğal varyasyonlar içerdiğinden, kalite kaybı genellikle insan gözü tarafından fark edilemez.

Sıkıştırma hakkında daha sonra daha fazla ayrıntıya gireceğiz, ancak şimdilik yalnızca iki şeyi hatırlıyorsanız, unutmayın: fotoğraflar için JPEG ve metin/grafikler için PNG.

Resim boyutları

Hiç bir web sayfasını açtınız ve küçük bir resmin (örneğin bir vesikalık fotoğraf) indirilmesinin çok uzun sürdüğünü fark ettiniz mi? Her satırın indiğini görebileceğiniz kadar yavaş mı? Kendi kendinize, bu kadar küçük bir resmin indirilmesinin nasıl bu kadar uzun sürebileceğini düşündünüz mü?

Büyük bir başlık resmi söz konusu olduğunda ise durum daha da kötüdür çünkü tüm sayfanın yüklenmesini geciktirebilir.

Bunun nedeni, blog yazarının görselini uygun şekilde yeniden boyutlandırmamış ve optimize etmemiş olması ve vesikalık örneğimizde olduğu gibi, doğrudan DSLR fotoğraf makinesinden tam çözünürlüklü bir JPEG yüklemiş olmasıdır.

Ve bu çok büyük bir dosya!

Gördüğünüz gibi, bir web tarayıcısı (genellikle) bir görüntüyü orijinal boyutlarından ölçeklendirir, böylece bir web sayfasındaki yerine güzelce sığar. Ekranda küçük bir görüntü gibi görünen şey aslında tarayıcı tarafından gerçek zamanlı olarak ölçeklendirilmiş 10 megapiksellik devasa bir fotoğraf olabilir.

Bazı web yayınlama platformları tam çözünürlüklü görüntünüzün farklı boyutlarda birden fazla varyasyonunu otomatik olarak oluşturacaktır, ancak oluşturmuyorsa, görüntülerinizi önceden Photoshop, Lightroom, Pixlr - hatta MS Paint gibi bir görüntü düzenleyicide yeniden boyutlandırmalısınız. 50K'lık bir dosya ile 5MB'lık bir dosya arasındaki fark anlamına gelebilir.

Örneğin WordPress, her zaman tam boyutlu görseli kullanmak yerine, yüklediğiniz görselin blog yazılarında kullanabileceğiniz, hepsi farklı boyutlarda üç (veya temanıza bağlı olarak daha fazla) kopyasını otomatik olarak oluşturur.

Büyük stok fotoğraf görüntüleri yükleme alışkanlığınız varsa ve barındırma hesabınızda yer kazanmak istiyorsanız, WordPress eklentisi Imsanity arkanızda.

Orijinal görüntüyü yeniden boyutlandırır ve daha yönetilebilir bir şeyle değiştirir, böylece tam boyutlu görüntüyü gönderinize ekleseniz bile, o kadar da kötü olmaz.

Imsanity etkinleştirildikten sonra mevcut resimlerinizi de arayabilir ve buna göre yeniden boyutlandırabilir.

Resimlerinizi servis etme

Görsellerinizi ziyaretçilerinize nasıl sunduğunuz, tam olarak onları optimize etmekle ilgili değildir, ancak sayfanızın yüklenme süresi üzerinde önemli bir etkisi olabilir.

Çoğu blog yazarı görsellerini doğrudan barındırma hesaplarından sunar ve bu genellikle iyidir, ancak sitenizden gerçekten her türlü performansı almak istiyorsanız, görsellerinizi bir İçerik Dağıtım Ağı'nda (CDN) barındırmak büyük bir fark yaratabilir.

CDN, dünyanın dört bir yanındaki veri merkezlerinde bulunan stratejik olarak yerleştirilmiş web sunucularından oluşur. Bu sunucular resimlerinizin kopyalarını barındırır ve bir ziyaretçinin tarayıcısı web sitenizden bir resim istediğinde, CDN tarayıcıyı otomatik olarak coğrafi olarak kendilerine en yakın sunucuya yönlendirir.

Bu, örneğin Avrupa'dan gelen ziyaretçilerin ABD veya başka bir yerdeki sunucu yerine yerel bir Avrupa sunucusundan sunulan görüntüleri alacağı anlamına gelir. Yanıt süresi ve ağ gecikmesi azaldığı için görüntüler çok daha hızlı indirilir ve sayfa yükleme süresi kısalır.

Blogging Wizard Sucuri kullanıyor (CDN'in yanı sıra güvenlik için bir Güvenlik Duvarı da içeriyor), ancak Amazon'un Cloudfront'u veya KeyCDN gibi başka kaliteli sağlayıcılar da var. Tam olarak bir CDN olmayan popüler CloudFlare bile ücretsiz bir CDN sunuyor ve çoğu paylaşılan barındırma paketinde kurulumu kolay.

Görüntü sıkıştırma

Görüntülerinizi optimize etmek söz konusu olduğunda, hiçbir şey dosya boyutunuzu gelişmiş kayıplı görüntü sıkıştırmadan daha fazla azaltamaz.

Visme veya Photoshop gibi çoğu görüntü düzenleme aracı, dosya boyutunu en iyi şekilde azalttığı için dosyaları kayıplı JPEG sıkıştırma kullanarak kaydeder. Bu nedenle, görüntü kalitesi biraz düşse de, kayıplı görüntü sıkıştırma kullanmak devasa görüntüleri web dostu boyutlara indirir.

Eminim ki Photoshop kullanan birçok kişi Web için Kaydet PicMonkey veya Visme gibi çevrimiçi resim düzenleme araçları da resimlerinizi optimize eder.

Ancak Photoshop veya diğer düzenleme araçlarından "optimize edilmiş" görüntünüzü alıp %40 (veya daha fazla) daha sıkıştırabilen araçlar olduğunu biliyor muydunuz? hala insan gözüyle neredeyse aynı görünmesini sağlayabilir mi?

İşte resimlerinizi web dostu hale getirmenize yardımcı olacak bazı ücretsiz ve ücretli araçlar.

Masaüstü araçları

ImageAlpha / ImageOptim

Mac kullanıcıları için ImageOptim, PNG görüntülerini (çoğunlukla ekran görüntüleri) yüklemeden önce optimize etmek için her gün kullandığım ücretsiz bir masaüstü aracıdır. Bu araçların kullanımı kolaydır, sadece dosyalarınızı sürükleyip bırakırsınız, ancak her seferinde bir görüntü yapmanız gerekir.

Profesyonel ipucu : Teknoloji meraklıları için ImageOptim-CLI var, burada bütün bir resim klasörünü aynı anda optimize edebilirsiniz.

ImageAlpha kayıplı bir PNG sıkıştırıcısıdır ve PNG dosyalarını küçültmede harikalar yaratabilirken ImageOptim gelişmiş kayıpsız (kayıplı seçeneği ile) sıkıştırma gerçekleştirir - ve PNG, JPEG ve GIF dosyalarından gereksiz meta verileri çıkarır.

PNG resimlerim için önce onları ImageAlpha'dan geçiriyorum:

Burada, ekran görüntüsü resmimi 103K'dan 28K'ya düşürdü.

Daha sonra ImageOptim'den geçirdim ve fazladan %10 tasarruf ettim.

JPEGmini

JPEG dosyalarımı hem Mac hem de Windows için kullanılabilen masaüstü JPEGmini uygulaması ile optimize ediyorum.

Lite sürümü günde en fazla 20 görüntüyü ücretsiz olarak optimize etmenize izin verir ve sınırı kaldırmak için 19,99 ABD doları tutar.

Profesyonel ipucu : JPEGmini'yi bir eklenti aracılığıyla Photoshop veya Lightroom'a entegre etmek isteyen ileri düzey kullanıcılar Pro sürümünü 99,99 $ karşılığında satın alabilirler.

Çevrimiçi / Bulut / SaaS araçları

TinyPNG

Yüksek kaliteli bir çevrimiçi görüntü sıkıştırma aracı arıyorsanız, TinyPNG (ismine rağmen JPEG dosyalarını da optimize eder), tarayıcınıza 20 adede kadar 5 MB veya daha küçük görüntüyü sürüklemenize ve hepsini bir kerede optimize etmenize olanak tanıyan bir web uygulamasıdır.

Ayrıca bir geliştirici API'sine sahipler ve yükleme sırasında resimlerinizi otomatik olarak optimize edebilen bir WordPress eklentisi de sunuyorlar.

TinyPNG size ayda 500 ücretsiz resim optimizasyonu sunar ve bundan sonra hacme bağlı olarak resim başına 0,002-0,009 $ arasında ücret alır.

Ayda 500 görsel kulağa çok gibi gelebilir, ancak WordPress'in genellikle her görselin farklı boyutlarda üç ila beş varyasyonunu oluşturduğu gerçeğini göz önünde bulundurduğunuzda, 500 görsel o kadar çok Neyse ki, görüntü başına maliyet bütçe dostu.

EWWW Görüntü İyileştirici

Para harcamaya hazır değilseniz ve görsellerinizi manuel olarak optimize etmekle uğraşmak istemiyorsanız, WordPress için ücretsiz EWWW Image Optimizer eklentisi yüklediğiniz görselleri otomatik olarak optimize edebilir.

Kayıplı sıkıştırma gerçekleştiren premium aboneliği tercih edebilirsiniz, ancak ücretsiz sürüm yalnızca kayıpsız sıkıştırma gerçekleştirir, bu nedenle tasarruflar neredeyse önemli değildir. Yine de size zaman kazandıracak ve hiç yoktan iyidir.

Not: Tam bir özet için görüntü sıkıştırma araçları hakkındaki yazımıza göz atın.

Toparlıyoruz

Bazı kişiler 2017 yılına kadar ortalama web sayfası boyutunun 3 MB'a yaklaşacağını öngördüğünden, şimdi görsellerinizi optimize etmeye başlamanın tam zamanı.

Unutmayın, ziyaretçilerinizin hepsi yüksek hızlı bağlantılara sahip olmayacaktır ve sayfa şişkinliği ve yavaş sayfa yükleme süreleri Google'daki sıralamanızı potansiyel olarak etkileyebilir. Tabiri caizse yükü hafifletmenize yardımcı olması için, bugün görsellerinizi optimize etme alışkanlığı edinin.

Görsel boyutlarınıza dikkat edin ve aşırı büyük stok fotoğrafları veya dijital kameradan alınan görselleri uygun bir boyuta küçültün.

Ardından, JPEGmini gibi masaüstü uygulamalarıyla veya TinyPNG veya Kraken gibi bulut araçlarıyla modern görüntü sıkıştırmadan yararlanın - mümkünse bunları bir eklentiyle WordPress'e entegre edin.

Son olarak, yayın platformunuz otomatik olarak orijinal görselinizin yeniden boyutlandırılmış varyasyonlarını oluşturuyorsa, blog gönderiniz için orijinal, tam boyutlu görsel yerine bunlardan birini seçin.

İlgili Okuma: PDF Dosyalarının Boyutunu Küçültmenin 7 Yolu.