Görüntüler Nasıl Düzgün Boyutlandırılır
Yayınlanan: 2022-07-13Google PageSpeed Insights'ta bir performans denetimi çalıştırırken "uygun boyutta resimler" uyarısı mı alıyorsunuz? Lighthouse, sayfanızda uygun boyutta olmayan herhangi bir resim tespit ederse bu sorun tetiklenir.
Resimlerinizi uygun şekilde boyutlandırmak, sayfa yükleme sürelerini önemli ölçüde iyileştirebilir ve bant genişliği tüketimini azaltabilir. Bu yazıda, WordPress sitenizin resimlerini optimize etmek için izleyebileceğiniz bazı optimizasyon tekniklerini paylaşıyoruz.
Düzgün Boyutlu Görüntüler Ne Anlama Geliyor?
Resimlerinizi uygun şekilde boyutlandırmak, resim URL'sinin ziyaretçi ekranında oluşturuldukları boyuttan daha büyük olmaması gerektiği anlamına gelir. Gerekenden daha büyük bir şey sunmamalısınız - baytları boşa harcar ve sayfayı yavaşlatır.
| Altın kural: WordPress sitenize yüklenen görseller, gösterilecekleri boyutlara göre boyutlandırılmalıdır. |
Deniz Feneri Uyarısını Ne Tetikler?
Lighthouse, oluşturulan görüntünün boyutunu (cihaz piksel oranı) ve gerçek görüntünün boyutunu karşılaştırır. Oluşturulan boyut gerçek boyuttan en az 4KiB daha küçükse, "uygun boyutta görüntüler" uyarısı tetiklenir.
Uygun Olmayan Boyutlu Görüntülerin Performans Üzerindeki Etkisi
Resimler uygun şekilde boyutlandırılmamışsa, tarayıcı onları ziyaretçiye göstermeden önce yeniden boyutlandırma "kararını" alacak, zaman ve kaynak israf edecektir. Çok büyük resimler, sayfa deneyimine zarar vererek kullanıcıyı gerekenden daha fazla veri indirmeye zorlar.
| Yüksek çözünürlüklü bir görüntü = büyük dosya boyutu = web performansını büyük ölçüde etkiler = daha fazla tüketilen hücresel veri |
Doğru boyutta olmayan görüntüleri ayrıştırdığında tarayıcı tarafında şu olur:
Tarayıcı, dosyayı indirmek ve görüntüyü yeniden boyutlandırmak için daha fazla zaman harcayacak ve tüketilen bant genişliğini artıracaktır. Görüntülerle ilgili performans sorunlarından kaçınmak için uygulayabileceğiniz birkaç kolay teknik vardır. Bir sonraki bölümde bunları gözden geçirelim!
WordPress'te Resimleri Doğru Şekilde Boyutlandırmak için 3 İpucu
WordPress'teki görüntüleri uygun şekilde boyutlandırmak için üç kolay görüntü optimizasyon ipucunu takip edebilirsiniz:
- Boyutları Düzeltmek İçin Resimleri Yeniden Boyutlandırın
- Duyarlı Görseller Kullanın
- Vektör Tabanlı Görüntü Formatlarını Kullanın
Hadi dalalım!
1. Görüntüleri Doğru Boyuta Göre Yeniden Boyutlandırın
Yazılım ve Çevrimiçi Araçlarla Görüntüleri Düzgün Boyutlandırın
Görüntüleri doğru boyutlarda yeniden boyutlandırmak için kullanabileceğiniz birçok ücretsiz ve premium yazılım vardır. Mac ve Windows'ta iki ücretsiz seçeneği paylaşıyoruz:
- Önizleme (Mac'te Ücretsiz)
- GIMP – görüntüleri çok uygun bir şekilde düzenlemenizi ve yeniden boyutlandırmanızı sağlayan ücretsiz bir düzenleme yazılımı:
Elbette, iki ünlü Photoshop ve Lightroom yazılımını kullanma seçeneğiniz de var, ancak bunlar zorlu bir öğrenme eğrisi olabilir. İlginizi çekiyorsa görüntü optimizasyonu için Photoshop'a 10 alternatif listeledik.
Önemli: Birkaç görüntüyü yeniden boyutlandırıyorsanız , işlemi otomatikleştirmek için Imagemagick gibi bir komut dosyası kullanmayı daha uygun bulabilirsiniz .
Görüntü CDN'sini Kullanarak Görüntüleri Düzgün Boyutlandırın
Görüntü CDN'leri, WordPress siteniz için görüntüleri uygun şekilde boyutlandırmanıza yardımcı olabilir. Görüntülerin dönüştürülmesi, optimizasyonu ve tesliminde uzmanlaşırlar. Sitenizde kullanılan görsellere erişen ve kullanıcı cihazına göre sıralayan API'ler gibidirler.
O nasıl çalışır?
Bir görüntü CDN'sinden yüklenen her görüntünün, yüklenecek görüntünün yanı sıra boyut, biçim ve kaliteyi belirten bir URL'si vardır. Ardından, görüntüyü en iyi şekilde optimize edilmiş biçimde sunmak için "dönüştürebilir".
Bir görüntü CDN'si ayrıca farklı kullanım durumları için bir görüntünün varyasyonlarını oluşturur ve görüntü bayt tüketimini en az %40 oranında azaltır. Google Developers, bir görüntü CDN'sine geçmeye karar veren şirketler hakkında ilginç bir araştırma yaptı. İşte ne kadar veri kaydettikleri:
2. Duyarlı Görseller Kullanın
Optimize edilmiş görseller sunmak için en iyi stratejilerden biri, genişliği ve yüksekliği herhangi bir ekrana (mobil, tablet veya masaüstü) uyacak şekilde ayarlamak anlamına gelen “duyarlı görseller” olarak adlandırılır. Tüm görüntüler optimize edilecek ve doğru ekrana sunulacak, bu da daha az bant genişliği tüketimi ve daha hızlı tarayıcı yürütmesi ile sonuçlanacak.
Her görüntünün birden çok sürümünü oluşturmanız ve ardından görünüm alanı boyutları, medya sorguları vb. kullanarak HTML veya CSS'nizde hangisini kullanacağınızı belirlemeniz gerekir.
Önemli: Görüntü boyutu, sitenin yerleşim kesme noktalarına (duyarlı tasarımın yapı taşları) bağlı olarak değişecektir.
Bootstrap standartlarını takip etmek istiyorsanız, görüntülerinizin yanıt vermesini sağlamak için aşağıdaki medya sorgularını kullanabilirsiniz:
- dikey telefonlar için 576px
- tabletler için 768 piksel
- dizüstü bilgisayarlar için 992 piksel
- Büyük cihazlar için 1200 piksel
Artık her ekran için belirtmemiz gereken boyutları bildiğimize göre, tarayıcıya ziyaretçi ekranına göre hangisini seçeceğini nasıl söyleyeceğiz?
Mobil veya masaüstünde farklı görüntü yoğunluklarına (kalitelerine) farklı görüntüler sunmak için src, srcset vesize özniteliklerini kullanabilirsiniz. Aşağıdaki örnekte, tarayıcıya çiçek resmi için farklı boyutların mevcut olduğunu söylemek için src niteliğini kullanıyoruz:
WordPress sitenizde otomatik olarak duyarlı görüntüler sunmak için Cloudinary'yi kullanabilirsiniz (kurulum gerekmez). Web siteleri ve mobil uygulamalar için uçtan uca bir görüntü ve video yönetimi çözümüdür. Görüntüleri ve videoları kolayca buluta yükleyebilir ve diğer düzenleme yazılımlarını yüklemeden bu ortamların akıllı manipülasyonlarını (istifa etme, optimizasyonlar vb.) otomatikleştirebilirsiniz.
Optimize edildikten sonra Cloudinary, görüntüleri şu üç CDN aracılığıyla sunar: Akamai, Fastly ve CloudFront. Kendi CDN'nizi bağlamak istiyorsanız, onlarla iletişime geçmeniz gerekir.
Sitenizin duyarlı bir tasarım kullanıp kullanmadığını test etmek ister misiniz? Google Arama Konsolu > Mobil Dostu'na gidin ve URL'nizi girin.
3. Vektör Tabanlı Görüntü Formatlarını Kullanın
Resimlerinizi düzgün bir şekilde yeniden boyutlandırmak için başka bir strateji, vektör tabanlı resim formatlarını (SVG gibi) kullanmaktır. Bir SVG görüntüsü, kaliteden ödün vermeden sonlu miktarda kodla sonsuz şekilde ölçeklenebilir.
Görüntüleri yeniden boyutlandırmak, web performansı için çok önemlidir, ancak web sitenize ekstra hız artışı sağlamak için diğer birçok gelişmiş optimizasyon tekniğini uygulayabilirsiniz.
WordPress sitenizi daha hızlı hale getirmek için kodlama, sıkıştırma ve yeni nesil biçimleri kullanmayı duydunuz mu? Bir sonraki bölümde, WordPress için en iyi görüntü sıkıştırma eklentilerinden biri olan Imagify sayesinde birkaç tıklamayla uygulayabileceğiniz birkaç görüntü optimizasyon stratejisinin üzerinden geçeceğiz.
Imagify ile Görüntüleri Daha Hızlı Hale Getirme
Imagify ile resimlerinizi manuel olarak yeniden boyutlandıramazsınız. Yine de aşağıdaki dosya boyutu optimizasyonlarını gerçekleştirebilirsiniz:
- Kaliteyi etkilemeden (neredeyse) üç sıkıştırma düzeyi kullanarak büyük resimlerinizi toplu olarak sıkıştırın: Normal, Ultra ve Agresif.
| Özel kılavuzumuzda kayıpsız ve kayıplı görüntü sıkıştırma arasındaki farklar hakkında daha fazla bilgi edinin. |
Sıkıştırma açısından, Imagify dosya boyutunuzdan %95'e kadar tasarruf sağlayabilir! Aşağıdaki örnekte, resimleri değerlerimizle yeniden boyutlandıramıyoruz, ancak sıkıştırma, resimlerimizin genişliğini ve yüksekliğini küçülttü.
Yukarıda belirtildiği gibi, toplu optimizasyon, tüm görüntüleri bir kerede optimize etmenize olanak tanır:
- Bunları Lighthouse tarafından önerilen yeni nesil format olan WebP'ye dönüştürün.
Toplama
Uygun boyutta görsel uyarılarından kaçınmanın en iyi yolu, web sitenizin farklı alanlarının (logo, kenar çubuğu, kaydırıcılar, öne çıkan görseller vb.) ölçümünü öğrenmektir. Her parça için hangi boyutların gerekli olduğunu öğrendikten sonra, herhangi bir cihaz için doğru boyutu göstermek çocuk oyuncağı olacak!
Görüntüleri yeniden boyutlandırmak, onları optimize etmenin tek yolu değildir. Ayrıca bunları sıkıştırmanız (veya kodlamanız) ve WebP gibi yeni nesil bir biçimde sunmanız gerekir.
Tüm bu stratejiler, görüntü dosyasının boyutunu önemli ölçüde azaltacak ve ziyaretçileriniz için daha hızlı indirme süresi sağlayacaktır. Ve iyi haber, Imagify eklentisi ile kolayca uygulanabilirler! Birkaç görseli optimize edebilmeniz ve sayfa performansınızın nasıl geliştiğini görebilmeniz için ücretsiz deneme sürümü mevcuttur. Risk alınmaz!