WordPress Görüntü Yönetimi İçin En İyi Kılavuz

Etkili bir içerik pazarlama planı söz konusu olduğunda görsel etki en önemli özelliklerden biridir. Yepyeni bir gönderi dizisine hoş geldiniz – WordPress'te Görüntü Yönetimine Yönelik En İyi Kılavuz.

Teknik optimizasyonlar, SEO, CDN entegrasyonu ve kütüphane yönetimine kadar WordPress'teki görüntü varlıklarınızı yönetmek için gerekli araçları size sağlamak üzere tasarlanmıştır. Bu çok parçalı kılavuzda, yalnızca denediğimiz veya endüstri uzmanları tarafından önerilen yöntemleri, öğreticileri, eklentileri ve temaları önereceğiz.

WordPress deposunda yüksek kullanımı olan eklentileri körü körüne önermekten de kaçınacağız. Bunun yerine, değer önerisi ve performans optimizasyonu arasındaki mükemmel uyumu yakalayanları tavsiye edeceğiz.

Bunu nasıl yapacağımızı merak ediyor olabilirsiniz. ThemeForest'ta Toplam – Duyarlı Çok Amaçlı WordPress temamızın 24.000'den fazla indirilmesi harika bir gösterge olmayabilir.

Eh, (örneğin WPEngine ve Pagely gibi) endüstri lideri WordPress hosting şirketleri arasından en iyi bloglar dolaştılar ve yüksek profilli müşterileri Binlerce sayfa görüntüleme milyarlarca sunum yapılırken öğrendiklerini öğrendim. Tüm bu bilgileri sizin için çevrimiçi başarınız için küçük paragraflara ve madde işaretlerine sıkıştırdık. Şimdi başlayalım, olur mu?

WordPress Görselleri için Teknik ve Performans Optimizasyon İpuçları

Web sunucusu üzerinde gereksiz yük koymayın WordPress mevcut epeyce görüntü optimizasyonu seçenekleri vardır. Herkesin izlemesi gereken en yaygın görüntü optimizasyon ipuçlarından bazılarına ve özel durumlarda kullanışlı olan birkaç diğer ipucuna bakacağız.

JPG mi, PNG mi? Doğru Görüntü Formatını Kullanma

Görüntü optimizasyonunda ilk adım iyi bir başlangıçtır. İyi başlamış bir işin yarısı yapılır derler. WordPress'te görüntü optimizasyonu söz konusu olduğunda durum tam olarak budur. Her şey doğru görüntü formatını seçmekle başlar. JPG ve PNG, içerik pazarlamasında çevrimiçi olarak kullanılan en yaygın iki resim formatıdır.

İşin püf noktası, her bir görüntü türü için hangi biçimin seçileceğini anlamaktır. Yanlış olanı seçmek, görüntü boyutunda muazzam bir artışa neden olur. İşte kurallar.

PNG formatı ne zaman kullanılır?

Düz görüntüler için – vektörler, illüstrasyonlar, yazı tipleri, logolar, afişler, şekiller, afişler vb. – EPS veya Adobe Illustrator (.AI) formatı gibi vektör formatında oluşturulan her şey için bir PNG kullanın. Neredeyse sıfır kalite kaybıyla optimize edilmiş bir görüntü elde edeceksiniz. Bu durumda bir JPG kullanırsanız, boyuttan ödün vermezsiniz ancak kaliteden ödün verebilirsiniz. Aslında, daha yüksek çözünürlüklerde PNG kalite kaybı olmadan daha hafif olacaktır. JPG zarar görecektir.

Onu örnek al. 5000 pikselde düz bir görüntü oluşturacağız ve onu JPG ve PNG olarak kaydedeceğiz.

düz görüntü
JPG	233KB
PNG	42KB

Özetle, JPG görüntüsü aynı çözünürlük için PNG'den %455 daha yüksekti.

JPG formatı ne zaman kullanılır?

Diğer her şey için bir JPG kullanın. Düz veya vektör görüntüsü dışında herhangi bir şey, JPG kullanın. İnsanların, yerlerin, nesnelerin vs. fotoğrafları – JPG kullanın. Bu kategori altındaki hemen hemen tüm stok fotoğrafları JPG kullanır. JPG yerine PNG kullanırsanız, bazı ciddi performans sorunlarıyla karşılaşırsınız.

Bu durumda ekstra dikkatli olmanız gerekir. PNG yerine JPG kullanırsanız, çok az hasar olur veya hiç hasar olmaz. Ancak, bir JPG durumunda kanlı bir PNG kullanırsanız, hasar için çok fazla alan yaratırsınız. Bu örneğe bir göz atın.

Kurulum: Bu resmi Shutterstock'tan indirdim , yaklaşık 10.3MB ağırlığında ve 6149×4562 çözünürlükte – aslında 28MP stok fotoğraf. Basılı bir broşür gibi bir şey hazırlamadıkça, bloglarımızda fotoğrafın tam çözünürlüğünü kullanmayacağız. Diyelim ki blogumuzun 1600 piksellik sabit bir maksimum resim boyutuna sahibiz .

Deney: Kaynak görüntüyü 1600 piksel olarak yeniden boyutlandıracağız ve dört sürüm oluşturacağız – ikisi PNG formatı için, ikisi JPG için. Her format (JPG/PNG) için (a) önerilen sıkıştırma ayarlarını ve (b) maksimum sıkıştırma ayarlarını kullanacağız.

Sonuçlar: İzlemeniz için güzel bir grafikte sonuçlar:

Orijinal Resim (KB)		10870
Hedef Çözünürlük		1600 piksel
Biçim	Ayarlar	Boyut (KB)	% Kesinti
JPG	Aşamalı, Kalite = 85	231	%98
	Progresif Olmayan, Kalite = 85	239	%98
PNG	Sıkıştırma = 0	5575	%49
	Sıkıştırma = 6	1852	%83
	Sıkıştırma = 9	1750	%84

İlk bakışta PNG'nin %84 sıkıştırılmasının JPG'de elde edilen %98'e kıyasla yeterince iyi olduğu düşünülebilir. Bu tamamen doğru değil. Görüntü boyutlarına daha yakından bakarsanız, PNG'nin 1,7 MB'ın biraz üzerinde, JPG'nin ise 0,22 MB olduğunu görürsünüz. Bu , PNG'nin aynı görüntünün aynı çözünürlükteki JPG versiyonundan 8 kat daha ağır olduğu anlamına gelir. Başka bir deyişle, aynı görüntü ve çözünürlük için JPG sürümü PNG'den %700 daha hafiftir!

Aynı görüntü ve çözünürlük için JPG versiyonu PNG'den %700 daha hafiftir!

Genel bir kural olarak, düz görüntüler için PNG ve diğer her şey için JPG kullanın.

Bloglara Stok Fotoğraf Yüklemek için Kontrol Listesi

Editörlerin, blog gönderilerinde görüntünün tam çözünürlüklü sürümünü doğrudan yüklediği tonlarca blog var. İşte bloglara stok fotoğraf yüklemek için birkaç ipucu. Birçok harika özelliği olan IrfanView adlı ücretsiz bir yazılım kullanıyorum. Her birini sizin için resimleyeceğim.

1. Resminizi Yeniden Boyutlandırın

Öncelikle, WordPress sitenizdeki tüm resimleriniz için bir maksimum çözünürlüğe karar vermeniz gerekir. Bu boyutun üzerindeki herhangi bir görüntü, elbette daha küçük olmadığı sürece yeniden boyutlandırılacaktır.

