WordPress’i yavaşlatmamak için görüntüleri nasıl optimize edebilirsiniz
Özellikle WordPress web sitenize çok fazla resim eklerseniz, önceki görüntünün cümle optimizasyonunu duymuş olabilirsiniz. Ancak WordPress’te görüntünüzü nasıl optimize edebilirsiniz? Bu önemli bir soru, ama çözüm çok basit! Photoshop veya Illustrator gibi düzenleme yazılımlarını görüntülemeye alışık olmasanız bile, resimleri kolayca optimize edebilir ve web sitenizi Lightning kadar hızlı oluşturabilirsiniz. Bu yazıda, görüntü optimizasyonu hakkında bilmeniz gereken her şeyi tartışacağız. İlk olarak, resminizi neden optimize etmeniz gerektiğini açıklayacağız. Ardından, sitenizde görüntünün ne kadar hızlı yüklendiğini etkileyen diğer birkaç faktörü kontrol edeceğiz.
Bundan sonra, resimlerinizi optimize etmenin iki önemli yolu tartışacağız – bunları sitenize yüklemeden önce ve sonra. Son olarak, sitenizi çok hızlı tutmak için başka iyi hileleri tartışacağız. Hadi, optimize et!
İçindekiler
Görüntünüzü optimize etmek ne anlama geliyor?
Neden görüntünüzü optimize etmeniz gerekiyor?
Hatırlanacak şeyler
Görüntünüzü optimize etmenin en iyi yolu
Web için görüntüleri optimize etmek için diğer en iyi uygulamalar
Resim Optimizasyonu ve WordPress
Görüntünüzü optimize etmek ne anlama geliyor?
Optimizasyon işlemi temel olarak görüntü ayrıntılarıyla dengeleme dosya boyutlarından biridir. Kullandığınız görüntü türüne, web sitenizin doğasına ve diğer birçok faktöre bağlı olarak, hem eşit olarak veya birini veya diğerini optimize etmek isteyebilirsiniz. Uygulamada, görüntüleri optimize etmek çok kolaydır. Aslında sadece iki adım var: Sitenize yüklemeden önce görüntüyü optimize edin
Gelecekte yüklenen yüklenmiş resimleri ve yeni resimleri otomatik olarak optimize eden eklentiyi yükleyin
Bunun için var olan her şey bu! Diğer her şey ayrıntıları mükemmelleştirir.
Neden görüntünüzü optimize etmeniz gerekiyor?
Görüntüleri optimize etmeniz için birkaç neden var. Bazıları belirsiz olabilir. En önemli altı sayfa yükleme hızı, mobil cihazlar, SEO, rezervler, bant genişliği ve depolama alanını tartışalım. Ve okuyucunun hayatta kalmasını istiyorsanız hız çok önemlidir. Ziyaretçiler sitenize gelirse ve bir veya iki saniyeden fazla beklemek zorunda kalırlarsa, ayrılabilir ve asla geri gelmezler! Resimlerinizi ve fotoğraflarınızı optimize ederek, küçük boyutları olan WordPress temalarını kullanarak ve sitenizi hızlandırmak için başka bir şey yaparak, web sitenizi hızlandıracaksınız. Toplam İnternet trafiğinin yarısı. Bu çok fazla! Bu, hücresel için optimize edilmiş bir web sitesine sahip olmanın çok önemli olduğu ve bunu yapmanın bir yolunun hafif bir WordPress temasına ve optimize edilmiş bir görüntüye sahip olmaktır. Arama motoru trafiğine bağlı olan her web sitesi için önemlidir. Daha küçük görüntüler, sayfanın daha hızlı yüklendiği anlamına gelir. Daha hızlı sayfalar, Google’ın sitenizi daha iyi sıralaması anlamına gelir. Ve Google’dan daha iyi bir sıralama, arama sonuçlarında daha yüksek olacağınız anlamına gelir. Bunun tersi de doğrudur: Google yavaş bir web sitesini cezalandırır ve arama sonuçlarında daha düşük görünmenize neden olur. Arama motorlarından çok sayıda kullanıcı veya ziyaretçi alırsanız, bu başarı ve başarısızlık arasında bir fark olabilir! WordPress yedekleme eklentisiyle, resminizi optimize etmek yardımcı olabilir.
Bunun iki nedeni var:
Rezervin yapılması daha az zaman alacaktır, çünkü dosya daha küçüktür ve sıkıştırılması daha az zaman gerektirir
Yedekleme dosyası daha küçük olacak ve daha az yer yiyecektir
Daha küçük dosya boyutlarına sahip daha az bant genişliği web sitesi (ve bir bütün olarak daha az dosya) birçok büyük görüntüye sahip sitelerden daha az bant genişliği tüketir. Pik trafik süresi boyunca bu, web sitenizi 3 saniye veya yarım dakika içinde yükleme arasında bir fark olabilir. Bant genişliği “belirli bir süre içinde bir İnternet bağlantısı yoluyla iletilen maksimum veri miktarı” olarak tanımlanır. Özünde, bu bir kerede gönderebileceğiniz veri miktarı anlamına gelir. Böylece, görüntünüzü optimize etmek, siteniz tarafından kullanılan bant genişliği sayısını azaltabilir, siteniz o kadar hızlı çalışır ve daha az yükleme problemi kullanmanız gerekir. Daha az depolama alanı gerekli daha küçük resimler, web ana bilgisayarınızda daha az alana ihtiyacınız olduğu anlamına gelir. Bu da, web ana bilgisayarınızdaki depolama sınırını geçmeyeceğiniz anlamına gelir. Ana bilgisayarın çoğu koşarsanız ek maliyetler tahsil, bu yüzden bundan kaçınmak istersiniz! Fotoğrafçı, film yapımcısı veya diğer medya profesyonelleriyseniz, web sitenizde birçok büyük dosyanız olabilir. Bu, görüntü sıkıştırmasını bir zorunluluk haline getirir. Optimize edilmiş bir fotoğraf yaparak, çok fazla depolama ile pahalı bir barındırma paketi satın almanın gerekliliğinden kaçınabilirsiniz.
Görüntünüzü optimize ederek, her şeyi korumak için gereken depolama alanını önemli ölçüde azaltabilirsiniz – aylık faturalarınız için biraz para tasarruf edin!
Şimdi hatırlanması gereken şeyler, resminizi neden optimize etmeniz gerektiğini biliyoruz, dikkate alınması gereken diğer bazı yönlerden bahsedelim. Teknik kararlar gibi, aralarından seçim yapabileceğiniz birçok farklı fedakarlık vardır. Optimize edilebilecek bir fotoğraf yapmak için, herkes için “tek bir boyut herkes için uygundur”. Kalite Vs. Boyut görüntüye geldiğinde, en büyük değiş tokuş görüntü kalitesi ve görüntü boyutu arasındadır. İki genel prensibi hatırlamak önemlidir: daha yüksek görüntü kalitesi = daha büyük dosya boyutu
Daha küçük dosya boyutu = daha düşük görüntü kalitesi
Bazı görüntü türleri kalite kaybı olmadan sıkıştırılabilir olsa da, yukarıdaki kuralların çoğu doğrudur. Bağlı olmak. Çoğu için, 5000 piksel genişliğe sahip görüntüler hiç gerekli değildir. Neredeyse hiç kimse böyle bir çözünürlüğe sahip bir cihazda sitenizi ziyaret etmeyecek. Ayrıca görüntünün dolu olup olmayacağına da bağlıdır. Görüntü tam genişliğe sahipse, 1.500 ve 2.500 piksel tasarruf etmelisiniz. İçerikte ise, genellikle 1.000 piksel yeterli olmasına rağmen, maksimum 1.500 genişlik iyidir. Sıkıştırma Görüntü sıkıştırma hakkında okursanız, genellikle iki kelime bulacaksınız: kayıp ve kayıpsız. Görüntünüzü optimize etmek istediğinizde bu ne anlama geliyor? Adından bildiğiniz gibi, sıkıştırma işlemi sırasında meydana gelen veri kaybı miktarını tanımlar.
Kayıplı sıkıştırma, işlem sırasında piksellerin çıkarılması nedeniyle görüntü kalitesinde hafif bir azalmaya sahiptir.Görüntü kalitesi iyi olması gerektiğinde, ancak mükemmel olmadığında kayıplı sıkıştırma tercih edilir.Blog yayınlarındaki görüntüler iyi kullanım örnekleridir. Kayıpsız sıkıştırma, gerçek kaliteyi kaybetmeden dosya boyutunu azaltır.Ancak dosya boyutu yeterince büyük kalacaktır.Görüntü kalitesi en önemliyse genellikle kayıpsız sıkıştırma kullanmak istersiniz.Örneğin bir fotoğrafçıysanız, kesinlikle kayıpsız görüntüler kullanacaksınız.
Bu resimdeki farkı Shortpixel blogundan görebilirsiniz:
Görüntü dosyası türü (JPG, PNG, GIF, SVG, vb.) Görüntüler açısından, kullanılma eğiliminde olan birkaç dosya türü vardır. Bunlar PNG, JPG, GIF ve SVG’dir. Her biri farklı bir durum için tasarlanmıştır, bu nedenle sitenizin performansını optimize etmek istiyorsanız, doğru şekilde kullanmak daha iyidir. Sonraki piksel pürüzsüz. Başka bir deyişle, ikisi arasında keskin bir kontrastlı çizgi yoksa. Bir fotoğraf kullanırsanız, belki JPG olmanız gerekir. PNG kayıpsız bir görüntüdür, yani sıkıştırma sırasında veri kaybolmaz. Ancak bu, daha büyük bir dosya boyutuna sahip oldukları anlamına gelir. Genel olarak, PNG şeffaf görüntüler, metin, logolar ve net bir kenara sahip şekiller için tasarlanmıştır. Yüksek çözünürlüklü fotoğraflar için iyi bir seçim değildir. PNG sıkıştırması GIF’den önemli ölçüde daha iyi olduğundan, genellikle kullanmak daha iyidir. Ancak, GIF’in özel yetenekleri vardır. Animasyonu destekliyorlar. Çoğu çevrimiçi animasyonlu görüntüler GIF’dir. Bu nedenle, görüntünüz animasyon içermesi dışında, genellikle en iyisi GIF’den kaçınmak ve bunun yerine PNG veya JPG kullanmaktır. Vektör tabanlı sadece görüntünün piksel yerine matematiksel noktalardan oluştuğu anlamına gelir. Logo bir vektör görüntüsünün örneğidir, fotoğraf iken piksel tabanlı bir görüntünün bir örneğidir. SVG yüzlerce veya binlerce piksel içermediğinden, çok daha küçük bir dosya boyutuna sahipler. Dosya boyutunu çok fazla değiştirmeden SVG boyutunu da değiştirebilirsiniz.
Sitenizdeki görüntüler en basit şekil ve satırlardan oluşuyorsa, SVG sürümünü kullanmayı düşünün. Astra 3.3 Temalarımızı daha hızlı yüklemek için SVG grafikleri tanıtmak! Aşağıdaki SVG’yi kullanma hakkında daha fazla bilgi edinin. Görüntünüzü optimize etmenin en iyi yolu şimdi bazı resimleri optimize etmeye başlayalım! Dikkate alınması gereken birkaç adım var. Gerçekten bir resme ihtiyacınız var mı? Başka bir şeyden önce kendinize sorun: Gerçekten bir resme ihtiyacınız var mı? Gereksiz resimler web sitenizi daha yavaş yükleyebilir, bu nedenle yalnızca gerçekten gerekli olması durumunda kullanmaya çalışmalısınız. İlk olarak, sitenize yüklemeden önce görüntüyü optimize edin, WordPress’e yüklemeden önce görüntüyü optimize etmek, görüntünün boyutunu ve kalitesini dengelemek için sofistike araçlar kullanabileceğiniz anlamına gelir. Photoshop Photoshop en ünlü yazılımdır. Düzenleme ve görüntü işleme uygulaması. Photoshop’ta görüntüleri sıkıştırmak için dosyayı açın> Web ve cihazlar için kaydedin. Ardından, istediğiniz dosya biçimini seçin, sıkıştırma seviyesini seçin ve kaydet. GIMP Photoshop’u kullanmak istemiyor mu? Sorun değil. Mevcut birçok ücretsiz resim düzenleme programı vardır. En popüler olanlardan biri Gimp denir.
GIMP’de görüntüleri sıkıştırmak için Dosya> Dışa Aktarma. Ardından, Dosya Seç türünün altında (uzantıya göre), istediğiniz dosya türünü seçin. Ardından, kalite ayarlarını sıkıştırma/kalite ticaret seviyesine sürükleyin. Daha düşük seviyeler daha küçük bir dosya boyutuna sahip olacak, ancak daha fazla görüntü bozulmasına sahip olacak. Görüntünün nasıl görüleceğini görmek için, görüntü penceresindeki önizleme gösterisini etkinleştirdiğinizden emin olun. Mac uygulaması açık kaynaklıdır ve kullanım için ücretsizdir, web hizmetleri ise 2.000 resim için ayda 12 $ ‘dan başlar.
Ardından, görüntü sıkıştırma eklentinizi kullanın mı? Olağanüstü! Şimdi sitenize yükleme zamanı. Bunu yapmak için Medya> WordPress kenar çubuğunuza yeni ekleyin ve tüm resimlerinizi yükleyin. Bittiğinde, bir sıkıştırma eklentisi yüklemeniz gerekir. Hem ücretsiz hem de ücretli bir dizi farklı seçenek vardır. En popüler WordPress sıkıştırma eklentilerinden bazılarına bakalım. 1. WP Smush
Smush, görüntüleri yükleme, sıkıştırma ve optimize eden tembel bir eklentidir. Ücretsiz ve ücretli bir eklenti sürümü var. Ücretli, görüntüleri sınırsız sıkıştırmanıza, orijinal görüntüyü ayırmanıza, 45 konum için CDN’yi kullanmanıza ve görüntünün boyutunu ve ölçeğini otomatik olarak değiştirmenize olanak tanır. Smush ile başlayın
2. Küçük Tinypng bir çevrimiçi araç ve WordPress eklentisidir. Çevrimiçi araçlar, eklentilerin birçok özelliğe sahipken görüntüleri hızla sıkıştırır. Bu, otomatik optimizasyon, iş akışınızı hızlandırmak için arka plan çalışması, maksimum dosya veya boyutla kolay boyutları değiştirmek, aşamalı JPEG kodlaması, wooocommerce uyumluluğu ve RGB’ye CMYK dönüşümü içerir. Medya kütüphanenizdeki mevcut görüntüleri de optimize edebilirsiniz. Tinypng ile başlayarak 3. Optimal kısa piksel görüntü ShortPixel, web sitenizdeki herhangi bir görüntü veya PDF’yi optimize eden bir freemium eklentisidir. Bu, kullanımı kolay olacak ve her şeyi arka planda otomatik olarak sıkıştıracak şekilde tasarlanmıştır. Cloudflare entegrasyonu ve otomatik rezervler gibi ek özellikler ekleyen ücretli bir sürüme sahip ücretsiz ve ücretli bir sürüm vardır.
Shortpixel ile başlayın
4. OptimalOptimole gerçek bir zaman görüntü işleme eklentisidir. Mevcut eklentilerin ücretsiz ve ücretli bir sürümü vardır. Benzersiz özelliklerden biri, fotoğraflarınıza düzenleyebilmeniz, boyutu değiştirebilmeniz, filtreler ekleyebilmeniz ve başka ayarlamalar yapmanızdır. Bu aynı zamanda tembel yüklemeyi de içerir.
Optimol ile başlayın 5. Hayal edin
Imafy, klasik görüntüyü optimize eden bir eklentidir. Bunu yönetmesi çok kolaydır ve başlamanıza yardımcı olacak bir URL optimizasyon kılavuzuna sahiptir. Karmaşık algoritma, hangi kullanıcıya hangi görüntünün görüntüleneceğini belirler, bu da yükleme süresinin düşük tutulmasına yardımcı olur.
Imagify ile Başlayın 6. Görüntülerin Geri Dönüşümü
ImaGerecycle, WordPress ve diğer platformlar için mevcut bir başka yararlı sıkıştırma eklentisidir. Web sitelerinde sitenizdeki görüntülerden ücretsiz analiz raporları almanıza izin veren faydalı araçlara sahiptirler. Sonunda farklı bir eklenti kullansanız bile, bu test hangi şeyleri geliştirebileceğinizi görmek için yapmaya değer. Bu gerçekten ücretsizdir ve kaybı yoktur. ImaGerecycle ile Başlamak
7. Bulut Optimize Edici Görüntü EWWW EWWW Görüntü Optimizer Hız Odaklı Bir Eklentidir. JPG, PNG ve PDF dosyaları için premium sıkıştırmaya sahiptir. Benzersiz özellik, dosya boyutunu en aza indirmek ve kaliteyi en üst düzeye çıkarmak için hangi tür görüntünün ideal olduğunu uyarlanabilir bir şekilde seçmesidir. Bu, web sitenizde çeşitli farklı resimler kullanıyorsanız kullanışlıdır. Örneğin, şeffaf görüntüler için PNG, blogunuzda animasyonlu GIF’ler ve ürün fotoğraflarınız için JPG.
Optimal görüntü ile başlayarak ewww
8. Optimus Optimus Image Optimus, PNG ve JPEG görüntülerini sıkıştırmanıza ve optimize etmenize yardımcı olan bir freemium eklentisidir. Eklentiler orijinal görüntüleri ve tüm önizleme resimlerini sıkıştırır. Bu, ortaya çıkan küçük resimleri değil, sadece orijinal görüntüyü etkileyen Photoshop ve Tinypng gibi diğer araçlardan farklıdır.
Optimus ile başlayın
Son web için görüntüleri optimize etmek için en iyi bir uygulama, resimlerinizi optimize etmek için diğer en iyi uygulamaları tartışalım. Bu önemli olmasa da, toplu olarak sitenizi daha hızlı hale getirmeye yardımcı olabilirler. Eklenti, resim, metin ve diğer dosyaları doğrudan web sitesinden toplamak yerine, içerik görüntüsünüzü sayfaları daha hızlı yüklemek için anlık görüntüsünüzü yapar. Önbellek eklentisi kullanmak, sayfayı yüklemek için gereken süreyi azaltmanın en iyi yoludur. Bu eklentilerin çoğu, genellikle sitenizdeki en büyük dosya olan görüntünüzü sıkıştırır. CDN, web sitesi içeriğinizin (Images, HTML ve CSS gibi) önbellek sürümünü dünyanın çeşitli yerlerinde saklar. Ardından, birisi sitenizi ziyaret ettiğinde, içerik en yakın konumdan kullanıcıya gönderilir (hizmet noktası olarak adlandırılır). Sonuç olarak, her şey çok daha hızlı yüklenir. Birçok farklı CDN var, ancak en popüler ikisi Akamai ve Cloudflare. Bunu kullanmak açıkça iyi bir fikirdir, özellikle de ziyaretçileriniz coğrafi olarak çeşitliyse. Bu, diğer görüntü türlerinden (JPG, PNG) farklıdır, çünkü görüntüleri raster gibi piksel değil, matematiksel noktalardan oluşan vektörler olarak saklarlar. Raster grafiği, bireysel bir piksel ızgarası olan Bitmap’tan oluşur. Aşağıdaki resimde farkı görebilirsiniz. Sol görüntüde (raster) büyütürsek, bir dizi pikselden oluştuğunu görebiliriz. Her piksel bir renktir. Bu, karmaşık renk değişiklikleri göstermenin iyi bir yolu olmasına rağmen, bu, her bir renkte bir piksele ihtiyacınız olduğu anlamına gelir – bu da büyük bir dosya boyutuna ekleyebilir. Öte yandan, doğru görüntüdeki (vektör) bu problem yoktur. Eğer büyütürsek, bu tamamen aynıdır. Bunun nedeni S’nin piksellerden değil, matematiksel formülden oluşmasıdır. S’deki iki nokta arasındaki mesafeyi ikiye katlarsak, gölge büyür. Küçük piksel yok. Vektör grafiklerini kullanan iki büyük avantaj vardır: birincisi, dosya boyutu çok daha küçüktür. İkincisi, görüntüler daha büyük görünmeden görüntüler herhangi bir boyuta boşaltılabilir. Tahmin edebileceğiniz gibi, bu web sitenizi biraz hızlandıracaktır! Sitenizde SVG’yi kullanmak için sitenize belirli eklentileri yüklemeniz gerekir. SVG desteğini öneriyoruz. Astra kullanıyorsanız, Astra 3’ün SVG kullandığını bilmekten mutluluk duyacaksınız. Yazı tipi simgesini, özellikle mobil cihazlarda daha keskin hale getiren bir SVG simgesi ile değiştirdik. Ayrıca ek yazı tipleri yükleme ihtiyacını azaltarak her şeyi daha hızlı yükledi. Opak Tekniği
Bu benzersiz yöntem, daha büyük ve daha ayrıntılı görüntüler yüklenirken arka plan görüntülerini görüntülemek için CSS’nin nasıl kullanılacağıdır. Küçük görüntüler ve Gauss efektlerini bulanıklaştırarak, boş arka planlardan çok ayrıntılı görüntülere geçiş yapmaktan kaçınabilirsiniz. CSS ile çalışmaktan ve birçok arka plan görüntüsü kullanmakta rahat hissediyorsanız, bulanıklık teknikleri açıkça görülmeye değer bir şeydir. Daha fazla ayrıntı için CSS-Tricks.com’daki bu öğreticiyi okuyun. Örneğin, kullanıcı sayfanın altına ulaşmadan önce sayfadan ayrılırsa, oradaki görüntü yüklenmez. Bu çok fazla bant genişliği tasarrufu sağlayabilir! Çoğu eklenti görüntüleri optimize eder, yavaş yükleme işlevselliği içerir. Bununla birlikte, WP Rocket Lazy Load veya A3 Lazy Load gibi diğerleri yalnızca tembel yükleme özelliğine odaklanır. Astra, Ocak 2021’den beri yavaş yükleme sergiledi, bu nedenle WordPress için en popüler temayı kullanıyorsanız, bunu yapmaya hazırsınız!
