Görselleri Doğru Boyutlandırma Rehberi

Görselin görüntülendiği en geniş boyutu ölçün, yüksek yoğunluklu ekranlar için bunu iki katına çıkarın ve kütüphanenizi bu sayıya göre yeniden boyutlandırın. 800 piksellik bir alana 4000 piksellik bir fotoğraf sunmak, tarayıcının görüntüleyebileceğinden yaklaşık 25 kat daha fazla piksel verisi indirmesi ve ardından geri kalanını atması anlamına gelir.

Mobil bağlantıda ziyaretçi bunun bedelini hem zaman hem de veri olarak öder. Görselleri doğru boyutlandırmak, genellikle bir site için elde edilebilecek en büyük sayfa boyutu tasarrufudur ve yeniden tasarım yerine tek bir toplu işlem gerektirir.

Büyük boyutlu görseller neden bu kadar pahalıya mal olur?

Dosya boyutu piksel sayısı ile ölçeklenir, bu nedenle genişliği ve yüksekliği yarı yarıya indirmek verilerin yaklaşık yüzde 75'ini kaldırır. Doğrusal olmak yerine karesel bir ilişki vardır, bu yüzden israf hızla büyür.

İlk satır, editörlerin doğrudan kameradan yükleme yaptığı sitelerde yaygın bir durumdur. Tarayıcı 4.2 MB indirir, küçültür ve 180 KB'lık bir dosyanın eşdeğerini görüntüler.

Gerçek görüntüleme boyutu nasıl ölçülür?

Canlı sayfanızdaki görsele sağ tıklayın, İncele'yi seçin ve orijinal boyutlar yerine görüntülenen boyutları okuyun. Tarayıcılar her iki rakamı da bildirir ve aralarındaki fark israftır.

Tipik durum yerine en geniş durumu kontrol edin. Bir makale sütununun içindeki bir görsel masaüstünde 700 piksel, telefonda ise 380 piksel olarak görüntülenebilir; bu nedenle önemli olan sayı 700'dür. Tam genişlikteki bir afiş görüş alanıyla birlikte büyüdüğünden ve farklı bir hesaplama gerektirdiğinden, ziyaretçilerinizin gerçekçi olarak kullandığı en geniş tarayıcı penceresinde test edin.

Yüksek yoğunluklu ekranlar için iki katına çıkarma kuralı

Görüntüleme genişliğini 2 ile çarpın ve orada durun, çünkü bu yoğunluğun ötesindeki ekranlar kimsenin fark edemeyeceği başka bir iyileşme göstermez. 700 pikselde görüntülenen bir görsel 1400 piksel olarak dışa aktarılmalıdır.

Üç katına çıkarma bazen önerilir ancak nadiren haklı çıkar. Normal izleme mesafesinde 2 ile 3 kat yoğunluk arasındaki fark tespit edilemez, dosya ise yarıdan fazla büyür. 2 kat yoğunlukta daha güçlü sıkıştırma yapmak, 3 kat yoğunlukta hafif sıkıştırma yapmaktan daha iyi bir sonuç verir, çünkü ekstra pikseller sıkıştırmayı gizler.

Yeniden boyutlandırmak için yaygın görüntüleme genişlikleri

• Makale gövde görseli: yaklaşık 700 px görüntülenir, 1400 px olarak dışa aktarın.
• Tam genişlikte hero görseli: 1920 px'e kadar görüntülenir, 1920 px olarak dışa aktarın ve daha fazla sıkıştırın.
• Yarı genişlikte öne çıkan görsel: yaklaşık 600 px görüntülenir, 1200 px olarak dışa aktarın.
• Ürün ızgarası küçük resmi: yaklaşık 300 px görüntülenir, 600 px olarak dışa aktarın.
• Yazar veya profil fotoğrafı: yaklaşık 80 px görüntülenir, 160 px olarak dışa aktarın.
• Üstbilgideki logo: yaklaşık 180 px görüntülenir, 360 px olarak dışa aktarın veya vektör grafikleri kullanın.

Tam genişlikteki görseller neden istisnadır?

Tam genişlikteki bir afişin sabit bir görüntüleme boyutu yoktur, bu nedenle iki katına çıkarmak yerine 1920 pikselle sınırlayın ve daha fazla sıkıştırın. Tam genişlikteki bir görseli iki katına çıkararak 3840 piksele ulaştırmak, hiçbir sayfanın haklı çıkaramayacağı bir dosya oluşturur.

Afişler genellikle uzaktan incelenir ve bir ürün fotoğrafına göre daha az ince detay taşır, bu da agresif sıkıştırmanın bunlarda daha az fark edilmesini sağlar. WebP biçiminde 70 kalitesinde 1920 piksellik bir afiş genellikle 200 KB'ın altında kalır ve her ekranda doğru görünür, 3840 piksellik sürüm ise 4 katı ağırlıkta hiçbir görünür fayda sağlamaz.

Bütün bir kütüphane nasıl düzeltilir?

Mevcut bir siteyi doğru şekilde yeniden boyutlandırmak için bu 6 adımı izleyin.

1. Tasarımınızdaki görsel alanlarını listeleyin; bu genellikle onlarca değil 4 ila 6 farklı boyuttur.
2. Canlı bir sayfada tarayıcı denetleyicisini kullanarak her alanın görüntüleme genişliğini ölçün.
3. Dışa aktarma boyutunuzu elde etmek için her genişliği iki katına çıkarın.
4. Toplu işlem her dosyaya tek bir boyut uygulayacağından kütüphaneyi alanlara göre klasörlere ayırın.
5. Her klasörü hedef genişliğine göre yeniden boyutlandırın, ardından aynı adımda sıkıştırın ve dönüştürün.
6. Mevcut sayfaların çalışmaya devam etmesi için dosyaları aynı adları koruyarak değiştirin.

