Geliştirici İpuçları – WordPress Medya Kitaplığında Görüntü Boyutu Nasıl Sınırlandırılır

Tüm web sitelerinin ortak bir yanı varsa, görüntülerin bant genişliğinizin çoğunu almasıdır. Pekala, tam olarak değil – YouTube videoları gibi web sitelerinde mi? ve reklamların tüm bant genişliğinizi ve işlem gücünüzü makinelerimizden aldığı birçok başka web sitesi (evet, size bakıyorum, çevrimiçi gazeteler) var mı? Ancak, "normal" bir web sitesinden bahsediyorsak, muhtemelen görsellerin bir web sitesindeki en ağır öğeler olduğunu ve bu nedenle ilk olarak optimize etmemiz gereken şeyin görseller olduğunu kabul edersiniz.

Bu konuyu araştırırken, Google'da Iliya Grigoric'in resimlerin nasıl optimize edileceğine ilişkin bu ilginç makalesine rastladım. Ziyaretçilerimize gönderdiğimiz bayt sayısını azaltmak için çeşitli teknikleri ayrıntılı olarak açıklayarak hepsinin nasıl çalıştığını ve her birini ne zaman kullanmamız gerektiğini açıklıyor. Makale sadece iki tavsiyede özetlenebilir:

1. Görüntülerden kurtulun. İlk etapta bir görüntü kullanmazsanız, tonlarca bayttan tasarruf edersiniz, değil mi? ? Tavsiye aslında görüntüleri silmek değil, onları uygun teknolojiyle değiştirmek . Ama önceki ifade kulağa daha cesur geliyor ve dikkatinizi daha iyi çekiyor, değil mi? Örneğin, çok uzun zaman önce değil, görüntüleri her yerde kullandık – güzel renk şemaları ve garip yazı tipi yüzleri olsun diye onları başlıklarda kullandık. Bunları ayrıca düğmeler, yuvarlatılmış köşeler, gölgeler vb. oluşturmak için kullandık. Ancak tüm bu süslü görsel efektler artık görüntü varlıkları gerektirmiyor; artık CSS3'e sahibiz. Yani, evet, eğer onları CSS3 efektleriyle değiştirebilirsek, resimlerden kurtulabiliriz. Ve en iyi yanı, alacağımız sonuçlar çok daha iyi görünecek!
2. Uygun formatı seçin. Bazen bir resmi kaldıramazsınız. Sadece ondan kaçamazsın. Örneğin, öne çıkan görseller tanım gereği görsellerdir. Ve bazı kedilerin piyano çaldığı bir GIF'e ne dersiniz? Bunları CSS kurallarıyla değiştiremeyiz… bu yanlış olur! Peki bu senaryolarda ne yapabiliriz? Sadece doğru formatı kullanın. Resim animasyonlu mu? GIF'i kullanın. Bu bir resim mi? JPG muhtemelen sizin çözümünüzdür. Ekran görüntüsü mü dediniz? O zaman bahse girerim PNG doğru formattır. Logolar, çizimler vb. SVG ile çok daha iyi çalışır (artı, bu biçim tüm çözünürlüklere ölçeklenir).

Çok uzak çok iyi. Umarım sana yeni bir şey öğretmemişimdir. Ana fikir, ihtiyacınız olduğunda görüntüleri doğru formatta kullanmaktır. Ama bu bir Geliştirici İpucu değil, burada yeni veya ilginç bir şey yok… Peki bugünün yazısı ne hakkında?

Sorun

