Ana İçeriğe Geç

Web Siteniz İçin Retina Hazır Görüntüler Nasıl Oluşturulur

Divi: Kullanılacak en kolay WordPress teması

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

daha fazla 901.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 çözünürlüklü bir dünyada yaşıyoruz. Çoğumuz günde sekiz saatten fazla farklı ekran türlerine bakarak geçirdiğimiz için görüntülerin kalitesi ve bu ekranlarda bulunan karakterler çok önemlidir.

Yalnızca birkaç yıldır mevcut olmalarına rağmen, Retina ekranlar geleceğin yoludur. Retina ekranlardaki yüksek piksel yoğunluğu, görüntüleri net ve canlı hale getirir. Güzel, net görüntüleri kim sevmez?

Retina hazır ekran

Retina ekranlarla uyumlu bir web sitesinin nasıl oluşturulacağını öğrenmek, herhangi bir web geliştiricisi için önemli bir varlıktır. Ne yazık ki, web sitenizi Retina-Ready ekranlarla kullanıcı dostu hale getirmenin tek ve mükemmel bir çözümü yoktur.

Bu nedenle, birisinin en eksiksiz çözümü bulmasını beklerken, web sitenizi hazır hale getirmek için mümkün olan en iyi seçeneklerden bazılarına baktık. Bu şekilde, tüm cihazlarda Retina'nın bir şekilde veya başka şekilde göründüğü zaman geldiğinde yoldan çıkmazsınız.

Ama başlamadan önce, bakmak için zaman ayırın Bir WordPress tema nasıl kurulurKaç eklentileri WordPress yüklemeniz gerekir.

O zaman işe başlayalım!

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

Temel bilgilerle başlayalım. Web siteniz için Retina Modu desteği almanın en kolay yolu, farklı çözünürlüklerde birden fazla görüntü varyasyonu oluşturun. Bu, her bir çözünürlük türü (yani 1x) için bu klibin yüksek çözünürlüklü bir versiyonunu (yani 2x) oluşturmanız gerektiği anlamına gelir.

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ı kullanarak her bir görüntü boyutunun "@ 2x" sürümlerini otomatik olarak oluşturabilir veya "@ 2x" görüntüleri bulabilir ve her cihaza karşılık gelen boyut.

Aynı görüntünün birden çok sürümünü oluşturmanın zaman alıcı bir süreç olabileceği doğrudur. Ne yazık ki, bu görüntüleri sizin için otomatik olarak oluşturan hızlı bir yöntem yoktur. Ancak, resimlerinizi hızlı bir şekilde onarmanıza izin veren birkaç Photoshop eklentisi var.

Eklentiler "gibi Yeniden Onat Retina ekranlar için tasarımlarınızı kolayca optimize etmenize izin veren bir dizi Photoshop eylemidir. Photoshop'un daha eski bir sürümünü kullanıyorsanız (CC öncesi) " Dört Temelde mevcut Photoshop Generator aracının yaptığı her şeyi, ancak Photoshop'un eski sürümleri için yapar.

Ölçeklenebilir Vektör Grafikleri (SVG)

Retina modu ile devam etmenin en kolay yolu, web sitenizde Ölçeklenebilir Vektör Grafikleri (SVG) 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çeklenebilir, bu da görüntülerin gerektiği kadar (veya çok az) gerilebilirken net ve net olabileceği anlamına gelir. Retina Modunu çok fazla çaba harcamadan uygulamanın hızlı ve kolay bir yolu olabilir.

Ayrıca Oku: Geleneksel PNG ve JPG yerine WebP görüntüleri nasıl sağlanır?

Retina vektörvsraster

Ancak, SVG'yi WordPress'te kullanmanın iki dezavantajı vardır. Birincisi, bir vektör formatı olduğu için SVG'nin tüm görseller için uygun olmamasıdır. Böylece logolar ve simgeler için SVG'yi 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.

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]

SVG'yi WordPress'te kullanmanın ikinci dezavantajı, güvenlik endişeleri nedeniyle WordPress ile resmi olarak uyumlu bir format olmamasıdır. Bir SVG dosyası esasen bir XML dosyası olduğundan, bu dosyayı açar XML dosya biçimiyle ilişkili tüm bilinen güvenlik açıklarızorlayıcı analiz, XML External Entity Attacks (XEE), XML Denial of Service Attack (XDoS) saldırıları vb.

Ancak, web siteniz için SVG desteğini etkinleştirmenin, SVG dosyalarınızı güvenli hale getirmenin bir yolu vardır.

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

Güvenli SVG web sitenizde SVG dosya desteğini güvenli bir şekilde etkinleştirmenize izin veren bir eklentidir. Bu eklenti, web sitenizi etkileyen olası XML güvenlik açıklarını önlemek için SVG dosyalarınızın temizlenmesini sağlar.

Tehlikeli ve potansiyel olarak web siteniz için zararlı olduğundan, MIME türünün SVG'den WordPress medya kitaplığına yüklemeye izin vermesine izin veren eklentilerden uzak durun. Dolayısıyla, SVG formatını WordPress'te kullanmak gerçekten cazipse, bunu güvenli bir şekilde yaptığınızdan ve gördüğünüz ilk SVG eklentisini indirmediğinizden emin olun.

