WordPress için Görüntüler Nasıl Optimize Edilir, Komple Kılavuz

Web’deki kişilerin verileri kullanmak için çok fazla zamanı yok-çünkü sonuncusu çok şey var. Her şeyi okumak için zamanımız olmayan çok fazla veri var! Modern Web için bir içerik küratörü olarak işiniz verimi en üst düzeye çıkarmaktır. Daha az kelimeyle ne kadar çok ortaya çıkarırsanız, işinizde o kadar iyi olursunuz. Resim neden önemlidir? Gönderilerinizde ve makalelerinizde resim kullanmanın (ve olmalı) birçok nedeni vardır:
Resim, harekete geçme daveti (CTA) için görsel bir stimülasyon olarak işlev görür. CTA, ziyaretçilerinizin yapmasını istediğiniz herhangi bir görev olabilir. CTA General, bülteninize abone olmayı, makalelerinizi sosyal medya aracılığıyla paylaşmayı veya ürünlerinizi satın almayı içerir.
Görüntüler, yazarın okuyucu ile inşa etmek istediği ilişkiyi geliştirir.
Resim daha az daha fazla aktarıyor.
Bu nedenle, temelde, okuyucunun zihninde işaretleri bırakmak için sunumumuzda (blog yayınları, gayri resmi raporlar, gerçek PowerPoint sunumları, vb.) Kullanmamız önemlidir!
Fakat bekle! Bir problem var! Görüntüler, modern web siteleri tarafından kullanılan bant genişliğinin yaklaşık% 63’ünü harcıyor, bu nedenle hızı doğru bir şekilde optimize etmek giderek daha önemli. Sayfanın açılış saatinde bir saniye geciktirmek,% 7 dönüşüm oranını azaltabilir, insanların kısa bir dikkat aralığına sahip olduklarını (modern içerik üretimi seviyesinin zayıf yönlerinden biri) belirledik. Doğru görüntüyü kullansanız bile, kabul edilebilir bir sürede yüklenmezse, faiz ortadan kalkacaktır. Çoğu site aynı soruna sahiptir – çok iyi görüntüler kullanırlar, ancak görüntünün kötü ziyaretçilere sunulma şekli. Büyük boyut, zayıf optimizasyon, yanlış format, çok büyük, tepkisiz görüntüler ve dikkatsiz SEO hataları olan boyutlar (boyutlar), modern web’in karşılaştığı en yaygın sorunlardan bazılarıdır. Bugünkü makalede, size bu sorundan kaçınmak için kullanabileceğiniz 10 kolay görüntü optimizasyonu ipucu vereceğiz. Görüntünün boyutunu büyük bir boyutla değiştirin
“Ekstra Fransız patatesleri” her zaman iyi değil mi?

Bu klasik. Sitenizin “Team” sayfasında 150×150 piksel fotoğrafına ihtiyacınız olduğunu varsayalım. Genellikle, 5MP headshot kullanacak, biraz düzenleyecek ve son olarak yükleyeceksiniz. Sorunu görüyor musunuz? Bazı insanlar hemen gerçek 5MP resmini yükler! WordPress teması tüm 5MP görüntüleri (yani 5 x 10^6 piksel) içerecek ve gerekli boyutlara 150x150px’e indirmek için bir tarayıcı isteyecek. Özünde, tarayıcı orijinal görüntünün yalnızca% 0.0045’ini görüntüler! Sonunda bant genişliğinizi ve ziyaretçilerinizi boşa harcıyorsunuz (resimler StackPath CDN gibi içerik dağıtım ağları aracılığıyla sunsanız bile), daha fazla sabit disk alanları harcayın ve açık süreyi artırın. Sitenizde istediğiniz bir özellik yoktur. Her zaman boyutu değiştirin (ve tasarruf etme niyetimin boyutunu değiştirerek) görüntüleri gerekli boyutlara değiştirin ve ardından yükleyin!
Bunu yapmak için lüks yazılımlara ihtiyacınız yok – boyut değiştirmek ve görüntüleri hızlı bir şekilde optimize etmek için kullanabileceğiniz Imageresize.org gibi ücretsiz çevrimiçi araçlar vardır. Fotoğraf ayarlarınızı yükleyip ayarlayın. Bittiğinde, sitenizde kullanılmak üzere optimize edilmiş görüntüleri indirin. Ayrıca dosya boyutunu azaltmak istiyorsanız hızlı görüntü kompresörleri de sunarlar. Kullanışlı araçlar:
IrfanView, optimizasyon, su işareti ve sınırlar gibi gelişmiş seçeneklerle görüntünüzün boyutunu değiştirmek için mükemmel bir ücretsiz yazılımdır.

