WordPress görüntü yönetimi için ana kılavuz
Görsel etki, etkisi olan içerik pazarlama planları açısından en önemli özelliklerden biridir. WordPress’te Yeni Post Serisine Hoş Geldiniz – Resim Yönetimi Ana Kılavuzu. Bu, WordPress’teki görüntü varlıklarınızı doğrudan teknik optimizasyon, SEO, CDN entegrasyonu ve kütüphane yönetiminden yönetmek için gerekli araçları sunmak için tasarlanmıştır. Bu çok bölümlü kılavuzda, sadece endüstriyel uzmanlar tarafından denediğimiz veya önerdiğimiz yöntemler, öğreticiler, eklentiler ve temaları önereceğiz. Ayrıca WordPress depolarında yüksek kullanımı olan kör eklentiler önermekten kaçınacağız. Tersine, değer önermeleri ve performans optimizasyonu arasında en uygun olanı önereceğiz.
Nasıl yapacağımızı merak ediyor olabilirsiniz. 24.000+ Toplam İndirme – Themeforest’teki çok yönlü WordPress temamız iyi bir gösterge olmayabilir. Eh, sektördeki önde gelen WordPress barındırma şirketinden (WPengine ve Paceless gibi) en iyi blogları araştırdık ve binlerce yüksek profilli müşteriye milyarlarca sayfa servis ederken öğrendiklerini öğrendik. Sizin için tüm bu bilgileri çevrimiçi başarınız için küçük paragraflara ve noktalara dönüştürüyoruz. Şimdi başlayalım, ha? WordPress görüntüleri için teknik optimizasyon ve performans ipuçları WordPress’te web sunucusunu gereksiz yüklemeyen birkaç resim seçeneği vardır. Özel etkinliklerde yararlı olan diğer bazı ipuçlarıyla birlikte herkesin takip etmesi gereken en yaygın görüntü optimizasyon ipuçlarından bazılarını göreceğiz.
JPG veya PNG? Doğru Görüntü Biçimini Kullanma Görüntü optimizasyonundaki ilk adım iyi bir başlangıçtır. İyi başlayan işin yarısı tamamlandığını söylüyorlar. WordPress’teki görüntü optimizasyonu açısından olan buydu. Her şey doğru resim biçimini seçerek başlar. JPG ve PNG, içerik pazarlamasında çevrimiçi olarak kullanılan en yaygın iki görüntü formatıdır. İşin püf noktası, her bir görüntü türü için hangi biçimi seçileceğini anlamaktır. Yanlış seçmek anıtsal görüntü boyutunda bir artışa neden olur. İşte kurallar. PNG formatını ne zaman kullanmalı? Vektörler, illüstrasyonlar, yazı tipleri, logolar, afişler, şekiller, afişler vb. Gibi düz görüntüler için vb. – EPS veya Adobe Illustrator (.i) formatı gibi vektör formatlarında yapılan her şey PNG kullanın. Sonunda neredeyse sıfır kaybetme kalitesiyle optimize edilmiş bir görüntü elde edeceksiniz. Bu durumda JPG kullanıyorsanız, boyuttan ödün vermeyeceksiniz, ancak kaliteden tükenebilirsiniz. Aslında, daha yüksek bir çözünürlükte, PNG kaliteyi kaybetmeden daha hafif olacaktır. JPG acı çekecek. Onun örneğini al. 5000 pikselde düz bir görüntü yapacağız ve JPG ve PNG olarak saklayacağız.
Test için kullanılan örnek görüntü
jpg
233KB
</s
Kısacası, JPG% 455 görüntüsü aynı çözünürlük için PNG'den daha yüksektir. JPG formatını ne zaman kullanmalı? Diğerleri için JPG kullanın. Düz bir görüntü veya vektör dışında herhangi bir şey, JPG kullanın. İnsanların, yerlerin, nesnelerin vb. Fotoğrafları - JPG kullanın. Bu kategori altındaki neredeyse tüm fotoğraf stokları JPG kullanır. PNG'yi JPG'nin yerine kullanıyorsanız, bazı ciddi performans sorunları yaşayacaksınız. Bu konuda çok dikkatli olmalısınız. JPG'yi PNG'nin yerine kullanırsanız, biraz hasar veya hiç hasar olmaz. Ancak, JPG durumunda kanlı bir PNG kullanıyorsanız, hasar için çok fazla alan yaratırsınız. Bu örneğe bakın. Kurulum: Bu görüntüyü, 6149 × 4562 çözünürlüğünde 10.3MB ağırlığında olan Shutterstock'tan indirdim - temelde 28MP stok fotoğrafları. Hazır bir broşür gibi bir şey hazırlamadığımız sürece, blogumuzda tam bir fotoğraf çözünürlüğü kullanmayacağız. 1600 piksel blogumuzun maksimum görüntü boyutuna sahip olduğumuzu varsayalım. Deney: Kaynak görüntünün boyutunu 1600 piksel olarak değiştireceğiz ve dört versiyon yapacağız - ikisi PNG için ve JPG için iki format. Her format (JPG/PNG) için (a) önerilen sıkıştırma ayarları ve (b) maksimum sıkıştırma ayarlarını kullanacağız.
JEPG deneyleri için resim örnekleri
Sonuçlar: Takip etmeniz için iyi bir grafikte sonuçlar:
, kalite = 85
Progresif olmayan, kalite = 85
239
%98
>
JPG'de elde edilen% 98'e kıyasla. Bu tamamen doğru değildir. Görüntünün boyutuna daha yakından bakarsanız, PNG'nin 1.7MB'den biraz daha ağır olduğunu, JPG'nin 0.22MB olduğunu göreceksiniz. Yani, PNG aynı resmin JPG versiyonundan 8 kat daha ağırdır. Başka bir deyişle, aynı görüntü ve çözünürlük için, JPG sürümü% 700 PNG'den daha hafiftir! Aynı resim ve çözünürlük için JPG sürümü% 700 PNG'den daha hafiftir! Pratik bir kural olarak, diğerleri için düz ve JPG görüntüleri için PNG kullanın. Kontrol listesi Stok fotoğraflarını blogda yüklemek için, editörün blog yayınlarında resmin tam çözünürlük sürümünü doğrudan yüklediği birçok blog vardır. Stok fotoğraflarını bloga yüklemek için bazı talimatlar. Birçok olağanüstü özelliğe sahip IrfanView adlı ücretsiz bir yazılım kullanıyorum. Her birini sizin için göstereceğim.
1. İlk resim boyutunuzu değiştirin, WordPress sitenizdeki tüm resimleriniz için maksimum çözünürlüğe karar vermeniz gerekir. Boyutun üzerindeki her resim, elbette daha küçük hariç, boyut olarak değiştirilecektir. IrfanView, bir görüntü koleksiyonuna bir işlev listesi uygulayabilen bir toplu dönüştürme özelliğine (uygulamayı başlattıktan sonra B'ye basın) sahiptir. Amacımız için işlevleri arasında boyut değiştirme, kesme, su işaretleri ekleme vb. 2. Sil EXIF Fotoğraf Verileri Sıradan bir kameraya tıklanan birçok meta veriye sahiptir - bu da resim hakkında küçük bilgilerden (ancak yararlı) başka bir şey değildir. Bu bilginin örnekleri arasında görüntünün tıklandığı GPS koordinatları, ISO ayarları, kamera modelleri vb.Rastgele fotoğraflardan exif bilgileri iPhone'uma tıklandı
Fotoğraf yapmazsak, genellikle blog yazısı resminde böyle bilgi istemiyoruz. IrfanView'da görüntü toprağını kaydettiğinizde veya dönüştürdüğünüzde, EXIF verileri genellikle silinir. Bu, gizliliğinizin korunmasına yardımcı olur - özellikle fiziksel konumunuzu. Çoğu fotoğraf için boyut farkı görüntü başına 200-300 kb civarındadır.
3. İlerici JPG olarak kaydedin
IrfanView Jepg'i varsayılan olarak ilerici olarak depolar
5. JPG veya PNG kullanmış olsanız da, resminizi optimize edin, görüntünüzü optimize etmeniz gerekir. Görüntüleri optimize etmenize ve çok fazla alan kaydetmenize yardımcı olan birçok şaşırtıcı çevrimiçi araç var. PNG/JPG görüntüsünüzü birkaç gelişmiş algoritma ile optimize eden TinyPNG veya TinyJPG gibi hizmetlerden bahsediyorum.
Tinypng'de optimize edilmiş görüntüler Dürüst olmak gerekirse, algoritmanın nasıl çalıştığını bilmiyorum, ama bunu yapıyorlar ve ne kadar iyi tutsam da her zaman% 50-70 azalma alabilirim.
Ayrıca, 50 $ USD için bir Photoshop eklentisi olarak hizmet versiyonu da satın alabilirsiniz.Windows ve Mac sürümleri mevcuttur.Amacım için, çevrimiçi sürüm (artı Dropbox özelliği özelliği) en iyisini yapıyor.Eklenti WordPress'teki görüntüleri optimize etme Şimdiye kadar, düzgün bir şekilde başlama adımlarını öğrendik.Bu yazıyı şimdi bulursanız ve zaten 100 yüklenmiş resminiz varsa ne olur?İşte size yardımcı olacak bazı eklentiler: Optimal Image Awan Ewww Bu eklenti, orijinal ve çok popüler EWWW görüntü optimize edici bir çataldır. 500.000'den fazla indirme toplayan bu resim optimizasyon eklentisi, WordPress'e yüklendiğinde resimleri optimize etmenizi sağlar. Onu rekabetten ayıran şey, veritabanınızdaki görüntüleri optimize etme yeteneğidir, bu da muazzam performans iyileştirmeleri ile sonuçlanır. Ayrıca, trafiğinizin çoğu eski makaleden geldiğinden önemli bant genişliği maliyetlerinden de tasarruf sağlar. Ayrıca (neredeyse çıplak gözle neredeyse görünmez) kayıplı görüntü sıkıştırmasını etkinleştirmeyi seçebilirsiniz, ancak çok fazla alan ve bant genişliği tasarrufu sağlayabilirsiniz. Optimizasyon teknolojisi açısından, yeni ve mevcut yeni görüntüleri optimize etmek için TinyPNG veya TinyJPG'nin API'sını kullanabilirsiniz. Ama sorun bu. Birçok ana bilgisayar (WPengine dahil), sunucuda birçok ek yük sağladığı için EWWW görüntü optimizasyon eklentisine izin vermez. Sunucu sınırını bir şekilde başarıyla geçerseniz, politika ihlali nedeniyle askıya alınma riski altında olabilirsiniz. EWWW bulut optimize edici eklentisinin bir rol oynadığı yer burasıdır. Bu, görüntüleri buluta optimize etmek ve yalnızca optimizasyonla optimize edilmeyen görüntüleri değiştirmek için gereken tüm hesaplamaları ortadan kaldırır. Sıkıştırma için neredeyse sıfır CPU gücü kullanıldığından, sunucuda ek yük yoktur. Bu, tüm yeni görüntü dönüşümleri ve zaten WordPress sitenizdeki olanlar için geçerlidir. Paket &
Fiyat: Beklendiği gibi, bu eklenti ücretsiz değil çünkü geliştirici bulut bilişim faturaları ödemek zorundadır. Bununla birlikte, fiyat, ön ödemeli abonelikler için optimize eden 3000 görüntü için 9 USD maliyetle çok makul. EWWW Bulut Optimizer eklentisi güzel bir şekilde tasarlanmıştır. Medya tarayıcıları, satın alma işleminden önce kaç görüntünün optimize edilmesi gerektiğini söyler. Sunucu resminize dayanarak, ilgili bir ön ödemeli paket satın alabilirsiniz. WordPress Tinypng Bu, doğrudan TinyPNG/JPG hizmetleriyle entegre edilmiş diğer harika görüntüleri optimize eden bir eklentidir. Otomatik olarak yeni ve mevcut görüntüler WordPress Medya Kütüphanesine yüklenir. Bu eklenti, ayda optimize eden 100 resimden oluşan ücretsiz bir paket sunar. Freddy, bir süre önce görüntü optimizasyon eklentilerinin bir listesini derledi - konu hakkında daha fazla bilgi edinmek istiyorsanız okuyun. Bu sonuç bizi bu serideki ilk yazının sonuna getiriyor. Bir sonraki makalede, sıcak bağlantıyı önlemek, uzun mesafeli sunuculardan ve benzerlerinden fotoğraf çekmek gibi daha az bilinen görüntüleri optimize etmek için bazı ipuçlarının ve püf noktalarının nasıl iyi öğrenin. Doğru başlangıç kategorisinde birkaç ipucunuz var mı? Bize aşağıdaki yorumlarda anlatın.
