Şu yazıyı okuyorsunuz: Web için görseller nasıl optimize edilir
Görselleri sevmiyor musun?
Siz okurken bir metin parçasını ilgi çekici bir deneyime dönüştürebilirler. Resimler bir blog gönderisini geliştirir, daha paylaşılabilir hale getirir ve tüm sitenizin tonunu ve markasını belirler.
Ve biliyor musun? Görüntülere yanıt vermeye programlandık. Bu nedenle içeriğinize görseller eklemek, 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 ila 700 KB arasındaydı. Şu anda ortalama 2 MB ve her yıl artıyor.
Bu çok büyük!
Bunun olmasının ana nedeni, web sayfalarında en sık birden fazla görselin kullanılması ve bu görsellerin uygun şekilde boyutlandırılmaması veya optimize edilmemesidir. Bu, bunların web dostu bir şekilde kaydedilmediği veya derlenmediği ve bunun yerine sayfalarınızı şişirdiği anlamına gelir.
Ancak çoğumuz görsel optimizasyonunu sonradan akla gelen bir düşünce olarak bırakıyoruz ve epik bir gönderi oluşturmak veya nişinizdeki diğer blog yazarlarıyla ağ oluşturmak gibi eğlenceli şeyler yapmaktan keyif almayı tercih ediyoruz.
Ancak şişirilmiş bir sayfaya sahip olmak, sayfa yükleme hızınızın düşeceği anlamına gelir. Yüksek hızlı bir bağlantı kullanıyorsanız bunun önemli bir şey olmadığını düşünebilirsiniz, ancak ziyaretçilerinizin çoğu öyle değil. Ayrıca Google yavaş yüklenen sayfalardan hoşlanmaz ve bu durum SEO’nuzu olumsuz etkileyebilir.
Resimleri neden 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ğ oluşturmak için sayısız saatler harcıyorsunuz, bu nedenle isteyeceğiniz son şey, potansiyel ziyaretçilerin web sitenizi yüklenmeden önce terk etmeleridir.
Araştırmalar, bir sitenin yüklenmesi üç saniyeden uzun sürerse ziyaretçilerin %40’ının geri düğmesini tıkladığını gösteriyor.
Üç saniyenin aslında o kadar da uzun olmadığını biliyorum, ancak mobil bağlantıdayken ve bir sitenin yüklenmesini beklerken, bir saniye sonsuzluk gibi gelebilir.
Ziyaretçilerinizin birçoğunun mobil bağlantıları daha yavaş olabileceğinden, sayfa boyutunuzu küçültmeniz gerektiği açıktır. Sayfa boyutunun artmasındaki en büyük suçlunun ne olduğunu zaten biliyoruz: resimleriniz.
Gereksiz derecede büyük resimler de hosting hesabınızda yer kaplar. Bazılarınız “sınırsız” depolama alanına sahip barındırma hizmetine sahip olsa da, birçok premium barındırma sağlayıcısı, daha düşük seviyeli planlarda sizi yaklaşık 10 GB depolama alanıyla sınırlandırıyor. Bu, özellikle aynı hesapta çok sayıda görsel içeren birden fazla siteye ev sahipliği yapıyorsanız hızlı bir şekilde dolabilir.
Peki görsellerinizin sitenizi yavaşlatıp yavaşlatmadığını nasıl anlarsınız? Sitenizin hızını şununla test edin: Google Sayfa Hızı Analizleri.
Google, optimize edilmemiş görsellerin sorun olduğunu bildiriyorsa sorunu düzeltmek için bilmeniz gerekenleri burada bulabilirsiniz.
Görüntü Optimizasyon Temelleri
Blogunuzdaki görselleri optimize etmeye gelince aklınızda bulundurmanız gereken birkaç farklı şey vardır: dosya türü, görsel boyutu ve boyutları, görsellerinizi nasıl sunduğunuz ve görsel sıkıştırma.
Bu alanların her birine daha yakından bakalım.
Dosya türü
Web’deki görseller genellikle PNG veya JPEG dosya formatında veya animasyon için GIF formatında kaydedilir. İnternette dolaşan eğlenceli animasyonlu GIF’leri kim sevmez ki!
Teknik olarak, görsellerinizi herhangi bir formatta kaydederseniz ziyaretçinizin tarayıcısı web sayfanızı görüntülerken sorun yaşamayacaktır, ancak en iyi kalite ve optimizasyon için aşağıdaki kuralları izleyin:
- JPEG: insanları, yerleri veya nesneleri gösteren fotoğraf ve tasarımlar için kullanılır
- PNG – Grafikler, logolar, metin ağırlıklı tasarımlar, ekran görüntüleri ve şeffaf arka plana sahip görsellere ihtiyaç duyduğunuzda en iyisi
- GIF – Animasyona ihtiyacınız varsa PNG kullanın
Peki neden farklı formatlar var?
PNG geleneksel olarak logo ve grafikleri kaydetmek için kullanılır çünkü orijinal görüntünün kalitesini korur; kimse bulanık metin ve pikselli şekiller istemez. Ancak, bir fotoğrafı PNG olarak kaydetmeye çalışırsanız muhteşem görünecektir, ancak ortaya çıkan dosya boyutu pek de şaşırtıcı olmayacaktır.
JPEG geleneksel olarak fotoğrafları kaydetmek için kullanılır. Çok 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üyle algılanamaz.
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 şunu unutmayın: fotoğraflar için JPEG ve metin/grafikler için PNG.
Resim boyutları
Hiç bir web sayfasını yüklediğinizde küçük bir görselin (örneğin bir vesikalık fotoğrafın) indirilmesinin çok zaman aldığını fark ettiniz mi? Gelen her satırı görebilecek kadar yavaş mı? Kendinize şu soruyu soruyorsunuz: Bu kadar küçük bir görselin indirilmesi nasıl bu kadar uzun sürüyor?
Ve büyük bir başlık resmi söz konusu olduğunda durum daha da kötü olur çünkü tüm sayfanın yüklenmesini durdurabilir.
Bunun olmasının nedeni, blog yazarının görsellerini uygun şekilde yeniden boyutlandırmaması veya optimize etmemesidir ve vesikalık örneğimizde, doğrudan DSLR fotoğraf makinelerinden tam çözünürlüklü bir JPEG dosyası yüklemiş olabilirler.
Ve bu çok büyük bir dosya!
Görüyorsunuz, bir web tarayıcısı (genellikle) bir görüntüyü orijinal boyutlarından ölçeklendirerek web sayfasındaki yerine tam olarak sığmasını sağlar. Ekranda küçük bir görüntü gibi görünen şey aslında tarayıcı tarafından gerçek zamanlı olarak küçültülmüş 10 megapiksellik devasa bir fotoğraf olabilir.
Artık bazı web yayınlama platformları, tam çözünürlüklü görüntünüzün farklı boyutlarda birden çok varyasyonunu otomatik olarak oluşturacaktır; ancak bunu yapmazsanız, görüntülerinizi önceden Photoshop, Lightroom, Pixlr ve hatta MS Paint gibi bir görüntü düzenleyicide yeniden boyutlandırmanız gerekir. Bu, 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 tamamı farklı boyutlarda olan üç (veya temanıza bağlı olarak daha fazla) kopyasını otomatik olarak oluşturur ve bunları blog yazılarında kullanabilirsiniz.
Çok büyük yükleme yapma alışkanlığınız varsa stok fotoğrafları görsellerive hosting hesabınızda yerden tasarruf etmek istiyorsanız WordPress eklentisini kullanın delilik arkanı kolla.
Orijinal görseli yeniden boyutlandırır ve daha kolay yönetilebilir bir şeyle değiştirir; böylece tam boyutlu görseli gönderinize ekleseniz bile o kadar da kötü olmaz.
Imsanity etkinleştirildiğinde mevcut görsellerinizi de arayabilir ve bunları uygun şekilde yeniden boyutlandırabilir.
Resimlerinizin sunulması
Resimlerinizi ziyaretçilerinize nasıl gösterdiğiniz yalnızca onları optimize etmekle ilgili değildir, ancak sayfa yükleme süreniz üzerinde önemli bir etkisi olabilir.
Çoğu blogcu görsellerini doğrudan barındırma hesaplarından yayınlar ve bu genellikle iyidir, ancak gerçekten sitenizin tüm performansını elde etmek istiyorsanız, görsellerinizi bir içerik dağıtım ağında (CDN) barındırmak büyük bir fark yaratabilir. .
bir CDN Dünyanın her yerindeki veri merkezlerinde stratejik olarak konumlandırılmış web sunucularından oluşur. Bu sunucular görsellerinizin kopyalarını barındırır ve bir ziyaretçinin tarayıcısı web sitenizden bir görsel istediğinde CDN, tarayıcıyı otomatik olarak coğrafi olarak kendisine en yakın sunucuya yönlendirir.
Bu, örneğin Avrupa’dan gelen ziyaretçilerin, Amerika Birleşik Devletleri’ndeki veya başka bir yerdeki sunucu yerine yerel bir Avrupa sunucusundan gönderilen görüntüleri alacağı anlamına geliyor. Ağ yanıt süresi ve gecikme azaldığı için görseller çok daha hızlı indirilir ve sayfa yükleme süresi kısalır.
Bloglama Sihirbazı Sucuri’yi kullanır (güvenlik için bir Güvenlik Duvarı ve bir CDN içerir), ancak Amazon’un Cloudfront veya KeyCDN gibi başka kaliteli sağlayıcıları da vardır. Kesinlikle bir CDN olmayan popüler CloudFlare bile ücretsiz bir CDN sunar ve çoğu paylaşılan barındırma paketinde kurulumu kolaydır.
Görüntü sıkıştırma
Resimlerinizi optimize etmeye gelince, hiçbir şey dosya boyutunuzu gelişmiş kayıplı resim sıkıştırmasından daha fazla küçültemez.
Visme veya Photoshop gibi çoğu görüntü düzenleme aracı, en iyi dosya boyutu küçültme özelliğine sahip olduğundan, dosyaları kayıplı JPEG sıkıştırması kullanarak kaydeder. Bu nedenle, görüntü kalitesi biraz düşerken, kayıplı görüntü sıkıştırmanın kullanılması büyük görüntüleri web dostu boyutlara indirir.
Eminim Photoshop kullanan birçoğunuz onun rolünü görüntü optimizasyonunun tamamı ve son noktası olarak görebilir. Hatta PicMonkey veya Visme gibi çevrimiçi resim düzenleme araçları da resimlerinizi optimize eder.
Ancak “optimize edilmiş” görüntünüzü Photoshop veya diğer düzenleme araçlarından alıp, parçalayıp %40 (veya daha fazla) oranında sıkıştırabilen ve insan gözüyle neredeyse aynı görünmesini sağlayabilen araçların olduğunu biliyor muydunuz?
Resimlerinizi web dostu bir duruma getirmenize yardımcı olacak bazı ücretsiz ve ücretli araçları burada bulabilirsiniz.
masaüstü araçları
ImageAlpha/ImageOptim
Mac kullanıcısı için, ImageOptim PNG resimlerini, çoğunlukla ekran görüntülerini, 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; dosyalarınızı sürükleyip bırakmanız yeterlidir, ancak her seferinde bir resim oluşturmanız gerekir.
: Teknoloji meraklıları için Görüntü Optimumu–CLIbir resim klasörünün tamamını aynı anda optimize edebileceğiniz yer.
ImageAlpha kayıplı bir PNG sıkıştırıcısıdır ve PNG dosyalarını küçültme konusunda harikalar yaratabilir; ImageOptim ise gelişmiş kayıpsız sıkıştırma gerçekleştirir (kayıplı seçeneğiyle) ve PNG, JPEG ve GIF dosyalarından gereksiz meta verileri kaldırır.
PNG resimlerimi önce ImageAlpha’da çalıştırıyorum:
Burada ekran görüntüsü resmimi 103K’dan 28K’ya düşürdü.
Daha sonra bunu ImageOptim’den geçirdim ve fazladan %10 tasarruf ettim.
JPEGmini
JPEG dosyalarımı masaüstüyle optimize ediyorum jpegmini uygulamasıHem Mac hem de Windows için kullanılabilir.
Lite sürümü, günde en fazla 20 görüntüyü ücretsiz olarak optimize etmenize olanak tanır ve sınırı kaldırmak için 19,99 ABD doları tutarında bir ücret alınır.
: 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 resim sıkıştırma aracı arıyorsanız, TinyPNG (ismine rağmen JPEG dosyalarını da optimize eder), 5 MB veya daha küçük 20 adede kadar resmi tarayıcınıza sürüklemenize ve bunları optimize etmenize olanak tanıyan bir web uygulamasıdır . Birden.
Ayrıca bir geliştirici API’si var ve WordPress Eklentisi Yükleme sırasında görsellerinizi otomatik olarak optimize edebilen bir özellik mevcuttur.
TinyPNG size ayda 500 ücretsiz görsel optimizasyonu sunar ve ardından hacme bağlı olarak görsel başına 0,002 ila 0,009 ABD Doları arasında ücret alır.
Şimdi, ayda 500 resim çok gibi görünebilir, ancak WordPress’in genellikle her resmin farklı boyutlarda üç ila beş varyasyonunu oluşturduğu gerçeğini göz önünde bulundurduğunuzda, üretken blog yazarı için 500 resim pek de öyle görünmüyor. Neyse ki görüntü başına maliyet uygun.
EWWW Görüntü Optimize Edici
Para harcamaya hazır değilseniz ve görsellerinizi manuel olarak optimize etme konusunda endişelenmek istemiyorsanız, ücretsiz program EWWW Görüntü Optimize Edici WordPress 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, dolayısıyla tasarruflar o kadar önemli değildir. Ancak bu size zaman kazandıracak ve hiç yoktan iyidir.
Not: Tam bir genel bakış için görüntü sıkıştırma araçları hakkındaki yazımıza bakın.
Sarmalamak
Bazı insanlar ortalama web sayfası boyutunun 2017 yılına kadar 3 MB’a yaklaşacağını tahmin ederken, şimdi görsellerinizi optimize etmeye başlamanın zamanı geldi.
Tüm ziyaretçilerinizin yüksek hızlı bağlantılarda olmayacağını ve sayfanın aşırı yüklenmesinin ve yavaş sayfa yükleme sürelerinin Google’daki sıralamanızı potansiyel olarak etkileyebileceğini unutmayın. Yükünüzü hafifletmeye yardımcı olmak için, tabiri caizse, bugün görsellerinizi optimize etme alışkanlığını edinin.
Görüntünüzün boyutlarına dikkat edin ve aşırı büyük fotoğrafları veya dijital kameradaki görüntüleri uygun boyuta göre yeniden boyutlandırın.
Ardından, JPEGmini gibi masaüstü uygulamaları veya TinyPNG veya Kraken gibi bulut araçlarıyla modern görüntü sıkıştırmanın avantajlarından yararlanın ve bunları mümkünse bir eklentiyle WordPress’e entegre edin.
Son olarak, yayınlama platformunuz orijinal görüntünüzün yeniden boyutlandırılmış varyasyonlarını otomatik olarak oluşturuyorsa, blog gönderiniz için tam boyutlu orijinal yerine bunlardan birini seçin.
İlgili okuma: PDF dosya boyutunu küçültmenin 7 yolu.
