Eric Portis, duyarlı görüntülerin dünyasına girmek için bana katılıyor.
Temelden başlıyoruz. Duyarlı görüntüler, özellikle HTML biçimindeki görüntülerdir ve daha iyi performans arzusu nedeniyle mevcuttur. Görseller, muhtemelen web sitelerinin toplam ağırlığındaki en büyük suçludur. Ağ üzerinden çok fazla piksel göndermekten kaçınabilirsek, yapmalıyız. Sonuçta, yalnızca 720 piksel genişliğindeki bir ekran, 2x ekran olsa bile 2000 piksel genişliğinde bir görüntüye ihtiyaç duymaz.
Sorun şu ki, tarayıcılar görseller gibi varlıkları indirme konusunda gerçekten agresif. Bu iyi, çünkü web'in olduğu kadar hızlı (olabileceği). Ancak bu, görsellerimiz hakkında HTML'de bir sürü bilgi sağlamamız gerektiği anlamına da gelir. Bir tarayıcı bir görüntünün ne kadar büyük olduğunu bilemez mi? Elbette indirdikten sonra yapabilir. Bir tarayıcı, bir görüntünün sayfada ne kadar büyük gösterileceğini bilemez mi? Elbette, tüm CSS'yi ve gerçekleştirilen düzeni indirdikten sonra yapabilir. Duyarlı görüntüler sözdizimi, bu bilgileri söz diziminde sağlayarak tüm bunların önüne geçmeye çalışır. Bu sözdizimini anlamak zor! Orada srcset, sizesve eleman ve oradan fikrinizi sarmak için bir ton var.
Daha da karmaşıklaşıyor.
Oluşturmanız gereken sözdizimi, sözdiziminin etrafında oluşturulacağı o görüntünün birden çok kopyasına sahip olmaya dayanır. Onları nasıl yapıyorsun? Kaç tane yapmalısın? Ne büyüklükte olmalılar?
Neyse ki, duyarlı görüntülerin etrafında ortaya çıkan bazı otomatik araçlar var. WordPress erken bir oyuncuydu. WordPress, kutunun dışında, yüklediğiniz görüntülerin birden çok sürümünü oluşturacak ve srcsetsözdizimi ile etiketlerin çıktısını alacaktır . Ama çok daha iyisini yapabilirsiniz. sizesTemanızın gerçekte yaptığı şeyle ve bu resimleri nasıl boyutlandırdığıyla eşleşen bir özellik sağlayabilirsiniz .
Ayrıca WordPress, yüklediğiniz görsellerin birden çok kopyasını oluşturmak için herhangi bir özel zeka kullanmaz. Ama olabilir. Duyarlı görüntü kesme noktası üreteci gibi bir araç, kaç farklı görüntü oluşturabileceğinizi bulmak için biraz zeka kullanır, böylece iş için mükemmel görüntüye yakın olmak ve yüzlerce veya binlerce kopya yapmak zorunda kalmamak arasında bir denge kurabilirsiniz. o. Bu aracın bir API'si var!
Daha da karmaşıklaşıyor.
Farklı tarayıcılar farklı görüntü formatlarını destekler. Örneğin, WebP. Doğru görüntü formatını doğru tarayıcıya sunarak elde edilecek performans tasarrufu vardır. Duyarlı görüntü sözdizimi bu konuda yardımcı olabilir, ancak sözdizimini karmaşıklaştırır. Birçok görüntü formatının da bir kalite anlayışı vardır. Bu çoklu kopyaları hangi kalitede kaydediyorsunuz?
Bu noktada Cloudinary'den bahsetmek için iyi bir zaman. Şu anda CSS-Püf Noktalarına entegre ettim ve bu şeylerin çoğunda yardımcı oluyor. Ödeme yapan bir Cloudinary müşterisi olduğumu ve bu ekran video kaydına sponsor olmadığımı belirtmeliyim, ancak Cloudinary, oldukça alakalı iki sponsorlu gönderi şeklinde CSS-Tricks'e sponsor oldu:
- Cloudinary ile WordPress'te Duyarlı Görseller, Bölüm 1
- Cloudinary ile WordPress'te Duyarlı Görseller, Bölüm 2
Özetle, işte şimdi tüm bunların CSS Hileleri üzerinde nasıl çalıştığı:
- Resimleri her zaman WordPress ile yaptığım gibi yüklüyorum.
srcsetWordPress ile üretilen bilgiler yerine , bu daha akıllı API tarafından üretilir.- Görüntü ayrıca Cloudinary'e yüklenir.
- WordPress, resimler için HTML'yi filtrelediğinde ve çıktısını aldığında, tüm bu iyi
srcset(ve özelsizes) veriler uygulanır. URL'ler Cloudinary URL'leri işaret ediyor. - Cloudinary URL'leri, görüntüyü talep eden belirli tarayıcı için şeylerin olabilecek en iyi şekilde olduğundan emin olmak için Cloudinary'un hem formatı hem de kaliteyi otomatik olarak (fantezi teknolojilerini kullanarak) ayarlama yeteneğinden yararlanır.
- Cloudinary'e yüklenmemiş eski görüntüler, başlangıçta hala tüm Cloudinary iyiliğinden yararlanıyor. O kadar akıllı
srcsetverilere sahip değiller, ancak yine de "getirme" URL'sini kullanıyorlar, yani otomatik biçimlendirme ve otomatik kaliteden faydalanabilirler (bu, muhtemelen performans iyileştirmesinin iyi bir parçasıdır).
Kısacası, performansa yardımcı olmak için sadece CSS-Püf Noktalarında duyarlı görüntüleri kullanmakla kalmıyorum, Cloudinary entegrasyonu bu oyunu ciddiye alıyor.
Bunun zor bir bağımlılık olmadığı için de mutluyum. Cloudinary eklentisi kapatılırsa, her şey normal WordPress duyarlı görüntülerine geri döner.