2021’de WordPress’te duyarlı görüntüler: Bilmeniz Gerekiyor
WordPress, kod kullanmadan veya minimum kod kullanımı ile siteler tasarlamanıza izin veren popüler bir içerik yönetim sistemidir. Bunu, hazır tasarımlarla birlikte gelen temaları yükleyerek ve sitenize özellikler ekleyen eklentileri indirerek yapabilirsiniz. Çoğu WordPress teması, sitenizi kullanıcınızın cihazının ekran boyutuna ve özelliklerine göre ayarlayan varsayılan duyarlı bir tasarımla birlikte gelir. Ancak, bazen tema buggy olur, görüntüler doğru görüntülenmez ve varsayılan yanıt verme sorununu çözmeniz gerekir. Ayrıca, varsayılan temayı değiştirirseniz, duyarlı görüntülerle ilgili sorunlar yaşayabilirsiniz. WordPress’te duyarlı görüntülerin nasıl çalıştığını anlamak, sorunun kaynağını anlamanıza ve doğru iyileştirmeyi uygulamanıza yardımcı olabilir.
Duyarlı bir resim nedir? Duyarlı görüntüler, cihazlarının ekran boyutuna ve özelliklerine göre kullanıcılara sunulan görüntülerdir. Örneğin, yüksek çözünürlüklü görüntüler büyük HD monitörlere veya eski küçük cep telefonlarına gönderilen düşük çözünürlüklü görüntülere gönderilir. Duyarlı çizimin amacı, kullanıcı deneyiminden ödün vermeden bant genişliği kullanımının verimliliğini en üst düzeye çıkarmaktır. Birkaç boyut veya görüntü formatı yükleyerek duyarlı görüntüler ekleyebilirsiniz. Ardından, kullanıcı sitenizi ziyaret ettiğinde, kullanıcının ekran parametrelerine uygun görüntüleri görüntülemek için HTML, CSS ve JavaScript’in bir kombinasyonunu kullanabilirsiniz.
Genellikle, ihtiyacınız olan çeşitli boyutlar ve formatlar yapmak küçük bir manuel iş gerektirir. Bu, özellikle belirli bir ekran boyutu için daha uygun hale getirmek için görüntü kesimini değiştirmek istiyorsanız doğrudur. Çeşitli boyutlarınız depolandıktan sonra, gerektiğinde sunulmak için tüm resimlerinizi web sunucunuzda barındırmanız gerekir. Veya, boyutu değiştirmek ve görüntüleri dinamik olarak sunmak için içerik dağıtım ağları (CDN) veya Dijital Varlık Yönetimi Çözümleri (DAM) gibi araçları kullanabilirsiniz. Birçok resminiz veya birkaç siteniz varsa bu daha basit bir seçenek olabilir. Bu yöntemi kullanmak, sayfa komut dosyasına bir kütüphane içe aktarma gerektirir ve gerekli resimler için bir yangın çağrısı yapın. Neden duyarlı resimler kullanmanız gerekir. Sitenizde kendi ilgi alanlarınız ve kullanıcılarınız için duyarlı resimler kullanmanız gereken birçok neden var. . Aşağıdaki nedenlere ek olarak, Google’ın duyarlı görüntüleri olan sitelere arama tercihleri sağladığını unutmayın.
Bant genişliği – duyarlı görüntülerin verimli kullanımı, kullanıcılar için yalnızca en kullanışlı görüntülerin sunulmasını ve indirilmesini sağlar. Bu, gerçek kullanıcıların kullanabileceğinden daha büyük dosyalar göndermediğiniz için boşa harcanan bant genişliğini ortadan kaldırır. Ayrıca, özellikle sınırlı verileri olan hücresel kullanıcılar için sitenizi daha kullanıcı dostu hale getirir.
Daha hızlı yükleme süresi – Kullanıcının istemcisi tarafından indirilmesi gereken küçük veriler, sayfanızın yükleme süresi o kadar hızlı olur. Bu çok önemlidir çünkü birçok kullanıcı sayfayı yüklemek için birkaç saniyeden fazla beklemek istemez ve çok uzun yüklenirse siteyi terk eder. Kullanıcının deneyimi yükseltilir – sitenize resim eklediğinizde, bunu yaparsınız Kullanıcılara özel deneyimler sağlayın. Duyarlı görüntüler, kullanıcıların görüntüleri, köri veya yanlış yerleşim olmadan isteklerinize göre görebilmelerini sağlar. Bu, kullanıcılara daha keyifli bir deneyim sağlar ve sitenizde kalma olasılığını artırır.
Duyarlı bir görüntü WordPress’te nasıl çalışır? WordPress (WP) 4.4’te, medya kütüphanenize resim ekleyin, sizi otomatik olarak duyarlı görüntülere hazırlayın. Görüntü yüklerken WP, resimlerinizin beş kopyasını çeşitli boyutlarda otomatik olarak yapar. Bu boyut şunları içerir:
Orijinal yükleme boyutuyla dolu
Büyük – maksimum genişlik veya yükseklik 1024 piksel
Orta büyük – maksimum genişlik veya yükseklik 768px
Orta – geniş veya maksimum 300 piksel yükseklik
Mini Görüntü – 150 piksel geniş veya maksimum yükseklik
Bu boyutu da değiştirebilir veya manuel olarak ek boyutlar ekleyebilirsiniz. Bu boyutun nasıl kullanıldığını kontrol etmek için WP, SRCSET IMG etiket özniteliğini ve boyutunu içerir. Bu öznitelik, tarayıcıya hangi boyutun mevcut olduğu ve boyutun ne zaman seçilmesi gerektiği hakkında bilgi sağlar. SRCSET özniteliğinde, görüntü genişliğini ayarlarsınız. Tarayıcı daha sonra genişliği kontrol eder ve tarayıcının genişliğine veya daha düşük olan en büyük görüntüyü seçer. Boyut özniteliğinde, itibarsızlaştırılması gereken görüntünün boyutunu belirlersiniz. Bu, en verimli görüntüyü seçmenize ve ekranla orantılı olarak görüntülendiğinden emin olmanıza olanak tanır. Resim etiketinizdeki görünüm örnekleri aşağıda görülebilir:
Duyarlı bir resim nedir? Duyarlı görüntüler, cihazlarının ekran boyutuna ve özelliklerine göre kullanıcılara sunulan görüntülerdir. Örneğin, yüksek çözünürlüklü görüntüler büyük HD monitörlere veya eski küçük cep telefonlarına gönderilen düşük çözünürlüklü görüntülere gönderilir. Duyarlı çizimin amacı, kullanıcı deneyiminden ödün vermeden bant genişliği kullanımının verimliliğini en üst düzeye çıkarmaktır. Birkaç boyut veya görüntü formatı yükleyerek duyarlı görüntüler ekleyebilirsiniz. Ardından, kullanıcı sitenizi ziyaret ettiğinde, kullanıcının ekran parametrelerine uygun görüntüleri görüntülemek için HTML, CSS ve JavaScript’in bir kombinasyonunu kullanabilirsiniz.
Genellikle, ihtiyacınız olan çeşitli boyutlar ve formatlar yapmak küçük bir manuel iş gerektirir. Bu, özellikle belirli bir ekran boyutu için daha uygun hale getirmek için görüntü kesimini değiştirmek istiyorsanız doğrudur. Çeşitli boyutlarınız depolandıktan sonra, gerektiğinde sunulmak için tüm resimlerinizi web sunucunuzda barındırmanız gerekir. Veya, boyutu değiştirmek ve görüntüleri dinamik olarak sunmak için içerik dağıtım ağları (CDN) veya Dijital Varlık Yönetimi Çözümleri (DAM) gibi araçları kullanabilirsiniz. Birçok resminiz veya birkaç siteniz varsa bu daha basit bir seçenek olabilir. Bu yöntemi kullanmak, sayfa komut dosyasına bir kütüphane içe aktarma gerektirir ve gerekli resimler için bir yangın çağrısı yapın. Neden duyarlı resimler kullanmanız gerekir. Sitenizde kendi ilgi alanlarınız ve kullanıcılarınız için duyarlı resimler kullanmanız gereken birçok neden var. . Aşağıdaki nedenlere ek olarak, Google’ın duyarlı görüntüleri olan sitelere arama tercihleri sağladığını unutmayın.
Bant genişliği – duyarlı görüntülerin verimli kullanımı, kullanıcılar için yalnızca en kullanışlı görüntülerin sunulmasını ve indirilmesini sağlar. Bu, gerçek kullanıcıların kullanabileceğinden daha büyük dosyalar göndermediğiniz için boşa harcanan bant genişliğini ortadan kaldırır. Ayrıca, özellikle sınırlı verileri olan hücresel kullanıcılar için sitenizi daha kullanıcı dostu hale getirir.
Daha hızlı yükleme süresi – Kullanıcının istemcisi tarafından indirilmesi gereken küçük veriler, sayfanızın yükleme süresi o kadar hızlı olur. Bu çok önemlidir çünkü birçok kullanıcı sayfayı yüklemek için birkaç saniyeden fazla beklemek istemez ve çok uzun yüklenirse siteyi terk eder. Kullanıcının deneyimi yükseltilir – sitenize resim eklediğinizde, bunu yaparsınız Kullanıcılara özel deneyimler sağlayın. Duyarlı görüntüler, kullanıcıların görüntüleri, köri veya yanlış yerleşim olmadan isteklerinize göre görebilmelerini sağlar. Bu, kullanıcılara daha keyifli bir deneyim sağlar ve sitenizde kalma olasılığını artırır.
Duyarlı bir görüntü WordPress’te nasıl çalışır? WordPress (WP) 4.4’te, medya kütüphanenize resim ekleyin, sizi otomatik olarak duyarlı görüntülere hazırlayın. Görüntü yüklerken WP, resimlerinizin beş kopyasını çeşitli boyutlarda otomatik olarak yapar. Bu boyut şunları içerir:
Orijinal yükleme boyutuyla dolu
Büyük – maksimum genişlik veya yükseklik 1024 piksel
Orta büyük – maksimum genişlik veya yükseklik 768px
Orta – geniş veya maksimum 300 piksel yükseklik
Mini Görüntü – 150 piksel geniş veya maksimum yükseklik
Bu boyutu da değiştirebilir veya manuel olarak ek boyutlar ekleyebilirsiniz. Bu boyutun nasıl kullanıldığını kontrol etmek için WP, SRCSET IMG etiket özniteliğini ve boyutunu içerir. Bu öznitelik, tarayıcıya hangi boyutun mevcut olduğu ve boyutun ne zaman seçilmesi gerektiği hakkında bilgi sağlar. SRCSET özniteliğinde, görüntü genişliğini ayarlarsınız. Tarayıcı daha sonra genişliği kontrol eder ve tarayıcının genişliğine veya daha düşük olan en büyük görüntüyü seçer. Boyut özniteliğinde, itibarsızlaştırılması gereken görüntünün boyutunu belirlersiniz. Bu, en verimli görüntüyü seçmenize ve ekranla orantılı olarak görüntülendiğinden emin olmanıza olanak tanır. Resim etiketinizdeki görünüm örnekleri aşağıda görülebilir:
Duyarlı görüntüler hakkında bilmeniz gereken şeyler duyarlı görüntülerle çalışırken, hatırlamanız gereken birkaç yön vardır. Bu düşünce, resminizin beklediğiniz gibi görüntülenmesini ve kullanıcı olarak en iyi deneyimi elde etmenizi sağlayabilir. “Boyut”, boyut özniteliğini belirlerken yakalama ile isteğe bağlıdır, özniteliğin oluşturulan görüntünün gerekli görüntüsünü ve genişliğini belirlediğini anlamanız gerekir. Bu, görüntü arasındaki genişliğe uymaya dikkat etmeniz gerektiği anlamına gelir. Görüntünün genişliği SRC’ler arasında farklıysa, oluşturulduğunda kavisli bir görüntü elde edebilirsiniz. Buna ek olarak, SRCSET’i boyut içermeden kullanıyorsanız, istemcinin tarayıcının varsayılan 100VW genişliğini kullanacağını fark etmelisiniz.
Görüntü oluşturma genellikle tarayıcıya göre değişir, tarayıcı görüntünün boyutunu görüntüleyerek görüntünün boyutunu oluşturur. Ancak, farklı tarayıcılar, kullanıcı deneyiminizin tutarlı olmayabilmesi için görüntüleri seçmek için farklı yöntemler kullanır. Örneğin, bazı tarayıcılar boyutun uygun olup olmadığına bakılmaksızın görüntünün önbellek versiyonuna öncelik verir. Değişkenlik ve taneli kontrol eksikliği, tasarım kararları için SRCSET’e bağlı olmamanız gerektiği anlamına gelir. Örneğin, belirli cihazlara daha fazla uygun olarak farklı oranlara sahip farklı görüntüler veya görüntüler sunmayı düşünmelisiniz. Bunu başarmak için, öğesini kullanabilirsiniz. “SRCSET”, başkaları tarafından geliştirilen temayı kullanırsanız varsayılan değildir, SRCSET’in varsayılan olarak uygulanmadığını unutmayın. Birçok tema, özellikle yaşlı olanlar bu özniteliği veya boyutu içermez. Bu özniteliği kullanmak istiyorsanız, kullandığınız temayı ayarlamanız veya bu özellikleri uygulayan diğer temaları bulmanız gerekir. Temanızın SRCSET kullanıp kullanmadığından ve tema belgesinde belirtilmediğinden emin değilseniz, manuel olarak kontrol edebilirsiniz. Bunu yapmanın en kolay yolu, sayfalarınızdan birini masaüstünüzde veya dizüstü bilgisayarınızda görüntülerle çekmektir. Tarayıcınıza ve işletim sisteminize bağlı olarak, görüntüyü sağ tıklayabilmeniz ve incelemeyi seçebilmeniz gerekir. Bu, öğelerini görmenizi ve SRCSET’in uygulanıp uygulanmadığını görmenizi sağlar.
Retina görüntüleri Duyarlı tasarım hakkında düşünürken, retina görüntülerini dikkate almak da önemlidir. Mevcut ekranların çoğu retina için hazır görüntüler gerektirir, bu nedenle bu sorunun üstesinden gelmek, görüntünüzün herhangi bir cihazda güzel ve keskin görünmesini sağlar. Bunu mükemmel görüntüler (WP retina 2x) eklentisini kullanarak ayarlayabilirsiniz. Bu eklenti, retina aygıtı (veya yüksek dpi) tarafından ihtiyaç duyulan görüntü dosyasını yapar ve ekranda görüntüler. Medya kitaplığınıza yeni resimler yüklediğiniz anda Retina görüntüleri sizin için otomatik olarak oluşturulacaktır. Mükemmel görüntüler (WP Retina 2x) eklentisi, yukarıda açıklanan yeni WordPress duyarlı görüntünün desteği ve SRC setine bir retina görüntüsü ekleyerek mükemmel bir şekilde çalışıyor. Ayrıca WordPress’in ne yaptığını kontrol eder (örneğin, artık ihtiyaç duyulmayan görüntünün boyutunu kaldırma seçeneği sunar).
Görüntü oluşturma genellikle tarayıcıya göre değişir, tarayıcı görüntünün boyutunu görüntüleyerek görüntünün boyutunu oluşturur. Ancak, farklı tarayıcılar, kullanıcı deneyiminizin tutarlı olmayabilmesi için görüntüleri seçmek için farklı yöntemler kullanır. Örneğin, bazı tarayıcılar boyutun uygun olup olmadığına bakılmaksızın görüntünün önbellek versiyonuna öncelik verir. Değişkenlik ve taneli kontrol eksikliği, tasarım kararları için SRCSET’e bağlı olmamanız gerektiği anlamına gelir. Örneğin, belirli cihazlara daha fazla uygun olarak farklı oranlara sahip farklı görüntüler veya görüntüler sunmayı düşünmelisiniz. Bunu başarmak için, öğesini kullanabilirsiniz. “SRCSET”, başkaları tarafından geliştirilen temayı kullanırsanız varsayılan değildir, SRCSET’in varsayılan olarak uygulanmadığını unutmayın. Birçok tema, özellikle yaşlı olanlar bu özniteliği veya boyutu içermez. Bu özniteliği kullanmak istiyorsanız, kullandığınız temayı ayarlamanız veya bu özellikleri uygulayan diğer temaları bulmanız gerekir. Temanızın SRCSET kullanıp kullanmadığından ve tema belgesinde belirtilmediğinden emin değilseniz, manuel olarak kontrol edebilirsiniz. Bunu yapmanın en kolay yolu, sayfalarınızdan birini masaüstünüzde veya dizüstü bilgisayarınızda görüntülerle çekmektir. Tarayıcınıza ve işletim sisteminize bağlı olarak, görüntüyü sağ tıklayabilmeniz ve incelemeyi seçebilmeniz gerekir. Bu, öğelerini görmenizi ve SRCSET’in uygulanıp uygulanmadığını görmenizi sağlar.
Retina görüntüleri Duyarlı tasarım hakkında düşünürken, retina görüntülerini dikkate almak da önemlidir. Mevcut ekranların çoğu retina için hazır görüntüler gerektirir, bu nedenle bu sorunun üstesinden gelmek, görüntünüzün herhangi bir cihazda güzel ve keskin görünmesini sağlar. Bunu mükemmel görüntüler (WP retina 2x) eklentisini kullanarak ayarlayabilirsiniz. Bu eklenti, retina aygıtı (veya yüksek dpi) tarafından ihtiyaç duyulan görüntü dosyasını yapar ve ekranda görüntüler. Medya kitaplığınıza yeni resimler yüklediğiniz anda Retina görüntüleri sizin için otomatik olarak oluşturulacaktır. Mükemmel görüntüler (WP Retina 2x) eklentisi, yukarıda açıklanan yeni WordPress duyarlı görüntünün desteği ve SRC setine bir retina görüntüsü ekleyerek mükemmel bir şekilde çalışıyor. Ayrıca WordPress’in ne yaptığını kontrol eder (örneğin, artık ihtiyaç duyulmayan görüntünün boyutunu kaldırma seçeneği sunar).
Bu eklenti ücretsiz ve premium sürümlerde gelir. Sonuç Duyarlı görüntüler olumlu kullanıcı deneyimleri oluşturmak için çok önemlidir. Görüntü duyarlı olduğunda, kullanıcılar sorun yaşamadan her türlü cihazdaki dosyaları görüntüleyebilir. Yükleme süresini artırmak ve bant genişliğini verimli bir şekilde kullanmak için duyarlı görüntüler de kullanabilirsiniz. Çoğu WordPress teması bir dizi duyarlı görüntü yapılandırması ile birlikte gelir, ancak genellikle değişiklik yapabilirsiniz. Varsayılan ayarlarda herhangi bir değişiklik yapmadan önce, sonuçları doğru bir şekilde anladığınızdan emin olmalısınız. Veri kaybetmekten kaçınmak için, önce sitenizin bir yedeklemesini yaptığınızdan ve orijinal dosya yerine alt temayı değiştirdiğinizden emin olun.
