Lighthouse'a göre Görüntü Optimizasyonu, düşük web sitesi hızı ve performansının en yaygın sorunlarından biridir.

Optimize edilmemiş görsellerin sayfa yükleme hızınızı 9 saniyeden fazla, bazı durumlarda daha da fazla yavaşlatması mümkündür.

Yavaş sayfalar daha yüksek hemen çıkma oranına ve daha düşük SERP konumlandırmasına yol açar, bu da daha az trafik ve daha az ödeme yapan müşteri anlamına gelir.

Görüntü optimizasyonu neleri içerir?

Web sitenizdeki tüm görsellerin optimizasyonu oldukça karmaşık bir iştir ve bunu doğru yapmak için uzmanlık ve birkaç saat gerekir.

Eklentiler biraz zaman kazanmanıza yardımcı olabilir, ancak doğru şekilde kullanılmazsa tüm web sitenizin yapısını bozabilir ve medyanızın bir kısmını kalıcı olarak silebilir.

Bunu neden karmaşık bir iş olarak gördüğümüzü anlamak için, Cloudimage'in uygun görüntü optimizasyonu için nelerin gerekli olduğunu düşündüğü 20 maddelik bir kontrol listesi:

1. CDN teslimatını dahil et
2. TTFB'yi optimize edin
3. 360 derecelik ürün görünümünü kullanın
4. Resimlerinizin duyarlı olduğundan emin olun
5. Görüntüleri doğru şekilde yeniden boyutlandırın
6. Doğru görüntü formatını kullanın
7. Resimleri sıkıştır
8. Alt özellikleri optimize edin
9. Resimleri net olarak yazın
10. Ürün açılarınıza dikkat edin
11. Renkleri karıştırmayı bilin
12. Duyguyla kaynaşmış görseller oluşturun
13. Ürüne karşılık gelen arka planları kullanın
14. Küçük resimlerinizi optimize edin
15. Resim site haritasını kullan
16. Renk alt örneklemesini uygula
17. Kritik olmayan görüntüleri tembel olarak yükleyin
18. Görüntü püskürtmeyi dağıtın
19. Görüntü varlıklarını önbelleğe almaya başlayın
20. Kritik görüntü varlıklarını önceden yükleyin

Teknik açıdan, yukarıdaki listeden en önemli noktalar yeniden boyutlandırma, format optimizasyonu, Geç yükleme, görüntü sıkıştırma, yanıt verme ve CDN teslimidir.

Diyelim ki web sitenizde 11.000 görsel var.

Bunları optimize etmeyi bitirmek ne kadar zaman alacak?

Şimdi bunu otomatik olarak yapabildiğinizi hayal edin!

Cloudimage'in yaptığı budur.

Tüm görüntüleri yazılımımız aracılığıyla toplu olarak yükleyebilirsiniz ve bunlar otomatik olarak paraya çevrilecek ve buluta yüklenecektir.

Ardından optimizasyon geliyor.

Görüntü Yeniden Boyutlandırma

Cloudimage'in dünya çapında üç veri merkezinde (Kanada, Fransa ve Singapur) bulunan yeniden boyutlandırma sunucuları, orijinal imajınızı Origin_image_url'den indirecek, işlem ve filtre parametrelerine göre dönüştürecek ve son olarak bir roket aracılığıyla web sitenizde veya mobil uygulamanızda gösterecektir. -hızlı CDN.

Web sunucunuzda, Amazon S3 klasörünüzde veya HTTP üzerinden erişilebilen diğer herhangi bir depolamada barındırılan orijinal bir görüntüye sahip bir örnek.

Hem genişlik hem de yükseklik belirlediğinizde, orijinal görüntü oranları yoksayılabilir veya korunabilir. Ayrıca, görüntüye dolgu eklemeyi de seçebilirsiniz. Cloudimage, aşağıdaki yeniden boyutlandırma modlarını sağlar:

Mahsul

Tanımlanan genişlik ve yüksekliğe uyacak şekilde görüntüyü kesen görüntü oranlarını korur.

Yerleştirmek

İstenilen boyutları karşılamak için dolgu ekleyerek görüntü tutma oranlarını yeniden boyutlandırır.

Ciltli

Oranları koruyarak görüntüyü yeniden boyutlandırmaya çalışır. Sığdırmak için benzer ancak dolgusuz.

Kapak

Orijinal görüntü orantılarını yok sayarak görüntüyü verilen genişlik ve yüksekliğe göre yeniden boyutlandırır.

Döndür

Resmi saat yönünün tersine belirli bir açıyla döndürür

kırp

Resmin etrafındaki tek renkli çerçeveyi kaldırır.

Görüntü sıkıştırma

Sıkıştırma filtrelerini kullanarak görüntünüzün sıkıştırmasını (çıktı biçimi ve kalitesi) değiştirebilirsiniz.

