WordPress Görüntü Yönetiminde Mükemmel Kılavuz

  1. 1. Şu Anda Okuma: WordPress Görüntü Yönetiminde Mükemmel Kılavuz
  2. 2. WordPress’te Daha Az Bilinen 3 Görüntü Yönetimi İpucu
  3. 3. WordPress Image SEO Hataları ve Nasıl Onarılır

Görsel etki, etkili bir içerik pazarlama planı söz konusu olduğunda en önemli özelliklerden biridir. Yepyeni bir yazı serisine hoş geldiniz – WordPress’te Görüntü Yönetimi için Ultimate Guide.


WordPress’te görüntü varlıklarını yönetmek için gerekli araçları size sunmak için tasarlanmıştır – doğrudan teknik optimizasyonlar, SEO, CDN entegrasyonu ve kütüphane yönetiminden. Bu çok bölümlü kılavuzda, yalnızca sektör uzmanları tarafından denediğimiz veya önerdiğimiz yöntemleri, eğiticileri, eklentileri ve temaları önereceğiz.

Ayrıca WordPress deposunda yüksek kullanımı olan eklentileri körü körüne önermekten kaçınacağız. Bunun yerine, değer teklifi ve performans optimizasyonu arasında mükemmel akor verenlere tavsiye edeceğiz.

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

Sektör lideri WordPress barındırma şirketlerinin (WPEngine ve Pagely) ve ne öğrendi onlar binlerce yüksek profilli müşteriye milyarlarca sayfa görüntüleme sunarken öğrenildi. Sizin için tüm bu bilgileri, çevrimiçi başarınız için küçük paragraflar ve madde işaretleri olarak sıkıştırdık. Şimdi başlayalım, olur mu?

WordPress Görüntüleri için Teknik ve Performans Optimizasyonu İpuçları

WordPress’te mevcut olan birkaç görüntü optimizasyonu seçeneği var. değil web sunucusuna gereksiz yük koymak. Herkesin kullandığı en yaygın resim optimizasyonu ipuçlarına bakacağız meli Özel günlerde işe yarayan diğer birkaç kişi ile birlikte takip edin.

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

Görüntü optimizasyonunun ilk adımı iyi bir başlangıçtır. İyi başlayan bir işin yarısının tamamlandığını söylüyorlar. WordPress’te görüntü optimizasyonu söz konusu olduğunda tam olarak böyle. Her şey doğru görüntü formatını seçerek başlar. JPG ve PNG, içerik pazarlamasında çevrimiçi olarak kullanılan en yaygın iki resim biçimidir.

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

PNG formatı ne zaman kullanılır??

Vektörler, illüstrasyonlar, yazı tipleri, logolar, afişler, şekiller, afişler vb. Gibi düz görüntüler için EPS veya Adobe Illustrator (.AI) biçimi gibi bir vektör biçiminde oluşturulan her şey için bir PNG kullanın. Sonuçta neredeyse sıfır kalite kaybıyla optimize edilmiş bir görüntü elde edersiniz. Bu durumda bir JPG kullanırsanız, boyuttan ödün vermezsiniz, ancak kaliteniz bitebilir. Aslında, daha yüksek çözünürlüklerde PNG, kalite kaybı olmadan daha açık olur. JPG acı çekiyor.

Onun örneğini ele alalım. 5000 piksel çözünürlükte düz bir resim oluşturacağız ve JPG ve PNG olarak kaydedeceğiz.

Test için kullanılan örnek resim

Düz Görüntü
JPG233KB
PNG42KB

Ö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ü dışındaki herhangi bir şey JPG kullanın. İnsanların, yerlerin, şeylerin vb. Fotoğrafları – JPG kullanın. Bu kategori altındaki hemen hemen tüm stok fotoğraflarda JPG kullanılmaktadır. Bir JPG yerine PNG kullanırsanız, ciddi performans sorunları.

Bu durumda çok dikkatli olmanız gerekir. PNG yerine JPG kullanırsanız, çok az hasar olur veya hiç hasar olmaz. Bununla birlikte, 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.

Kurmak: Bu resmi Shutterstock’tan indirdim. 10.3MB çözünürlüğünde × 4562 6149 – esasen 28MP stok fotoğrafı. Baskıya hazır broşür gibi bir şey hazırlamadığımız sürece, bloglarımızda fotoğrafın tam çözünürlüğünü kullanmayacağız. Diyelim ki blogumuzun sabit bir maksimum resim boyutuna sahibiz 1600px.

Deney: Kaynak resmi 1600 piksel olarak yeniden boyutlandıracağız ve dört versiyon – PNG formatı için iki, JPG için iki. Her biçim (JPG / PNG) için (a) önerilen sıkıştırma ayarlarını ve (b) maksimum sıkıştırma ayarlarını kullanacağız.

JEPG deneyi için örnek resim

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

Orijinal Resim (KB)

10870
Hedef Çözünürlüğü1600px
BiçimAyarlarBoyut (KB)% İndirim
JPGAşamalı, Kalite = 85231% 98
Aşamalı Olmayan, Kalite = 85239% 98
PNGSıkıştırma = 05575% 49
Sıkıştırma = 61852% 83
Sıkıştırma = 91750% 84

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

Aynı görüntü ve çözünürlük için JPG sürümü PNG’den% 700 daha hafif!

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

Bloglarda Stok Fotoğrafları Yükleme Kontrol Listesi

Editörlerin, resimlerin tam çözünürlük sürümünü blog yayınlarına doğrudan yükledikleri tonlarca blog var. İşte bloglara stok fotoğraf yüklemek için birkaç işaret. Çok sayıda harika özelliğe sahip IrfanView adlı ücretsiz bir yazılım kullanıyorum. Her birini sizin için açıklayacağım.