ImageMagick, çeşitli programlama dillerinde ve işletim sistemlerinde kullanılabilen sofistike bir açık kaynaklı araçtır. Kendi uygulamanızı yazabilir veya sadece komut satırından kullanabilirsiniz.
ImageOptim (Mac), tüm klasörü sürüklemenize ve birçok görüntüyü hızlı bir şekilde optimize etmenize olanak tanır. Tinypng, ateşli bir çevrimiçi görüntü sıkıştırma aracıdır.
2. Doğru görüntü biçimini kullanın
Görüntüler için kullanılan biçim önemli bir rol oynar. Genel bir kural olarak, klip sanat vb. Gibi bilgisayarlar tarafından üretilen vektör grafikleri ve görüntüler için PNG kullanın. Fotoğraflar veya çeşitli renklerle resimler için JPEG kullanın. Ayrıntılı açıklamalar için StackOverflow’un bu olağanüstü cevabına bakın. 3. Progressive JPEG kullanın
JPG Basic (normal) ve ilerici JPG
Sıradan insanlar için JPEG iki türden oluşur – taban çizgisi ve ilerici. Görsel olarak, her ikisi de aynı. Fark, yüklenme biçiminde yatmaktadır:

JPEG taban çizgisinin yalnızca bir katmanı vardır – tüm görüntüyü içerir. İstendiğinde, tüm resim hemen yayınlanır.

Progressive JPEG birçok katmanlı görüntüler düzenler. İlerici JPEG görüntüleri, kalitesini kademeli olarak artıran katmanda katman olarak yayınlanır, sonuçta size kayıpsız bir ekran verir.
IrfanView, partiin aşamalı jpeg ile dönüşümünü destekliyor
Tüm ana görüntü boyutu değiştiriciler, görüntüleri ilerici JPEG olarak saklamanıza izin verir. 4. Tembel yükü etkinleştirin
Tembel yükleme, görüntünün yalnızca ziyaretçiler görüntü ekranının çerçevesine geçtiğinde yüklendiği çok iyi bir kaynak tasarruf tekniğidir. Makalesine göz atın – “2014’te 15 en çok yakıt arabası”. Doğal olarak, bu makale en az 15 resim içerecektir. Ekran cihazının yüksekliği ne olursa olsun – monitör, tablet veya akıllı telefon, ekran çerçevesine 15 görüntünün tamamını yükleyemezsiniz. Tüm görüntüleri görmek için aşağı kaydırmalısınız.

Tembel yükleme etkinleştirildiğinde, görüntü yalnızca ziyaretçiler görüntünün etrafında olduğunda yüklenir. Başka bir deyişle, görmek için aşağı kaydırdığınızda görüntü doğrudan yüklenmeye başlar. Ancak, ilk birkaç görüntü anında yüklenir, çünkü zaten görüntüleme çerçevesindesiniz. Tembel yükleme bant genişliğini her iki uçta tasarruf eder ve açık süreyi artırır! BJ Lazy Load eklentisi ile WordPress’te tembel yüklemeyi kullanabilirsiniz. 5. İçerik Dağıtım Ağı (CDN) kullanarak CDN ekleyin Sunucudan ziyaretçinin konumuna fiziksel olarak en yakın görüntüler sunacaktır. Hindistan’dan gelen ziyaretçiler resim isterse ve CDN’nin Tokyo ve New York’ta pop (katılım noktası veya sadece sunucular) varsa, Tokyo’da bulunan sunuculardan görüntüler sunulacak.

Yeterince büyük bir trafiğiniz varsa, açılış saatinizi azaltmak ve genel performans elde etmek için WordPress ile bir CDN hazırlamanız gerekir. Burada, WPexplorer’da CloudFlare kullanıyoruz ve kontrol etmek isteyebileceğiniz önerilen ücretsiz CDN hizmetlerinin ek bir listesine sahibiz. Ancak kendi CDN’sini hazırlamak karmaşık olabilir, eklentinin yararlı olabileceği yerdir. Publitio Bozuk Medya

