Görüntüleri Kaliteden Ödün Vermeden Web Performansı İçin Optimize Etme

Resimlerinizi WordPress’e yüklemeden önce optimize etmenin web sitenizin hızı üzerinde büyük bir etkisi olabileceğini biliyor muydunuz?

Yeni bir blog açarken, yeni başlayanların çoğu web için optimize etmeden basitçe resim yükler. Bu büyük resim dosyaları web sitenizi yavaşlatır.

Bunu, düzenli blog rutininizin bir parçası olarak en iyi görüntü optimizasyonu uygulamalarını kullanarak düzeltebilirsiniz.

Bu makalede, kaliteden ödün vermeden daha hızlı web performansı için görsellerinizi nasıl optimize edeceğinizi göstereceğiz. Ayrıca WordPress için hayatınızı kolaylaştırabilecek otomatik görsel optimizasyon eklentilerini de paylaşacağız.

Bu, web için görüntü optimizasyonuna ilişkin kapsamlı bir kılavuz olduğundan, takip etmesi kolay bir içerik tablosu oluşturduk:

1. Görüntü Optimizasyonu Nedir?

Görüntü optimizasyonu, genel görüntü kalitesini düşürmeden görüntüleri mümkün olan en küçük dosya boyutunda kaydetme ve sunma işlemidir.

Süreç kulağa karmaşık gelse de, aslında bugünlerde oldukça kolay. Görüntü kalitesinde gözle görülür bir kayıp olmadan görüntüleri otomatik olarak %80’e kadar sıkıştırmak için birçok görüntü optimizasyon eklentisi ve aracından birini kullanabilirsiniz.

İşte optimize edilmiş ve edilmemiş görsellere bir örnek:

Gördüğünüz gibi, doğru şekilde optimize edildiğinde, aynı görüntü kalitede herhangi bir kayıp olmadan orijinalinden %80’e kadar daha küçük olabilir. Bu örnekte görüntü %52 daha küçüktür.

Görüntü Optimizasyonu Nasıl Çalışır?

Basit bir ifadeyle, görüntü optimizasyonu sıkıştırma teknolojisini kullanarak çalışır.

Sıkıştırma ‘kayıplı’ veya ‘kayıpsız’ olabilir.

Kayıpsız sıkıştırma, görüntü kalitesinde hiçbir kayıp olmadan toplam dosya boyutunu azaltır. Kayıplı sıkıştırma ile kalitede küçük bir kayıp olabilir, ancak ideal olarak ziyaretçileriniz tarafından fark edilmeyecektir.

Görselleri Optimize Etmek Ne Anlama Geliyor?

WordPress barındırma desteğinizden veya bir hız testi aracından görüntüleri optimize etmek için bir öneri almış ve ne yapmanız gerektiğini merak ediyor olabilirsiniz.

Resimlerinizi web için optimize ederek dosya boyutunu küçültmeniz gerekecektir. Bunu nasıl yapacağınızı adım adım göstereceğiz.

2. Görüntü Optimizasyonunun Faydaları Nelerdir?

Görsellerinizi optimize etmenin birçok faydası olsa da, bilmeniz gereken en önemli faydalar şunlardır:

• Daha yüksek web sitesi hızı
• Geliştirilmiş SEO sıralamaları
• Satış ve potansiyel müşteriler için daha yüksek bir genel dönüşüm oranı
• Daha az depolama ve bant genişliği (barındırma ve CDN maliyetlerini azaltabilir)
• Daha hızlı web sitesi yedeklemeleri (yedekleme depolama maliyetini azaltabilir)

Görüntüler, videolardan sonra bir web sayfasındaki en ağır ikinci öğedir. HTTP arşivine göre, görüntüler ortalama bir web sayfasının toplam ağırlığının %42‘sini oluşturmaktadır.

Hızlı web sitelerinin arama motorlarında (SEO) daha üst sıralarda yer aldığını ve daha iyi dönüşümler sağladığını bildiğimizden, görüntü optimizasyonu, çevrimiçi ortamda başarılı olmak isteyen her işletme web sitesinin yapması gereken bir şeydir.

Şimdi görüntü optimizasyonunun gerçekten ne kadar büyük bir fark yaratabileceğini merak ediyor olabilirsiniz.

Bir Strangeloop araştırmasına göre, web sitesi yükleme süresindeki bir saniyelik gecikme, satışların %7’sine, sayfa görüntülemelerinin %11’ine ve müşteri memnuniyetinin %16’sına mal olabilir.

