WordPress için Görüntü Optimizasyonuna Yönelik En İyi Kılavuz

1 … 2 … 3 … – potansiyel müşteriniz sitenizi henüz yüklenmekte olduğu için kapattı. Tanıdık geliyor? Sanırım birçok kez o kadar sabırsız ve sinirli bir ziyaretçiydin. olduğumu biliyorum. Bu nedenle, görüntü optimizasyonu hakkında bilmeniz gerekenlerin nihai bir listesini derledim. Uzun olacak ama umarım okumaya değer bulursunuz.

İçindekiler

• Bu Makalenin İçeriği 3 Dakikalık Videoda
• Görüntü Optimizasyonu Avantajları
• Görüntü Formatları
• Yüklemeden Önce Resimleri Yeniden Boyutlandırın
  • Görüntüleri Otomatik Olarak Yeniden Boyutlandırmak için Imsanity WordPress Eklentisi
• Görüntüleri Sıkıştırma
  • Görüntü Sıkıştırma için En İyi Çevrimiçi Araçlar
    • MinikPNG
    • Optimizilla
    • Kompresör
    • ImageOptim
    • Resim Daha Küçük
    • Kraken
    • JPEG.io
    • Sayfa Hızı Analizleri
    • En İyi Çevrimiçi Sıkıştırma Aracı için Sonuçlar
    • JPEG'ler için En İyi Çevrimiçi Sıkıştırma Aracı
    • PNG'ler için En İyi Çevrimiçi Sıkıştırma Aracı
    • Genel Olarak En İyi Çevrimiçi Görüntü Sıkıştırma Aracı
  • Görüntü Sıkıştırma için En İyi WordPress Eklentileri
    • WP Smush (Ücretsiz sürüm)
    • JPEG ve PNG resimlerini TinyPNG ile sıkıştırın
    • KısaPiksel
    • hayal et
    • EWWW Image Optimizer (Ücretsiz sürüm)
    • Görüntü Sıkıştırma için En İyi WordPress Eklentisi Sonuçları
    • JPEG'leri Sıkıştırmak için En İyi WordPress Eklentisi
    • PNG'leri Sıkıştırmak için En İyi WordPress Eklentisi
    • Genel Olarak Görüntü Sıkıştırma için En İyi WordPress Eklentisi
• Çözüm

Bu Makalenin İçeriği 3 Dakikalık Videoda

İşte bu makaleye çok hızlı bir genel bakış videosu. Yine de okumanızı tavsiye ederim, ancak sizi yeterince kızdırmak için işte başlıyoruz:

Görüntü Optimizasyonu Avantajları

Hala tüm görüntü optimizasyonu şeyinde satılmadınız mı? Sadece bu küçük ve önemsiz sorunu çözerseniz elde edeceğiniz tüm avantajlara bir göz atalım:

• siteniz daha hızlı olacak
• Google PageSpeed ​​puanınız daha iyi olacak
• Google sizi daha çok sevecek ve arama motoru sıralamanız iyileşecek
• Hemen çıkma oranınız daha küçük olacak ve sayfanızı daha fazla ziyaretçi görecek
• Sunucularınızda daha az depolama alanına ihtiyacınız olacak ve sunuculara daha az kaynak harcayacaksınız, bu da size para kazandıracak
• Kendiniz ve ziyaretçileriniz için mobil veri planı parasından tasarruf edeceksiniz

Şimdi dikkatini çektim, değil mi? Şimdi gerçek çalışmayla başlayabiliriz.

Görüntü Formatları

Görüntü optimizasyonu, görüntü biçimleri hakkında bazı temel bilgilerle başlar. İnternette en yaygın iki biçim, .png uzantılı PNG ve .jpg uzantılı JPEG'dir . Fotoğraflar, gradyanlı görüntüler ve milyonlarca renkli görüntüler için en iyi format olduğu için çoğu durumda JPEG kullanacağım. Öte yandan PNG, logolar gibi sınırlı renkli görüntülerde ve şeffaflık içeren görüntülerde daha iyidir.