Bilgi ve İndir Demo
İyi bir seçim, medya dosyalarınızı Cloud Publitio tabanlı medya yöneticilerinde depolamanıza olanak tanıyan Publitio boşaltma medya eklentisidir. Bir eklenti yüklü olduğunda, tüm medya kitaplığını sunucunuzdan kolayca taşıyabilir ve hatta bunu yaparken resim ve video kalitesini optimize edebilirsiniz. Taşındıktan sonra, görüntü Publitio CDN’den hızlı bir şekilde sunulur. Bu çok fazla sunucu alanı serbest bırakır ve sitenizi gerçekten hızlandırabilir (özellikle sınırlı alana sahip bir bütçe barındırma paketi kullanıyorsanız). Yeni bir gönderiyi düzenlediğinizde buluta otomatik olarak yeni medya eklemek için basit bir senkronizasyon bile var. Ve Publitio Premium paketi, özel CNAMES, bazı su işaretleri ve hatta video şifrelemesi için ek özellikler içerir. ‘Alt’ özniteliğini bildirin ‘Alt’ arama motorları için görüntüleri açıklar. Görüntü yüklenemezse bu alana girdiğiniz metin kullanıcıya görüntülenir. Birçok insan bu alanın boşaltılması eğilimindedir. Bu SEO için çok zararlıdır ve trafiği kaybedersiniz. Her zaman Site anahtar kelimelerinizi Alt etiketinize resminize girmeye çalışmalısınız. 7. Sıkıştırma görüntülerini optimize et

Görüntü normal görüntülerden% 40 daha hafif optimize edildi. Bu açılış süresini arttırır ve bant genişliğini kaydeder. Freddy’nin En İyi WordPress Görüntü Optimizasyonu eklentisi listesinden, resminizi optimize etmenizi tavsiye edeceğiz. Kraken.io ayrıca görüntülerin bir anda sıkıştırılması için iyi bir çevrimiçi seçimdir. Tema yazısına ve demoya yüklemeden önce üstün görüntüleri optimize etmek için WPExplorer’da her zaman kullanıyoruz.
8. Duyarlı resimler web duyarlı tasarım burada

Siteniz duyarlı olmasına rağmen, görüntünüzün duyarlı olduğu anlamına gelmez. Bu, 22 inçlik bir masaüstü ekranı için kullandığınız başlık görüntünün de 5 inç iPhone’a görüntülenmesi anlamına gelir. Resim yüklediğinizde, WordPress boyutunu küçük, orta, tam boyut vb. – birkaç sürüm olarak değiştirir. Bu geliştirici tarafından değiştirilebilir. İyi kodlanmış tema, “orta” boyutlu bir görüntü sürümü görüntüleyecek ve böylece bant genişliğini kaydedecektir. PictureFill.wp eklentisi, görüntü etiketini, medya sorgularına dayalı farklı bir görüntü sunacak yeni bir öğesi ile değiştirecektir. Bu oldukça deneyseldir (yani bir hata olduğu anlamına gelir) ve doğrudan sitede kullanılmamalıdır.
9. Metin görüntüsünün açıklaması her zaman gerekli değildir, ancak bazı durumlarda, öğreticideki ekran görüntüleri gibi gereklidir. Görüntü altyazı, SEO’nuzu artırırken okuyucuların konuyu daha iyi anlamalarına yardımcı olur. 10. Görüntü Dosyası Adı Dosya adlarını arama motorlarının perspektifinden düşünün. Resimde ‘Başlık’ etiketinde kullandığınız metni kullanın. Ayrıca, sitenizle en alakalı anahtar kelimelerinizi girmeyi deneyin. Sonuç SEO görüntüsü, eski veya yeni olan herhangi bir web sitesi için çok önemlidir. SEO görüntülerini doğru uygulayanlar (bazen çok sıradan olabilir), uzun vadede büyük miktarda organik trafik (en iyi trafik türü) alacaktır. Olağanüstü optimizasyon teknikleri var mı? Atmak!