Bunlar web sitenizi hızlandırmak için yeterli nedenler değilse, Google gibi arama motorlarının da daha hızlı yüklenen web sitelerine ayrıcalıklı SEO muamelesi yaptığını bilmelisiniz.

Bu, görsellerinizi web için optimize ederek hem web sitesi hızını artır abileceğiniz hem de WordPress SEO sıralamalarını yükseltebileceğiniz anlamına gelir.

Video Eğitimi

Yazılı talimatları tercih ediyorsanız, okumaya devam edin.

3. Web Performansı için Görseller Nasıl Kaydedilir ve Optimize Edilir

Web performansı için başarılı görüntü optimizasyonunun anahtarı, en küçük dosya boyutu ile kabul edilebilir görüntü kalitesi arasındaki mükemmel dengeyi bulmaktır.

Görüntü optimizasyonunda büyük rol oynayan üç şey şunlardır:

• Görüntü dosyası formatı (JPEG vs. PNG vs. GIF)
• Sıkıştırma (daha yüksek sıkıştırma = daha küçük dosya boyutu)
• Görüntü boyutları (yükseklik ve genişlik)

Üçünün doğru kombinasyonunu seçerek görüntü boyutunuzu %80’e kadar küçültebilirsiniz.

Şimdi bunların her birine daha ayrıntılı bir şekilde göz atalım.

1. Görüntü Dosyası Formatı

Çoğu web sitesi sahibi için gerçekten önemli olan üç resim dosyası biçimi JPEG, PNG ve GIF’tir. Doğru dosya türünü seçmek, görüntü optimizasyonunda önemli bir rol oynar.

İşleri basit tutmak için, çok renkli fotoğraflar veya görüntüler için JPEG’leri, basit veya şeffaf görüntüler için PNG’leri ve yalnızca animasyonlu görüntüler için GIF’leri kullanmak istersiniz.

Her dosya türü arasındaki farkı bilmeyenler için, PNG görüntü formatı sıkıştırılmamıştır, bu da daha yüksek kaliteli bir görüntü olduğu anlamına gelir. Dezavantajı ise dosya boyutlarının çok daha büyük olmasıdır.

Öte yandan JPEG, önemli ölçüde daha küçük bir dosya boyutu sağlamak için görüntü kalitesini biraz düşüren sıkıştırılmış bir dosya formatıdır.

GIF ise kayıpsız sıkıştırma ile birlikte yalnızca 256 renk kullanır, bu da onu animasyonlu görüntüler için en iyi seçim haline getirir.

WPBeginner’da, görüntünün türüne bağlı olarak üç görüntü formatını da kullanıyoruz.

2. Sıkıştırma

Bir sonraki şey, görüntü optimizasyonunda büyük bir rol oynayan görüntü sıkıştırmadır.

Farklı görüntü sıkıştırma türleri ve seviyeleri mevcuttur. Her biri için ayarlar görüntü sıkıştırma aracınıza bağlı olarak değişecektir.

Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo ve diğerleri gibi çoğu görüntü düzenleme aracının yerleşik görüntü sıkıştırma özellikleri vardır.

Görüntüleri normal olarak da kaydedebilir ve daha kolay görüntü sıkıştırma için TinyPNG veya JPEGmini gibi bir web aracı kullanabilirsiniz.

Biraz manuel çaba gerektirse de, bu iki yöntem görüntüleri WordPress’e yüklemeden önce sıkıştırmanıza olanak tanır ve WPBeginner’da yaptığımız da budur.

Ayrıca Optimole ve EWWW Image Optimizer gibi görüntüleri ilk yüklediğinizde otomatik olarak sıkıştırabilen birkaç popüler WordPress eklentisi de vardır. Bu kullanışlı bir özelliktir ve birçok yeni başlayan ve hatta büyük şirket bu görüntü optimizasyon eklentilerini kullanmayı tercih etmektedir.

WordPress eklentilerini kullanma hakkında daha fazla bilgiyi yazının ilerleyen bölümlerinde paylaşacağız.

3. Görüntü Boyutları

Normalde, telefonunuzdan veya dijital kameranızdan bir fotoğrafı içe aktardığınızda, çok yüksek bir çözünürlüğe ve büyük dosya boyutlarına (yükseklik ve genişlik) sahiptir.

Tipik olarak bu fotoğraflar 300 DPI çözünürlüğe ve 2000 pikselden başlayan boyutlara ve daha fazlasına sahiptir. Yüksek kaliteli fotoğraflar baskı veya masaüstü yayıncılık için çok uygun olsa da, büyük boyutları onları web siteleri için uygunsuz hale getirir.

