Ana İçeriğe Geç

WordPress siteniz için Retina Hazır görüntüleri oluşturma

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Yüksek tanımlı bir dünyada yaşıyoruz. Ve çoğumuz farklı ekranlara bakarak günde sekiz saatten fazla zaman harcadığımız için, bu ekranlardaki görüntülerin ve karakterlerin kalitesi çok önemlidir.

Sadece birkaç yıldır mevcut olsalar da, Retina ekranları geleceğin yoludur. Retina ekranlardaki yüksek piksel yoğunluğu görüntüleri net ve net hale getirir. Ve kim güzel ve keskin görüntüler sevmiyor?

Retina dostu bir Web sitesi oluşturmayı öğrenmek, herhangi bir web geliştiricisi için önemli bir varlıktır. Ne yazık ki, sitenizi Retina-Ready ekranlar ile uyumlu hale getirmek için mükemmel, ideal bir çözüm yoktur. Bu nedenle, birini en eksiksiz çözümü bulmayı beklerken, web sitenizi hazırlamak için en iyi seçeneklerden bazılarına göz attık. Bu şekilde, tüm cihazların bir formda veya başka şekilde görüntülenen retinaları olacak zaman geldiğinde kaybolmazsınız.

Birden fazla görüntü dosyası oluşturma

Temel bilgilerle başlayalım. Web siteniz için Retina modunu desteklemenin en kolay yolu, farklı çözünürlüklerde çoklu görüntü varyasyonları oluşturmaktır. Bu, her çözünürlük türü için (yani @ 1x), bu öğenin yüksek çözünürlüklü bir sürümünü oluşturmanız gerektiği anlamına gelir (yani 2x).

Temel olarak, aynı dosyanın birden çok sürümünü oluşturabilir ve WP Retina 2x gibi bir eklenti veya retina.js gibi bir komut dosyasını otomatik olarak her görüntü boyutunun "@ 2x" sürümünü oluşturmak veya "@2x" görüntülerini bulmak ve görüntülemek için kullanabilirsiniz. Her cihaza karşılık gelen

Aynı görüntünün birden çok sürümünü oluşturmanın zaman alan bir işlem olabileceği doğrudur. Ne yazık ki, bu görüntüleri sizin için otomatik olarak üreten hızlı bir yöntem yoktur. Ancak, resimlerinizi hızlı bir şekilde tamir etmenizi sağlayan çeşitli Photoshop eklentileri vardır.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Eklentiler "gibi Yeniden Onat , Retina ekranları için tasarımlarınızı kolayca optimize etmenizi sağlayan bir dizi Photoshop eylemi. Photoshop'un eski bir sürümünü kullanıyorsanız (CC öncesi), "gibi bir şey kullanabilirsiniz. Dört Bu, esasen mevcut Photoshop Generator aracının yaptığı, ancak Photoshop'un önceki sürümleri için geçerli olan şeydir.

Ölçeklenebilir Vektör Grafikleri (SVG)

Retina modunda ilerlemenin en kolay yolu sitenizdeki Ölçeklenebilir Vektör Grafikleri (SVG) formatını kullanmaktır. SVG, XML tabanlı bir vektör görüntü formatıdır. Adından da anlaşılacağı gibi, bir SVG görüntüsü ölçeklendirilebilir; bu, görüntülerin keskin ve net kalırken gerektiği kadar uzağa (veya çok az) uzatılabileceği anlamına gelir. Bu, Retina modunu çok çaba harcamadan uygulamanın hızlı ve kolay bir yolu olabilir.

Ancak, WordPress'te SVG kullanmanın iki dezavantajı vardır. Birincisi, bir vektör biçimi olduğu için SVG'nin tüm görüntüler için uygun olmamasıdır. Böylece SVG'yi logolar ve simgeler için kullanabilirsiniz, ancak fotoğraflar gibi dosyalar için kullanamazsınız (web siteniz için yüksek çözünürlüklü görüntüler kullanmak isterseniz bu biraz acı verici olacaktır.). Ancak basit simgeler, animasyonlar veya resimler kullanmak istiyorsanız, SVG dosyaları kesinlikle Retina uyumlu bir web sitesi için bir seçenek olabilir.