IrfanView, tek seferde bir dizi görüntüye bir işlev listesi uygulayabilen bir Toplu Dönüştürme özelliğine sahiptir (uygulamayı başlattıktan sonra B'ye basın). Amaçlarımız için, işlevler arasında yeniden boyutlandırma, kırpma, filigran ekleme vb.

2. EXIF ​​Verilerini Kaldırın

Normal bir kamerada tıklanan fotoğraflarda çok sayıda gömülü meta veri bulunur – bu, görüntü hakkında küçük (ama kullanışlı) bilgi parçalarından başka bir şey değildir. Bu tür bilgilere örnek olarak, resmin tıklandığı yerin GPS koordinatları, ISO ayarları, kamera modeli vb.

Fotoğraf bloglama yapmadığımız sürece, genellikle bir blog gönderisinin görselinde bu tür bilgileri istemiyoruz. IrfanView'da görüntüleri kaydettiğinizde veya toplu olarak dönüştürdüğünüzde, EXIF ​​verileri genellikle kaldırılır. Bu, gizliliğinizi, özellikle de fiziksel konumunuzu korumanıza yardımcı olur. Çoğu fotoğraf için boyut farkı, resim başına yaklaşık 200-300 KB'dir.

3. Aşamalı JPG olarak kaydedin

Aşamalı bir JPG görüntüsü, görüntüyü katman katman yükler ve böylece yükleme süresini hızlandırır. KeyCDN gibi İçerik Dağıtım Ağları, görüntü dağıtımını hızlandırmak ve depolamayı optimize etmek için JPG'leri otomatik olarak aşamalı JPG'lere dönüştürmeye başladı.

4. DPI'yi 72'ye ayarlayın

DPI veya inç başına nokta, görüntünün kalitesinin bir ölçüsüdür. Baskı malzemesi için yüksek bir DPI değeri kullanılır. Web için 72 değeri mükemmeldir.

Tamam, yukarıdakileri özetlersek, ayarlarım aşağıdadır. Görüntüleri WordPress'e yüklemeden önce, blog yazım için tüm görüntüleri derledikten sonra bu özelliği çalıştırıyorum.

5. Resimlerinizi Optimize Edin

JPG veya PNG kullanmış olmanız fark etmez, resminizi optimize etmeniz gerekir. Resimlerinizi optimize etmenize ve çok fazla yerden tasarruf etmenize yardımcı olacak çok sayıda harika çevrimiçi araç var.

PNG/JPG resimlerinizi bazı gelişmiş algoritmalarla optimize eden TinyPNG veya TinyJPG gibi hizmetlerden bahsediyorum.

Dürüst olmak gerekirse, algoritmaların nasıl çalıştığını bilmiyorum ama çalışıyorlar ve ne kadar iyi kurtarırsam kurtarayım her zaman %50-70 oranında bir azalma elde edebildim.

Ayrıca hizmetin pro sürümünü Photoshop eklentisi olarak 50 USD karşılığında satın alabilirsiniz. Hem Windows hem de Mac sürümleri mevcuttur. Benim amacım için, çevrimiçi sürüm ( Dropbox'a Kaydet özelliğiyle birlikte) en iyi sonucu verir.

WordPress'te Görüntü Optimizasyon Eklentileri

Şimdiye kadar, sağ başlarken adımlarını öğrendik. Ya şimdi bu gönderiye rastladıysanız ve zaten 100'lerce resim yüklediyseniz? İşte size bu konuda yardımcı olacak bazı eklentiler:

EWWW Bulut Görüntü İyileştirici

Bu eklenti, orijinal ve son derece popüler olan EWWW Image Optimizer eklentisinin bir çatalıdır. 500.000'den fazla indirme toplayan bu görüntü optimizasyon eklentileri, görüntüleri WordPress'e yüklenirken optimize etmenize olanak tanır.

Onu rakiplerinden ayıran şey, veritabanınızdaki mevcut görüntüleri optimize etme yeteneğidir, bu da büyük bir performans artışı sağlar. Trafiğinizin çoğu eski makalelerden geldiğinden, bant genişliği maliyetlerinden de önemli ölçüde tasarruf sağlar. Ayrıca isteğe bağlı olarak (çıplak gözle zar zor görülebilen) kayıplı görüntü sıkıştırmayı etkinleştirmeyi seçebilirsiniz, ancak çok fazla alan ve bant genişliği tasarrufu sağlayabilir. Optimizasyon teknolojisi açısından, yeni ve mevcut görüntüleri optimize etmek için TinyPNG veya TinyJPG'nin API'sini kullanabilir.

Ama sorun şu. Pek çok ana bilgisayar (WPEngine dahil), sunucuya çok fazla ek yük getirdiği için EWWW Image Optimization eklentisine izin vermez. Bir şekilde sunucu kısıtlamalarını aşmayı başarırsanız, hesabınızın politika ihlalleri nedeniyle askıya alınması riskini alabilirsiniz.

EWWW Cloud Optimizer eklentisinin devreye girdiği yer burasıdır . Görüntüleri buluta optimize etmek için gereken tüm hesaplamayı boşaltır ve optimize edilmemiş görüntüleri optimize edilmiş olanlarla değiştirir. Sıkıştırma için neredeyse sıfır CPU gücü kullanıldığından, sunucu üzerinde ek bir yük yoktur. Bu, WordPress sitenizdeki tüm yeni ve mevcut resim dönüşümleri için geçerlidir.

Planlar ve Fiyatlandırma: Tahmin edilebileceği gibi, geliştiricinin bulut bilişim faturalarını ödemesi gerektiğinden eklenti ücretsiz değildir. Ancak, ön ödemeli bir abonelik için 3000 görüntü optimizasyonu için 9 ABD Doları tutarındaki fiyatlandırma son derece makul.

EWWW Cloud Optimizer eklentisi güzel bir şekilde tasarlanmıştır. Medya tarayıcı, satın almadan önce optimize etmeniz gereken görüntü sayısını söyler. Sunucunuzun resimlerine dayanarak, ilgili bir ön ödemeli plan satın alabilirsiniz.

TinyPNG WordPress Eklentisi

Bu, doğrudan TinyPNG/JPG hizmetiyle entegre olan bir başka harika görüntü optimizasyon eklentisi. WordPress medya kitaplığına otomatik olarak yüklenen yeni ve mevcut resimler. Bu eklenti, ayda 100 görüntü optimizasyonu içeren ücretsiz bir plan sunar.

Freddy bir süre önce görüntü optimizasyon eklentilerinin bir listesini derlemişti – konu hakkında daha fazla bilgi edinmek istiyorsanız bir okuyun.

Çözüm

Bu, bizi bu serideki ilk yazının sonuna getiriyor. Bir sonraki makalede, hotlinking'i önleme, uzak sunuculardan görüntü alma ve benzeri gibi daha az bilinen görüntü optimizasyon ipuçlarının ve püf noktalarının nasıl olduğunu öğrenin. Doğru başlangıç kategorisi altında bazı ipuçlarınız var mı? Aşağıdaki yorumlarda bize bildirin.