Sonraki örnek, en iyi görüntü optimizasyonu için doğru görüntü biçimini seçmenin ne kadar önemli olduğunu size gösterecektir.

Optimize edilmemiş child.jpg resmimizi hem .jpg hem de .png formatlarında kaydedeceğim. Child-saved-as-jpeg.jpg resminin 3,1 MB büyüklüğünde ve child-saved-as-png.png resminin 4,5 MB büyüklüğünde olduğunu görebiliriz. Bu durumda, PNG resmi, JPEG resminden %45 daha büyük hale geldi; bu, yalnızca belirli bir resim formatının seçilmesinden kaynaklanan bir farktır. Bu kadar az çabayla bu kadar yerden tasarruf etmenin daha kolay bir yolu yok. Belki vardır. Bir sonraki adıma bir göz atalım.

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

Önceki örneğimizde doğru görüntü biçimini seçerek biraz alan kazandık, ancak görüntüyü yüklemeden önce yeniden boyutlandırırsak daha da fazla alan kazanabiliriz. Ama ne kadar yeniden boyutlandırmalıyız? Bu gerçekten web sitenizin genişliğine ve kabına bağlıdır.

ProteusThemes sitemizde, resim için maksimum genişlik 1110 pikseldir, bu yüzden 1800 piksel genişliğindeki mevcut görseli child.jpg , genişliği 1110 piksel olarak yeniden boyutlandıracağım. Bu durumda boyut olarak 3,1 MB'den 1,1 MB'a geçtik, bu da başka bir %65'lik tasarruf edilmiş ve azaltılmış alan anlamına geliyor.

İpucu: Görüntüleri doğrudan WordPress Medya Kitaplığınızda yeniden boyutlandırabilirsiniz. Medya -> Resminizi seçin -> Resmi Düzenle'ye tıklayın ve resminiz için yeni boyutlar seçin:

Görüntüleri Otomatik Olarak Yeniden Boyutlandırmak için Imsanity WordPress Eklentisi

Resmi yeniden boyutlandırmayı düşünmek istemiyorsanız veya birçok farklı kullanıcı web sitenize resim yüklüyorsa, Imsanity eklentisi sizin için mükemmel şekilde çalışmalıdır. Eklenti ayarlarında, resimlerin sahip olması gereken maksimum genişliği veya yüksekliği seçebilirsiniz ve eklenti, tüm büyük resimleri bu boyuta göre yeniden boyutlandırır. Mevcut tüm resimleri yeniden boyutlandırmak için toplu yeniden boyutlandırma özelliğini de seçebilirsiniz. Bu eklentiyi, yüklemeden önce her bir resmi ayrı ayrı yeniden boyutlandırmakta sorun yaşayan herkese kesinlikle tavsiye ediyorum. Imsanity eklentisini ücretsiz olarak indirebilirsiniz.

Görüntüleri Sıkıştırma

Artık görüntü optimizasyonunun temellerini öğrendiğimize göre oyunumuzu nasıl yükseltebileceğimize bakalım. İnternette çok sayıda görüntü sıkıştırma çevrimiçi aracı ve hatta görüntünüzün boyutunu küçültecek WordPress eklentileri bulabiliriz. Ama burada dikkatli olmalıyız, bazı araçlar neredeyse hiç fark yaratmayacak ve bazı ayarlar imajımızı bozup işe yaramaz hale getirecek. Peki, mükemmel denge nasıl bulunur? Endişelenmeyin, bu yazıyı yazarken (Haziran 2017, 2018 güncellendi), görüntü optimizasyonu için en popüler tüm çevrimiçi araçları/hizmetleri ve WordPress eklentilerini test ettik ve en iyilerini seçtik.

Testimizi gerçekleştirmek için 3 farklı JPEG görüntüsü ve 1 PNG görüntüsü kullandık.

3 JPEG görüntüsünün tümü, yazarlar Mi Pham, Breather, Denise Chan ve Niko Virtanen tarafından Unsplash'tan alınmıştır. Test amaçları için kırpıldılar ve 1110 x 624 piksele yeniden boyutlandırıldılar.