Blogumuzu okuyarak blogunuza daha fazla dönüşüm sağlayın Blogunuza daha fazla ziyaretçi oluşturmak 15 içerik türleri

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

Retina Modu ile uyumlu bir web sitesi kurmaya çalışırken hayatınızı çok daha kolay hale getirebilecek birkaç komut dosyası ve eklenti vardır. Ancak, daha önce de belirtildiği gibi, mevcut eklentilerin ve komut dosyalarının çoğu, resimlerinizi yalnızca yüksek çözünürlüklü ekranlar için yüksek çözünürlüklü resimlerle değiştirin. Bir SVG gibi esnemezler: yine de farklı çözünürlüklerde birden çok görüntü oluşturmanız gerekir.

1 - retina.js

retina.js yüksek çözünürlüklü görüntüleri sunmak için en çok kullanılan komut dosyalarından biridir. Bu, Retina ekranlı cihazlara yüksek çözünürlüklü görüntülerin sunulmasını kolaylaştıran açık kaynaklı bir komut dosyasıdır.

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

Ayrıca bakınız: GIF, Emojiler veya Memes: WordPress web siteleri için iyi bir fikir mi?

2 - Yoğun

Retina.js ile benzer şekilde, Yoğun görüntüleri piksel oranı biçiminde sunmanın kolay bir yolunu sunan bir jQuery eklentisidir. Komut dosyası, gerektiğinde Retina modu uyumlu görüntüler olarak hizmet verecek "img" etiketlerini hedefleyen başlatmanın $ .fn.dense () 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.

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]

3 - WP Retina 2x

İkincisi, büyülü bir Retina görüntü oluşturucuya benzetilebilir.

WP Retina 2x Yüksek DPI cihazların gerektirdiği görüntü dosyalarını oluşturan ve bunları buna göre ziyaretçilerinize görüntüleyen bir eklentidir. Önceki iki komut dosyasından farklı olarak, bir 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üleri manuel olarak oluşturmaktan pek memnun değilseniz, bu seçenek tam size göre.

Bu eğitim için hepsi bu, umarım resimlerinizi Retina Ready görüntüsüne dönüştürmenize izin verir.

Ayrıca bazı premium WordPress eklentilerini keşfedin  

Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. Bir Fantezi WordPress Yazar Listesi

Adından da anlaşılacağı gibi eklenti Süslü WordPress Yazar Listesi web siteniz için yazarların listesini bir widget'ta görüntüler. Basit bir kullanıcı arayüzüne sahiptir. herhangi bir yazarın bilgilerini göster kenar çubuğunda. Tek yapmanız gereken yazar widget'ını kenar çubuğuna sürüklemek ve eklenti işi yapacak.

Süslü bir wordpress yazar listesi wordpress eklentisi

Başlıca özellikleri diğerleri arasında: olasılık blog yazarlarını görüntülemek yeni ziyaretçileri çekmek için eğlenceli bir şekilde, kenar çubuğunda veya sayfada bir yazar listesini görüntüleme yeteneği, bir yarışma başlat blogunuzun yazarları arasında, duyarlı bir düzen, kısa kod desteği ve çok daha fazlası.

İndir | gösteriWeb hosting

2. Kolay İçindekiler

Bu kullanıcı dostu WordPress eklentisi, yayınlarınıza, sayfalarınıza ve kişiselleştirilmiş yayın türlerinize bir içerik tablosu eklemenizi sağlar. Başlıca özellikleri:Kolay içindekiler tablosu wordpress eklenti tablosu matieres

içindekiler tablosunun otomatik yönetimi, etiket desteği Rankin Math eklenti desteği, Gutenberg gibi birkaç sayfa düzenleyiciyle uyumluluk, Divi, Elementor, WPBakeri Sayfa Oluşturucu ve diğerleri, yayınlarınızın hangi sayfalarda görüntülenmesini istediğinizi seçme imkanı, içindekiler tablosunun belirli sayfalara otomatik olarak eklenmesi ve diğerleri.

İçindekiler tablonuzu görüntülemek için ihtiyacınız olan her şeye sahip ücretsiz bir WordPress eklentisidir, bu yüzden bunu en iyi seçiminiz olarak seçmekten çekinmeyin.

Indir | gösteriWeb hosting

3. WooCommerce Gelişmiş Toplu Düzenle

Ürün kataloğunuzu düzenli olarak yayınlıyor musunuz? 100 ürününüz veya 10.000'iniz olsun, bu premium WordPress eklentisi IMHO "A must have" dır: (Bu akla gelen ilk kelimedir).Woocommerce gelişmiş toplu düzenleme wordpress eklentisi

Sadece birkaç dolar için, eklenti WooCommerce Gelişmiş toplu düzenleme hayatı kolaylaştıracak ve size zaman kazandıracak. Tereddüt yok, bomba.

Indir gösteri | Web hosting

Ç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. [Önerilen]

Önerilen Kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Sonuç

Buraya ! Bu eğitim için bu kadar, umarım web siteniz için Retina'ya Hazır görüntüler oluşturmanıza izin verir. Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın

Ancak, ayrıca kaynaklarımız, İnternet sitesi oluşturma projelerinizi gerçekleştirmek için daha fazla öğeye ihtiyacınız varsa, WordPress blog oluşturma.

Öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.

... 

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. 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