Görüntü boyutlarını daha makul bir düzeye indirmek görüntü dosyası boyutunu önemli ölçüde azaltabilir. Bilgisayarınızdaki görüntü düzenleme yazılımını kullanarak görüntüleri yeniden boyutlandırabilirsiniz.

Örneğin, 300 DPI çözünürlüğe ve 4900×3200 piksel görüntü boyutlarına sahip bir fotoğrafı optimize ettik. Orijinal dosya boyutu 1,8 MB idi.

Daha yüksek sıkıştırma için JPEG formatını seçtik ve boyutları 1200×795 piksel olarak değiştirdik. Dosya boyutu sadece 103 KB’a düşürüldü. Bu, orijinal dosya boyutundan %94 daha küçük.

Artık görsel optimizasyonundaki üç önemli faktörü bildiğinize göre, web sitesi sahipleri için çeşitli görsel optimizasyon araçlarına bir göz atalım.

4. En İyi Görüntü Optimizasyon Araçları ve Programları

Daha önce de belirttiğimiz gibi, çoğu görüntü düzenleme yazılımı görüntü optimizasyonu ve sıkıştırma ayarlarıyla birlikte gelir.

Görüntü düzenleme yazılımının dışında, görüntüleri web için optimize etmek için kullanabileceğiniz birkaç güçlü ücretsiz görüntü optimizasyon aracı da vardır (sadece birkaç tıklama ile).

Özellikle mükemmeliyetçi biriyseniz, görselleri WordPress’e yüklemeden önce optimize etmek için bu araçları kullanmanızı öneririz.

Bu yöntem WordPress barındırma hesabınızda disk alanından tasarruf etmenize yardımcı olur ve her görüntüyü manuel olarak incelediğiniz için en iyi kalitede en hızlı görüntüyü garanti eder.

Adobe Photoshop

Adobe Photoshop, görüntüleri web için daha küçük bir dosya boyutuyla dışa aktarmanıza olanak tanıyan birinci sınıf bir görüntü düzenleme uygulamasıdır.

Dışa aktarma iletişim kutusunu kullanarak, size en küçük dosya boyutunu veren bir görüntü dosyası formatı (JPG, PNG, GIF) seçebilirsiniz.

Dosya boyutunu daha da azaltmak için görüntü kalitesini, renkleri ve diğer seçenekleri de azaltabilirsiniz.

GIMP

GIMP, Adobe Photoshop’a ücretsiz ve açık kaynaklı bir alternatiftir. Görüntülerinizi web için optimize etmek için kullanılabilir. Dezavantajı ise kullanımının bu listedeki diğer bazı çözümler kadar kolay olmamasıdır.

Öncelikle, resminizi GIMP’te açmanız ve ardından Dosya ” Farklı Dışa Aktar… seçeneğini seçmeniz gerekir. Bu, dosyanıza yeni bir ad verebileceğiniz Görüntüyü Dışa Aktar iletişim kutusunu getirecektir. Ardından, ‘Dışa Aktar’ düğmesine tıklamanız gerekir.

Şimdi görüntü dışa aktarma seçeneklerini göreceksiniz. JPEG dosyaları için, sıkıştırma seviyesini seçmek ve dosya boyutunu azaltmak için ‘Kalite’ kaydırıcısını kullanabilirsiniz.

Son olarak, optimize edilmiş görüntü dosyasını kaydetmek için ‘Dışa Aktar’ düğmesine tıklamalısınız.

TinyPNG

TinyPNG, PNG ve JPEG dosyalarınızın boyutunu azaltmak için akıllı bir kayıplı sıkıştırma tekniği kullanan ücretsiz bir web uygulamasıdır. Tek yapmanız gereken web sitelerine gitmek ve basit sürükle ve bırak yöntemini kullanarak resimlerinizi yüklemek.

Görüntüyü sıkıştıracak ve size bir indirme bağlantısı verecektir.

Ayrıca Adobe Photoshop için bir uzantıya sahipler, ki bu bizim görüntü düzenleme sürecimizin bir parçası olarak kullandığımız şey çünkü TinyPNG’ye Photoshop içinden erişmenizi sağlıyor.

Geliştiriciler için, görüntüleri otomatik olarak dönüştürmek için bir API’leri var. Ek olarak, yeni başlayanlar için, bunu sizin için yapacak bir WordPress eklentileri var. Bu konu hakkında daha sonra konuşacağız.