Genelde karşılaştığımız sorun (en azından Nelio'da yaşıyoruz) her zaman aynıdır: resimlerinizi küçük tutmanın ne kadar önemli olduğunu biliyoruz, ancak bazen yanlış anlıyoruz ve medya kitaplığına büyük bir resim yüklüyoruz. Hata!

Öne çıkan görselimize bir göz atın. Blogumuzdaki diğer birçok kişi gibi, bunu 200.000'den fazla yüksek çözünürlüklü, süper izinli lisansa sahip ücretsiz görsellere sahip bir web sitesi olan Unsplash'tan aldık (aslında, yazara kredi vermemize gerek yok). Resmi indirirseniz, 2 MB'ın üzerinde ve 4.672 x 3.104 piksel olduğunu göreceksiniz. Vay!

Açıkçası, sitemizde bu kadar büyük bir resim kullanmamalıyız – bu hiçbir anlam ifade etmiyor. Ve işler ancak birisi onu bağlantı kurmaya karar verirse daha da kötüleşebilir mi? Bununla ilgilenmek için, yeni bir öne çıkan görsel yüklemek üzereyken Nelio'da genellikle takip ettiğimiz süreç şudur:

1. Ele alacağımız konuyla bir şekilde ilgili bir resim ararız (veya çok zorsa, sadece beğendiğimizi ekleriz).
2. Bilgisayarımıza indiriyoruz.
3. Ölçeklendirip gerektiği gibi kırpıyoruz. Bizim durumumuzda bu, 1.200 x 800 piksel boyutunda bir görüntü elde edeceğimiz anlamına gelir.
4. Yeterince küçük olduğundan emin olmak için JPG sıkıştırma parametrelerini değiştirerek az önce düzenlediğimiz görüntünün bir kopyasını kaydederiz. Veya aynı etkiyi elde etmek için compresjpeg.com gibi bir çevrimiçi hizmet kullanıyoruz.
5. Resmi medya kitaplığına yüklüyoruz ve bir gönderiye ekliyoruz.

Ne yanlış gidebilir, değil mi? Bu basit, anlaşılır bir süreç. Ama biz sadece insanız ve kolayca dikkatimiz dağılır—yeni bir destek bileti gelir, biri sizi arar… ve birden tam 2.5MB Unsplash görüntüsünü yüklersiniz. ??‍️

Çözüm

Çözüm oldukça basit: Bir kez hata yapacağınızı kabul ettiğinizde, bunların olmasını önleyecek bir araca ihtiyacınız var. Yani, WordPress'e büyük resimleri reddetmesi gerektiğini söylememiz gerekiyor. Medya kitaplığına yükleyebileceğimiz maksimum görüntü boyutunu sınırlarsak, artık medya kitaplığına büyük görüntüler yüklemeyeceğiz (yani, elbette, yapacağız, ancak WordPress bize izin vermiyor). İşte bunu nasıl yapacağınız:

Önceki parça, wp_handle_upload_prefilter içine bağlanan bir işlevi tanımlar. Codex'te açıklandığı gibi, bu filtre, görüntü medya kitaplığına kaydedilmeden hemen önce yürütülür. Bu şekilde, adı veya depolanacağı son konum gibi şeyleri özelleştirebiliriz. Bizim durumumuzda, bunu şu şekilde kullanıyoruz:

1. Dosya boyutunu kilobayt olarak alın (4. ve 5. satırlar)
2. Gerçekten bir görüntü olup olmadığını kontrol edin (6. ve 7. satırlar)
3. Önceden belirlenmiş bir maksimum boyutu aşmadığımızı kontrol edin (satır 8 a 13). Bizim durumumuzda bu 250kB olarak ayarlanmıştır.
4. Bunu aşarsak error özelliğini ayarlıyoruz ve WordPress'in imajı reddetmesine izin veriyoruz.

Şimdi doğrudan Unsplash'tan indirilen 2,5 MB'lık resmi yüklemeye çalışırsak, aşağıdaki hatayı alırız:

Ve bu kadar! Kolay, değil mi? Ah, bu arada — önceki snippet'i nereye yazacağınızı bilmiyorsanız, bir süre önce kendi eklentinizi kullanarak WordPress'i nasıl özelleştireceğiniz konusunda paylaştığımız Geliştirme İpucunu okuyun.

Unsplash aracılığıyla Ksenia Makagonova'nın Öne Çıkan Görüntüsü.