WordPress sitenizdeki görüntüleri nasıl optimize edersiniz – adım kılavuzu
Hepimiz genel olarak sitemizde görüntüler ve görseller kullanıyoruz. Şu anda bu kaçınılmaz. Ancak ne kadar çok resim yüklersek, sitenin hızı üzerinde o kadar fazla etki. Ve yavaş site daha sonra bu yazıda kısaca tartışacağımız diğer birçok olumsuz sonuca neden olabilir. Dolayısıyla, hem tek başına hem de eklentilerle optimize etmezsek görüntü zahmetli olabilir. Bu makalede, WordPress medya kütüphanenizde gizlenen gereksiz verileri, kalitesini etkilemeden tüm görüntülerin sıkıştırılmasıyla nasıl ortadan kaldıracağınızı göstereceğiz. Görüntünüz aynı görünecek, sadece boyut değişecek.
Daha fazla uzatmadan, WordPress sitenizdeki görüntüleri biraz çaba ile optimize etmenin en iyi yoluna girelim.
İçindekiler
Görüntü optimizasyonu nedir?
Neden görüntü optimizasyonuna ihtiyacınız var?
WordPress sitenizdeki resminizi nasıl optimize edersiniz?
Görüntüleri manuel olarak optimize et
Otopilottaki görüntü optimizasyonunu ayarlayın
WordPress görüntüsünüzü otomatik olarak nasıl optimize edebilirsiniz
Resim Optimizasyon Testi – Önce ve sonra
Görüntü optimizasyonundan önce sonuçlar
Görüntü optimizasyonundan sonra sonuçlar
Görüntüleri optimize etmenin başka bir yolu
Paketlemek
Görüntü optimizasyonu nedir? Görüntü optimizasyonu aracılığıyla, WordPress sitesindeki tüm görüntüleri çıplak gözle görünmesini sağlamadan minimum boyuta indirebilirsiniz.
Herkes görüntü optimizasyonuna özel dikkat göstermelidir, çünkü bu web sitesi hızını önemli ölçüde artırmanın en yaygın yollarından biridir. Görüntülerin optimizasyonu ile ilgili iyi olan şey, herhangi bir geliştirme becerisi gerektirmemesidir, bu nedenle herhangi bir web sitesi sahibi tarafından elde etmek için yeterince kolaydır. Şimdi, sitenizde yüklediğiniz her resmi izleyebilir ve boyutunu manuel olarak ayarladığınızdan ve değiştirdiğinizden emin olabilirsiniz veya tüm görüntüleri sizin için otomatik olarak optimize edecek bir eklenti kullanabilirsiniz. Neden görüntü optimizasyonuna ihtiyacınız var? Ancak şimdi görüntüleri optimize etmenin siteniz için neden önemli olduğu ve neden uygulamadan önce iki kez düşünmeniz gerekmediğinden biraz bahsedelim. WordPress sitenizde görüntü optimizasyonunu kullanmanızın ana nedeni, yükleme süresini artırmaya yardımcı olmasıdır. her web sayfasındaki sayfalar. Resim, özellikle tam bir boyutta yüklerseniz çok ağırdır. Yüklenen her görüntüden sonraki sonuçların farkında olmayabilirsiniz, ancak zamanla sitenize eklenen her küçük veri ağır sayfaların yüklenmesine katkıda bulunur. Incounce’a göre, iki saniyeden daha hızlı içeren sayfanın ortalama bourth seviyesi%9 iken, yüklenmesi beş saniye süren bir sayfanın%38’lik bir seviyeye sahip olması. Bu, daha az kullanıcı katılımı ve daha az dönüşüm seviyesi anlamına gelir.
Görüntü optimizasyonu da SEO sıralamanızı artırır. Nasıl? Bu sadece Google’ın sorunu. 2010’dan itibaren Google, sayfa hızının sıralama algoritmasında önemli bir rol oynayacağını resmi olarak açıkladı. Dolayısıyla, yavaş bir web siteniz varsa, sitenizi Puncak Serp’de görme şansınız azalacaktır. Bu da dönüşümü kaybetmemizi sağlıyor. Google’daki sıralamanız ne kadar düşük olursa, dönüşümünüzde o kadar artar. SEO sıralamanız artarsa, daha fazla izleyici veya alıcı sayfanıza girer ve harekete geçme daveti tıklama olasılığı. Veya en azından, sitenize daha fazla zaman geçirin ve içeriğinize dahil olun. Gördüğünüz gibi, görüntü optimizasyonu doğrudan web sitesinin, SEO ve dönüşüm seviyesinin hızı ile ilgilidir. Küçük bir rol, ancak bu iş zincirinde hayati önem taşıyor. Görüntü optimizasyonu manuel olarak yapılabilir (bir seferde bir resim çekin ve en iyi uygulamayı izleyerek sıkıştırırsınız) veya otomatik modda sizin için tüm zor işleri idare edecek bir araçla. Daha sonra, WordPress görüntülerini otomatik olarak nasıl optimize edebileceğinizi ve kendiniz yapmak için ekstra işten kaçınabileceğinizi tartışacağız. Resimlerinizi WordPress sitesinde nasıl optimize edersiniz, ancak görüntüyü manuel olarak optimize edersiniz, ancak ‘Kendiniz Yap’ yönteminin hayranıysanız, görüntüyü manuel olarak optimize edebilirsiniz … bunun için zamanınız varsa. Demek istediğim, iş profiliniz çok fazla resim kullanıyorsa, o zaman işiniz zor olacaktır çünkü değerli zamanınızı alacaktır.
Boyutu değiştirebilir ve yüklemeden önce kendi resimlerinizi kesebilirsiniz. Bunu yapmak istiyorsanız, görüntünün ziyaretçileriniz için pikselli görünmesini sağlayacak boyut sınırını aşmayacak şekilde görüntünüzün maksimum ekran boyutunu bulmak önemlidir. Maksimum ekran boyutu, ona erişecek tüm görünüm sporları ve kullanıcı ekranları göz önüne alındığında, bir sitede görüntülenebilen en büyük çözünürlüktür. Görüntülerin doğru boyutlarla nasıl sunulacağı hakkında daha fazla bilgi edinin. Küçük görevleri kesme ve değiştirme boyutlarını ele aldıktan sonra, JPG ve PNG için işlev gören Kraken veya Imageresizer gibi çevrimiçi araçlarla görüntüleri sıkıştırarak daha derine girebilirsiniz. Doğru görüntü formatını bulmak da önemlidir, çünkü çok fazla megabyt tasarruf edebilir. Örneğin, grafik ve logolar için JPG kullandığınız basit gerçek, ekstra disk alanı harcayabilir. Neden? Niye? Çünkü doğru formatta saklıyorsanız, resmin boyutunu olabildiğince küçük alabilirsiniz ve görüntü türüne bağlıdır. Çoğu görüntüyü birçok renk varyasyonuyla yüklerseniz, JPG doğru formattır. Ancak, gönderinizdeki grafikler, çizimler veya simgeler kullanıyorsanız (genellikle sadece birkaç renge sahip görüntüler), PNG olarak yüklemek isteyebilirsiniz, çünkü bu format minimum boyutta saklamak için en iyisidir. PNG görüntülerini JPG’ye dönüştürürseniz, boyut artar ve ayrıca bulanık görünebilir. Tersine de geçerlidir. Smashing Magazine, boyutun görüntü biçimi başına nasıl değiştiğine dair birkaç test yaptı.
Otopilot üzerindeki görüntü optimizasyonunu ayarlayın Daha fazla zamandan tasarruf ederseniz ve tam verimlilik en çok endişe duyuyorsa, sadece yukarıdaki tüm (ve daha fazlasını) saniyeler içinde yapacak eklentiyi yüklersiniz. Optimole, çadırın altında akıllı işlevselliğe sahip hafif bir WordPress eklentisinin iyi bir örneğidir. Her şeyden önce, Optimole yalnızca sunucu tarafından sorulduğunda görüntüleri optimize eder. Bu nedenle, bir resim yüklerseniz, kullanıcının doğrudan yerinde olan sayfaya erişeceği zaman optimize edilir. Eklentiyi yükledikten sonra, yalnızca işi yapmasına izin vermeniz gerekir, ancak istediğiniz optimizasyon yöntemini ayarlamadan önce – yüksek, orta veya düşük. İkincisi, optimol her görüntünün boyutunu her biri için en uygun boyuta değiştirir. Ziyaretçinin görüntüleme alanı, böylece herhangi bir cihazda hızlı bir şekilde içerecek. Bu, her ziyaretçi için cihaz türüne dayalı mükemmel boyut ve boyutu bulacaktır. Aynı notta, kullanıcı bağlantısı yavaşsa, Optimole belirli kullanıcılar için görüntü kalitesini azaltır, böylece sayfa hızla yüklenir ve görüntü hızlı görünecektir. WordPress ile olan deneyimimizle ilgili olarak, bu eklenti, görüntü optimizasyon cihazlarından kullanıcıların ihtiyaç duyduğu tüm özelliklerle birlikte gelir, her şey paketlenir ve basit ve kullanıcı dostu bir arayüzden gönderilir. Bu, yeni yüklediğiniz ve varlığını unuttuğunuz eklenti türüdür. Bunun nedeni, arka planda tek başına çalışması, görüntüleri otomatik olarak optimize edeceği, böylece daha önemli olan iş projenize odaklanabilmeniz için.
WordPress görüntüsünüzü otomatik olarak nasıl optimize edersiniz, WordPress sitenizdeki tüm görüntüleri AutoPilot ile nasıl optimize edeceğinizi göstereceğiz. Tek yapmanız gereken bir eklenti yüklemek, tercihlerinizi ayarlamak ve unutmaktır. Bunu yapmak için Optimole’i ücretsiz yükleyin ve etkinleştirin. Eklentiyi yükledikten ve etkinleştirdikten sonra, WordPress kontrol panelinizde tanıtacağınız bir yangın anahtarı üretmek için e -posta yoluyla kaydolmanız gerekir. API tuşuna onaylandığında, eklenti çalışmaya başlar. Bir sonraki adım, ayarlara gitmek, kullanmak istediğiniz özellikleri etkinleştirmek ve istediğiniz sıkıştırma seviyesini seçmektir. Optimole’in resim yüklemeye başladıktan sonra çalıştığını görebilirsiniz. Bir resim her yüklediğinizde, arka plandaki tüm sıkıştırmayı rahatsız etmeden ve hatta size anlatmadan yapar. WordPress sitenizde zaten resimleriniz varsa, Optimole siz veya kullanıcınız ziyaret ettikten sonra da sıkıştırır. Bu, orijinal görüntünüzü buluta aktardı ve orijinal bağlantıyı optimize edildikten sonra özel bir bağlantıyla değiştirdi. Optimize edilmiş görüntüler, kullanıcıya daha hızlı gönderen CDN aracılığıyla oluşturulur. Sayfayı bir resimle ziyaret ettiğinizde, görüntünün özel bir URL optimol görüntüleyeceğini göreceksiniz (sağ -cüzdan -> Yeni sekmede görüntüyü açın). Optimize edilmiş görüntü hakkındaki rapor hemen görünmez, eklentinin değişiklikleri güncellemesi birkaç dakika sürer. İlerlemeyi görmek için medyayı açın -> optimole.
Gösterge paneli alanınızı Optimole web sitesine girebilir ve bant genişliği bölümünü kontrol edebilirsiniz.
Ancak yüklemeden önce bu aracı hızlı bir şekilde test edebilirsiniz ve size sitenizde kullandığınız görüntünün durumunu gösterecektir. Optimole, sitenizin görüntüsünü nasıl geliştirebileceği ve dolayısıyla hız. Görüntü optimizasyon testi hakkında bir rapor verecektir – şimdi ve sonra, otomatik görüntü optimizasyonunun ne kadar verimli olduğunu görmek için bazı testler yapalım. WordPress, varsayılan olarak, yüksek çözünürlüklü görüntüleri de azaltır, ancak görüntü optimizasyon eklentisiyle bunları nasıl daha fazla azaltabileceğinize bakalım (her görüntüyü maksimum görüntüleme boyutuna, ziyaretçi sayfasında görünmeyecek şekilde ayarlayacaktır) . Cihaz ihtiyaç duyulandan daha büyük). Öyleyse, aynı görüntü ve görüntüyü kullanarak daha önce ve sonra deneyler yapalım. Sonuçlar, WordPress test örneği ve varsayılan yirmi yirmi temayı kullanarak görüntü optimizasyonundan önceki sonuçlar, mystock.photos’tan ödünç alınan farklı boyutlarda birkaç fotoğraf yükledik. Galeri bloğu üzerinden sıradan blog yayınlarına resimler ekliyoruz.
WordPress, varsayılan olarak, bir gönderide yüklenen görüntüyü 7.47 MB’den 452 kb’ye indirdi. Cep telefonunuzdan aynı blog yayınına erişirseniz, görüntü 92.61 kb’ye düşürülecektir. Dolayısıyla bu, Blog yayınınıza masaüstü ve hücresel üzerinden eriştiğinizde varsayılan olarak WordPress tarafından yapılan bir değişikliktir. Görüntünün tam boyutlu bir ekran ve blog yazısı ekranı için nasıl sıkıştırıldığını görebilirsiniz. Sonuçlar Geçerli görüntü optimizasyonundan sonra, Optimole’in görüntünüzü verilerle nasıl sıkıştırdığına dair somut bir örnek alalım. Testin ilk bölümünde yaptığımız gibi (Optimole olmadan), MyStock.photos’tan alınan aynı görüntüyü yükleyerek bir galeri bloğu yaptık. Optimole dört düzeyde sıkıştırma vardır. Yüksek kullanırsanız, sıkıştırma mümkün olduğunca yüksek görüntü kalitesini koruyacaktır. Düşük kullanırsanız, sıkıştırma ve optimizasyon daha sert olacaktır (boyutu daha geniş bir seviyeye düşürecektir). Web sitesinde doğrudan bir yayını ziyaret ettikten sonra, Optimole hemen devralın ve tıkladığınız her görüntünün sıkıştırılmış bir alternatifini oluşturun (her görüntü büyütülebilir). Yüksek kaliteli sıkıştırma ile görüntüler aşağıdaki gibi azalır (bu, önceki testte olduğu gibi aynı sırada listelenen resimdir): 7.47 MB> 557 KB 12.3 MB> 548 KB 11.2 MB, düşük olan 220 KB 8 MB> 547 KB Kalite Sıkıştırma, Sonuçlar Farklıdır: 7.47 MB> 251 KB 12.3 MB> 269 KB 11.2 MB> 124 KB 8 MB> 302 KB Bu, yüksek ve düşük sıkıştırma seviyesinden (kalite seviyesi) sonra listedeki ilk görüntü ekranıdır: Yüksek kalite seviyesi (557 kb) Düşük Kalite Seviyesi (251 KB) Çıplak gözle, görüntü kalitesinin fazla değişmediğini görebilirsiniz. Şimdi, büyütmek için seçenekler olmadan bir blog yayınına resim eklerseniz, görüntü otomatik olarak maksimum ekran boyutuna (blog gönderimi için gereken maksimum görüntü boyutu) indirgenir. Örneğin, tek bir blog girişinde görüntülenen bu resim 7,47 MB’den 75.3 kb’ye (yüksek kaliteli sıkıştırmada) değiştirildi:
Tek yazı görüntüsü 75.3 kb 580 x 387 piksele sıkıştırılmış
Bu iyidir, çünkü daha küçük bir boyut tercih edildiğinde sunucunuzun tam boyutu yüklemesine gerek yoktur. Ama bu masaüstünde oldu. Hücresel ekranlar için Optimole, masaüstü sürümünden bile daha küçük olan alternatif bir görüntü sürümü oluşturur. Bu nedenle, birisi sitenize hücreselden erişirse, Optimole görüntünün masaüstü varyasyonlarını görüntüleymez, ancak optimize edilmesine rağmen, daha küçük bir cihaza yüklenmesi için hala zaman gerektirir. Eklenti aslında resimden ayrı bir hücresel alternatif sağlar. Örneğin, yukarıdan bir blog yayınındaki aynı resim hücresel kullanıcılar için (orijinal 7.47 MB’den) 20.15 kb’ye düşürülür. Optimole, seçtiğiniz sıkıştırma seviyesine göre belirlenen kayıpsız ve kayıplı sıkıştırma yöntemleri kullanır. Kayıpsız optimizasyon yoluyla, görüntüler sıkıştırma sırasında önemli veriler kaybetmez. Optimizasyondan sonra orijinal versiyona benzeyeceklerdir. Bu nedenle kayıpsız optimizasyon disk alanınızı azaltmaz, sıkıştırma sonrası boyut farkı neredeyse sıfırdır. Öte yandan, aslında görüntünüzün boyutunu gerçekten azaltan, ancak kalitesini azaltmadan (çıplak gözle görüldüğü gibi) kayıplı bir optimizasyon vardır. Dolayısıyla, veritabanınızı şimdiden çok daha hafif hale getirmek istiyorsanız, ziyaretçileriniz dönüşümü görmeyeceği için kayıplı optimizasyon kullanabilirsiniz. Görüntüleri optimize etmenin başka bir yolu, boyutları değiştirmenin yanı sıra, ziyaretçilerinize daha hafif görüntüler sunmak ve site yükleme sürenizi artırmak için hala bir dizi başka iyi yöntem vardır. Tembel yükleme, sitenizi yavaşlatmamak için görüntünüzü korumaya katkıda bulunacak bir başka iyi yöntemdir. Birçok resim içeren bir gönderiniz veya sayfanız varsa, her şeyi aynı anda görüntülemek iyi bir fikir değil. Tembel yükleme özelliği, kullanıcı sayfayı eğittiğinde kademeli olarak görüntülenir. Her kaydırma ile, kullanıcı ekranında görünen alana yeni bir resim koleksiyonu görüntülenir, bu nedenle bu şekilde sunucu tüm isteklere daha iyi yanıt verecektir. İçerik Dağıtım Ağı (CDN), görüntünüzü ziyaretçi erişim noktasına en yakın sunucu konumundan sunacak bir özelliktir, bu da yükleme süresinin daha hızlı olduğu anlamına gelir. Optimole, otomatik olarak çalışan resminiz için entegre bir CDN hizmeti ile birlikte gelir. CloudFlare ve StackPath, tam site optimizasyonuna ihtiyacınız varsa tüm veritabanlarınız için CDN hizmetleri sağlayan bağımsız WordPress eklentileridir. Disk alanı kaydetmek ve daha hafif dosyaları görüntülemek için GIF’i videoya dönüştürebilirsiniz. Bu özelliği Optimole’de etkinleştirirseniz, yüklediğiniz her GIF dosyasını otomatik olarak dönüştürmeye başlar. Mevcut video formatları MP4 ve WebM’dir ve eklentiler dönüşüm sırasında her belirli durum için daha verimli bir şekilde seçilir. WordPress sitenize yüklemeden önce GIF’i MP4’e dönüştürmek için kullanabileceğiniz bazı çevrimiçi araçlar da vardır. Neden Dönüştürelim? Çünkü GIF biçimi video biçiminden daha büyüktür. Akıllı kesim, resimdeki gereksiz boşluk veya arka planı kesmek ve sadece ilginç bir yer korumak anlamına gelir. Kırpma manuel olarak veya bir görüntüde ‘sıcak noktaları’ otomatik olarak algılayacak ve gereksiz parçaları silecek Optimole gibi eklentilerle yapılabilir. Kısacası, görüntü optimizasyonu sizden büyük bir çaba gerektirmeyen basit bir tekniktir. Yalnızca bir eklenti yüklersiniz ve tamamen kapalıysınız. Sitenizde kullanmamayı seçerseniz, kaybedersiniz. Site hızındaki azalma, yüklediğiniz her resim dosyasından sonra fark ettiğiniz bir şey değildir, zamanla büyüyen bir kartopu gibidir.