JPEGmini

JPEGmini, algılanan kalitelerini etkilemeden görüntülerin boyutunu önemli ölçüde azaltan kayıpsız bir sıkıştırma teknolojisi kullanır. Ayrıca orijinal görüntünün ve sıkıştırılmış görüntünün kalitesini karşılaştırabilirsiniz.

Web sürümünü ücretsiz olarak kullanabilir veya programı bilgisayarınız için satın alabilirsiniz. Ayrıca sunucunuz için süreci otomatikleştirmek için ücretli bir API’ye de sahipler.

ImageOptim

ImageOptim, en iyi sıkıştırma parametrelerini bularak ve gereksiz renk profillerini kaldırarak görüntüleri herhangi bir kalite kaybı olmadan sıkıştırmanızı sağlayan bir Mac yardımcı programıdır.

Buna bir Windows alternatifi Trimage‘dir.

5. WordPress için En İyi Görüntü Optimizasyon Eklentileri

Resimlerinizi optimize etmenin en iyi yolunun WordPress’e yüklemeden önce bunu yapmak olduğuna inanıyoruz. Ancak, çok yazarlı bir site işletiyorsanız veya otomatik bir çözüme ihtiyacınız varsa, bir WordPress resim sıkıştırma eklentisi deneyebilirsiniz.

İşte en iyi WordPress görüntü sıkıştırma eklentileri listemiz:

1. Optimole, ThemeIsle‘ın arkasındaki ekip tarafından geliştirilen popüler bir eklenti
2. EWWW Görüntü İyileştirici
3. JPEG, PNG ve WebP Görüntü Sıkıştırma, yukarıda bahsedilen TinyPNG ekibinin bir eklentisi
4. Imagify, popüler WP Rocket ekibinin bir eklentisi
5. ShortPixel Görüntü İyileştirici
6. Smush
7. reSmush.it
8. Envira Gallery, yerleşik görüntü sıkıştırma özelliğine sahip bir WordPress galeri eklentisidir

Bu WordPress resim optimizasyon eklentileri web sitenizi hızlandırmanıza yardımcı olacaktır.

6. Görüntü Optimizasyonu için Son Düşünceler ve En İyi Uygulamalar

Görüntüleri web için optimize edilmiş şekilde kaydetmiyorsanız, şimdi bunu yapmaya başlamanız gerekir. Site hızınızda büyük bir fark yaratacak ve kullanıcılarınız bunun için size teşekkür edecektir.

Daha hızlı web siteleri SEO için harikadır ve muhtemelen arama motoru sıralamalarınızda bir artış göreceksiniz.

Görüntü optimizasyonunun dışında, web sitenizi hızlandırmanıza önemli ölçüde yardımcı olacak iki şey, bir WordPress önbellek eklentisi kullanmak ve bir WordPress CDN kullanmaktır.

Alternatif olarak, yönetilen bir WordPress barındırma şirketi kullanabilirsiniz, çünkü genellikle platformun bir parçası olarak hem önbelleğe alma hem de CDN sunarlar.

WordPress Performansını Artırmaya Yönelik Uzman Kılavuzları

Artık resimlerinizi optimize ederek web sitenizi nasıl hızlandıracağınızı bildiğinize göre, WordPress performansını artırmayla ilgili diğer bazı makaleleri görmek isteyebilirsiniz.

• WordPress Hızını ve Performansını Artırmak için Nihai Kılavuz
• WooCommerce Performansı Nasıl Hızlandırılır
• Web Sitenizi Hızlandırmak için En İyi WordPress Önbellek Eklentileri
• WordPress için Core Web Vitals Nasıl Optimize Edilir (Nihai Kılavuz)
• WordPress’te İlk Bayta Kadar Geçen Süre (TTFB) Nasıl Azaltılır – Uzman İpuçları
• WordPress Site Performansını İyileştirmek için GTmetrix Eklentisi Nasıl Kullanılır?
• En Hızlı WordPress Hosting (Performans Testleri)
• WordPress Sitenizde Ölçmeniz Gereken Önemli Metrikler
• Web Sitesi Hız Testi Nasıl Doğru Şekilde Yapılır?
• WordPress Web Sitesi Stres Testi Nasıl Yapılır?

Umarız bu makale WordPress’te görsellerinizi nasıl optimize edeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca WordPress güvenliğinizi nasıl artıracağınıza dair rehberimizi veya işletme web siteleri için en iyi WordPress eklentileri uzman seçimlerimizi görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.