PNG resmi için, ProteusThemes logosu ve arkasında bir desen bulunan kendi resmimizi oluşturduk. Tıpkı JPEG test görüntüleri gibi, bu da 1110 x 624 piksel olarak yeniden boyutlandırılmıştır.

Şimdi tüm görüntüleri sıkıştırma için seçilen tüm araçlara ve eklentilere koyacağız ve hangisinin sizin için en iyi olduğunu bulacağız. Çevrimiçi araçlarla başlayalım.

Görüntü Sıkıştırma için En İyi Çevrimiçi Araçlar

Yazma sırasında (Haziran 2017, 2018 güncellendi), görüntü sıkıştırma için en popüler çevrimiçi araçların ve hizmetlerin tam listesi:

• MinikPNG
• Optimizilla
• Kompresör
• ImageOptim
• Resim Daha Küçük
• Kraken
• JPEG.io
• Sayfa Hızı Analizleri

Başka bir aracın bu listede olmayı hak ettiğini düşünüyorsanız, bize bildirin, test edip listeye ekleyeceğiz. Aşağıda her bir araçla ilgili incelemelerimi ve en iyilerine ilişkin değerlendirmemi bulabilirsiniz. Her bir araç hakkında ayrı ayrı okumak istemiyorsanız, buraya tıklayın – Bana kazananları gösterin!

MinikPNG

TinyPNG , kullandığım ilk görüntü sıkıştırma araçlarından biriydi ve hala bazen kullanıyorum. Seçenek yok, sadece görüntüleri yükleyin ve sıkıştırılmış hale getirin. Bu çevrimiçi araçla, 5 MB boyutunda 20 adede kadar resmi toplu olarak yükleyebilirsiniz.

Optimizilla

Optimizilla başka bir basit ama güçlü çevrimiçi araçtır. Kullanımı ücretsizdir ve 20 resme kadar toplu yükleme seçeneği vardır. En iyi sıkıştırma/kalite oranı için kalite ayarını varsayılan olarak 90'da bırakıyoruz. Sıkıştırmayı daha da zorlamak istiyorsanız, bu ayarı değiştirmeniz yeterlidir; kalitedeki değişiklikleri hemen göreceksiniz.

Kompresör

Kompresör , görüntü sıkıştırma için en iyi araçlardan biri olma potansiyeline sahiptir, ancak büyük bir kusuru vardır. Şu anda toplu yükleme seçeneği yoktur; bu, aynı anda yalnızca 1 resmi sıkıştırabileceğiniz anlamına gelir. Bunun dışında ücretsiz, kullanımı kolay ve iki sıkıştırma seçeneği var. Sıkıştırmadan sonra görüntünün kalitesi hala aynı kaldığı için testimizde kayıplı seçeneğini kullanıyoruz.

ImageOptim

ImageOptim , birçok ayarı olan bir araçtır. 3 farklı kalite seçeneği ve 3 farklı renk kalitesi seçeneği arasından seçim yapabilirsiniz. En iyi sıkıştırma/kalite sonuçlarının varsayılan ayarlarda olduğunu öğrendik. Kaliteyi orta ve renk kalitesini otomatik olarak ayarlayın. Küçük modası geçmiş tasarımın yanında ImageOptim ile beni en çok rahatsız eden şey, PNG'leri yüklesem bile JPEG'leri dışa aktarmasıydı . Kornel'e (ImageOptim'in yaratıcısı) bu sorunla ilgili bir e-posta gönderdim ve o zaten düzeltti.

Resim Daha Küçük

Tıpkı Compressor'da olduğu gibi, ImageSmaller'da da aynı kusur var. Toplu yükleme seçeneği yoktur. Ancak, 50 MB ile en büyük yükleme sınırlarından birine sahiptir. Optimize edilecek daha büyük dosyalarınız varsa, ImageSmaller sizin için doğru araç olabilir.

Kraken

Kraken , test ettiğim tüm araçlar arasında en iyi gösterge panosuna sahip birinci sınıf bir görüntü sıkıştırma aracıdır. Resimlerinizi yüklemek için güzel bir web arayüzü ve en iyi sonuçlar için birçok farklı ayar bulacaksınız. Testimizde varsayılan kayıplı ayarlarını kullandık.