Klasörlere ayırmak, bu işi toplu bir göreve dönüştüren adımdır. Çoğu site tahmin ettiğinden çok daha az sayıda farklı görsel boyutu kullanır ve alana göre gruplandırma, dosyalarla tek tek ilgilenme ihtiyacını ortadan kaldırır.

Duyarlı görseller ve srcset özniteliği

Birden fazla boyut sunmak için srcset kullanın ve tarayıcının her cihaz için doğru olanı seçmesine izin verin. Böylece bir telefon 400 piksellik bir dosya indirirken bir masaüstü aynı kodlamadan 1400 piksellik bir dosya indirir.

Görsel başına genellikle 400, 800 ve 1600 piksel olmak üzere 3 genişlik oluşturun ve tarayıcının seçim yapabilmesi için bunları piksel genişlikleriyle listeleyin. Çoğu içerik sistemi bunu yükleme sırasında otomatik olarak üretir, bu nedenle platformunuzun halihazırda ne yaptığını kontrol edin. Otomatik yapıldığı durumlarda bile doğru boyutlandırılmış bir orijinal yüklemek, üretilen her varyantı iyileştirir.

Her zaman sıkıştırmadan önce yeniden boyutlandırın

Önce yeniden boyutlandırmak, sıkıştırmanın daha az iş yapması anlamına gelir, böylece dosya küçük kalırken kalite yüksek kalabilir. Önce sıkıştırmak ve sonradan yeniden boyutlandırmak, daha sonra tekrar çöpe atacağınız detayları işlemek demektir.

Sıralama aynı zamanda sonucun nasıl göründüğünü de etkiler. Tam boyutta sıkıştırılmış bir görsel, görsel küçültüldüğünde daha görünür hale gelen bozulmalar taşır, çünkü bozulmalar da onunla birlikte ölçeklenir. Önce yeniden boyutlandırmak, kodlayıcı için daha temiz bir kaynak ve aynı dosya boyutunda belirgin şekilde daha iyi bir sonuç üretir.

Bu işlem sayfa hızını nasıl etkiler?

Görselleri doğru şekilde boyutlandırmak, bunu daha önce hiç yapmamış bir sitede görsel ağırlığının genellikle yüzde 60 ila 90'ını ortadan kaldırır. İyileştirme, herhangi bir biçim değişikliğinden ve genellikle diğer tüm optimizasyonların toplamından daha büyüktür.

Etki, bağlantıların daha yavaş olduğu ve verinin maliyetli olduğu mobil ziyaretçilerde yoğunlaşır. Largest Contentful Paint doğrudan iyileşir, çünkü bu ölçüm normalde tek bir büyük görsel tarafından belirlenir. Lighthouse'taki Görselleri Doğru Boyutlandırın denetimini geçmek, genellikle aynı anda 2 veya 3 ilgili uyarıyı da temizler.

Bir görseli sığdırmak için asla büyütmeyin

Büyütme işlemi kameranın hiç yakalamadığı pikselleri ekler, bu nedenle sonuç yumuşak olur ve dosya hiçbir fayda sağlamadan büyür. Küçültmek her zaman güvenlidir, yukarı doğru boyutlandırmak ise kesinlikle daha kötü görünen tek işlemdir.

Kaynak bir görsel doldurması gereken alandan daha küçükse, dürüst seçenekler onu doğal boyutunda kullanmak, düzeni onun etrafında kırpmak veya görseli değiştirmektir. 600 piksellik bir fotoğrafı 1600 piksele büyütmek, orijinalinin 4 katı ağırlıkta bulanık bir dosya üretir ve aynı anda hem kalite hem de hız açısından başarısız olur.

Bir sayfayı büyük boyutlu görseller için kontrol etme

Geliştirici araçlarını açın, Ağ (Network) sekmesine geçin, görsellere göre filtreleyin ve sayfayı yeniden yükleyin. Liste, aktarılan boyutuyla birlikte her görseli en büyükten başlayarak sıralı gösterir.

500 KB'ın üzerindeki tek bir görsel incelenmeye değerdir ve görsellerin toplamda 2 MB'tan fazla olduğu her sayfada bir sorun vardır. Orijinal ve görüntülenen boyutlarını yan yana görmek için Öğeler (Elements) panelinde bir görselin üzerine gelin. 2 sayı arasındaki büyük fark, yanlış boyutlandırılmış bir görselin tanımıdır ve saniyeler içinde görülebilir.

Bir kütüphaneyi tek bir toplu işlemde yeniden boyutlandırma

Görselleri tek tek yeniden boyutlandırmak yerine, hedef genişliği bir kez ayarlayın ve bunu bir klasördeki her dosyaya uygulayın. İş toplu hale getirildiğinde birkaç yüz görselden oluşan bir kütüphane dakikalar içinde yeniden boyutlandırılır.

Aynı anda 500'e kadar dosyayı bırakın veya bir ZIP arşivini doğrudan sürükleyin ve tüm set için genişliği, biçimi ve sıkıştırma hedefini ayarlayın. Her şey kendi işlemcinizde tarayıcınızın içinde çalışır, böylece istemci siteleri, hazırlık varlıkları ve yayınlanmamış galeriler asla bir sunucuya ulaşmaz. Hiçbir şey yüklenmez, bu da tam bir kütüphane yeniden boyutlandırmasının ağ üzerinden tek bir dosya bile geçmeden gerçekleştiği anlamına gelir.