1. Resminizi yeniden boyutlandırın

Öncelikle, WordPress sitenizdeki tüm resimleriniz için maksimum çözünürlüğe karar vermeniz gerekiyor. Bu boyutun üzerindeki herhangi bir resim, elbette daha küçük olmadıkça yeniden boyutlandırılır.

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

2. EXIF ​​Verilerini Kaldırma

Normal bir kameraya tıklanan fotoğrafların çok fazla gömülü olması meta – bu, görüntü hakkında küçük (ama kullanışlı) bilgi bitlerinden başka bir şey değildir. Bu tür bilgilere örnek olarak, resmin tıklandığı, ISO ayarları, kamera modeli vb..

İPhone’umda tıklanan rastgele bir fotoğrafın EXIF ​​bilgisi

Fotoğraf bloglama yapmadığımız sürece, genellikle bir blog yayınının resminde bu tür bir bilgi istemiyoruz. IrfanView’da görüntüleri kaydederken veya toplu olarak dönüştürdüğünüzde, EXIF ​​verileri genellikle kaldırılır. Bu, gizliliğinizin korunmasına yardımcı olur – özellikle fiziksel konumunuz. Çoğu fotoğraf için boyut farkı resim başına yaklaşık 200-300 KB.

3. Aşamalı JPG Olarak Kaydet

IrfanView, JEPG’leri varsayılan olarak aşamalı olarak kaydetti

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

4. DPI’yi 72 olarak ayarlayın

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

Tamam, yukarıdakileri özetlemek gerekirse, ayarlarım aşağıda. Blog yayınım için tüm görüntüleri derledikten sonra – görüntüleri WordPress’e yüklemeden önce bu özelliği çalıştırıyorum.

Tipik bir WordPress blogu için IrfanView’da toplu dönüştürme ayarları

5. Görüntülerinizi Optimize Edin

JPG veya PNG kullansanız da, görüntünüzü optimize etmeniz gerekir. Resimlerinizi optimize etmenize ve kaydetmenize yardımcı olan birçok harika çevrimiçi araç var. çok boşluk.

Gibi hizmetler hakkında konuşuyorum TinyPNG veya PNG / JPG resimlerinizi bazı gelişmiş algoritmalarla optimize eden TinyJPG.

TinyPNG’de optimize edilmiş görüntüler

Dürüst olmak gerekirse, algoritmaların nasıl çalıştığını bilmiyorum, ancak işe yarıyorlar ve ne kadar iyi kurtarırsam yapayım her zaman% 50-70’lik bir azalma elde edebildim.

Ayrıca satın alabilirsiniz profesyonel sürüm Photoshop eklentisi olarak 50 $ USD karşılığında Hem Windows hem de Mac sürümleri mevcuttur. Benim amacım için, çevrimiçi sürüm ( Dropbox’a kaydet özelliği) en iyi çalışır.

WordPress’te Görüntü Optimizasyonu Eklentileri

Şimdiye kadar, başladı sağ. Ya şimdi bu gönderiyi tökezlediyseniz ve zaten 100’lerce resim yüklediyseniz? İşte size yardımcı olacak bazı eklentiler:

EWWW Bulut Görüntüsü Optimize Edici

Bu eklenti orijinal ve çılgınca popüler bir çatal EWWW Image Optimizer Eklenti. 500.000’den fazla indirmeyi bir araya getiren bu görüntü optimizasyonu eklentileri, görüntüleri WordPress’e yüklendikçe optimize etmenizi sağlar.

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

Ama sorun burada. Birçok ana bilgisayar (WPEngine dahil), sunucuya çok fazla yük eklediğinden EWWW Görüntü Optimizasyonu eklentisine izin vermez. Bir şekilde sunucu kısıtlamalarını atlamayı başarırsanız, hesabınızın politika ihlalleri nedeniyle askıya alınma riskini göze alabilirsiniz.

İşte burada EWWW Bulut Doktoru eklenti oynamaya geliyor. Görüntüleri buluta optimize etmek için gereken tüm hesaplamaları 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 yük yoktur. Bu, WordPress sitenizdeki tüm yeni ve mevcut resim dönüşümleri için geçerlidir.

Planlar ve Fiyatlandırma: Beklendiği gibi, geliştirici bulut bilgi işlem faturalarını ödemek zorunda olduğu için eklenti ücretsiz değildir. Ancak fiyatlandırma ön ödemeli bir abonelik için 3000 görüntü optimizasyonu için 9 ABD doları maliyet.

EWWW Cloud Optimizer eklentisi güzel tasarlanmış. Ortam tarayıcısı, satın almadan önce kaç görüntüyü optimize etmeniz gerektiğini söyler. Sunucunuzun resimlerini temel alarak, alakalı bir ön ödemeli plan satın alabilirsiniz.

TinyPNG WordPress Eklentisi

Bu, doğrudan TinyPNG / JPG servisiyle entegre olan harika bir görüntü optimizasyonu eklentisidir. WordPress medya kitaplığına otomatik olarak yeni ve mevcut görüntüler yüklendi. Bu eklenti aylık 100 resim optimizasyonu için ücretsiz bir plan sunuyor.

Freddy bir süre önce görüntü optimizasyonu eklentilerinin bir listesini derlemişti – konuyla ilgili daha fazla bilgi edinmek istiyorsanız bunu okuyun.

Sonuç

Bu bizi bu dizideki ilk gönderinin sonuna getiriyor. Bir sonraki makalede, hotlinking’i önleme, uzak sunuculardan görüntü alma ve benzeri gibi daha az bilinen görüntü optimizasyonu ipuçlarının ve püf noktalarının nasıl olduğunu öğrenin. Altında bazı ipuçlarınız var mı doğru başlamak kategori? Aşağıdaki yorumlarda bize bildirin.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map