JPEG.io

JPEG.io , Kraken ile aynı aracın ücretsiz bir sürümüdür. Aynı sıkıştırma özelliklerine sahiptir, ancak web sitesinin URL'sinin bize söylediği gibi, yalnızca JPEG'ler içindir.

Sayfa Hızı Analizleri

Bunu burada görmeyi beklemiyordun, değil mi? PageSpeed ​​Insights ayrıca sitemizi test ederken bize bir .zip sıkıştırılmış dosya verir. Bu, en kullanıcı dostu yol değildir, çünkü web sitenizi tüm resimlerle çevrimiçi hale getirmeniz ve ardından bunları yeni sıkıştırılmış resimlerle değiştirmeniz gerekecek, ancak resimlerin Google'ın istediği gibi sıkıştırılmış olmasını sağlayacaksınız.

En İyi Çevrimiçi Sıkıştırma Aracı için Sonuçlar

Aşağıda tüm testlerimizin sonuçlarını içeren grafikler bulacaksınız. Daha fazla bilgi için ayrıntılı elektronik tablomuzu da kontrol edebilirsiniz.

JPEG'ler için En İyi Çevrimiçi Sıkıştırma Aracı

Çoğu araç, test JPEG'lerimizi yaklaşık %80 oranında sıkıştırdı. Child.jpg resmimize bir göz atalım. 3,1 MB boyutunda bir resimle başladık ve yeniden boyutlandırma ve sıkıştırma işleminden sonra resmimiz yalnızca 165 KB büyüklüğündeydi, yani boyut olarak %95 daha küçüktü . Şimdi, bu bir fark! Compressor ve ImageOptim ile aynı sonuçları almayı başardık. Yani, burada iki kazananımız var gibi görünüyor.

PNG'ler için En İyi Çevrimiçi Sıkıştırma Aracı

PNG testimiz için tüm araçlarla ortalama %50 küçültülmüş boyut elde ettik. Ancak Optimizilla , pt-logo.png resmimizin %56 küçültülmüş boyutuyla diğerlerinden biraz daha iyiydi.

Genel Olarak En İyi Çevrimiçi Görüntü Sıkıştırma Aracı

Optimizilla , JPEG'ler için en iyi sıkıştırma aracı olmasaydı bile, onu şu anda çevrimiçi olarak mevcut olan en iyi sıkıştırma aracı olarak tavsiye ederdim. %79 ile sıkıştırılmış JPEG'ler hala harika ve sayfada basit bir kalite ayarıyla bunu daha da yükseğe çıkarabilirsiniz. Ayrıca, Compressor'ın eksik olduğu ve PNG'ler arasında olsa bile tüm görüntülerin JPEG olarak dışa aktarıldığı ImageOptim'den daha güvenilir bir yükleme olan toplu yükleme seçeneği vardır. Tüm bunlardan dolayı, Optimizilla'nın en iyi çevrimiçi görüntü sıkıştırma aracı unvanını hak ettiğini düşünüyorum.

Ardından, WordPress eklentilerinin çevrimiçi görüntü sıkıştırma araçlarını yenebilecek olup olmadığını görelim.

Görüntü Sıkıştırma için En İyi WordPress Eklentileri

Çevrimiçi görüntü araçları ile WordPress eklentileri arasındaki fark nedir? Görüntü sıkıştırma için çevrimiçi görüntü araçları kullanıyorsanız, yine de bu görüntüleri WordPress sitenize yüklemeniz ve ardından kullanmanız gerekecektir. Her şeyin tek bir yerde olmasını tercih ediyorsanız, Görüntü Sıkıştırma için WordPress eklentisi gitmenin yolu olabilir. Çoğu eklenti, yükleme ile görüntüleri optimize etme seçeneğine de sahiptir, böylece bu ayarı açabilir ve herhangi bir ek işi unutabilirsiniz.