Yeniden boyutlandırma işlemleri ve görüntü filtrelerinin yanı sıra sıkıştırma filtrelerini de kullanabilirsiniz.

Varsayılan olarak Cloudimage, görüntüleri WebP olarak sunar. Biçim, istemci tarayıcısı tarafından desteklenmiyorsa, JPEG veya PNG'ye geri döner.

Optipress – Makine Öğrenimi tabanlı görüntü sıkıştırma

JPEG sıkıştırmasıyla ilgili temel zorluk, her farklı görüntü için en uygun sıkıştırma faktörünü bulmaktır.

Aynı sıkıştırma parametreleriyle sıkıştırılan farklı görüntüler, farklı algılanan kaliteye neden olabilir.

Ayrıca, farklı boyutlardaki aynı görüntü, görünür kalite kaybı olmadan maksimum boyut kazancı elde etmek için farklı sıkıştırma stratejileri gerektirebilir.

Bunun üstesinden gelmek için Optipress JPEG sıkıştırma algoritmasını geliştirdik.

Optipress, belirli görüntü özelliklerini ve mevcut sıkıştırma parametrelerini analiz ederek en iyi JPG sıkıştırma yaklaşımını bulur.

Bir Makine Öğrenimi modeli, bu görüntü için en iyi sıkıştırma stratejisini belirler.

Daha sonra kalite, algısal kalite bozulması olmaksızın optimum sıkıştırma elde etmek için İnsan Görsel Sisteminin bir simülasyon modeline dayalı olarak değerlendirilir.

Dönüşüm ön ayarları

Aynı dönüştürmeleri birçok görüntüye uygulamak isterseniz, yalnızca ön ayar adını (X) kullanarak ön ayarlar tanımlayabilir ve dönüştürmeler uygulayabilirsiniz.

p=X

Herhangi bir yeniden boyutlandırma dönüştürmesi veya görüntü filtresi, filigranlar ve görüntü sıkıştırma parametrelerinin yanı sıra bir ön ayara dahil edilebilir.

Bu, görüntü optimizasyon zamanından %50'den fazla tasarruf sağlayan ve ilgili herkes tarafından kolayca yapılabilen toplu optimizasyon sürecini mümkün kılar.

Duyarlı Görüntüler kolaylaştı

Duyarlı görüntüler, görüntü boyutunu son kullanıcının ekran boyutuna göre uyarlar, böylece web sitenizin veya mobil uygulamanızın çeşitli ekran boyutlarında daha hızlı yüklenmesini sağlar.

Cloudimage ekibi, sizin için her şeyi otomatikleştirmek için bir JS eklentisi geliştirdi.

Cloudimage JS lib, tüm URL'lerinizi otomatik olarak uyarlar ve web sitenizi duyarlı, hızlı hale getirmek ve resimlerinize güzel yükleme efektleri eklemek için yerleşik Duyarlı Tasarım, Lazyloading ve daha birçok özellik sunar.

Tembel Yükleme ve önbellek etkinken, web sitenizin yüklenme süresinin en az %40 oranında artacağından emin olabilirsiniz. Buna CDN ekleyin ve yüzde 60'a kadar çıkıyor.

İçerik Dağıtım Ağı

Cloudimage, görüntülerinizin dünya çapında dağıtımını hızlandırmak için İçerik Dağıtım Ağlarından yararlanır. Görüntülerinizin dağıtımını optimize etmek ve üstün güvenilirlik sağlamak için birden fazla CDN sağlayıcısıyla çalışıyoruz.

Görüntülerinizi hızlandırmanın yanı sıra CDN, sunucularınız için bir kalkan görevi görecek ve herhangi bir kesinti süresini önleyecek DDoS (Dağıtılmış Hizmet Reddi) koruması sağlar.

CDN'ler genellikle görüntüleri son kullanıcılar tarafından talep edildiği sürece önbelleğe alır.

Dakikalar içinde uygulandı

Cloudimage'i benzersiz yapan şey, hizmetlerinin çok hızlı uygulanabilmesidir.

Web siteniz çılgın trafik zirveleri yaşıyorsa, her zaman cloudimage'a ulaşabilir, resimlerinizi optimize edebilir ve bu zirvelerin anında emildiğinden emin olabilirsiniz.

Bu, çeşitli cihazlarda kusursuz performans ve hızlı sayfa yükleme hızı sağlar.

Ayrıca, uygulama çok kolaydır ve ekipler (içerik üretiminden yayınlama ve izlemeye kadar web sitesinden sorumlu ekipler) arasındaki işbirliği sürecini basit ve verimli hale getirir.

Bu, özellikle çoğumuz önümüzdeki dönemde ev ofislerimizi kullanmak zorunda kaldığımızda önemlidir.
Cloudimage hizmetlerinin nasıl çalıştığı hakkında daha fazla bilgi için cloudimage.io'da bizi ziyaret edin.