WordPress'te SVG kullanmanın ikinci dezavantajı, güvenlik sorunları nedeniyle WordPress ile resmen uyumlu bir format olmamasıdır. Bir SVG dosyası esasen bir XML dosyası olduğundan, bu dosyayı zorlayıcı analiz, harici XML varlık saldırıları (XEE), saldırı gibi XML dosya biçimiyle ilişkili tüm güvenlik açıklarına açar XML hizmet reddi (XDoS) saldırıları vb.

Bununla birlikte, WordPress siteniz için SVG desteğini etkinleştirmenin SVG dosyalarınızı güvenli hale getirecek bir yolu vardır.

WordPress'te SVG güvenli bir şekilde nasıl etkinleştirilir

Güvenli SVG, WordPress sitenizdeki SVG dosyaları için desteği güvenli bir şekilde etkinleştirmenizi sağlayan bir eklentidir. Bu eklenti, sitenizi etkileyen olası XML güvenlik açıklarını önlemek için SVG dosyalarınızın dezenfekte edilmesini sağlar.

MIME türünün SVG'nin WordPress Media Library'ye indirilmesine izin vermesine izin veren eklentilerden uzak durun, çünkü bunlar siteniz için tehlikeli ve potansiyel olarak tehlikelidir. Bu nedenle, WordPress'teki SVG formatını gerçekten kullanmak istiyorsanız, güvenli bir şekilde yaptığınızdan ve gördüğünüz ilk SVG eklentisini indirmediğinizden emin olun.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

WordPress'te Retina uyumluluğunu entegre eden bazı eklentiler

Retina uyumlu bir web sitesi kurmaya çalışırken hayatınızı çok daha kolaylaştırabilecek Retina uyumluluğu için çeşitli komut dosyaları ve eklentiler var. Ancak, daha önce de belirtildiği gibi, mevcut olan birçok eklenti ve komut dosyası, resimlerinizi yalnızca yüksek çözünürlüklü görüntüler için yüksek çözünürlüklü görüntülerle değiştirir. SVG gibi uzamazlar: farklı çözünürlüklerde birden fazla görüntü oluşturmanız gerekir.

retina.js

retina.js http://imulus.github.io/retinajs/, yüksek çözünürlüklü görüntüler sunmak için en çok kullanılan komut dosyalarından biridir. Bu, Retina ekranlı cihazlara yüksek çözünürlüklü görüntüleri kolayca sunabilen açık kaynaklı bir komut dosyasıdır.

Komut dosyası, o görüntünün sunucuda yüksek çözünürlüklü bir sürümü olup olmadığını görmek için sayfadaki her resmi kontrol eder. Yüksek çözünürlüklü bir değişken varsa, komut dosyası standart çözünürlüğü yüksek çözünürlüklü görüntüyle değiştirir. Bu, sitenizdeki Retina ekranları için görsel sunmanın en yaygın yollarından biridir.

Yoğun

Retina.js ile benzer şekilde, Yoğun Piksel oranı biçiminde görüntüleri sunmak için basit bir yol sunan bir jQuery eklentisidir. Betik, gerektiği gibi Retina uyumlu görüntüler sunacak "img" etiketlerini hedefleyen $ .fn.dense () başlatma yöntemini çağırır.

Bu nedenle, tüm görüntüleri tıpkı retina.js betiği gibi ilgili yüksek çözünürlüklü sürümüyle değiştirir.

WP Retina 2x

Sonuncusu, sihirli bir görüntü üreteci Retina'ya benzetilebilir.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Ücretsiz]

WP Retina 2x Yüksek DPI cihazların gerektirdiği görüntü dosyalarını yaratan ve ziyaretçilerinize uygun şekilde görüntüleyen bir eklentidir. Önceki iki komut dosyasının aksine, ilk görüntüden farklı çözünürlükte görüntüler oluşturur. Dolayısıyla, farklı çözünürlüklerde farklı görüntüler manuel olarak oluşturmaktan çok memnun değilseniz, bu seçenek tam size göre.

Hepsi bu ders için, umarım resimlerinizi retinaya hazır bir resme dönüştürmenize izin verir.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
7 hisseleri
hisse6
cıvıltı
Enregistrer1