Her eklenti için yeni bir WordPress sitesi yaptım ve her seferinde aynı 4 görseli yükledim. Farklı eklentilerin farklı ayarları vardır, bu yüzden sıkıştırma ve görüntü kalitesi arasında mükemmel dengeyi arıyordum.

Aşağıdaki eklentileri test ettim:

• WP Smush (ücretsiz sürüm)
• JPEG ve PNG Görüntülerini TinyPNG ile sıkıştırın
• KısaPiksel
• hayal et
• EWWW Image Optimizer (ücretsiz sürüm)

Daha önce de bahsettiğim gibi, test etmemiz gereken başka bir eklenti biliyorsanız, bize bildirin, listeye ekleyelim. Bu eklentiler hakkında daha fazla bilgi edinmek istemiyorsanız burayı tıklayın – Bana kazananları gösterin!

WP Smush (Ücretsiz sürüm)

WP Smush , bildiğim en eski görüntü sıkıştırma eklentilerinden biridir. Ücretsiz bir sürümü kullanmak için kayıt gerekmediğinden, diğer tüm eklentilere karşı güzel bir avantajı vardır. Ayrıca, yeni yüklenen görüntüleri otomatik olarak sıkıştırma seçeneğine de sahiptir, bu nedenle eklenti ayarlandıktan sonra onu unutabilirsiniz ve arka planda tüm işi sizin için yapacaktır. Ne yazık ki, sıkıştırma sonuçları ücretsiz sürümdeki en kötü sonuçlardan biriydi, bu yüzden onu kullanmanızı tavsiye etmem. Sitelerinde pro sürümünün çok daha iyi sıkıştırıldığını belirtmişler, bu yüzden makalenin bir sonraki güncellemesinde bunu da test edeceğim.

JPEG ve PNG resimlerini TinyPNG ile sıkıştırın

Tıpkı TinyPNG çevrimiçi sıkıştırma aracı gibi, WordPress eklentisi de çok basittir. Kayıttan geçtikten sonra, minimum ayarlara sahiptir ve temelde kutudan çıkar. Yeni yüklenen tüm resimler de otomatik olarak sıkıştırılabilir, böylece eklentiyi etkinleştirebilir ve unutabilirsiniz.

KısaPiksel

ShortPixel , kişisel olarak en büyük sürprizlerden biriydi. Araştırmamdan önce hiç duymamıştım ve gerçekten çok etkilendim. Varsayılan kayıplı önerilen ayarlarla, WordPress eklentileri arasında en iyi sıkıştırma sonuçlarına sahiptir ve ayrıca parlak bir seçeneğe sahiptir. Bu seçenek, çok yüksek kaliteli resimlere ihtiyaç duyan ve kalite kaybından ödün veremeyen fotoğrafçılar veya diğer profesyoneller içindir.

hayal et

Imagify , ünlü WP Rocket eklentisi yazarlarının elleriyle yapılmış bir eklentidir. Kayıttan sonra, aralarından seçim yapabileceğiniz birkaç açık seçeneğe sahip olacaksınız. En iyi rasyon sıkıştırması ve görüntü kalitesi için agresif modu seçin. Ayarlardaki güzel bir şey de, sıkıştırmayla ilgili herhangi bir sorun olması durumunda orijinal görüntüler için ayrı bir klasöre sahip olma seçeneğidir. Tam olarak anlamadığım tek şey, sıkıştırma sonuçlarını görmek için neden medyadaki liste görünümüne geçmemiz gerektiği. Bunun dışında Imagify gerçekten güzel ve sağlam bir eklenti.

EWWW Image Optimizer (Ücretsiz sürüm)

EWWW Image Optimizer , bana bazı hatalar veren tek eklentiydi. İlk olarak, bunu kendi hostingimde denedim ve EWWW Image Optimizer'ın exec() veya API anahtarı gerektirdiğine dair bir hata aldım. Eklentiyi bir dahaki sefere yerel geliştirme WordPress sitemde denediğimde pngout'u kaçırdığıma dair bir hata aldım. Nasıl kurulacağına dair talimatları takip ettim ve eklenti sonunda test için hazırdı. Ücretsiz sürümü test ettiğim için, yalnızca en iyi sonuçlara yol açmayan kayıpsız bir seçenek vardı. Tıpkı WP Smush'ta olduğu gibi, bir sonraki makale güncellemesinde EWWW Image Optimizer pro sürümünü de test edeceğim ve daha iyi performans gösterip göstermeyeceğini göreceğiz.

