Quicq İncelemesi: Gerçek Zamanlı WordPress Görüntü Optimizasyonu
Yayınlanan: 2022-02-14Ortalama olarak, resimlerin ortalama bir web sayfasının dosya boyutunun yaklaşık yarısını oluşturduğunu biliyor muydunuz?
Bu, optimize edilmemiş görseller kullanıyorsanız, bu görsellerin web sitenizin yükleme süreleri üzerinde büyük bir olumsuz etkisi olabileceği anlamına gelir.
Quicq, sitenizin görüntülerini gerçek zamanlı olarak tam olarak optimize etmenize ve bunları Google Cloud destekli bir içerik dağıtım ağından (CDN) sunmanıza olanak tanıyan bir Afosto hizmetidir. Performansın ötesinde, görüntüleri kırpma, filigran ekleme ve daha fazlası gibi kolayca değiştirmek için de kullanabilirsiniz.
Magento ve PrestaShop gibi diğer platformların yanı sıra özel bir entegrasyon eklentisi aracılığıyla WordPress ile çalışır.
Uygulamalı Quicq incelememizde, size Quicq'in nasıl çalıştığını ve WordPress sitenizin resimlerini optimize etmek için nasıl kullanabileceğinizi göstereceğiz.
Hadi kazalım…
Quicq İncelemesi: Eklentinin Yaptığı İş
Yüksek düzeyde Quicq, WordPress görüntü optimizasyonu için eksiksiz bir çözüm sunmaya odaklanmıştır. Temel olarak, tüm önemli görüntü optimizasyon taktiklerinden yararlanmanızı sağlayan bir tak-çalıştır aracıdır - daha fazlası aşağıdadır.
Görüntü optimizasyonu söz konusu olduğunda çoğu insanın düşündüğü iki "ana" taktik vardır:
- Yeniden boyutlandırma – resmin gerçek boyutlarını sitenizde nasıl kullanacağınıza göre yeniden boyutlandırma. Daha küçük boyutlar, daha küçük bir görüntü boyutu anlamına gelen daha az veri anlamına gelir.
- Sıkıştırma – kayıpsız bir algoritma ( kalitede değişiklik yok ) veya kayıplı bir algoritma ( belki de kalitede küçük bir azalma ) yoluyla, boyutunu değiştirmeden görüntünün dosya boyutunu küçültmek için bir sıkıştırma algoritması kullanmak.
Quicq, bu taktikleri sizin için kesinlikle uygulayabilir, ancak aynı zamanda, görüntülerinizi statik olarak yeniden boyutlandırmanın ve sıkıştırmanın ötesine geçen yeni tür görüntü optimizasyon eklentilerinden biridir.
Bunun yerine, resimlerinizi Google Cloud destekli CDN'sinden otomatik olarak sunar ve ardından ziyaretçiler için gerçek zamanlı olarak optimize eder.
Sitenizde Quicq'i etkinleştirir etkinleştirmez, aşağıdaki optimizasyonlarla tüm resimlerinizi otomatik olarak optimize eder:
- Bunları Google Cloud tarafından desteklenen Quicq CDN aracılığıyla sunun. Bu, ziyaretçilerin resimlerinizi kendilerine en yakın CDN konumundan indirmelerini sağlar.
- Her ziyaretçinin cihazına göre bunları en uygun boyuta yeniden boyutlandırın.
- Dosya boyutlarını küçültmek için sıkıştırın.
- Bunları JPEG ve PNG'den daha küçük boyutlar sunan optimize edilmiş bir görüntü formatına dönüştürün. Quicq, hem WebP'yi hem de WebP'den daha küçük dosya boyutları sunabilen daha yeni bir görüntü formatı olan AVIF'yi destekler. AVIF desteği, tüm hizmetler henüz bu yeni görüntü biçimini desteklemediği için dikkate değerdir.
Tüm bu değişiklikler, çok daha hızlı resim yükleme sürelerine (ve dolayısıyla web sitesi yükleme sürelerine) yol açacaktır.
Neden Dinamik Gerçek Zamanlı Görüntü Optimizasyonu Kullanmalı?
Yukarıda bahsettiğim gibi, Quicq, görüntüleri gerçek zamanlı olarak optimize eden dinamik bir optimizasyon yaklaşımı kullanır.
Yani Quicq, WordPress sitenizin sunucusundaki görüntünün orijinal sürümünü geleneksel bir optimizasyon eklentisi gibi optimize etmek yerine orijinal görüntüye dokunmaz, bunun yerine işlemlerini “bulutta” gerçekleştirir.
Bu dinamik optimizasyon yaklaşımının birkaç avantajı vardır.
En önemlisi, her ziyaretçinin gerçek cihaz boyutlarına göre optimize edilmiş bir resim görmesini sağlayabilmenizdir.
Örneğin, bir ziyaretçi düşük çözünürlüklü bir akıllı telefon ekranında geziniyorsa, deneyimini etkilemeden küçük boyutlu bir görüntü sunabilirsiniz.
Ancak bir ziyaretçi devasa bir 4K ekrana göz atıyorsa, siteniz kusursuz bir şekilde görüntünün daha büyük bir sürümünü sunarak onların da harika bir kullanıcı deneyimine sahip olduğundan emin olabilir.
Quicq, dinamik, anında optimizasyon yaklaşımı kullandığından, her bir kullanıcı için en uygun görüntü boyutunu ve biçimini sunabilir.
Bu dinamik yaklaşım, orijinal görüntü dosyasını düzenlemeye veya görüntünün yeni bir sürümünü yüklemeye gerek kalmadan görüntüde değişiklik yapabileceğiniz için görüntülerinizi değiştirmek istiyorsanız da çok kullanışlıdır.
Örneğin, yalnızca bir görüntünün URL'sini değiştirerek aşağıdaki işlemleri gerçekleştirebilirsiniz:
- Resmi farklı şekillerde kırpın.
- Bir filigran ekleyin.
- Görüntüyü bulanıklaştırın.
- Görüntü boyutlarını değiştirin.
- Görüntü kalitesini ayarlayın. Örneğin, bazı noktalarda yüksek çözünürlüklü, sıkıştırılmamış bir görüntü kullanmak isteyebilirsiniz. Bunu kolayca yapabilirsiniz.
- Farklı bir görüntü formatı kullanın. Örneğin, WebP veya AVIF.
Quicq ile tek yapmanız gereken orijinal görüntüyü bir kez yüklemek. Ardından, URL'ye bazı ekstra sorgu parametreleri ekleyerek tüm bu manipülasyonları gerçekleştirebilirsiniz.
Örneğin, orijinal görüntünün bağlantısı:
https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg
İşte görüntüyü 1.000 × 1.000 kareye kırpan bir bağlantı:
https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg?w=1000&h=1000&c=1
Bir sonraki bölümde size bazı gerçek örnekler göstereceğim.
Quicq ile Uygulamalı: WordPress Görüntüleri Nasıl Optimize Edilir
Artık Quicq'in ne yaptığını bildiğinize göre, uygulamalı gidelim ve size WordPress'te nasıl çalıştığını göstereceğim.
Yine, WordPress ile sınırlı değildir, ancak WordPress sitenizle kullanımı çok kolaylaştıran özel bir WordPress eklentisi sunar.
1. Ücretsiz bir Quicq Hesabı için Kaydolun
Başlamak için ücretsiz bir Quicq/Afosto hesabına kaydolmanız gerekir. Daha sonra fiyatlandırma hakkında konuşacağım, ancak cömert bir sonsuza kadar ücretsiz plan var ve ayrıca 14 günlük sınırsız ücretsiz deneme (kredi kartı gerekmez).
Hesabınıza kaydolduktan sonra, Afosto panosunda Quicq'in yanındaki Ücretsiz denemeyi başlat düğmesini tıklayın:
2. Bir Quicq CDN oluşturun
Ardından, siteniz için görüntüleri sunacak ve optimize edecek olan bir Quicq CDN oluşturmanız gerekir.
Quicq denemenizi başlattığınızda, bunu yapacak bir görev, ana Afosto panosunun görev listesinde otomatik olarak görünmelidir. Göremiyorsanız, bu arayüze Quicq'in yanındaki dişli simgesine tıklayarak da erişebilirsiniz:
İlk olarak, Quicq CDN'niz için kullanmak istediğiniz URL'yi girmeniz gerekir. Resimleriniz bu URL'den yüklenecek, dolayısıyla onları web sitenizle alakalı hale getirmek isteyeceksiniz.
Örneğin, WP Mayor için bir tane oluşturuyor olsaydım, URL'yi wpmayor yapardım .
Ardından, sitenizdeki mevcut bir resmin doğrudan URL'sini girin ve Web sitesini doğrula'yı tıklayın:
Quicq daha sonra WordPress kullandığınızı otomatik olarak algılamalı ve wp-content klasörü içindeki yüklemeler klasörü olması gereken resimlerinize giden yolu oluşturmalıdır.
Ayrıca, resimleriniz için önbellek davranışını kontrol etmenizi sağlayan Gelişmiş ayarları genişletme seçeneğiniz de vardır. Varsayılan değer 365 gündür ve bu iyi olmalıdır. Ama isterseniz bunu değiştirebilirsiniz.
İşleri bitirmek için Ekle düğmesini tıklayın:
3. Quicq Eklentisini Kurun ve URL Anahtarı Ekleyin
Hesabınızı oluşturup CDN'nizi kurduktan sonra, WordPress.org'dan ücretsiz Quicq eklentisini sitenize yükleyebilirsiniz. Bu, WordPress sitenizi az önce oluşturduğunuz görüntü CDN'si ile entegre etmenize izin verecektir.
Eklentiyi etkinleştirdikten sonra, WordPress kontrol panelinizdeki yeni Quicq alanına gidin ve kurulum sürecinde girdiğiniz URL anahtarını ekleyin. Diğer bir deyişle, CDN URL'sinin özelleştirebildiğiniz kısmı.
Benim örneğim için, bu wpmayor .
Ardından, Etkin Quicq geçişini seçin ve ardından canlı hale getirmek için Değişiklikleri Kaydet'i seçin:
Ve bu kadar! WordPress siteniz şimdi görüntülerini gerçek zamanlı görüntü optimizasyonları içeren Quicq CDN aracılığıyla yüklemeye başlamalıdır.
Burada dikkat edeceğim küçük bir şey, Quicq eklenti alanının WordPress panosunda üst düzey bir menü alanı olması gerektiğini düşünmüyorum. Tek seferlik bir kurulum işlemi olduğu için, kullanıcıların daha temiz bir yönetici alanına sahip olmalarına yardımcı olmak için bunu Ayarlar → Quicq gibi bir alt menüye taşımak daha iyi olur diye düşünüyorum.
4. URL Parametreleriyle Görüntüleri Değiştirin (Gerektiğinde)
Çoğu WordPress sitesinde, optimize edilmiş görüntülere sahip olmak için başka bir şey yapmanız gerekmez. Bu noktada, Quicq aşağıdaki optimizasyonları zaten otomatik olarak gerçekleştiriyor:
- Görüntüleri her kullanıcının cihazına göre en uygun şekilde sıkıştırma/yeniden boyutlandırma.
- En iyi sonucu verene bağlı olarak görüntüleri WebP veya AVIF formatına dönüştürmek.
- Görüntüleri Quicq'in Google Cloud CDN'si aracılığıyla sunmak.
Ancak, daha önce bahsettiğim gibi, Quicq'in gerçek zamanlı yaklaşımıyla ilgili harika şeylerden biri de, URL'ye bazı sorgu parametreleri ekleyerek resimlerinizi değiştirebilmenizdir.
Ayrıntılı bir görünüm için buradaki belgeler sayfasına göz atabilirsiniz, ancak bunun nasıl çalıştığına dair bazı hızlı örnekleri gözden geçirelim.
Diyelim ki sitenizin bir bölümünde kullandığınız geniş bir imajınız var. Şimdi, aynı görüntüyü kullanmak istiyorsunuz, ancak onu kare bir görüntüye kırpın.
Quicq olmadan, en sevdiğiniz resim düzenleme aracını açmanız, resmi kırpmanız ve ardından kullanmak için kırpılmış resmin yeni bir kopyasını yüklemeniz gerekir.
Quicq'in gerçek zamanlı görüntü işleme özelliğiyle, yalnızca bir URL parametresi ekleyerek ( ve orijinal görüntüyü etkilemeden ) kırpmayı gerçekleştirebilirsiniz.
İşte orijinal resim ve URL:
Ve sonra, bu URL parametresini ekleyerek 1000×1000 piksel kareye kırpıldığında görüntü şöyle görünür – ?w=1000&h=1000&c=1 :
İşte bir örnek daha…
Diyelim ki bir adım daha ileri gitmek ve görüntüyü kareye kırpmanın yanı sıra bulanıklaştırmak istiyorsunuz.
Tek yapmanız gereken blur parametresini eklemek ve ne kadar blur kullanmak istediğinizi (0'dan 3'e kadar) ayarlamaktır ve görüntünüz bulanık olacaktır:
Hızlı Fiyatlandırma
Quicq'in oldukça cömert, sonsuza kadar ücretsiz bir planı var ve ardından daha fazla özelliğe ihtiyaç duyan kullanıcılar için ücretli planlar var.
Ücretsiz plan, ayda 100.000'e kadar görüntüyü optimize etmenize* ve sonsuza kadar ayda 25 GB CDN bant genişliği sunmanıza olanak tanır; bu, küçük bir site için fazlasıyla yeterli olmalıdır. Örneğin, temel bir broşür/portföy siteniz veya küçük bir blogunuz varsa, bunu asla aşamayacağınızı düşünmüyorum.
*Unutmayın, görüntü optimizasyonları geleneksel bir eklenti gibi tek seferlik değil dinamik olarak gerçekleşir, bu nedenle bir görüntü her yüklendiğinde bir optimizasyon olarak sayılır.
Ücretli planlara ihtiyacınız varsa, iki ölçüme göre faturalandırılırsınız:
- Optimizasyonlar – Aylık sahip olduğunuz görüntü optimizasyonlarının sayısı.
- Veri aktarımı – CDN aracılığıyla sunulduğunda resimlerinizin tükettiği bant genişliği miktarı.
Bu faturalandırma stratejisi, sizi genellikle sitenizin aylık ziyaret sayısına göre faturalandıran diğer bazı gerçek zamanlı görüntü optimizasyon eklentilerinden biraz daha karmaşıktır.
Ancak, aslında bu faturalandırma modelini daha çok seviyorum çünkü kullanımınızı tahmin etmeyi biraz daha zorlaştırsa bile bunun daha adil bir faturalandırma yöntemi olduğunu düşünüyorum.
Bu yaklaşımla, yalnızca gerçek kullanımınıza göre faturalandırılırsınız, bu da muhtemelen paradan tasarruf etmenize yardımcı olur.
Ne ödeyeceğinizi öğrenmek için fiyatlandırma sayfasındaki hesap makinesini kullanabilirsiniz.
Sitenizin kullanımından emin değilseniz, başlamak için ücretsiz katmanı kullanabilirsiniz veya sitenizin kullanımını iyi anlamanızı sağlayacak daha yüksek kullanım planlarının 14 günlük ücretsiz denemesi de vardır:
Premium planlara ihtiyacınız varsa, özel kupon kodumuzla tüm paketlerde ilk iki ay %20 indirim kazanabilirsiniz:
Quicq Üzerine Son Düşünceler
Genel olarak, birçok sitenin bu gerçek zamanlı görüntü optimizasyonu yaklaşımına geçtiğini biliyorum.
Bu yaklaşımın, resimlerinizi manipüle etme ve her ziyaretçinin kendi benzersiz durumu için optimize edilmiş bir resim görmesini sağlama açısından size sağladığı esneklik nedeniyle sunabileceği çok şey olduğunu düşünüyorum.
Quicq, bunu WordPress'e getiren ilk eklenti değil, ancak bunun için birkaç şeyi var:
- Çok cömert bir ücretsiz katmana sahiptir. Gördüğüm en yüksek ücretsiz katmana sahip.
- Premium seçenekler için fiyatlandırma modelini seviyorum çünkü yalnızca gerçek kullanımınıza göre ödeme yapıyorsunuz. Fiyatlandırmayı biraz daha karmaşık hale getirse de, faturalandırmanın “daha adil” bir yolu olduğunu düşünüyorum. Ayrıca, ne ödeyeceğinizden emin değilseniz, sitenizin gerçek kullanımını öğrenmek için her zaman 14 günlük sınırsız denemeyi kullanabilirsiniz.
- Yine de kırpma, bulanıklaştırma ve benzeri diğer görüntü manipülasyonlarını gerçekleştirmenize izin verir. Bildiğim diğer WordPress eklentilerinin çoğu yalnızca performansa odaklanıyor veya yalnızca filigranlara erişmenizi sağlıyor, bu yüzden Quicq'in bunun ötesine geçmesi harika. Çoğu sıradan kullanıcı muhtemelen bunları kullanmaz, ancak ileri düzey kullanıcılar ve geliştiriciler için iyidir.
Denemek istiyorsanız, Quicq'in kullanımınızı anlamanıza yardımcı olacak cömert bir sonsuza kadar ücretsiz planı ve 14 günlük sınırsız ücretsiz denemesi vardır. Başlamak için aşağıdaki düğmeleri tıklayabilirsiniz: