Joomla'da srcset ve sıkıştırma kullanarak duyarlı görsel tasarımı

Optimizasyon? Tamam. Lazy loading ? Tekrar tamam. Yine de Joomla! web siteniz hantal görünüyor ve mobil cihazlarda ve yavaş bağlantılarda yüklenmesi çok uzun sürüyor. Umutsuzluğa kapılmayın—işte bu noktada HTML yapısı devreye giriyor; daha doğrusu, resim kaynak setleri veya srcset özniteliği.

Belki de Joomla! blogunuzda yüksek kaliteli görseller kullanıyorsunuz ve bunlardan vazgeçmek istemiyorsunuz veya vazgeçemiyorsunuz. Bu endişelenecek bir durum değil. Joomla!'nın Droppics eklentisiyle, görseller için genel optimizasyon uygulamakla kalmayıp, kullanıcıların cihazlarına bağlı olarak farklı dosyalar sunabilirsiniz.

HTML srcset ile Duyarlı Görüntüler

src` özniteliğiyle tanımlandığını bilirsiniz . Resim kaynağı, tarayıcıların Joomla! kullanıcılarınıza göstermek için resimleri yüklediği konumdur. Belirli bir resim için tutarlı bir kaynak kullanmanın sorunu, ne kadar büyük olursa olsun aynı dosyanın her zaman yüklenecek olmasıdır.

Örneğin, bir makalenin en üstünde bir kahraman banner'ınız varsa, aynı resim tüm cihazlarda yüklenir. Tarayıcılar resmi indirir ve ardından boyutunu küçültür, özellikle mobil cihazlarda bazen önemli ölçüde. Modern tarayıcılarla, resimler için yalnızca bir kaynak değil, bir kaynak kümesi de tanımlayabilirsiniz—kaynak kümesi srcset .

Adından da anlaşılacağı gibi, kaynak kümesi tek bir kaynak yerine kaynakların bir listesidir. Her kaynak bir tarayıcı genişliğiyle ilişkilendirilir, böylece mobil cihazlar küçük resimler indirirken, Joomla! blogunuza masaüstü bilgisayarlardan erişen kullanıcılar tam çözünürlüklü resmi indirir. Başka bir deyişle, resim kaynak kümesi resimleri duyarlı resimlere dönüştürür.

Kaynak setlerini kullanmanın sonucu yalnızca daha hızlı yükleme süreleri değil, aynı zamanda SEO puanlarında da iyileşmedir. Tüm bunlar, kullanıcıların ihtiyaç duyduklarında kolayca erişebilecekleri, farklı çözünürlüklerde aynı görüntünün kopyalarına sahip olma pahasına gelir. srcset özniteliği ve kaynak setleriyle ilgili diğer her şey burada , ancak Joomla! blogunuzda bunları kullanmaya başlamak için sabırsızlanıyorsanız, okumaya devam edin.

Droppics ile Joomla!'da Ölçeklendirilmiş Görseller Sunmak

Droppics'i sadece bir Joomla! galeri yöneticisi eklentisi olarak biliyor olabilirsiniz, ancak arka planda farkında olmayabileceğiniz birçok şey oluyor. Örneğin: Droppics artık kullanıcılarınız için doğru görselleri yüklemek üzere kaynak kümesini kullanıyor. Bu özelliğin farkında değilseniz, muhtemelen onu kullanmıyorsunuzdur da.

Joomla! blogunuzda `srcset` özelliğini kullanmak için öncelikle Droppics yapılandırmanız üzerinden etkinleştirmeniz gerekir. Droppics seçeneklerindeki ana parametreler ilk seçenekler arasından duyarlı görselleri

Duyarlı görseller gibi , bu ayarı etkinleştirdiğinizde Droppics, sahip olduğunuz her Joomla! görseli için iki yeni küçük resim oluşturur. Bu küçük resimler, Joomla! blogunuza erişmek için kullanılan cihaza bağlı olarak görüntülenen duyarlı görsellerin kendisidir.

Bir gönderi oluşturup Droppics görseli eklediğinizde, eklenti otomatik olarak `srcset` sizin için ayarlar. Bize inanmıyor musunuz? Ön uçtaki HTML kodunu inceleyin ve farklı cihaz boyutları için birden fazla kaynak bulacaksınız.

Genel optimizasyon ve lazy loadingelbette iyi şeylerdir, ancak bazen bunların yapabileceği şeyler sınırlıdır. Bazı durumlarda, tekil kaynaklar yerine resim kaynak setleri sağlama gibi modern HTML tekniğini kullanmak, yavaş yükleme sürelerinin üstesinden gelmenin anahtarı olabilir.

Ama durun, hepsi bu değil. Bulmacanın hâlâ eksik bir parçası var.

Joomla!'da srcset resimlerini sıkıştırın

Aynı görüntünün birden fazla kopyasına sahip olmanın faydalı olup olmadığını merak ediyor olabilirsiniz. Belki sunucu alanından tasarruf etmek istiyorsunuz veya yeni görüntülerin birikmesinden korkuyorsunuz. Kaynak seti kullanıyor olmanız, onu sıkıştırma gibi diğer optimizasyon teknikleriyle birleştiremeyeceğiniz anlamına gelmez.

ImageRecycle Joomla!'da da mevcuttur ve Droppics ile sorunsuz bir şekilde entegre edilebilir. Hatta, Joomla! kaynak setinizdeki görseller oluşturulur oluşturulmaz otomatik olarak sıkıştırılacak şekilde bile yapılandırabilirsiniz. Kayıplı (en iyi tasarruf) sıkıştırma ile %80'e kadar, kayıpsız (orijinal) sıkıştırma ile ise %20'ye kadar tasarruf sağlayabilirsiniz. Aradaki fark hakkında daha fazla bilgiyi burada .

ImageRecycle eklentisinin Joomla! ayarlarındaki yapılandırmasına giderek, görselleri otomatik olarak sıkıştırmasını sağlayabilirsiniz gelişmiş sekmesine geçin ve " Kaydetme sırasında medyayı optimize et" ImageRecycle arayüzü üzerinden hangi görsellerin optimize edileceğini manuel olarak seçebilirsiniz

Yükleme süreleri çok yönlü bir sorundur. Dosya boyutlarını en aza indirirken aynı zamanda kaliteyi korumanız ve depolama alanından tasarruf etmeniz gerekir. Sihirli Droppics kaynak seti ve ImageRecyclesıkıştırma özelliği sayesinde, tüm bunlar mümkün olmakla kalmaz, aynı zamanda kolay ve otomatik bir süreç haline de gelir.