Görüntü Sıkıştırma için En İyi WordPress Eklentisi Sonuçları

Daha önce olduğu gibi, aşağıda tüm testlerimizin sonuçlarını içeren grafikler bulacaksınız. Daha fazla bilgi için ayrıntılı elektronik tablomuzu da kontrol edebilirsiniz.

JPEG'leri Sıkıştırmak için En İyi WordPress Eklentisi

ShortPixel , ortalama %84 sıkıştırma ile kazanan oldu. En iyi çevrimiçi sıkıştırma aracı kategorisindeki Kompresör ve ImageOptim ile aynı. İkinci en iyi eklenti, ortalama %70 sıkıştırma ile Imagify oldu. ShortPixel'in şu anda bu kategorinin mutlak kazananı olduğunu beyan ederim.

PNG'leri Sıkıştırmak için En İyi WordPress Eklentisi

En iyi PNG sıkıştırma eklentisi, %56 sıkıştırma ile TinyPNG tarafından JPEG ve PNG resimlerini sıkıştır olarak adlandırılır. İlginç bir şekilde, en iyi sonuç, yine en iyi çevrimiçi sıkıştırma aracı kategorisindekiyle aynıdır. Ancak, burada biraz daha rekabetçi olan diğer eklentiler, yaklaşık %50 sıkıştırma ile .

Genel Olarak Görüntü Sıkıştırma için En İyi WordPress Eklentisi

Bence kullanıcı deneyimi, farklı ayarlar ve sıkıştırma arasındaki en iyi oran ShortPixel eklentisindendi. Genel olarak, birçok seçeneğe sahip, aynı zamanda zaten harika varsayılan ayarlara sahip çok sağlam bir eklentidir. Eklentiyi kayıttan hemen sonra kullanmaya başlayabilirsiniz ve en önemlisi sıkıştırma harikadır. Şu anda, özellikle görüntülerin çoğu JPEG ise, kendi web sitem için ShortPixel eklentisini kullanırdım.

Çözüm

Uzun bir yolculuktu, değil mi? Bu arada, child.jpg resmimizi %95'e kadar sıkıştırmayı başardık. Yalnızca bu 3 basit adımı izlerseniz web siteniz çok daha hızlı çalışabilir. Onları bir kez daha tekrarlayalım:

• Doğru görüntü biçimini seçin
• Yüklemeden önce resmi yeniden boyutlandırın
• Görüntüyü çevrimiçi araçlarla veya WordPress eklentileriyle sıkıştırın

Diğer bir önemli şey ise, her görüntü için yalnızca bir araç veya WordPress eklentisi kullanmanızdır, çünkü çoğu bir tür kayıplı sıkıştırmaya sahiptir, bu da görüntünüzün kalitesinin her ek sıkıştırmada daha da kötüleşebileceği anlamına gelir ve bu bizim yapmadığımız bir şeydir. istemiyorum. Ayrıca, aralarındaki kalite karşılaştırmasını kontrol etmek veya diğer bazı araçları ve eklentileri kendi başınıza test etmek isterseniz, tüm test görüntülerini GitHub'a ekledik.

Resimlerinizi sıkıştırmamak için daha fazla bahaneniz olmamalı. Bunu yapmanın birçok aracı ve farklı yolu var ve sonunda buna değdiğini kanıtladık. Çevrimiçi sıkıştırma veya WordPress eklentisi için kendi kişisel kazananınızı seçin ve optimizasyondan önce ve sonra web sitenizin Google PageSpeed ​​puanını kontrol edin. Sitenizin hız ve puan iyileştirme bilgilerini yorum bölümümüzde paylaşın. Ayrıca, bu makalenin görüntü optimizasyonunda size yardımcı olup olmadığını ve bu konudaki düşüncelerinizi bilmek isterim.